Reset CSS와 Normalize CSS가 필요한 이유

크롬, Edge 등의 브라우저에는 margin 값이 8px가 기본적으로 설정되어 있습니다. 이뿐만 아니라 <table> 태그에 border-collapse의 기본값인 separate가 설정되어 있어 테두리 사이에 가녁을 두어 비교적 부자스러운 디자인이 나타납니다. 이러한 부분을 없애기 위해 2가지의 방법으로 초기화할 수 있습니다.

Reset CSS

margin, table 등 디자인이 부자여느러운 것을 없애기 위해 Reset CSS 파일이 있습니다. 이는 브라우저의 스타일을 초기화하기 위해 사용하는 파일입니다. 크로스브라우징을 구현할 때 유용합니다. 대표적인 사이트로는 cssreset가 있습니다.

Normalize CSS

Reset CSS와 마찬가지로 초기화하는 파일이지만 HTML 요소의 기본 스타일을 브라우저 간 일관성을 유지하도록 돕는 CSS 파일입니다. 대표적인 사이트로는 이곳에서 다운로드할 수 있습니다.

크로스브라우징

Reset CSS, Normalize CSS가 필요한 가장 큰 이유는 크로스브라우징을 위해서입니다. 브라우저마다 HTML 시맨틱 태그에 대한 기본값이 다르므로 그 차이를 없애는 데 필요합니다.

 

크로스브라우징은 웹 표준에서 중요시하는 기술로 크롬, 사파리, 파이어폭스 등의 브라우저에서 웹 사이트를 접속했을 때 어느 한쪽에 최적화되어 치우치지 않도록 공통 요소를 사용하여 제작하는 것을 말합니다.