프로젝트에 Global style입혀보기

Global style

1. global = 프로젝트 전체에 적용 = 프로젝트에 일관된 스타일링을 적용
2. "user agent stylesheet"로 표시되는 브라우저의 기본 스타일이 차이를 만든다.
3. 브라우저 간의 스타일 차이를 극복하기 위해 사용

• 1. 에릭마이어의 reset css
• 2. normalize.css
• 3. sanitize.css

우린 여기서 sanitize.css를 사용할 것이고, 왜 이걸 쓸까?

CSS 초기화 라이브러리 비교

1. reset.css

모든 스타일을 다 지워버림.

• <h1>도 일반 텍스트처럼 보임
• 처음부터 다 스타일링 해야 함

2. normalize.css

브라우저마다 다른 부분만 통일시킴.

• 기본 스타일은 살려둠
• <h1>은 여전히 크게 보임

3. sanitize.css

normalize + 자주 쓰는 설정 추가.

• box-sizing: border-box 자동 적용
• button에 cursor: pointer 자동 적용
• 개발자가 매번 설정하는 것들 미리 해줌

왜 sanitize.css 쓰냐?

"normalize의 장점 + 귀찮은 기본 설정까지 다 해줘서"

실무에서 자주 쓰는 설정들이 이미 들어있어서 바로 개발 시작하기 편함.

npm install sanitize.css --save

이렇게 다운 받으면 돼.
--save는 패키지에도 저장한다는 의미야