Reset.css, Normalize.css

김하은·2023년 4월 28일
0

Reset.css

모든 브라우저의 내장 스타일을 없애는 기법.
아무 스타일도 없는 상태에서 스타일링이 일어난다.
h1 ~ h6, p, em 등 각 태그에 적용되는 스타일을 아얘 없앤다.
가장 유명한 스타일은 Eric MayerReset CSS이다.
보통 초기화 후 각자의 방식에 맞게 변형해 사용한다.

Normalize.css

모든 브라우저의 스타일을 동일하게 하는 것.
스타일을 없애는 Reset.css와는 다르게 기존 스타일은 유지하되 브라우저의 다른 스타일들을 고치는 방식.
가장 유명한 스타일은 necolasnomalize.css이다.
깃허브에 있고.. 실제 코드의 주석을 보면 각 요소를 스타일링 하는 이유에 대해 설명하고 있는것을 볼 수 있다.


차이점

Reset.css

  • Reset.css는 모든 것을 초기화.
    따라서 스타일을 처음부터 적용해 나가야함.
  • 브라우저의 버그를 고치는 것이 아니기에 브라우저마다 다른 버그를 발생시킬 수 있음.
  • 다만 아예 초기화 하는 것이기에 업데이트는 필요 없음.

Nomalize.css

  • 브라우저가 업데이트 되어 새로운 내장 스타일이 적용 될 때마다 각 브라우저의 다른 점을 파악해 스타일 업데이트가 필요.
  • 끊임없는 버전 업데이트를 해야 최신 스타일을 유지할 수 있지만, 브라우저의 버그를 고치기 때문에 버그발생확률 낮음.
  • 기본 스타일을 어느정도 유지하기 때문에 스타일링에 힘을 덜들임.

==> 둘다 장단점이 있기에 상황에 따라 적용할것...

브라우저 호환성을 고려해야하니 조금 복잡하고 어려운 개념같다..

0개의 댓글