화면을 제작을 하다 보면 내가 작성하지 않았는데 margin, padding 속성이 부여돼서 이상하게 보이는 경우가 있다. '그때마다 수정해주면 되겠지'라고 생각할만한 것은 아니다. 여기서, Reset CSS, Normalize CSS가 필요하고 사용하는 가장 큰 이유는 크로스 브라우징을 위해서이다. 브라우저마다 HTML 시맨틱 태그에 대한 기본값이 다르므로 그 차이를 없애는 데 필요하다.
크로스 브라우징
👉🏻 웹 사이트를 접속했을 때 어느 한쪽에만 최적화됨을 막기 위해 공통 요소를 사용해서 제작하는 것
Reset CSS
- 웹 브라우저마다 각기 다른 default 스타일이 지정되어 있는데 해당 값을 초기화함으로써 다양한 웹브라우저에서도 동일한 스타일이 적용되도록 하는 설정 파일이다.
- W3C에서 공식적으로 권장하는 기법이라기보다는 실무에서 편의에 의해 임의로 지정하는 설정이다.
- 아래 주소는 가장 많이 사용하고 있는 Reset CSS 파일 내용을 담고 있다.
https://meyerweb.com/eric/tools/css/reset/index.html
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 discussed in a May 2007 post, if you're inter
meyerweb.com
Normalize CSS (권장)
- 브라우저(모바일 브라우저를 포함하여)를 광범위하게 지원하며, HTML5 요소, 타이포그래피, 목록(lists), embeded 콘텐츠, 폼과 테이블을 일관성 있게 통일시키는 CSS를 포함한다.
- 다른 CSS reset 과는 달리 사용하기 좋은 기본값들은 유지한다.
- HTML 요소의 다양한 스타일을 정규화한다.
- 버그 및 브라우저 간 차이점을 수정한다.
- 부분적인 개선과 가용성을 향상시킨다.
- 코드에 대한 자세한 주석이 달려 이해를 돕는다.
- normalize는 버전 1은 구형 IE(IE6)를 지원하지만 더 이상 개발이나 수정이 이루어지지 않는다. 버전 3부터 애용하고 있다.
- CDN 기법으로 <head> 태그 안에 링크로 적용시킬 수 있다
- https://cdnjs.com/libraries/normalize
normalize - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
Normalize.css as a node packaged module - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We mak
cdnjs.com
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
</head>
<body></body>
</html>
'CSS' 카테고리의 다른 글
| [CSS] pointer-events를 사용해서 마우스 이벤트 방지 및 제어하기 (0) | 2022.12.18 |
|---|---|
| [CSS] 정렬, 이제는 Flex(Flexible Box)를 사용하자 (0) | 2021.07.27 |