WEB
[css3] reset.css 이해하기
Seong Story
2020. 12. 14. 14:13
[css3] reset.css 이해하기
안녕하세요
웹 프로그래밍을 공부할 때 다른 프로젝트를 다운받아 공부하다보면 reset.css 라는 파일을 많이 보실겁니다.
뭘 reset한다는것이며 어떤 역할을 하는 css 파일인지 궁금하셨다면 이글을 참고해 주세요
먼저 간단한 html 코드를 확인해 볼까요?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#s1 li:nth-child(1){
background: red;
}
#s1 li:nth-child(2){
background: pink;
}
#s1 li:nth-child(3){
background: yellow;
}
</style>
</head>
<body>
<section id="s1">
<h1>일반적인 html 예시</h1>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
</body>
</html>- 위 코드는 일반적인 html 문서를 작성하여 리스트 를하나주고 li 마다 다른 배경색으로 구분한 형태로 <ul>태그의 특성상 점도 있고 자세히 보면 문서 전체에 마진도 있는 것을 볼 수있는데요 이는 개발자가 원하는 형태가 아닌 html코드 작성시 자동으로 설정되어 브라우저에 나타나는 모습입니다.
이런 점이 불편해서 css 단계에 앞서 먼저 reset.css 를 이용하여 우리가 지향하는 형태로 바꾸어 줍니다.
이를 위해 대부분 reset.css를 따로 템플렛 처럼 준비해 사용하기에 구분 되어있고 include하고나 @import하여 사용하는것입니다.
- 그럼 이를 적용한 모습도 살펴 볼까요?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
@charset "UTF-8";
/* 요소(element) 여백 초기화 */
html, body,
div, span,
dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
blockquote, p, address, pre, cite,
form, fieldset, input, textarea, select,
table, th, td {
margin:0;
padding:0;
}
/* 제목요소 */
h1, h2, h3, h4, h5, h6 {
font-size:inherit;
font-weight:inherit;
}
/* 테두리 없애기 */
fieldset, img, abbr,acronym { border:0 none; }
/* 목록 */
ol, ul { list-style:none; margin: 0; padding: 0;}
/* 테이블 - 마크업에 'cellspacing="0"' 지정 함께 필요 */
table {
border-collapse: separate;
border-spacing:0;
border:0 none;
}
caption, th, td {
text-align:left;
font-weight: normal;
}
/* 텍스트 관련 요소 초기화 */
address, caption, strong, em, cite {
font-weight:normal;
font-style:normal;
}
ins { text-decoration:none; }
del { text-decoration:line-through; }
/* 인용문 */
blockquote:before, blockquote:after, q:before, q:after { content:""; }
blockquote,q { quotes:"" ""; }
/* 수평선*/
hr { display:none; }
blockquote {
margin: 0 0 1rem;
}
/* 하이퍼링크*/
a{
text-decoration: none;
color:inherit;
}
a:hover{
text-decoration: underline;
}
#s1 li:nth-child(1){
background: red;
}
#s1 li:nth-child(2){
background: pink;
}
#s1 li:nth-child(3){
background: yellow;
}
</style>
</head>
<body>
<section id="s1">
<h1>일반적인 html 예시</h1>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
</body>
</html>- reset.css 적용이후 body의 마진도 사라지고 <ul>태그의 점도 없어졌네요 이렇게 깔끔한 상태로 만든후 디자인을 시작할 수 있습니다.
- 참고로 reset.css 을 공유해 드릴테니 활용하셔도 좋습니다. ^^
뉴렉쳐 유튜브 강의에 잘 정리되어 공유 하려고 합니다.
@charset "UTF-8";
/* 요소(element) 여백 초기화 */
html, body,
div, span,
dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
blockquote, p, address, pre, cite,
form, fieldset, input, textarea, select,
table, th, td {
margin:0;
padding:0;
}
/* 제목요소 */
h1, h2, h3, h4, h5, h6 {
font-size:inherit;
font-weight:inherit;
}
/* 테두리 없애기 */
fieldset, img, abbr,acronym { border:0 none; }
/* 목록 */
ol, ul { list-style:none; margin: 0; padding: 0;}
/* 테이블시 사용합니다. - 마크업에 'cellspacing="0"' 지정 함께 필요 */
table {
border-collapse: separate;
border-spacing:0;
border:0 none;
}
caption, th, td {
text-align:left;
font-weight: normal;
}
/* 텍스트 관련 요소 초기화 */
address, caption, strong, em, cite {
font-weight:normal;
font-style:normal;
}
ins { text-decoration:none; }
del { text-decoration:line-through; }
/* 인용문 */
blockquote:before, blockquote:after, q:before, q:after { content:""; }
blockquote,q { quotes:"" ""; }
/* 수평선*/
hr { display:none; }
blockquote {
margin: 0 0 1rem;
}
/* 하이퍼링크*/
a{
text-decoration: none;
color:inherit;
}
a:hover{
text-decoration: underline;
}
728x90
LIST