[CSS] CSS 초기화 하기

브라우저마다 각자의 스타일을 조금씩 가지고 있어서 CSS를 초기화 하지 않으면 올바른 모양으로 표현되지 않는다.

CSS를 초기화하는 방법으로는 대표적으로 Reset CSS와 Normalze가 있는데 나같은 경우는 아무 속성도 없는 상태에서 코딩하는것이 편해서 두가지 다 사용하지 않는다.

내가 사용하는 소스는 아래와 같다.

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

* {
	margin: 0;
	padding: 0;
	text-decoration: none;
	font-family: '나눔고딕', 'Nanum Gothic', sans-serif;;
	font: 13px '나눔고딕', 'Nanum Gothic', sans-serif;;
	box-sizing: border-box;
}

a {
	outline:0;
	text-decoration: none;
}

a:visited {
	text-decoration: none;
}


html {
	height: 100%;
}

ul,
li {
	list-style: none;
}

body {
	height: 100%;
}

img {
	border: 0;
}

모든 속성을 초기화하고 box-sizing을 border-box로 설정하면 여백에 대한 개념을 헷갈려 할 필요가 없다. 내가 생각하고 적는 여백이 딱 맞춰지고 픽셀 계산도 쉽다.

CSS 초기화 소스는 각자 스타일대로 정해서 새 문서를 만들때마다 복사해서 사용하면 된다. Reset CSS나 Normalize를 사용하고 싶다면 검색으로 5분만에 해결할 수 있다.