[CSS] CSS 초기화 (reset css)

프로젝트를 시작할 때 css를 초기화해주고 시작하는 것이 좋다.
웹 브라우저마다 기본으로 제공하는 스타일이 있는데, 그렇게 되면 모든 브라우저에서 개발자가 의도한대로 동일하게 나오지 않을 수 있기 때문!

💡 user agent stylesheet (사용자 에이전트 스타일시트)

각 브라우저마다 기본적으로 정해져있는 css 규칙.
이로 인해 내가 의도한대로 작업물이 안나올 수 있다.
따라서 reset.css나 normalize.css로 css를 초기화 해주자!

📌 CSS 초기화 방법

1. reset.css 적용 -> 기본 스타일을 대부분 제거.
2. normalize.css 적용 -> 브라우저마다 일관되지 않는 스타일 제거.
   
   
   
   

📌 reset.css 사용하기

1) cdn 이용

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@4.0.1/reset.min.css"/>

2) reset.css 파일 만들기

https://meyerweb.com/eric/tools/css/reset/ 이 사이트에 들어가서 코드 전체 복사 후 reset.css 파일 생성해서 붙여넣기
그 후, reset.css 파일을 전역에서 사용할 수 있도록 import 한다.

📌 normalize.css 사용하기

1) cdn 이용

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />

2) 터미널에서 install하기

npm i normalize.css

끝으로

reset css와 normalize css 둘 중에 어떤것을 사용하면 좋을지는 프로젝트의 스타일, 규모등을 고려하여 선택하면 될 것 같다.