본문 바로가기

클라이언트/CSS
Reset CSS

// Reset CSS 

- 브라우저마다 기본 패딩이나 여백, 헤딩 글꼴 크기 등이 다르기 때문에 그러한 css를 모두 초기화시켜 주는 작업이다.

-  참고: https://meyerweb.com/eric/tools/css/reset/

 

CSS Tools: Reset CSS

CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter

meyerweb.com


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;
}
/* HTML5 display-role reset for older browsers */
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;
}


전체적으로 여백, 패딩, 테두리를 0으로 설정한다.

본문 줄 높이는 1로 설정하고 ol과 ul 목록 스타일은 제거한다.

이외에도 다양하게 초기화한다.

'클라이언트 > CSS' 카테고리의 다른 글

[CSS] 테일윈드 CSS(Tailwind CSS)  (4) 2024.01.29
[SCSS] 웹스톰(Webstorm) SCSS 컴파일  (0) 2024.01.20
미디어 쿼리  (1) 2023.11.07
CSS 변수  (0) 2023.11.07
CSS 속성 - 변형(Transform)  (0) 2023.11.06