본문 바로가기

Python_WEB/HTML

HTML5 - 190608 Basic Study 19(CSS 구조 선택자)

반응형

1. 구조 선택자

  • 일반 구조 선택자(위치)
선택자:first-child li:first-child
선택자:last-child li:last-child
선택자:nth-child(수열) li:nth-child(2n+1)
선택자:nth-last-child(수열) li:nth-last-child(2n+1)
  • 형태 구조 선택자(등장)
선택자:first-of-type h1:first-of-type
선택자:last-of-type h1:last-of-type
선택자:nth-of-type(수열) h1:nth-of-type(2n+1)
선택자:nth-last-of-type(수열) h1:nth-last-of-type(2n+1)

 

2. HTML Code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 1일차</title>
<link href="css/ex03.css" rel="stylesheet">
</head>

<body>
<h1>네비게이션바 만들기</h1>
<h1>welcome1</h1>
<h2>welcome2</h2>
<h2>welcome2</h2>
<h2>welcome2</h2>
<h3>welcome3</h3>
<h3>welcome3</h3>
<h3>welcome3</h3>
<h4>welcome4</h4>
<h5>welcome5</h5>
<h6>welcome6</h6>
<h6>welcome6</h6>
<h6>welcome6</h6>

</body>
</html>

 

3. CSS Code

@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}
/* 목록 기호 없애기 */
ul, li{
	list-style:none;
}
/* 밑줄 없애기 */
a{
	color:black;
	text-decoration:none;
}
/* h2 tag에 마지막 백그라운드 처리 */
h2:last-of-type{
	background:gray;
}
/* h3 tag에 2번째 백그라운드 처리 */
h3:nth-of-type(2){
	background:tomato;
}
/* h1 tag에 첫번째 border 처리 절대적 위치 */
h1:first-child{
	border:5px solid lime;
}
/* h6 tag에 첫번재 boredr 처리 상대적 위치 */
h6:first-of-type{
	border:5px solid lime;
}
h1:nth-child(3){
	font-style:italic;
}

 

4. HTML / CSS 파일

ex03.html
0.00MB
ex03.css
0.00MB

 

5. HTML 미리보기

< CSS 1일차 >

반응형

태그