리셋

웹 브라우저는 웹 페이지에 스타일이 지정돼 있지 않을 경우 사용하는 자기만의 기본 스타일을 가지고 있다. 이를 사용자 에이전트(user agent) 스타일이라고 하는데, 여기서 사용자 에이전트는 웹 브라우저를 가리킨다.

사용자 에이전트 스타일에는 다양한 요소들에 대한 margin이나 padding 등의 속성과 값이 정의되어 있으며, 이는 브라우저가 웹 페이지를 화면에 나타내는 데 영향을 미친다. 페이지에 스타일이 정의돼 있지 않으면 브라우저는 박스 모델을 렌더링할 때 자기의 기본 스타일을 사용하기 때문이다. 따라서 하나의 페이지를 여러 브라우저에서 동일하게 보이게 하기 위해서는 스타일을 정의해 사용자 에이전트 스타일을 덮어쓰는 작업이 필요한데, 이를 가리켜 CSS 리셋(reset)이라고 한다.

전역 선택자를 사용한 리셋

가장 간단한 방법은 전역 선택자(universal selector)를 사용하는 방법이다.

* {
  margin: 0;
  padding: 0;
}

이는 모든 요소들의 marginpadding을 제거하는 방법으로, 스타일시트에서 첫번째 규칙으로 선언해 준다. 여기에 box-sizing: border-box를 추가해 쓰기도 한다.

에릭 마이어의 리셋

Eric Meyer는 2008년과 2011년에 CSS 리셋을 공개했는데, 이는 모든 요소의 스타일들을 제거하여 똑같이 보이게 만드는 것으로, 이 리셋에 기반한다면 사용할 스타일들을 처음부터 다시 만들어야 한다.

Normalize.css와 Sanitize.css

Nicolas Gallagher는 Normalize.css를 만들어 2012년 공개했다. 이는 사용자 에이전트 스타일을 완전히 부정하지 않으면서도 스타일을 좀더 세심하게 작성해 브라우저 간의 차이를 좁혀내어 많은 웹 페이지들이 노멀라이즈를 기본 스타일로 사용하고 있으며 부트스트랩 3 등의 CSS 프레임워크도 노멀라이즈에 기반한 바 있다.

노멀라이즈 개발에 참여했던 Jonathan Neal은 Sanitize.css를 만들어 발표했는데, 노멀라이즈의 연장선상에 있으면서도 CSS 트렌드의 변화를 반영하였다고 한다.

Reboot

부트스트랩은 버전 3까지 Normalize.css를 기본 스타일로 사용했는데, 버전 4에서는 자체 기본 스타일인 Reboot를 사용한다. 크기 단위로 rem을 사용하고, 마진의 상쇄를 막기 위해 margin-top 설정을 피하고, 네이티브 폰트 스택을 사용해 시스템의 기본 글꼴을 최대한 사용하는 등의 내용을 담고 있다.

Nicholas Cerminara의 코드펜에서 리부트가 적용된 모습을 구경할 수 있으며, 부트스트랩의 다운로드 페이지에서 컴파일된 CSS와 JS("Compiled CSS and JS")를 다운로드하면 별도의 리부트 파일을 얻을 수 있다.

results matching ""

    No results matching ""