CSS 작성 초기화(Reset) 방법
CSS 초기화를 하는 이유
모든 웹 브라우저에는 기본 설정값이라고 하는 미리 정해둔 CSS 기본 속성 값들이 있습니다.
아무런 CSS 속성을 사용하지 않아도 HTML 태그만으로 표시할 때 이 기본 값 속성들이 적용됩니다.
우리가 아는 대부분의 데스크탑 웹 브라우저는 기본 글자 크기를 "16px" 로 사용하고 있고, 글자색은 검정색, "<body>" 태그에는 "8px"의 마진(margin) 속성이 기본 속성 값으로 정해져 있습니다.
윈도우용 크롬 웹 브라우저는 기본 글꼴로 맑은 고딕(Malgun Gothic) 을 사용합니다.
같은 웹 브라우저임에도 맥OS용과 리눅스용은 사용 기본 글꼴이 다릅니다.
화면의 일관성을 위해서라면 CSS로 웹 폰트를 사용해 모든 운영체제제에서 같은 웹페이지 화면이 되도록 만들 수도 있습니다.
또 "<body>" 에 설정된 기본 마진(Margin) 속성 값인 "8px"는 많은 웹 사이트에서 불필요하기 때문에 "0"으로 초기화하는 것이 기본입니다.
CSS는 상위 요소의 CSS 속성이 하위 요소에 그대로 상속되는 특징이 있기 때문에, 기본 설정된 태그 속성 값은 웹 페이지 전체에 영향을 주게 됩니다.
브라우저마다 약간씩 다르거나, 불필요한 초기 속성 값들을 초기화 함으로써, 하위 요소들에 적용하는 CSS 속성에서 매번 재조정을 하는 번거로움을 피할 수 있습니다.
또한, 모든 환경에서 웹페이지가 최대한 같은 모양으로 보일 수 있도록 CSS의 기본 속성들인 마진, 패딩, 글꼴, 글자 크기는 필수적으로 초기화를 해주는 것이 좋으며, 하위 요소들에 적용하는 속성들에 반복적으로 CSS 속성을 재 적용하는 번거로움을 피하는 방법이기도 합니다.
CSS 초기화 기초
CSS 최상위에 다음을 선업합니다.
웹사이트 단위로 CSS를 작성할 때 필수적으로 사용하는 선언입니다.
html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-size: 100%;
box-sizing: border-box;
}최상위 태그인 "html, body" 태그에 CSS 초기화를 적용하는 것을 권장하지만 HTML 페이지 안의 모든 태그에 적용되도록 다음과 같이 선언할 수도 있습니다.
또한 CSS 선언 중간에 재 초기화를 해야하는 경우 "section *" 처럼 특정 태그나 영역 하위로만 초기화를 할 수도 있습니다.
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}CSS 초기화 확장
CSS를 초기화 할 때 기본 여백 속성 초기화 외에 글꼴, 줄 간격, 글자 두께, 그리고 글자 선명도 등 빈번한 속성 값들을 많이 사용하는 속성으로 미리 지정해두면 CSS 속성을 반복해서 추가하지 않아도 되는 장점이 있습니다.
다음은 CSS 초기화를 확장해서 사용하는 대표적인 방법 중의 하나입니다.
글꼴은 웹 글꼴을 사용하지 않는 경우 웹 브라우저나 운영체제에 무관하게 최대한 유사한 모습으로 출력되도록 하는 글꼴 선언입니다.
글꼴을 선언할 때는 맨 끝에는 "san-serif"(고딕, 돋움 계열), 또는 "serif"(명조, 바탕체 계열) 로 글꼴 계열을 선언해 최대한 가까운 계열의 글꼴이 사용되도록 하는 것이 좋습니다.
"apple" 이 들어간 글꼴과 "helvetica"(영문)는 맥OS 용이며, "malgun Gothic", "맑은 고딕", "arial"(영문) 은 윈도우OS 용입니다.
body{
font-family: -apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕",helvetica,arial,"Apple SD Gothic Neo",sans-serif;
font-weight: 300; /* 글자 두께 */
font-size: 1em;
line-height: 1.25; /* 줄 간격 */
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased; /* 글자 부드럽게 */
background-size: cover; /* 배경 이미지 기본 크기 */
background-repeat: no-repeat; /* 배경 이미지 반복 */
background-position: center; /* 배경 이미지 정렬 위치 */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-attachment: fixed;
}글꼴 초기화 트릭
데스크탑용 웹 브라우저의 기본 글자 크기는 대부분 "16px" 입니다.
상대 글꼴 크기인 "em" 단위를 사용해 하위 요소들에 글자 크기를 정의하는 경우, 가독성을 높이기 위해 정수 단위로 맞춘 픽셀 글자 크기를 사용하는 것을 권장합니다.
"16px"가 기본 글자 크기인 경우 "em" 단위로 픽셀 글자 크기를 맞추려면 다음과 같이 "em" 단위로 글자 크기를 정의해야 합니다.
| 픽셀 크기 | em/rem (16px 기준) |
| 10px | 0.625 |
| 11px | 0.6875 |
| 12px | 0.75 |
| 13px | 0.8125 |
| 14px | 0.875 |
| 15px | 0.9375 |
| 16px | 1 |
| 20px | 1.25 |
| 24px | 1.5 |
익숙해지면 자연스럽게 소수점 단위 "em"을 사용하게 되지만, 역시나 번거롭기 짝이 없습니다.
다음처럼 CSS 초기화를 할 때 기본 글자 크기를 "0.625em", 또는 "62.5%" 로 정의하면 픽셀 단위로 "10px"가 됩니다.
초기화 이후에 글자 크기를 하위 요소들에 재 정의할 때 "14px" 는 "1.4em", "16px" 는 "1.6em" 으로 정의할 수 있게 됩니다.
"em" 에 10을 곱하면 실제 픽셀 단위가 되기 때문에 소수점 4자리까지 기억해가면서 글자 크기를 정의하는 번거로움이 없어지는 장점이 있습니다.
* {
font-size: 62.5%; /* 10px */
}
span, p {
font-size: 1.6em; /* 16px */
}