<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>셀렉터 만들기</title>
<style>
h3, li {/*태그 이름 셀렉터*/
color : brown;
}
div > div > strong { /*자식 셀렉터 한단계 밑에*/
background : yellow;
}
ul strong {/* 자손 셀렉터 밑에 있으면 다 자손*/
color : dodgerblue;
}
.warning {/*class 셀렉터*/
color : red;
}
body.main{/*클래스 셀렉터*/
background : #cccc66;
}
#list { /*id 콜렉터*/
background : mistyrose;
}
#list span { /*자손 셀렉터*/
color : forestgreen;
}
h3:first-letter { /*가상 클래스 셀렉터*/
color : red;
}
li:hover { /*가상 클래스 셀렉터 => 어떤 상황이 발생하였울 때만 적용*/
background : yellowgreen;
}
</style>
</head>
<body class="main">
<h3>Web Programming</h3>
<hr>
<div>
<div>2학기 <strong>학습 내용</strong>입니다.</div>
<ul id="list">
<li><span>HTML5</span></li>
<li><strong>CSS</strong></li>
<li>JAVASCRIPT</li>
</ul>
<div class="warning">60점 이하는 f</div>
</div>
</body>
</html>
꾸준함의 가치를 믿는 개발자