티스토리 뷰
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 38일차입니다!
오늘은 11번째 커리큘럼인 'CSS / 실습환경'을 학습했습니다.
저는 티스토리에 코드와 결과물을 공유할 때 JSFiddle을 쓰지만 강사님께서는 CodePen을 쓰시더라고요.
나중에 둘의 특징과 장단점이 무엇인지 알아봐야겠습니다. 😇
오늘 공부한 내용은 01. CSS Reset / 02. Codepen / 03. Emmet 입니다.
CSS Reset은 예전에 다른 강의에서 수강하여 미리 알고 토이 프로젝트 등에 쓰고 있었지요. 😎
<Today I Learned>
<CSS Reset>
🔶 화면에 그리려는 모양을 각각 브라우저에서 동일하게 출력하려고 할 때 사용
➡ 브라우저마다 간격 등의 차이가 있어 이를 맞춰주는 행위가 필요함 (초기화)
🔶 Google 검색에서 'css reset'을 검색해서 https://www.jsdelivr.com/package/npm/reset-css 에 접속 > reset.min.css (최대한 압축한 파일) Copy > Copy HTML 또는 Copy URL 중 선택
🔶 reset.css 파일이 다른 css 파일보다 먼저 호출되어야 제대로 동작함
<Codepen>
🔶 Online Code Editor 중 하나
🔶 왼쪽 상단 Pen 을 누르면 새로운 에디터가 생성됨
🔷 HTML : <body> 태그로 감싸져있다고 가정
🔷 CSS, JS : HTML 파일과 연결되어 있다고 가정
🔹 CSS Option Icon (톱니바퀴 아이콘) 을 눌러 CSS Base를 설정할 수 있음 ➡ CSS Reset을 적용할 수 있음
<Emmet>
🔶 HTML, CSS를 편리하게 사용할 수 있는 문법
➡ Google 검색에서 Emmet 홈페이지를 들어가 자세한 내용을 확인할 수 있음 (https://emmet.io/)
🔶 Emmet 플러그인을 따로 설치하지 않아도 에디터 프로그램에 보통 내장되어 있음
<HTML>
🔷 <div class="box"></div> 는 .box + <Tab> 으로 생성 가능
🔷 <ul class="list"></ul> 은 ul.list + <Tab> 으로 생성 가능
🔷 .container>ul.list>li.list-item*10>a{list$} + <Tab> 은 아래 코드와 같음
<div class="container">
<ul class="list">
<li class="list-item"><a href="">list1</a></li>
<li class="list-item"><a href="">list2</a></li>
...
<li class="list-item"><a href="">list10</a></li>
</ul>
</div>
<CSS>
🔷 w:100 + <Tab> ➡ width: 100px;
🔷 h:100% + <Tab> ➡ height: 100%;
강의 링크: https://bit.ly/3m0t8GM
'[패캠] 프론트엔드 패키지 > CSS' 카테고리의 다른 글
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 40회차 미션 (0) | 2020.11.27 |
|---|---|
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 39회차 미션 (0) | 2020.11.26 |
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 37회차 미션 (0) | 2020.11.24 |
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 36회차 미션 (0) | 2020.11.23 |
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 35회차 미션 (0) | 2020.11.22 |