브라우저별 스타일 잠깐 멈촤! RESET CSS / Normalize

오늘의 주제 : RESET CSS 

브라우저별 스타일 잠깐 멈추라고 하는 학생들

 

🌏 세상에 존재하는 수 많은 브라우저들

세상엔 참 많은 브라우저가 있다... 다양성이라는건 장점이라고 생각한다. 

각기 다른 스타일에 사용자들은 선택해서 사용할 수 있으니깐. 

하지만 FE개발자라면 조금... 슬플지도?  우리에겐 크로스 브라우징 이슈가 있으니깐.

울지말고 얘기해보자.

크로스 브라우징. 

브라우저별로 다르게 구현되는 기술을 고려해 여러 환경에서도 이상없이 작동되도록 웹페이지를 제작하는 방법론.

우리가 짠 코드가 브라우저 별 기본 스타일로 다르게 표현되는걸 막기 위해 Reset css가 존재한다. 

말 그대로 , 존재하는 css를 리셋 시킨다는 의미. 

 

 

 

🌗 RESET CSS VS CSS Normalize 

 

브라우저별 스타일을 초기화 시키는데에는 많은 방법이 있지만 대표적인 두가지

Reset css와 nomalize를 소개하려고 한다. 

 

1. 에릭 마이어의 RESET CSS

(https://meyerweb.com/eric/tools/css/reset/)

보다 적극적인 리셋 방법으로 기존의 css를 지우는 식의 방법을 쓴다. 2011년 이후 업데이트는 중단된 상태

 

2. CSS Normalize

(https://nicolasgallagher.com/about-normalize-css/)

 

보다 소극적인 리셋 방법으로 기존의 css위에 다 똑같아 보이게 하는 css 를 덧씌우는 방법을 쓴다.
완전히 똑같게 하진 않는다.

 

위의 그림은 크로스 브라우징 이슈에 따른 CSS리셋 필요를 보여준다. 

 

둘다 W3C에서 권장하는 방법이라기 보단 필요로 인해 임의로 만든 방법.