습관적으로, 그냥 늘 당연히 처음에 그렇게 배워서,
이번에도 css reset 을 적용시켜, 모든 기본 브라우저 자체 스타일 + 태그의 스타일을 초기화 시킨 후 혼자 이것저것 연습을 해보려고 하던 중
CSS에는 Reset만 있는 것이 아니라 Normalize 라는 것도 있다는 걸 알게되었다. 두둥

그 둘의 차이도 알아보고
더불어 그냥 아 ㅋ 뭐 초기화 시켜주나보다 ㅋ 머름 ㅋ그냥 복붙 ㅋ
하고 넘어갔던 속성들에 대해서도
도대체 그게 무엇인지 (이제서라도) 살짝 뜯어보려고 한닷.

🖐️잠깐.. 근데 이거 왜.. 쓰는데?
나 같은 코린이들이라면 한 번쯤은 요런 당황스런 경험이 있을 것이다.
내가 적용하지도 않은 여백(마진/패딩)이나 폰트 크기(heading 등)가 지 알아서 뿅 하고 어디선가 등장해서 엥..?이거 뭔데.. 한 적..

이러한 현상을 해결해주고,
사용자에게 동일한 사용감을 주기 위하여! reset과 normalize을 사용한다.

크롬/엣지/파이어폭스.. 등등 다양한 웹 브라우저마다 디폴트 값으로 적용되어있는 스타일로 인해서 같은 코드라 할 지라도 UI가 조금씩 다르게 보일 수 있으므로 디폴트 값을 초기화 시켜 CSS를 통일하고자 하는 것을 목표로 하는 것은 동일하나 그 과정에서 약간의 차이점이 있다.

Reset css

reset 이라는 단어 그대로, 브라우저가 HTML 태그에 적용하는 모든 스타일을 똑같은 값으로 '초기화' 시켜버린다.

reset 적용 방법

1. css 파일 추가 > reset.css import 하기
   reset css 코드는 해당 사이트 참조함
2. 패키지 설치하기
   [npm 패키지]

장점

• 모든 스타일을 배제해버리는 reset css는 하얀 도화지마냥 내가 원하는 걸 그릴 수 있게 해줘서 처음부터 완전한 스타일을 제어할 수 있게 해줌
• 페이지가 어떻게 그려질지 내가 예측하기 쉬움!

단점

• 코드 길이가 길어짐 (모든 태그를 선언하고 있어서 불 필요한 태그도 선언 되어 있을 수 있음)
• 모든 스타일을 첨부터 다 내가 맹글어야함..
  
  

Normalize css

reset과 크게 다른 점은 없당. HTML 태그들의 기본 스타일을 완전히 제거하지는 않고 브라우저간 발생하는 차이점을 최소화 시켜준다.
normalize == 모든 걸 없애지 말고, 유용한 기본값은 살려두자!

normalize 적용 방법

• 다양한 종류의 normalize 코드가 있다고 한다. 나는 가장 많이 쓰이는 코드 중 하나인 necolas normalize.css 적용해봄.

1. github에서 다운로드 후 import (import '.경로/normalize.css')
   normalize.css github
2. 패키지 매니저를 통한 설치 후 import (import 'normalize.css')

장점

• HTML 태그들의 기본 스타일들을 제거하지 않았으므로 reset.css 처럼 일일히 스타일을 다시 선언해줄 필요가 없음.
• 불필요한 선언을 최소화하여 필요한 부분만 리셋하므로 코드가 간결함.

단점

• 일부 요소의 기본 스타일을 바꾸려면 추가 작업을 해줘야 함
• 구형 브라우저에서도 적용될 수 있게 해야하므로 하향평준화가 될 수 있음

ㅇㅋㅇㅋ 그래서 뭐 쓰면 돼?

각각의 장단점을 고려하여 목표와 요구사항에 맞춰서 쓰면 된다. 취향차이.

• 리셋 == '초기화'
  완전히 새로운 디자인 만들고 싶을 때
• 노멀라이즈 = '정규화'
  브라우저간 일관성은 고려 + 일부 스타일은 유지할 때