728x90
반응형
웹 개발을 하다 보면 브라우저마다 기본적으로 적용되는 스타일이 다르다는 것을 알 수 있습니다. 이를 해결하기 위해 CSS 초기화를 적용하면, 모든 브라우저에서 일관된 스타일을 유지할 수 있습니다. 여러 방법 중 2가지 방법을 알아봅시다.
1. 기본적인 CSS Reset 적용 (reset.css)
아래 코드는 모든 요소의 기본 마진과 패딩을 제거하고, 브라우저 간 스타일 차이를 줄이기 위한 초기화 CSS입니다.
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;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
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;
}
2. Normalize.css 사용
Normalize.css는 단순히 스타일을 초기화하는 것이 아니라, 브라우저 간의 스타일 차이를 최소화하는 CSS 라이브러리입니다. (Normalize.css 공식 사이트)
사용 방법은 간단합니다.
1. CDN을 추가하는 방법
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">2. 프로젝트에 직접 다운로드하여 사용
normalize.css 파일을 프로젝트에 추가하고, link 태그로 연결하면 됩니다. Normalize CSS는 다음과 같습니다.
CSS 초기화는 웹사이트의 스타일을 보다 일관되게 유지하고, 다양한 브라우저에서도 동일한 결과를 보장하기 위해 필수적인 과정입니다. 프로젝트에 맞는 초기화 방법을 선택하여 적용해 보세요!
틀린 부분이 있다면 IT 선/후배님들의 조언을 댓글로 달아주시면 감사하겠습니다!
728x90
반응형
