![프론트엔드 개발](https://blog.kakaocdn.net/dn/0pcLH/btrY1mJJfQK/Cb6iDKSeCrNA4JIckIVwKK/img.jpg)
프론트엔드 개발
![gulp 모듈 - Node.js기반 프로세스 자동화 도구](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FNAkMY%2Fbtrf3ukw0dC%2F58mUybuuHeCatfWi6ROvC1%2Fimg.png)
gulp 모듈 - Node.js기반 프로세스 자동화 도구
gulp 설명 : gulp는 Node.js 기반의 프로세스 자동화 도구이다.A 파일을 변경할 때마다 B파일을 엎어쳐야하는 등의 지루하고 반복적인 작업을 자동화 시킬 수 있다. 우리는 gulp를 이용하여 scss 파일을 변경 시 css가 자동으로 엎어쳐지게 만들 것이다. 설치 방법 : npm 또는 yarn을 통해 패키지를 설치해주면 된다. (게시물 하단 참고) 사용 방법 : gulp에서 수행하는 작업단위(Task)를 gulpfile.js에 작성한다. API : series() : 순차적으로 Task를 수행 parallel() : 동시에 최대한 많은 Task를 수행 src() : 주어진 경로의 파일을 Readable Node.js Stream 생성 dest() : 주어진 경로의 파일에 Writeable No..
![Javascript - padStart, padEnd](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbhiWSE%2FbtrfZqCx9QU%2FDdCr1ltX1f0xT1rKBEedlK%2Fimg.png)
Javascript - padStart, padEnd
padStart 문자열의 길이가 최대길이가 되도록 "채울값"을 채운다. "문자열".padStart(최대길이, "채울값"); 시:분:초를 00:00:00 과 같은 포맷으로 숫자를 출력하고 싶을때 1초를 01초로 포맷으로 바꾸려는 상황에 사용될 수 있다. "1".padStart(2, "0"); "1"은 길이가 1이므로 2가 될때까지 "0"을 채운다. 그래서 01이 된다. padEnd는 뒤에 채우는 것이다. 똑같다.
![깃허브 페이지 - Publishing on Github Pages](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fuopfh%2FbtrfREJoB41%2FNsDKdk8IQfC24hmIaVkAKK%2Fimg.png)
깃허브 페이지 - Publishing on Github Pages
깃허브 사이트에서 Static Website (백앤드 빼고 프론트앤드 부분 HTML/CSS/JS로만 이루어진 페이지) 무료 호스팅을 해준다 !! 즉, 내 페이지를 퍼블리싱할 수 있다. wow github page 생성 방법 (github Desktop 기준) public 레포지토리 를 생성한다. 레포지토리/index.html 파일을 생성한다. 이 파일이 기본적으로 보여지는 페이지이다. 만약 index.html 파일이 없으면 README.md를 기본으로 보여진다. 레포지토리에서 gh-pages 라는 이름의 브랜치를 만든다. Publish branch를 누른다. (누르면 아래와 같이 바뀜) 해당 Github Repository 사이트에 접속한다. (View on Github 를 누르면 바로 접속 가능) Gi..
![CSS : box-sizing: border-box;](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbwa3lB%2FbtrfFGr74XJ%2FpQUsY0hmTx0sFwNNckrZFK%2Fimg.png)
CSS : box-sizing: border-box;
box-sizing: border-box; 200px 박스에 50px Padding 값을 준다고 하였을때 최종적으로 50+200 = 250px 의 박스가 생성된다. 200px의 박스를 50px만큼 밀어버린 것이다. 그런데 우리가 원한 것은 250px 박스가 아니라 200px의 박스다. 이럴때 사용하는것이 box-sizing이다. box-sizing: border-box;
![CSS : reset CSS (브라우저 기본 스타일 제거)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcpOm88%2FbtrftoNiLAm%2FPSSvFWHwHYm2y2eSVFkbX1%2Fimg.png)
CSS : reset CSS (브라우저 기본 스타일 제거)
reset CSS (브라우저 기본 스타일 제거) 기본적으로 적용되는 브라우저 기본 스타일을 제거하고 싶을때 사용 Reset CSS 파일을 만들어줘야 한다. 아래 사이트에서 코드 복사하거나 내가 올려둔 코드를 복사하여 css 파일에 import 하면 적용된다. @import "reset.css"; CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was ..
![CSS Hack : 정확히 중앙에 위치 시키기 (space-between 대신)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F0YYK7%2FbtrfscTPYmR%2FWI3dAlgfkUnRwSfwaB8SDK%2Fimg.png)
CSS Hack : 정확히 중앙에 위치 시키기 (space-between 대신)
CSS Hack ABC가 있을때 A를 화면 좌측끝 B를 화면 중앙 C를 화면 우측끝에 위치시키고 싶을때 flexbox의 justify-content: space-between 를 보통 사용한다. 그러나 B가 화면의 정중앙에 들어가지 않을 경우가 있음. 이럴 때 CSS Hack 사용한다. 레시피 같이 어디든 쓸 수 있다. 이상하지만 작동함. 상위 박스 .status-bar justify-content: center; 내부 박스들 .status-bar__column width: 33%; 중앙에 위치할 박스 .status-bar__column:nth-child(2) display: flex; justify-content: center; 오른쪽에 정렬할 박스 .status-bar__column:last-chil..
![VSC(Visual Studio Code) HTML 단축키 모음](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbyamKV%2FbtrfBsA40z1%2FAL4IjCF53H7ulHF3H7ENm0%2Fimg.png)
VSC(Visual Studio Code) HTML 단축키 모음
※ 반드시 HTML로 되어있어야 작동함. (가끔 Django HTML로 되어있을때 있음) ! 입력 후 Enter link:css 입력 후 Enter nav>ul>li*4 입력 후 Enter nav>ul>li*4>a 입력 후 Enter 요소안에서 .클래스이름*2 입력 후 Enter .user-component__column*2
![HTML/CSS 유용한 사이트 / 크롬 확장도구 모음](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FQMg7U%2Fbtrfs5l7zTv%2FH1HJgWYT0htaDq3DXh9ir0%2Fimg.png)
HTML/CSS 유용한 사이트 / 크롬 확장도구 모음
사이트 이름 용도 사이트 주소 mdn 웹 개발 메뉴얼 https://developer.mozilla.org/ko/ validator.w3.org HTML 문법 검증기 https://validator.w3.org/#validate_by_input css-tricks CSS 가이드 https://css-tricks.com/guides/ material.io CSS 색상 고르기 https://material.io/resources/color/#!/?view.left=0&view.right=0 herocoin CSS SVG Icon 이미지 (Free) https://heroicons.com/ fontawesome CSS Icon 이미지 (Free) https://fontawesome.com/v5.15/icons..
![BEM (Blocks, Elements and Modifier)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb2V7En%2FbtrfBsHPO3l%2FK4X7JhCH18z6j71mmXQ7xK%2Fimg.png)
BEM (Blocks, Elements and Modifier)
block component .btn {} block 안에 속한 자식 block .btn__price {} block 자체의 스타일을 변경시키는 Modifier .btn--orange {} .btn--big {} BEM을 사용하면 HTML 요소에 어떤 스타일들이 적용되었는지 쉽게 알 수 있다. 클래스가 서로 어떤 관계를 가지는지 쉽게 알 수 있다.
![CSS - inline, block, inline-block](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FZn4qp%2FbtrfqiFBhVE%2FvqUrqAqaY0MIkTRUsByQMk%2Fimg.png)
CSS - inline, block, inline-block
inline, block block : 한 줄을 다 차지하는 box margin : box의 border(경계)의 바깥에 있는 공간 padding: box의 border(경계)의 안쪽에 있는 공간 inline : 한 줄에 여러 요소가 올 수 있음. 높이/너비 존재하지 않음. margin은 좌/우만 가질 수 있음 padding은 상하좌우 다 가질 수 있음. inline-block : flex와 유사하게 block 요소들이 inline 성질을 가짐. 그러나 정해진 형식이 없으며 반응형 디자인을 지원하지않는다.