<head>
<style>
* {
color: deepskyblue;
background-color: black;
font-weight: bold;
}
h2 {color: deeppink; font-size: 50px;}
</style>
</head>
<body>
<h2>전체 선택자</h2>
<ol>
<li>스타일을 모든 요소에 적용</li>
<li>* 기호를 사용해서 표현</li>
<li>너무 많은 요소가 있는 HTML 문서에 사용할 경우 클라이언트에 부하를 줄 수 있음</li>
</ol>
</body>
5. 요소 선택자
<head>
<style>
h2 {font-size: 50px;}
p {color: deepskyblue;}
</style>
</head>
<body>
<h2>요소 선택자</h2>
<p>특정 요소가 쓰인 모든 요소의 스타일을 적용</p>
<p><span>span 요소</span></p>
<p><strong>span 요소</strong></p>
<p><ins>span 요소</ins></p>
</body>
<head>
<style>
.bigText {font-size: 50px;}
.smallText {font-size: 14px;}
.redText {color: red;}
</style>
</head>
<body>
<h2 class="bigText">class 선택자</h2>
<p><span class="smallText redText">클래스 선택자는 특정 집단의 요소를 한번에 스타일을 적용</span></p>
<p><span class="smallText">.기호를 사용하여 같은 class 이름을 가진 요소에 스타일을 적용</span></p>
</body>
9. 그룹 선택자
<head>
<style>
* {text-align: center;}
h2 {font-size: 50px;}
h3 {font-size: 30px;}
p, li {font-size: 20px;}
li {display: inline-block; margin-right: 40px; font-weight: bold; color: deeppink;}
</style>
</head>
<body>
<h2>그룹 선택자</h2>
<p>여러개의 요소를 나열하고 ,(콤마)로 구분하여 스타일을 적용</p>
<h3>선택자의 종류</h3>
<li>전체 선택자</li>
<li>요소 선택자</li>
<li>아이디 선택자</li>
<li>클래스 선택자</li>
<li>그룹 선택자</li>
</body>
10. 자식자손선택자
<head>
<style>
ul > a {font-size: 30px;}
ul a {color: deeppink;}
</style>
</head>
<body>
<h2>자식 자손 선택자</h2>
<ul>
<a href="https://www.naver.com">네이버</a>
<li><a href="https://www.google.com">구글</a></li>
<li>다음</li>
<li><a href="https://www.nate.com">네이트</a></li>
</ul>
</body>
11. 일반 형제 선택자
<head>
<style>
p + span {color: gold; background-color: deepskyblue;}
h3 + p {background-color: deeppink;}
h3 ~ p {color: green;}
</style>
</head>
<body>
<h2>일반 형제 선택자</h2>
<div>
<h3>첫째</h3>
<p>둘째</p>
<a href="#">셋쨰</a>
<h4>넷째</h4>
<p>다섯째</p>
<span>여섯째</span>
</div>
</body>
12. 속성선택자
<head>
<style>
[href] {text-decoration: none; color: deeppink;}
.attr {background-color: gold;}
[class='attr'] {font-size: 30px;}
/*위에 attr은 둘다 같은 attr이 포함된것을 적용하는것임*/
[title] {text-align: center; font-size: 50px;}
</style>
</head>
<body>
<h2 title="h2 요소의 title 속성">속성 선택자</h2>
<p><a href="https://www.naver.com" target="_blank">네이버</a></p>
<p class="attr">속성명과 속성값이 모두 일치하는 요소를 선택자로 지정</p>
</body>
