Chillax in dev

[css3] reset.css 이해하기 본문

WEB

[css3] reset.css 이해하기

Seong Story 2020. 12. 14. 14:13
728x90

[css3] reset.css 이해하기 

안녕하세요

웹 프로그래밍을 공부할 때 다른 프로젝트를 다운받아 공부하다보면 reset.css 라는 파일을 많이 보실겁니다.

뭘 reset한다는것이며 어떤 역할을 하는 css 파일인지 궁금하셨다면 이글을 참고해 주세요

 

먼저 간단한 html 코드를 확인해 볼까요?

일반적인 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하여 사용하는것입니다.

 

- 그럼 이를 적용한 모습도 살펴 볼까요?

reset.css 적용이후

<!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
저작자표시 동일조건

'WEB' 카테고리의 다른 글

[JavaScript] 자바스크립트 데이터 타입  (0) 2023.03.28
[WEB]CSS: 페이지 꾸미는 팁 shadow - 음영 효과 주는 방법  (0) 2020.08.10
[WEB]CSS: 페이지 꾸미는 팁 (colorzilla), gradient(그라데이션) 사용법  (0) 2020.08.10
[WEB]CSS: 기초 font, position, display 속성 등등  (0) 2020.08.09
[WEB]CSS: Hover 반응선택자 사용방법  (0) 2020.08.08
'WEB' Related Articles more
Comments