Welcome to Visit!!
Let's get it
웹 개발자로의 새로운 여정을 시작해 보겠습니다.
여러분들의 방문을
진심으로 환영합니다
웹 개발자로서, 다양한 개발 지식을 다루는
블로그를 만들어보겠습니다. 😃
참고하는 웹사이트 목록 💻
필자가 자주 참고하는 웹사이트를 둘러보세요.
CSS 스타일링 🎨
웹 개발을 할 때 사용하는 CSS 사용방법을 확인해보세요.
목차 CSS는 HTML 태그를 꾸미거나 효과를 넣어 주는 등, 디자인 요소를 추가할 때 사용하는 전처리 과정을 의미한다. 프로젝트의 규모가 커지고 반응형 웹을 구현할 때 CSS는 가독성이 떨어지고 유지보수가 어렵다는 단점이 있다. 하지만 SCSS는 CSS와 달리 코드의 재활용성을 높이고, 가독성을 올려 주기 때문에 유용하다. 특히 변수를 활용하여 코드를 작성할 수 있도록 지원하기 때문에 코드의 가독성을 높여주고 반응형 웹 작성을 더 수월하게 만들 수 있다. 그럼 SCSS를 이용하여 반응형 웹을 개발하는 방법을 알아보자. SCSS를 이용한 반응형 웹 개발. SCSS에서 반응형 사이즈 사용법. 우선 SCSS에서 변수를 설정하고 @mixin을 사용하여 밑과 같이 작성한다. SCSS $pc2000: 2000px..
목차 바로 전 포스팅에서 텍스트에 그라데이션을 적용하는 법에 대해 알아보았다. 그렇다면 이번에는 border에 그라데이션을 적용하는 법에 대해서 포스팅해보겠다. 예제 파일 작성하기 1. Index.html 수정 index.html의 body 부분 안에 밑의 코드를 작성한다. HTML 2. Style.css 작성. 우선 HTML에 CSS를 다음과 같이 추가하여 박스들을 정 중앙에 위치시킨다. CSS html { display: flex; align-items: center; justify-content: center; height: 100vh; } 이후 .box1 부분에 다음과 같이 CSS를 작성한다. CSS .box1 { width: 200px; height: 200px; border: 5px solid..
목차 웹 개발을 하다보면, 디자인적인 측면에서 말줄임(...)을 사용해야 하는 경우가 많다. 왜냐하면 이렇게 말줄임표를 사용해야 디자인이 더 깔끔해 보이기 때문이다. 말줄임 CSS 문법은 다음과 같다. CSS overflow: hidden; : 박스에서 넘쳐난 텍스트 숨기기 white-space: nowrap; : 줄바꿈이 없어짐 text-overflow: ellipsis; : ... 말줄임 효과 -webkit-line-clamp : '글자'; : '글자'의 최대 라인수를 결정 -webkit-box-orient: vertical; : 영역 박스의 내의 정렬을 수직으로 만든다. word-break: break-all; : 어절이 유지되지 않고 끊어져서 줄바꿈 됨 1. 한줄만 나타내기 결과) Lorem, i..
목차 웹 개발을 하다보면 가끔식 사용하는 텍스트에 그라데이션 효과를 넣는 것이 헷갈릴 때가 있어서 지금 작성해보고자 한다. 우선 텍스트에 적용되는 그라디언트 속성을 다음과 같다. CSS # 이 속성은 그라데이션을 넣어주는 속성이다. background: linear-gradient(방향, #색상 코드, #색상 코드, #색상 코드,... , #색상 코드); # 이 속성은 요소의 배경이 어디까지 색을 채울지 정하는 속성이다. -webkit-background-clip: text; # 텍스트 문자의 채우기 색을 지정하는 속성으로, 이 속성이 지정되지 않는다면 color의 색상을 따라간다. -webkit-text-fill-color: transparent; 그럼, 이 내용을 바탕으로 텍스트에 그라데이션을 적용하..
Let's learn about
'전체 글'에 대해 공부한 내용을 정리한 페이지입니다.
Guest Book
블로그를 방문해주셔서 감사드립니다.
자유롭게 댓글 달아주세요 ~
Tag Page
원하시는 태그를 클릭해보세요.
전체 글
공부한 내용을 정리한 페이지입니다.
Light Dev
Light Dev에서 공부한 내용을 정리합니다.
목차 시작하며 자주 쓰는 git 명령어를 git commands cheat sheet를 참고하여 정리해보자. 자세한 내용은 git-scm 공식 사이트가 더 정리가 잘 되어있다. Git git-scm.com git으로 새로운 프로젝트를 시작하려고 하면 프로젝트 생성하기로 이동하면 된다. 또는 필요한 명령어나 자주 쓰는 명령어만 찾아서 프로젝트에 사용하면 된다. 자주 쓰는 Git Command Shell # 현재 directory 의 모든 파일을 Staging Area 로 이동 git add . # file 들의 tracking 상태 보기 git status # Staging 의 파일들 commit 하기 git commit -m "messsage" # 저장소에 commit 반영하기 git push # 저장소..
목차 Babel 이란? Babel이란 최신 ES6, ES7 버전의 JavaScript 코드를, ES5버전의 코드로 바꾸어주는 Node.js 패키지를 의미한다. Babel을 사용해야 하는 이유 계속해서 변화하는 JavaScript의 최신 코드를 이해하지 못하는 웹 브라우저의 문제를 해결하기 위하여, 또는 컴퓨터만이 아니라, 스마트폰에서 사용하는 브라우저에서도 자바스크립트 코드를 작동되도록 만들어주기 때문에 사용해야 한다. Babel 작동방식 Babel은 여러개의 플러그인이, 자신이 이해할 수 있는 ESNext 문법만 골라, 컴파일하는 방식으로 작동된다. ESNext 구문을 Babel 플러그인으로 보낸다. 여러개의 Babel 플러그인이 파이프라인 형태로 차례대로 실행한다. Babel 플러그인이 이해할 수 있..
목차 package.json이란? package.json이란 현재 프로젝트에 관한 정보와 패키지 매니저(npm, yarn)을 통해 설치한 모듈들의 의존성을 관리하는 파일이다. JavaScript { "name": "tutorial", "version": "1.0.0", "description": "", "main": "server.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } 이름처럼 JSON 포맷으로 이루어져 있다. 생성방법 package.json을 생성하려면 다음 명령어를 통해 생성할 수 있다. Shell npm init // 프로젝트명, 설명 등 작성할 ..
목차 git add * / git add . 차이점 둘다 현재 디렉토리에 있는 모든 파일을 스테이징 하는 것이지만, 사소한 차이가 있다. git add * 는 .gitignore 파일에 있는 파일들도 stage로 올리는 것 git add . 는 ..gitignore 파일에 있는 파일명들은 제외하고 stage에 올리는 것 Tip 따라서 .gitignore를 사용한다면 git add .를 사용하면 된다. 참고 문헌 1[GIT] ⚡️ git add * 🆚 git add . 차이점 2[Git/GitHub] git add * VS git add . 비교와 .gitignore로 파일 무시하기
목차 git push -u 파일을 깃허브에 반영하기 위해 git push 를 이용할 때 git push -u "원격저장소" "현재 브랜치명"와 같이 -u 옵션을 쓸때가 있다. Shell $ git push -u origin masterCopy -u 옵션을 적어주면 앞으로, master 라는 현재 브랜치를 자동으로 origin 이라는 원격저장소의 master 브랜치로 연결할 수 있다. 간단히 git push 만 입력하여 반영하거나 git pull 을 입력할 때 origin이라는 원격저장소의 master 브랜치를 로컬 저장소의 master 브랜치로 merge 할수 있게 해주겠다는 의미이다. 따라서 이제 간단히 아래와 같은 식으로 원격저장소와 로컬 저장소를 자동 연결하여 사용할수 있다. Shell $ git ..
목차 Bcrypt란? hash 함수를 이용해 정보를 암호화 할 수 있도록 해주는 Node.js 패키지가 바로 Bcrypt이다. Bcrypt의 필요성 MD5 방식의 해시함수는 빠르기는 하지만 보안이 약하기 때문에 해킹이 취약하다. SHA 방식의 해시함수는 안전하기는 하나, 암호화하는데 시간이 너무 오래 걸린다. 공유 메시지 ( salt )를 입력값에 추가하는 방식은 무차별 대입 공격을 막아주지는 못한다. bcrypt는 사용자가 보안도와 속도를 유동적으로 정할 수 있다. 해시 함수 별 성능 비교 해시 함수 MD5 bcrypt 느림 보안 약함 중간 느림 속도 빠름 중간 느림 Bcrypt 사용법 Bcrypt 설치하기 Shell npm i bcrypt 비밀번호 만들고 암호화 하기 JavaScript //index..
목차 개요 일반적으로 널리 사용되는 워드프로세서는 마이크로소프트 오피스의 워드(Word)이다. 하지만 이런 워드 파일을 복사 (Ctrl + C) 해서 텍스트(일반적인 메모장) 문서에 붙여넣기 (Ctrl + V) 하게 되면 기존에 적용된 서식 등이 모두 사라지게 되는 문제가 있다. 하지만 이 마크다운을 사용하여 작성을 하게 되면 일반적인 텍스트 기호를 사용하여 서식 등이 적용되기 때문에 플랫폼간 가공이 매우 용이하다는 장점이 있으며, .md 확장자로 저장하면 보관도 매우 쉬운 편이다. 마크다운 장점 단순하고 간결한 편이다. 에디터 없이 어디서든 작성이 가능하다. 텍스트 기반으로 사용할 수 있다. 용량이 작고 백업이 간편 합니다. 버전 관리 시스템(Git, svn 등)에서 사용이 용이 합니다. 마크다운으로 ..
목차 마크다운 Emoji 이모티콘 마크다운 문서에서 이모티콘을 이모지를 이용하여 표현할 수 있다. 깃허브 문서에도 문제없이 사용이 가능하다. 마크다운 문법에 : : 사이에 이모티콘명을 넣으면 자동으로 인식된다. 마크다운 이모지 종류 표 밑의 작성된 표들을 참고하거나, 아래 사이트에서 이모지를 참고해 사용해도 된다. Emoji Cheat Sheet Emoji codes used by GitHub, Basecamp, Slack and other services. Searchable. With emoji meanings. www.webfx.com People :bowtie: 😄 :smile: 😆 :laughing: 😊 :blush: 😃 :smiley: ☺️ :relaxed: 😏 :smirk: 😍 :heart_..
© Copyright 2023 Light