Ch4. 웹에서 시작하기
기존에 작업하던 프로젝트에서 내용을 훼손하지 않고 새로운 내용을 테스트하고 싶은 경우, 새로운 폴더와 파일을 생성하고 내용을 구성하는 방법이 있다. 그렇지만 이 경우 프로젝트의 처음 구성부터 새로 시작해야 하는 단점이 있다. 단순한 코드를 테스트 하기 위해서는 적합하지 않은 방법이다. 이럴 때 아주 빠르게 코드를 실행하고 확인 해 볼 수 있는 codepen.io 사이트가 있다. 프론트엔드를 작업할 경우 유용하게 사용할 수 있다.
해당 사이트 접속 후 start coding 버튼을 누르면 HTML, CSS, JS 3가지 패널로 구성되어있는걸 볼 수 있다. HTML 패널에서 작성하는 부분은 VS Code에서 body 부분에 작성하는 것과 같다고 생각하면 된다. DOCTYPE과 같은 부가적인 내용들은 작성할 필요가 없으며, CSS와 JS 파일을 링크를 입력해 넣어줄 필요도 없다.
각각의 언어들 옆에 톱니바퀴 설정을 누르면 전처리 기능들을 설정할 수 있다.
html에서 div 태그 생성 후 css에서 가로, 세로 크기와 배경색을 설정해 주고 브라우저에서 확인 해 보면 해당 내용 주변에 흰색으로 여백이 생겨있는 걸 확인할 수 있다.
우리는 따로 여백을 설정해 준 적이 없다. 개발자 모드에서 확인 해보면 바디 태그에 margin이 8px 들어가 있는 것을 확인할 수 있다. 이는 크롬 브라우저에서 기본적으로 제공하는 여백이고, 다른 브라우저로 넘어가면 조금씩 다를 수 있다. 브라우저를 제작할 때 조금씩 다른 결과물이 나올 수 있기에 브라우저에서 기본적으로 제공하는 css 스타일을 많은 경우에 초기화 하고 시작하는 게 좋다.
그러면 브라우저의 스타일을 초기화하는 방법을 알아보자. 구글에서 reset.css cdn 검색 후 jsdelivr 사이트로 들어간다.(다른사이트거 이용해도 괜춘) 여기서 reset.min.css (min은 파일이 난독화나 경량화 되었다는 것을 의미) 을 COPY HTML 해서 vs code의 index파일에 링크 태그를 이용해서 넣어준다. 이 때 브라우저의 스타일을 초기화하는 css를 가져오는 것이므로 추가적으로 작성하려는 main.css 보다 먼저 동작할 수 있게 앞서 작성해준다.
그런다음 브라우저를 확인 해 보면 앞서 있던 여백이 사라진 것을 확인할 수 있다!!
VS Code에서 태그를 작성할 때 태그명 작성 후 Tab 키를 누르면 자동으로 태그가 완성되었다. 이는 Emmet 기능을 이용한 것이다. 태그 뿐만 아니라 div.heropy 작성 후 Tab키를 누르면 heropy라는 클래스로 div 태그가 자동 완성 되고, h: 200 은 height: 200px;, w: 200 은 width: 200 px; 로 자동 완성되는 매우 편리한 기능이다.
※ 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
'etc... > 패스트캠퍼스 챌린지' 카테고리의 다른 글
| 패스트캠퍼스 챌린지 7일차 - Part1. Ch6 (0) | 2021.11.07 |
|---|---|
| 패스트캠퍼스 챌린지 6일차 - Part1. Ch5 (0) | 2021.11.06 |
| 패스트캠퍼스 챌린지 4일차 - Part1. Ch3 (0) | 2021.11.04 |
| 패스트캠퍼스 챌린지 3일차 - Part1. Ch3 (0) | 2021.11.03 |
| 패스트캠퍼스 챌린지 2일차 - Part1. Ch2 (0) | 2021.11.02 |