<!DOCTYPE html>
<html>
<head>
<style>
/* { 전체선택자 : html 내부의 모든태그를 선택
font-weight: bold;
}*/
gg { /*특정태그에 적용*/
color : green;
}
#header { /*#아이디 : 아이디를 가지고 태그를 선택. 유일*/
color : blue;
}
.select { /* .클래스 : 특정클래스 가지고 태그를 선택*/
color : orange;
}
li.select { /* ~.클래스 : 앞에 ~가 추가된 클래스 가지고 태그를 선택*/
color : red;
}
.c1{
color : gray;
}
.c2{
background-color : red;
}
input[type=text]{background:blue;} /*속성선택자 : 특정한 속성이 있는 태그를 선택*/
#header g1{color:red;}/* 후손선택자 : 특정한 태그 아래에 있는 후손 선택. 모든 후손*/
#section g1, #section g2{color:orange;}
#header > d1{color:green;}/* 자손선택자 : 특정한 태그 바로 아래에 있는 후손 선택.*/
#section > d1, #section > d2{color:gray;}
</style>
</head>
<body>
<gg>포그바1</gg>
<div id="header"> 포그바2</div>
<li class="select">포그바3</li>
<h1 class="select">포그바4</h1>
<h1 class="c1, c2"> 포그바5<h1> <!-- c1, c2스타일 모두 적용 -->
<h1 class="c1"> 포그바6<h1> <!-- c1스타일 모두 적용 -->
<p>포그바7</p>
<input type="text" value="포그바8"/>
<div id="header">
<g1 class="rr">포그바9</g1>
</div>
<div id="section">
<g2 class="dd">댄스바1</g2>
</div>
<div id="header">
<d1 class="rr">댄스바2</g1>
</div>
<div id="section">
<d2 class="dd">드록바</g2>
</div>
</body>
</html>
===========================================
<!DOCTYPE html>
<html>
<head>
<style>
option:checked{background-color:yellow}
input[type="checkbox"]:checked{width: 20px; height: 20px;}
input[type="radio"]:checked{margin-left: 25px;}
</style>
</head>
<body>
<h3>option 요소</h3>
<select>
<option value="20">20대</option>
<option value="30">30대</option>
<option value="40">40대</option>
</select>
<form action="url" method="post">
<h3> Type="checkbox"</h3>
<input type="checkbox" name="food" value="fruit">과일<br>
<input type="checkbox" name="food" value="sea">해조류<br>
<input type="checkbox" name="food" value="meat">육류<br>
<h3> Type="radio"</h3>
<input type="radio" name="media" value="ie">익스<br>
<input type="radio" name="media" value="gc">크롬<br>
<input type="radio" name="media" value="ff">파폭<br>
</form>
</body>
</html>
===========================================
<!DOCTYPE html>
<html>
<head>
<style>
/*동위선택자, h1 태그 바로 뒤에 위치하는 h2태그의 color 속성에 적용*/
h1 + h2 { color :red;}
/*h3 태그 바로 뒤에 위치하는 h4태그의 color 속성에 적용*/
h3 ~ h4 { color :blue;}
/* hover : 사용자가 마우스를 올린 태그를 선택 */
h5:hover { color :white;}
/* active : 사용자가 마우스로 클릭한 태그를 선택 */
h6:active { color :orange;}
/* checked : 체크상태의 input태그를 선택
focus : 초점이 맞추어진 input태그를 선택
enabled : 사용가능한 input 태그를 선택
disabled : 사용 불가능한 input 태그를 선택 */
input:enabled{color:gray;}
input:disabled{color:orange;}
input:focus{color:blue;}
</style>
</head>
<body>
<h1>Header - 1</h1>
<h2>Header - 2</h2>
<h3>Header - 3</h3>
<h4>Header - 4</h4>
<h5>Header - 5</h5>
<h6>Header - 6</h6>
<input focus><h8>Enabled</h8></input><br>
</body>
</html>
===========================================
구조선택자
<!DOCTYPE html>
<html>
<head>
<style>
/* :first-child - 형제 관계 중에서 첫번째 위치하는 태그를 선택
:last-child - 형제 관계 중에서 마지막 위치하는 태그를 선택
:ntn-child(수열) - 형제 관계 중에서 앞에서 수열번째 위치하는 태그를 선택
:ntn-last-child(수열) - 형제 관계 중에서 뒤에서 수열번째 위치하는 태그를 선택*/
ul{overflow:hidden;}
li{
list-style: none;
float: left; padding: 15px;
}
li:first-child {border-radius: 10px 0 0 10px;}
li:last-child {border-radius: 0 10px 10px 0;}
li:nth-child(2n) {background-color: blue;}
li:nth-child(2n+1) {background-color: red;}
/*first-of-type : 형제 관계 중에서 첫번째로 등장하는 태그유형을 선택
last-of-type : 형제 관계 중에서 마지막으로 등장하는 태그유형을 선택
nth-of-type(수열) : 형제 관계 중에서 앞에서 수열번째 위치하는 태그유형을 선택
nth-last-of-type(수열) : 형제 관계 중에서 뒤에서 수열번째 위치하는 태그유형을 선택
*/
h1:first-of-type{color:red;}
h2:first-of-type{color:red;}
h3:first-of-type{color:red;}
</style>
</head>
<body>
<ul>
<li>first</li>
<li>Seventh</li>
<li>Seventh</li>
<li>Seventh</li>
<li>Seventh</li>
<li>Seventh</li>
<li>Seventh</li>
</ul>
<h1>Header-1</h1>
<h2>Header-2</h2>
<h3>Header-3</h3>
<h2>Header-2</h2>
<h1>Header-1</h1>
</body>
</html>
=================================
<!DOCTYPE html>
<html>
<head>
<style>
/* ::first-letter - 첫번째 글자를 선택
::first-line - 첫번째 줄을 선택
::selection - 블록 영역 지정한 글자를 선택
*/
p::first-letter {color: white;}
p::first-line {background-color: blue;}
p::selection {background-color: black;}
/* :link - href속성을 가지고 있는 a태그를 선택
:visited - 방문했던 링크를 가지고 있는 a태그를 선택
*/
a {text-decoration: none;}
a:visited{color:red;}
/*href속성을 가지고 있는 a태그 뒤의 공간에 "-(href속성)"을 추가합니다.*/
a:link::after{content: '-' attr(href);}
/*not(선택자) - 선택자를 반대로 적용*/
input:not([type=password]){
background:red;
}
</style>
</head>
<body>
<p>1111111111111111111111111ㅁㄴㅇㄻㄴㅇㄻㄴㄹ111111111111ㅁㄴㅇㄻㄴㅇㄹㄴㅁㅇㄻㄴㅇㄹㅇㄴㅁ111111111111111111111111111111111111111</p>
<h1><a>Nothing</a></h1>
<h1><a href="http://naver.com">네이버</a></h1>
<input type="password" />
<input type="text" />
</body>
</html>
