▶ CSS Reset
- 브라우저가 가지고 있는 기본적인 CSS 스타일을 초기화하는 방법
※ 초기화를 해야 하는 이유
1.
- 위의 예시에서는 각각 의미를 가지고 있는 태그 사용.
- 각 요소들은 브라우저 화면에서 특정한 스타일을 가지고 있는 형태로 출력됨.
- 이때 사용자들은 특정 브라우저만 사용하는 것이 아니기 때문에 다양한 사용자와 브라우저를 고려해야 함.
- 브라우저에서 제공하는 스타일들은 표준화되어 있지 않기 때문에 각 브라우저마다 출력되는 모양이 달라질 수 있음.
- 만들고자 하는 모양을 브라우저마다 모두 동일하게 출력해야 하기 때문에 초기화 후 사용해야 할 필요가 있음.
2.
- 결과 화면에서는 위쪽과 왼쪽에 각각 원하지 않은 여백이 생김.
- 이는 <body>가 기본적으로 가지고 있는 여백으로, 브라우저에서 제공하는 여백.
- 여백의 초기화 필요.
- <body>의 margin과 padding을 0으로 초기화.
- 이와 같이 브라우저가 가지고 있는 스타일을 초기화 후 사용할 수 있음.
- 하지만 매 작업 시마다 초기화를 진행해야 한다면 번거로움이 존재함.
- 미리 브라우저의 기본적인 스타일들을 초기화한 후 사용할 수 있음.
- reset.css 라이브러리 이용.
▶ reset.css
www.jsdelivr.com/package/npm/reset-css
jsDelivr - A free, fast, and reliable CDN for Open Source
Supports npm, GitHub, WordPress, Deno, and more. Largest network and best performance among all CDNs. Serving more than 80 billion requests per month. Built for production use.
www.jsdelivr.com
- 'Copy to Clipboard' 클릭 시 Copy URL / Copy HTML.
- URL 복사 시 <link>를 통해 사용 가능하며 HTML 복사 시 <link>가 작성된 상태로 복사됨.
- 여기서 복사 또는 작성한 <link>는 작성 중인 CSS를 연결하는 <link>보다 앞에 작성되어야 함.
- reset을 통해 초기화된 후에 작성하는 CSS가 적용되어야 하기 때문.
- reset-css 적용 시 기존에 브라우저가 가지고 있던 모든 style이 초기화됨.
- 초기화된 환경에서 원하는 스타일을 작성해 작업.
- 모든 브라우저가 가지고 있는 기본 스타일을 없애고 내가 만드는 스타일을 새롭게 채워 넣는 용도로 사용.
'CSS' 카테고리의 다른 글
| [CSS] 단위(2) - em, rem (0) | 2020.09.07 |
|---|---|
| [CSS] 단위(1) - px, % (0) | 2020.09.07 |
| [CSS] 상속 (0) | 2020.09.03 |
| [CSS] 속성 선택자(Attribute Selectors) (0) | 2020.09.03 |
| [CSS] 가상 요소 선택자(Pseudo-Elements Selectors) (0) | 2020.09.03 |
