프론트엔드 개발자나 웹 퍼블리셔라면 누구나 한 번쯤 들어봤을 CSS Normalize와 CSS Reset.
두 개념 모두 브라우저마다 다른 기본 스타일의 차이를 제거하기 위한 방식이지만 그 접근 방식에는 뚜렷한 차이가 있습니다.
이 글에서는 두 가지 방식의 차이를 명확하게 비교하고 사용 시점과 최신 트렌드까지 깊이 있게 알아보겠습니다.
CSS Reset은 브라우저 기본 스타일을 완전히 제거(reset) 하는 스타일 시트입니다.
브라우저는 각기 다른 기본 스타일을 가지고 있는데 이로 인해 요소마다 패딩, 마진, 폰트 등이 다르게 보일 수 있습니다.
그래서 프로젝트에 기본 세팅할때 CSS를 리셋하는것을 추천합니다.
Normalize.css는 브라우저의 기본 스타일을 제거하지 않고 브라우저 간의 스타일 차이를 “일관되게” 만들어주는 CSS 파일입니다.
즉 완전히 없애기보다는 서로 다른 브라우저 간에 스타일을 통일시켜주는 역할을 하죠.
예를 들어 어떤 브라우저에서는 <h1> 태그의 마진이 20px이고, 다른 브라우저에서는 30px일 수 있습니다. 이 차이를 줄여주는 것이 Normalize.css의 핵심입니다.
브라우저의 기본 스타일을 “유지하면서” 균일하게 조정
최신 HTML5 요소까지 대응
접근성 측면도 고려한 스타일 유지
Normalize는 구글, GitHub 같은 대형 서비스에서도 애용되는 기법입니다.
정리하자면 normalize CSS는 브라우저의 기본 스타일을 통일시켜주는 역활을 합니다.
👇👇 normalize.css 👇👇 사이트에서 코드를 복사해서 프로젝트에 normalize.css 파일에 넣으시면 됩니다.
Reset.css는 모든 브라우저의 기본 스타일을 완전히 제거하여 디자이너나 개발자가 스타일을 처음부터 정의할 수 있게 합니다.
가장 대표적인 Reset은 Eric Meyer의 Reset CSS입니다. <ul>, <ol>, <h1> 등 HTML 요소들의 margin, padding, border 등을 초기화하여 완전히 백지 상태에서 스타일을 시작하게 해줍니다.
쉽게 설명하자면 브라우저 크롬, 사파리, 웨일 브라우저 마다 각기 다른 기본 스타일을 가지고 있습니다.
그래서 reset.css를 사용해서 모든 브라우저에서 공통으로 기본 스타일을 초기화하기 위해서 사용됩니다.
reset.css 가 필요한 이유
👇👇 reset.css 👇👇 사이트에서 코드를 복사해서 프로젝트에 reset.css 파일에 넣으시면 됩니다.
반응형 웹 프로젝트 → Normalize.css
브랜드 디자인이 강한 사이트 → Reset.css
스타일 프레임워크 (예: Tailwind, Bootstrap)를 쓴다면 이미 둘 중 하나 내장됨
특히 styled-components나 emotion 같은 CSS-in-JS 라이브러리를 사용하는 경우, createGlobalStyle로 직접 Normalize 또는 Reset을 구현하는 것도 좋습니다.
reset.css와 normalize.css 모두 각각 다른 파일로 분리하고 main.css or style.css 파일을 따로 만들어서 관리하시면 됩니다.
CPC, CPA, CPM의 차이와 마케팅 전략에서 꼭 알아야 할 이유 디지털 마케팅에서 광고 효율을 높이기 위해…
알면 무조건 유용한 Mac, Windows, 크롬(Chrome) 단축키 단축키(Shortcut)는 컴퓨터 작업 속도를 비약적으로 높여주는 강력한 도구입니다.…
당신이라는 사람을 하나의 브랜드처럼 퍼스널브랜드란? 퍼스널브랜드(Personal Brand)는 자신의 가치, 강점, 전문성을 세상에 알리고, 다른…
트래픽이란 무엇인가요? 트래픽(Traffic)은 웹사이트와 같은 디지털 플랫폼에서 방문자들이 얼마나 많이 유입되었는지를 나타내는 가장 핵심적인 지표입니다. 쉽게…