Reset CSS

OlMinJe·2025년 8월 1일

Web FrontEnd Study

목록 보기
37/44
post-thumbnail
  • 웹 브라우저는 기본 스타일(마진, 패딩, 폰트 등)을 자체적으로 적용함.
  • 이로 인해 같은 코드라도 브라우저마다 다르게 보일 수 있음.
  • Reset CSS는 브라우저 간 스타일 차이를 제거하고 일관된 스타일링 환경을 제공하기 위해 사용됨.

🛠️ 대표 방식:

💬
Reset.css 👉 “야 다 지워! 내가 처음부터 스타일 입힐 거야!”
Normalize.css 👉 “기본 스타일은 살리되, 브라우저마다 다른 부분만 살짝 고쳐줄게.”

  • 초기화(Reset): 모든 기본 스타일을 제거함
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  • 정규화(Normalize)
    button,
    input {
      line-height: normal;
    }
    • 브라우저 간 스타일 차이를 해결하려고 만든 CSS 파일로,
      기본 스타일을 완전히 제거하진 않고 브라우저 간의 차이만 최소화함.
    • 기본 스타일은 유지하면서, 브라우저 간 일관성을 확보하는 방식!
항목Reset CSSNormalize.css
목적모든 기본 스타일 제거브라우저 간 차이만 보정
스타일 유지 여부거의 없음대부분 유지함
사용 예개인 프로젝트, 커스터마이징오픈소스, 기업 사이트 등

📌 보통 사용되는 예시

profile
큐트걸

0개의 댓글