웹 프론트엔드 퍼블리싱의 기본 CSS Normalize와 CSS Reset의 개념정리
웹 프론트엔드 퍼블리싱의 기본 CSS Normalize와 CSS Reset의 개념정리프론트엔드 개발자나 웹 퍼블리셔라면 누구나 한 번쯤 들어봤을 CSS Normalize와 CSS Reset.
두 개념 모두 브라우저마다 다른 기본 스타일의 차이를 제거하기 위한 방식이지만 그 접근 방식에는 뚜렷한 차이가 있습니다.
이 글에서는 두 가지 방식의 차이를 명확하게 비교하고 사용 시점과 최신 트렌드까지 깊이 있게 알아보겠습니다.
CSS Reset이란?
CSS Reset은 브라우저 기본 스타일을 완전히 제거(reset) 하는 스타일 시트입니다.
브라우저는 각기 다른 기본 스타일을 가지고 있는데 이로 인해 요소마다 패딩, 마진, 폰트 등이 다르게 보일 수 있습니다.
그래서 프로젝트에 기본 세팅할때 CSS를 리셋하는것을 추천합니다.
Normalize.css란 무엇인가?
Normalize.css는 브라우저의 기본 스타일을 제거하지 않고 브라우저 간의 스타일 차이를 “일관되게” 만들어주는 CSS 파일입니다.
즉 완전히 없애기보다는 서로 다른 브라우저 간에 스타일을 통일시켜주는 역할을 하죠.
예를 들어 어떤 브라우저에서는 <h1> 태그의 마진이 20px이고, 다른 브라우저에서는 30px일 수 있습니다. 이 차이를 줄여주는 것이 Normalize.css의 핵심입니다.
-
브라우저의 기본 스타일을 “유지하면서” 균일하게 조정
-
최신 HTML5 요소까지 대응
-
접근성 측면도 고려한 스타일 유지
Normalize는 구글, GitHub 같은 대형 서비스에서도 애용되는 기법입니다.
정리하자면 normalize CSS는 브라우저의 기본 스타일을 통일시켜주는 역활을 합니다.
👇👇 normalize.css 👇👇 사이트에서 코드를 복사해서 프로젝트에 normalize.css 파일에 넣으시면 됩니다.
Reset.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 파일을 따로 만들어서 관리하시면 됩니다.
웹 개발에 궁금하신점은 언제든지 문의주세요!
