CSS - Resetting VS Normalize

Resetting과 Normalize

최근 외국의 한 블로거를 통해 작업 전 기본적으로 브라우저별 태그에 대한 기본 스타일링을 제어하는 두가지 방법을 비교한 글을 본적 있다.
하지만 국내에서는 대부분 front-end개발의 아버지로 칭하는 Eric Meyer의 Reset.css를 사용하거나,
yahoo가 내놓은 Reset.css를 사용 또는 국내 IT대기업인 네이버나 다음의 reset.css를 사용한다.
그리고 본인의 입맛에 맞춰 커스터마이징하여 사용한다. 필자는 다음의 reset.css를 커스터마이징해서 사용한다.
이처럼 국내에서는 아직 Normalize보다는 Resetting을 하는 추세이다.
일단 Resetting은 대충 사용해보았기때문에 알 것 같은데 Normalize는 무엇인가를 정확히 설명 할 수 없을 것이다.
그럼 Resetting과 Normalize에 대해 알아보자

Restting

우리가 주로 사용하는 Resetting을 알아보자. 위에서 언급한 바와 같이 *Reset.css*를 사용한다.
왜 멀쩡한 브라우저를 reset할까? 초심자들은 의문을 갖을 수 있다. 하지만 상급자 또는 동료가 하기 때문에 자연스럽게 복사 붙여 넣기를 하여 작업을 시작한다.
필자는 이런 초심자들이 궁굼해 할만한 내용 찝찝한 등을 긁어주고자 한다. 고수들은 그냥 지나 쳐도 좋다.
본론으로 들어가서 왜 reset을 할까?

우리의 주 업무는 성능쪽에도 관심을 둬야하지만, 일단 front 즉 보이는 부분을 담당한다.
하지만 기본적으로 브라우저는 각 브라우저별로 각각의 태그에 대한 기본 스타일링이 되어있다.
특히 우리의 적 익스플로러는 심하게 버전별로 차이가 있다.

이처럼 브라우저별로 각가 태그에 대한 기본 스타일링이 다르기 때문에, 기본적인 것들은 초기화해서 사용합니다.
그래야지 우리가 생각하는 브라우저별 최대한 비슷한 흡사한 웹페이지를 작성할 수 있습니다.

Normalize

Normalize는 기존의 브라우저별 스타일을 모두 리셋시키는 방법이 아니라이를 유지하고, 이용하려는 스타일링 방법입니다.

브라우저 크롬과 사파리의 비교입니다.

스타일 크롬과 사파리의 비교입니다.

이처럼 Normalize는 기존에 있던 부분을 이용하되, 최대한 훼손시키지 않고, 이용하는 방법을 사용하고 있습니다.

장점과 단점

이처럼 CSS를 작업하기전에 설정하는 각 방법에 따라 장점과 단점이 존재합니다.

Restting

• 장점

  1. 익숙하다

     현재 우리나라에서는 초기화하는 방법을 많이 사용하므로 익숙합니다. 익숙하므로써 작업의 속도 측면에서 고려할 부분이 존재 하지 않기 때문에 작업 속도는 빠를 수 있습니다.

  2. 다른부분에 신경을 쓰지 않아도 된다.

     만약 잘못 쓰고 있는 Restting일 경우 예상치 못한 변수가 등장합니다. 하지만 모든것을 제대로 Restting하였다면, 고려해야 할 변수가 적습니다.

• 단점

  1. 코드의 복잡성

     Restting을 하면 우선순위에 따라 또한 상위 또는 하위에 작성했느냐에 따라 스타일이 달리 적용 될 수 있습니다.

  2. 최근 업데이트가 없다.

     브라우저는 지속적으로 업데이트 되고 있습니다. 또한 코드는 언제나 변하죠. 하지만 Normalize처럼 대표적으로 한가지 방법을 사용하는 것과 달리, 앞서 언급한대로 Restting을 하는 방법은 다양합니다.

Normalize

• 장점

  1. 코드의 간결함

     Normalize는 리셋과 달리 기존 코드를 유지하고, 이용한다는 측면에 있어서 코드의 우선순위등의 측면에서 충돌이 일어날 가능성이 적습니다.

  2. 지속적인 업데이트

     Restting과 다르게 최근에 v8.0이 나오고 github를 운영하여, 지속적인 업데이트를 거치고 있습니다.

• 단점

  1. 어색함

     국내 많은 개발자들은 Restting을 사용해 왔기 때문에, 어색하고 새롭습니다. 그렇기에 생각지 못한 디자인 오류가 발생할 수 있습니다. 하지만 익숙해지면 괜찮을것으로 판단 됩니다.

정리

정리하자면, 현재 국내의 개발자들은 Restting을 이용해 초기화하여 작업한 경우가 많기 때문에, 익숙합니다.
하지만 최근에 해외에서는 Normalize를 통해 코드를 효율적으로 작성하는데 초점을 두고 있는 것 같습니다.

정답은 없습니다.

각자 원하는 방법으로 효율적으로 작업하면 됩니다.
하지만 개발자로써 이러한 방법이 있으니 실무에서 까지는 아니더라도 한번 사용해보는 것을 추천드립니다.