웹 개발 시작 전 css 초기화 준비

 

1. css 초기화를 진행하는 이유? 

 

웹 개발에서 브라우저 간 스타일의 차이가 있어 초기화를 진행하지 않으면 같은 css 코드라도 브라우저에서 다르게 보일 수 있기 때문에 개발하기 전 css 코드를 초기화하여 웹 개발을 준비하는 단계로  필수는 아니지만 브라우저 호환성을 위해 권장한다. 

 

초기화 코드 

/* 기본 margin, padding , border 속성 없애고, 수직 정렬을 기본 기준선에 맞춤 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

/* 새로운 요소들의 대한 스타일 초기화, block 속성으로 블록 레벨 요소로 만든다. */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

/* 텍스트의 줄 간격 1.6 으로 맞춘다. (원래는 1 이였지만, 나는 1.6이 줄간격 가독성이 좋아 1.6으로 설정) */
body {
    line-height: 1.6;
}

/* 순서요소의 목록 앞의 기본 스타일 제거 */
ol, ul {
    list-style: none;
}

/* 인용문 관련 요소 따옴표 스타일 제거 */
blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* 테이블의 셀 경계를 병합, 셀 사이 간격을 없앰 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

 

위에 코드는 내가 웹 개발할 때 css 초기화하는 코드로 원본 코드는 

CSS Tools: Reset CSS (meyerweb.com)  웹 페이지에서 확인이 가능하다. 

 

* 원본 css 초기화 코드 빠진 부분 설명 

 

1. font-size : 100%

 - 부모요소의 크기를 100%로 상속받는다는 의미로 현재 폰트를 결정 

2.  font : inherit 

 - 부모요소의 폰트를 상속받아 사용한다는 의미