웹 브라우저마다 각자의 HTML요소의 기본 스타일을 가지고 있다. CSS 스타일링을 적용할때 이러한 기본 스타일링들이 방해를 하기 때문에 초기화기법이 사용된다.
Reset.css
모든 브라우저의 형태에서 내장스타일을 모두 없애버린 스타일이 0인 상태에서 시작되는 초기화 기법으로 h1, div, em등 각 태그에 적용되는 모든 스타일링을 처음부터 다시 만들어 나가야하는 초기화기법이다.
- 스타일링에 대한 시간이 오래걸리며 아얘 초기화를 하는 것이기 때문에 지속적인 업데이트가 필요없다.
- 또한 각 브라우저마다의 버그를 고치는 것이 아니라서 Reset.css를 만들며 브라우저마다의 버그를 발생시킬수 있다.
Nomalize.css
모든 브라우저의 스타일링을 동일하게 유지하는 스타일기법이다. 기존의 기본 스타일링은 유지하되 웹 브라우저마다 내장되어 있는 기본스타일의 차이를 없애주는 스타일링이다.
- 내장브라우저의 스타일링을 손봐주며 차이를 없애주는 기법이기 때문에 브라우저 업데이트마다 지속적인 업데이트가 필요하다.
- 하지만 기본적으로 내장브라우저의 스타일링 자체가 브라우저의 버그를 손봐준 형태이기 때문에 이를 수정하면서 버그가 발생할 걱정을 덜고 스타일링에 대해서 힘을 덜 들일수 있다.
참고
github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/reset-normalize.md
baeharam/Must-Know-About-Frontend
:mortar_board: 취준생이라면 반드시 알아야 하는 프론트엔드 관련 지식들. Contribute to baeharam/Must-Know-About-Frontend development by creating an account on GitHub.
github.com
sapjil.net/resetcss-normalizecss/
reset.css 와 Normalize.css | Sapjil
가끔 Reset CSS와 Normalize를 동일시하시는 분들이 있는것 같습니다만, 확실한 차이가 있는 만큼 모르시던 분들은 이번 기회에 차이점을 이해하시면 어떨까 합니다. Normalize.css는 Reset CSS와 비슷한 기
sapjil.net
'CodeTech > HTML\CSS' 카테고리의 다른 글
| CSS - 가로세로 가운데 정렬 (0) | 2021.02.07 |
|---|---|
| CSS - z-index의 동작방식 (0) | 2021.02.07 |
| CSS - BFC (Block Formatting Content) (1) | 2021.02.07 |
| CSS - 마진겹침현상 (Margin-Collapsing) (0) | 2021.02.07 |
| CSS - float (0) | 2021.02.07 |
