Normalize, Reset 뭘써야 할까?

오호·2021년 12월 16일

css

목록 보기

1/4

프로젝트를 시작하면 CSS에서 항상 고민이 되는 여러가지 이슈들이 있다. 어떤 class 표기법을 따를까? 모듈화는 어떻게 할까? 등등..

하지만 조금 더 기본으로 내려가보자. 가장 먼저 코딩을 시작하기전에 베이스 스타일을 정해야한다. 베이스 스타일에 Normalize, Reset CSS가 있는 것은 너무나 잘 알고 있다. 그런데 나는 항상 Reset CSS를 적용하는게 편하다고 생각해서 1분정도 고민 끝에 Reset을 사용해버린다. 결국 Normalize는 사용해본적이 없는듯..?

이 고민에 대한 포스팅을 미루다 미루다 드디어 해보려고 한다.

1. 브라우저 스타일

일단 Reset이든 Normalize든 왜 쓰는지 부터 알아보자.
각 브라우저는 고유의 기본 스타일을 가지고 있어서 스타일링을 전혀 하지 않은 HTML이라 할지라도 최소한의 형태를 보장할 수 있다.

간단한 html 코드를 여러 브라우저에서 확인해보자.

1.1 크롬

1.2 사파리

1.3 파이어폭스

일단 select 태그에서 가장 큰 차이가 있는거 처럼 보인다. 색도 다르고 개인적으로 사파리의 스타일이 가장 예뻐보인다(앱등이)..;

이처럼 브라우저마다 기본 스타일이 조금 다른 것을 확인할 수 있다. 그래서 CSS를 통일하지 않고 프로젝트를 진행보면 어떤 브라우저에서는 의도한대로 디자인이 되지만 다른 브라우저에서는 의도한 대로 되지 않는 이슈가 발생한다.

이 이슈를 해결하기 위해 사용되는 것이 Normalize나 Reset 인 것이다.

2. 하드 리셋 CSS

최근 리셋 CSS는 Normalize나 Reset을 통칭해서 부르는 경우가 많은데 원래는 이 하드 리셋 계열을 부르는 의미로 사용되었다고 한다.

대표적인 종류 하드 리셋 CSS

HTML5 Doctor Reset CSS : http://html5doctor.com/html-5-reset-stylesheet/

css-wipe : https://github.com/stackcss/css-wipe

Reset CSS(Eric Meyer's CSS reset) : http://meyerweb.com/eric/tools/css/reset/

Tinyreset-tiny CSS reset for the modern web : https://github.com/shankariyerr/tinyreset

하드 리셋 계열의 CSS들은 margin, padding, li 등등 모든 스타일들을 0으로 만든다. 0이라는 표현이 애매하긴 하지만, 아무것도 없는 상태로 만들어준다.
reset
아까 전의 html코드에 Eric Meyer's CSS reset을 적용해보았다. 위 사진처럼 모든 margin, padding이 제거되었고 font-size 또한 일정해진 것을 확인할 수 있다.

2.1 하드리셋 장점

다른 부분에 신경을 쓰지 않아도 되는 장점이 있다. 모든 것을 reset하고 시작하기 때문에 고려해야할 변수가 적다. 고려해야할 변수가 적다는 건 작업속도 측면에서도 효율적이라고 할 수 있을거 같다.

2.2 하드리셋 단점

적용되는 스타일이 하나도 없기 때문에 오히려 코드의 길이가 길어질 수도 있다.
브라우저는 계속 해서 업데이트되고 있는 반면, 리셋 CSS의 최근 업데이트는 2011년이다. 그만큼 오래된 자료이고, 유용한 스타일도 제거하기 때문에 비효율적이라는 비판도 존재한다.

3. Normalize CSS

기존의 모든 스타일을 제거하는 Reset과 달리 Normalize는 이를 유지하고 어느 정도 유용한 스타일들은 이용하려는 스타일링 방법이다.

대표적인 Normalize 계열 CSS

Normalize.css : http://necolas.github.io/normalize.css/

Normalize.css를 적용해본 모습이다. 브라우저 기본 스타일을 어느정도 가지고 있다.

3.1 Normalize의 장점

Reset과 다르게 github을 통해 지속적인 업데이트가 이루어지고 있기 때문에 업데이트가 없는 Reset에 비해서 안정성이 높다.
버그 및 브라우저 간 차이점을 일치시켜준다.

3.2 Normalize의 단점

어떻게 기존 스타일을 이용하는지에 대한 가이드가 명확히 없는거 같다. 나에겐 조금 익숙하지 않다는게 단점이라면 단점라고 느껴진다.

4. 유즈케이스

네이버 메인페이지에서 개발자도구로 <head> 태그에 있는 css들을 복사해서 적용시켜보았다.

네이버는 Reset을 사용하고 있는거 같고, heading 태그에 사용되는 bold는 따로 지정해서 즉, reset을 커스텀해서 사용하고 있는 것처럼 보인다.

벨로그는 어떨까 깃허브를 살펴보았다.
아마 src > GlobalStyles.ts 폴더에 전역 스타일을 지정해둔것처럼 보이는데 @velopert님은 아마 Normalize css를 적용해서 사용하고 계신것 처럼 보인다.

5. 정리

각자의 스타일링 취향에 따라서 사용하고 있는 것으로 보인다. 개인적으로는 모든 스타일을 초기화하는 Reset을 선호한다. Normalize의 경우, margin,padding에서 약간의 오차가 있는 스타일을 적용하려면 어차피 다시 작성해야 하기 때문에 처음부터 작성하는 편이 오히려 좋다(?)는 생각이 든다. 아직 Normalize가 익숙하지 않아서겠지만.

기존의 스타일을 이용하면서 효율적으로 스타일링을 할 방법을 한번 생각해봐야겠다. 방법을 알게되면 다시 포스팅 해야겠다.