• reset.css vs. normalize.css

    2021. 12. 29.

    by. 나나 (nykim)

    320x100

    reset과 normalize가 필요한이유

    브라우저에서 가장 먼저 적용되는 스타일은? User-agent Stylesheet !!
    이는 브라우저에서 제공하는 기본 스타일인데 브라우저마다 그 내용이 다름다름


    그래서 똑같은 <button></button>태그여도 Chrome, Safari, Edge 등 브라우저마다 다르다.

     

    이렇게 브라우저마다 차이가 있으면 당연히 작업할 때 화딱지가 남 😵

    
따라서 ‘사전 정의한 스타일시트’를 적용해 각 브라우저의 기본 스타일을 무효화시키는 방법이 자주 쓰인다.
    바로 reset 또는 normalize!

     

    둘이 비스무리하지만 사실은 다르다는 거 허허허

     

     

    reset vs. normalize

    reset

    • 모든 브라우저 스타일을 ‘초기화’ 한다. 왜냐면 처음부터 다시 그려줄 거니까!
      • 장점: 익숙한 방법. 그냥 새하얀 종이 위에 원하는 대로 그리자 XD
      • 단점: 표준화된 방법이 없고 브라우저 업데이트에 맞춰 고쳐나가야 합니다. 모든 걸 날려버려서 원래 스타일을 까먹기도 함 💦
    • Eric의 Reset CSS
    • Styled Components를 쓴다면 → styled-reset

     

    normalize

    • 브라우저 스타일을 여러 브라우저에서 ‘똑갘아 보이도록’ 한다. 일관되어 보이도록 하는 게 목표.
      • 장점: 굳이 다 날리지 않고 정규화가 필요한 스타일만 건드린다. 지속적으로 업뎃 중인 공동 프로젝트. 친절한 주석을 보며 커스터마이징도 가능 🎨
      • 단점: 초기화에 익숙해져 있다면 적응에 시간이 걸릴 듯. 공동기여지만 어쨌든 브라우저에 맞춰 업데이트는 필요.
    • Nicolas의 Normalize CSS
    • Styled Components를 쓴다면 → styled-normalize

     

     

     

    흐음 뭘 써볼까

    결국 무엇을 사용할지는 상황과 취향껏 🤔
    크로스 브라우징이 전혀 필요 없다면 reset만 사용할 수도 있고,

    일부 기본 스타일(sub, i 등)은 유지하고 싶다면 normalize만 사용할 수도 있고,
    아니면 둘을 스까스까 섞어 쓸 수도 있겠다!

     

    세세한 장단점은 실사용 해보면서 후기 남기는 걸로 ;)

    728x90

    '🐿 > CSS' 카테고리의 다른 글

    border: 0 vs. border: none  (0) 2022.01.17

    댓글