반응형
속성 선택자
: 선택자 뒤의 [](대괄호) 안에 속성과 속성값을 지정한 후 해당 속성으로 style을 부여한다.
- 선택자[속성=속성값]{}
| = | 해당 속성값을 가질 때 사용한다. |
| ~= | 띄어쓰기 기준으로 특정 단어를 속성값으로 가질 때 사용한다. |
| |= | 시작 단어 유무를 기준으로 특정 단어를 속성값으로 가질 때 사용한다. |
| ^= | 속성값이 특정 단어로 시작할 때 사용한다. |
| $= | 속성값이 특정 단어로 끝날 때 사용한다. |
| *= | 속성값이 특정 단어를 포함할 때 사용한다. |
<!DOCTYPE html>
<html>
<head>
<title>속성 선택자</title>
<!--<style> 내에서 아래로 갈 수록 우선순위를 가진다.-->
<style>
span[name]{
color: red;
} /*name 속성을 가진 요소들(apple, banana yellow, melon, grape, kiwi-banana)의
text color: red*/
span[name=apple]{
color: orange;
} /*name 속성값이 apple인 요소(apple)의 text color: orange*/
span[name~=banana]{
color: yellow;
} /*name 속성값이 띄어쓰기 기준으로 banana를 가진 요소(banana yellow)의
text color: yellow*/
span[name|=kiwi]{
color: green;
} /*name 속성값이 kiwi로 시작하는 요소(kiwi-banana)의 text color: green*/
span[name^=g]{
color: blue;
} /*name 속성값이 g로 시작하는 요소(grape)의 text color: blue*/
span[name$=e]{
color: purple;
} /*name 속성값이 e로 끝나는 요소들(apple, grape)의 text color: purple*/
span[name*=a]{
color: pink;
} /*name 속성값이 a를 포함하는 요소들(apple, banana yellow, grape, kiwi-banana)의
text color: pink*/
</style>
</head>
<body>
<span name="apple">apple</span><br>
<span name="banana yellow">banana yellow</span><br>
<span name="melon">melon</span><br>
<span class="fruit" name="grape">grape</span><br>
<span class="fruit" name="kiwi-banana">kiwi-banana</span><br>
</body>
</html>
자손 선택자, 후손 선택자
1) 자손 선택자
: 선택자 바로 하위에 있는 요소를 선택할 때 사용하는 선택자이다.
- 선택자>자손선택자{}
- 자손 선택자가 후손 선택자보다 우선순위가 높다.
2) 후손 선택자
: 선택한 요소 하위에 있는 모든 요소를 선택할 때 사용하는 선택자이다.
- 선택자 후손선택자{}
<!DOCTYPE html>
<html>
<head>
<title>자손 선택자, 후손 선택자</title>
<style>
/*자손 선택자*/
#divv>h3{
background-color: red;
} /*<div> 바로 밑에 있는 <h3>들만 적용된다.*/
#divv>ul>li>h3{
background-color: orange;
} /*<div> 밑 <ul>의 <li>의 <h3>에 적용된다.*/
/*후손 선택자*/
#divv h3{
background-color: green;
} /*<div> 밑 <h3>에 적용된다.*/
</style>
</head>
<body>
<div id="divv">
<h3>자손? 후손</h3>
<h3>자손 후손?</h3>
<ul id="ull">자손 리스트
<li>
ul의 자손이며 div의 후손
<h3>ul의 후손</h3>
</li>
<li>
ul의 자손이며 div의 후손
</li>
</ul>
</div>
</body>
</html>
동위 선택자
: 동위 관계(동등한 위치)에서 뒤에 위치한 태그를 선택할 때 사용하는 선택자이다.
<!DOCTYPE html>
<html>
<head>
<title>동위 선택자</title>
<style>
#one{
color: yellow;
}
#one+span{
color: pink;
} /*id(one) 바로 옆에 붙은 span(Two)의 text color: pink*/
#one~span{
color: lightgreen;
} /*id(one) 밑에 있는 모든 span(Two, Three, Four의 text color: lightgreen*/
</style>
</head>
<body>
<span id="one">One</span>
<span>Two</span><br>
<span id="three">Three</span><br>
<span>Four</span><br>
</body>
</html>
상태 선택자
1) 반응 선택자
: 사용자가 마우스로 어떠한 모션을 취했을 때의 속성을 선택하는 선택자이다.
- active : 클릭하면 설정한 대로 바뀐다.
hover : 커서를 갖다대면 설정한 대로 바뀐다.
- cursor: pointer : 손가락 모양 커서
cursor: wait : 대기 모양 커서(모래시계, 원)
<!DOCTYPE html>
<html>
<head>
<title>반응 선택자</title>
<style>
#mouse1, #mouse2{
text-align: center;
background-color: black;
color: white;
margin: 10px;
width: 50px;
height: 50px;
}
#mouse1:active{ /*active: 클릭하면 바뀜*/
background-color: aqua;
color: orange;
cursor: pointer; /*pointer: 손가락 모양 커서*/
}
#mouse2:hover{ /*hover: 커서를 갖다대면 바뀜*/
background-color: orange;
color: aqua;
cursor: wait; /*wait: 모래시계 모양 또는 동그란 대기 모양*/
}
</style>
</head>
<body>
<div id="mouse1">눌러보세요</div>
<div id="mouse2">마우스를 갖다대보세요</div>
</body>
</html>
2) 입력 양식 선택자
: 입력 양식을 클릭했을 때 모양이 바뀌게 하는 선택자
- checked : 체크되었을 때 바뀐다.
- focus : <input>에서 해당 요소가 선택되었을 때 깜박일 동안의 스타일이 바뀐다.
<!DOCTYPE html>
<html>
<head>
<title>입력 양식 선택자</title>
<style>
input[name*=fo]:checked{ /*checked: 체크박스가 체크되었을 때*/
width: 20px;
height: 20px;
} /*name 속성에 속성값이 fo가 포함된(*=) 선택자에 적용된다.*/
#borderr:focus{ /*focus: 텍스트 상자를 클릭했을 때*/
border: 4px solid lightgreen;
} /*테두리 두께를 4px, 테두리 색상을 lightgreen으로*/
</style>
</head>
<body>
<input type="checkbox" name="food">떡볶이<br>
<input type="checkbox" name="food">피자<br><br>
<input type="text" id="borderr">
</body>
</html>반응형