브라우저 스타일 초기화
브라우저에서 기본적으로 제공하는 css 스타일을
초기화하고 작업을 시작하는 것이 좋다.
reset.css.cdn
Search 'reset.css cdn'
cdn.js.com or ★ jsdeliver.com 페이지로 접근
cdn이라는 css 파일에 원격 주소를 복사해서 사용
.min
파일명.min.확장자와 같이 min(Minify 단어의 약어) 키워드는 파일이 난독화나 경량화되었다는 것을 의미한다.
간략하게 말해 원본의 css 파일을 용량이 가장 적은 형태로 압축시켜놓은 버전이라는 것이다.
우리가 외부에서 가져와 사용하는 플러그인, 라이브러리 등을 직접 수정할 상황은 매우 드물기 때문에 굳이 원본을 사용할 필요는 없다.
※ Codepen 사이트에서는 브라우저 스타일을 어떻게 초기화할까?
1) CSS 패널의 왼쪽에 톱니바퀴 모양의 설정으로 들어간다.
2) [CSS Base]의 'Neither'를 'Reset'으로 변경하고 [Save]
emmet
코드를 자동으로 완성해주는 기능이 자동은 아니다.
emmet이라는 기능의 도움을 받고 있는 것.
| [.html] - <body> | [.css] - div |
| div.lxvxxu 라고 치면 'lxvxxu'라는 이름의 클래스를 가진 div 태그를 자동완성시킨다. |
w: 200 -> weight: 200px; h: 200 -> height: 200px; bc: orange -> background-color: orange; |
나중엔 더 복잡하게 활용 가능하다.
예시)
div>ul>li*4{$}
Emmet은 CSS 선택자를 활용해 사용하는 기능이다.
* 기호는 곱하기
{}는 내용을 삽입
$는 순서대로 숫자 입력
을 의미한다.
이런 CSS 선택자 외 나머지 내용은 모두 Emmet에서만 지원하는 기능이다.
'FE' 카테고리의 다른 글
| [FE][07] HTML 글자, 상자 (0) | 2024.07.09 |
|---|---|
| [FE][06] HTML 개요: 요소, 속성, 태그, 내용, 속성 (0) | 2024.07.09 |
| [FE][04] <a>, 개발자 도구, codepen (0) | 2024.07.07 |
| [FE][03] HTML 이미지 출력, 경로 (0) | 2024.07.06 |
| [FE][02] HTML 기본 태그 (0) | 2024.07.06 |