브라우저 기본 스타일 초기화: reset.css와 normalize.css

간혹 같은 페이지인데도 오페라, 크롬, 사파리, 엣지에서 보이는 모습이 다른 경우가 있습니다. 특히나 모바일에서는 생각과 다른 모습으로 보이는 경우가 있는데요. 이것은 별도의 스타일을 지정하지 않으면 브라우저에서 제공하는 스타일 기본값을 사용하기 때문입니다. 이런 문제를 해결하는 방법으로는 크게 두가지가 있습니다.

• reset.css: 브라우저가 지정한 모든 스타일을 지운다
• normalize.css: 기본 지정 스타일을 통일한다.

reset.css

reset.css는 현재 이 스킨이 사용하는 스타일 초기화입니다. 모든 속성을 지우고 스킨이 지정한 스타일만 보여줍니다. 파일의 크기가 작다는 장점이 있지만 당연하다 싶은 스타일마저 다시 설정해야 합니다.

normalize.css

normalize.css는 모든 브라우저에서 표준 스타일을 보여줍니다. 스타일을 바닥부터 재정의하지 않아도 된다는 장점이 있으나 reset.css에 비해 파일이 큽니다.

사용법과 주의사항

직접 서버나 스킨에 함께 업로드해서 사용할 수 있습니다. 티스토리 스킨의 경우에는 아래와 같이 사용합니다.

<!-- reset.css -->
<link rel="stylesheet" href="./images/reset.min.css" />
<!-- normalize.css -->
<link rel="stylesheet" href="./images/normalize.min.css" />
<!-- 사용자 스타일 -->
<link rel="stylesheet" href="./style.css" />

스킨 파일 업로드에 해당 파일을 업로드 하고 스타일 초기화를 가능한 위에 배치합니다. 나중에 불러오는 스타일시트가 스타일 정의에 우선권을 가지기 때문입니다. ./images/경로는 티스토리에 정해진 특정 이름의 파일을 제외하고는 모두 해당 경로 아래로 자동 배치되기 때문에 필요합니다.

CDN을 사용해서 외부 소스로부터 받아올 수도 있습니다.

<!-- reset.css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@4.0.1/reset.min.css" />
<!-- normalize.css -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<!-- 사용자 스타일 -->
<link rel="stylesheet" href="./style.css" />