Reset CSS

Song Chae Won·2022년 7월 2일

CSS html

웹 UI 개발

목록 보기

14/19

📌 Reset CSS 작성

주요 태그 및 속성

HTML

: 헤딩, 리스트, 폼, 테이블 등 주요 태그

CSS

: margin, padding, border, font-styleborder-collapse, text-decorationlist-style

body, h1, h2, h3, h4, h5, h6

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
body,
h1, h2, h3, h4, h5, h6 {
	margin: 0;
}

margin 0으로 reset

ul, ol dl

<ul>
<li>ul 리스트의 li</li>
<li>ul 리스트의 li
	<ul>
	<li>ul 리스트의 li</li>
	<li>ul 리스트의 li</li>
	</ul>
</li>
<li>ul 리스트의 li</li>
</ul>

<ol>
<li>ol 리스트의 li</li>
<li>ol 리스트의 li</li>
<li>ol 리스트의 li</li>
</ol>

<dl>
	<dt>dl 리스트의 dt</dt>
	<dd>dl 리스트의 dd</dd>
	<dd>dl 리스트의 dd</dd>
</dl>
ul, ol, dl, dd {
	margin: 0;
	padding: 0;
}

ul, ol {
	list-style: none;
}

display 속성 값이 list-item 인 요소의 기본 스타일이며, 부모의 값을 상속받기 때문에 모든 <li>에 적용되도록 <ol> 혹은 <ul>에 값을 주는게 일반적인 방법입니다. 브라우저(whale 기준)에 기본값으로는 list-style-type 속성이 적용되어 있으며, 축약형으로 초기화하였습니다.

table

<table>
<caption>caption</caption>
<thead>
<tr>
	<th>th</th>
	<th>th</th>
	<th>th</th>
	<th>th</th>
</tr>
</thead>
<tbody>
<tr>
	<th>th</th>
	<th>th</th>
	<td>td</td>
	<td>td</td>
</tr>
<tr>
	<th>th</th>
	<th>th</th>
	<td>td</td>
	<td>td</td>
</tr>
</tbody>
</table>
table {
	border-collapse: collapse;
}

테이블에 임의로 border 속성 값을 넣어서 렌더링 되는 모습을 확인해봅니다. border-collapse가 seperate로 되어있기 때문에, 셀 사이가 떨어진 채로 렌더링이 됩니다. 이런 식으로 테이블이 디자인 되는 경우는 거의 없기 때문에 값을 collapse로 변경해줍니다.

<th>의 font-weight와 기본 정렬 속성은 이번 실습에서 그대로 유지하였습니다.

p, em, strong, a, img

모든 브라우저에서 동일한 화면을 볼 수 있도록 기본값을 초기화합니다.

<a href="#">자세히 보기</a>
<div>
	<img src="https://ssl.pstatic.net/static/connectfdn/boost_uid/advanced/reset_ex_img.jpg" alt="img">
</div>
p {
	margin: 0;
	padding: 0;
}

em {
	font-style: normal
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

img {
	vertical-align: top;
}

는 여백을 제거하고, 텍스트가 기울어져있는 의 font-style을 italic으로 초기화합니다. 은 헤딩태그와 테이블의 th와 같이 font-weight는 그대로 유지했습니다.

<a>에 대한 스타일은 보다 다양하게 초기화할 수 있습니다. 컬러, 마우스 커서 모양 등 프로젝트에 맞추어 변경해주세요.

<img> 하단에는 padding이나 margin이 아닌, 인라인 요소이기 때문에 생긴 여백이 있습니다. vertical-align 속성 값을 top으로 변경하여 여백을 제거해줍니다.

form

<form>
	<fieldset>
		<legend>form요소</legend>

		<input type="text" title="검색어 입력" value="input text">

		<button type="submit">button</button>

		<textarea>textarea</textarea>

		<label for="checkbox">input checkbox</label><input type="checkbox" id="checkbox">

		<select>
			<option>select 옵션</option>
			<option>select 옵션</option>
			<option>select 옵션</option>
		</select>
	</fieldset>
</form>
fieldset, legend {
	margin: 0;
	padding: 0;
}

body, input, textarea, select, button {
	font-size: 14px;
	font-family: Dotum,'돋움',Helvetica,"Apple SD Gothic Neo",sans-serif;
}

fieldset {
	border: 0;
}

폼 요소는 브라우저 기본 스타일이 가장 많이 적용되어 있는 요소입니다. 그렇기 때문에 모두 동일하게 보이도록 커스텀하는 일은 매우 까다로운 작업이며, 디자인 요소로 처리하거나 기본 스타일대로 노출하는 경우가 많습니다.

따라서 폰트 관련 속성만 초기화 하였으며 전체적으로 통일해주기 위해서 헤딩 태그, <body> 에도 적용하였습니다.

최종 reset.css

body,
h1, h2, h3, h4, h5, h6,
ul, ol, dl, dd,
p,
fieldset, legend {
	margin: 0;
	padding: 0;
}

body, input, textarea, select, button {
	font-size: 14px;
	font-family: Dotum,'돋움',Helvetica,"Apple SD Gothic Neo",sans-serif;
}

ul, ol {
	list-style: none;
}

table {
	border-collapse: collapse;
}

em {
	font-style: normal
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

img {
	vertical-align: top;
}

fieldset {
	border: 0;
}