기본 속성 선택자
: 태그에 작성된 특정 속성을 선택하는 선택자
(id, class도 선택 가능은 하지만 보퉁 #, .을 사용함)
[작성법]
선택자[속성명="속성값"] { css 코드; }(참고)
1) 선택자는 생략할 수 있다 -> 특정 속성을 가진 모든 요소 선택
2) "속성값" 양쪽 쌍따옴표("")는 홑따옴표('')로 변경하거나 생략할 수 있다
[HTML]
<div name="name-1">div1</div>
<div name="name-1">div2</div>
<div name="name-2">div3</div>
<div name="name-2">div4</div>
<p name="name-1">p1</p>
<p name="name-1">p2</p>
<p name="name-2">p3</p>
<p name="name-2">p4</p>
[CSS]
div[name="name-1"]{
background-color: orange;
}
[name="name-2"]{background-color: blue;}
p[name="name-1"]{background-color: green;}
자식 선택자(>)
: 지정된요소 바로 하위에 존재하는 요소를 선택하는 선택지
[작성법]
선택자1 > 선택자2 { css 코드; }
- 선택자1 : 부모 요소 선택(반드시 필요)
- 선택자2 : 자식 요소 선택(반드시 필요)
[HTML]
<ul id="parent-ul">
<li>자식-1</li>
<li>
<span>자식2</span>
</li>
<li> 자식3</li>
<li><span>자식4</span></li>
</ul>
[CSS]
#parent-ul > li {background-color: orange;}
#parent-ul > li >span{background-color: red;}
후손(자선) 선택지( (띄어쓰기) )
: 지정된 요소의 모든 하위에 존재하는 요소를 선택하는 선택지
(자식 : 1단계 아래)
(후손 : n단계 아래 모두)
[작성법]
선택자1 선택자2 { css 코드; }
선택자1 : 부모(조상)요소 선택자
선택자2 : 후손 요소 선택자
[HTML]
<div id="test-div">
<p>test-div의 자식 요소 입니다</p>
<p>test-div의 자식 요소 입니다</p>
<p>test-div의 자식 요소 입니다</p>
</div>
[CSS]
#test-div{
border: 2px solid black;
}
#test-div p{
background-color: yellowgreen;
}
반응 선택자
: 사용자의 움직임에 반응하여 스타일이 달라지는 선택자
(클릭 유지, 마우스 오버 등,,,)
- 요소를 클릭하고 있는 경우(:active)
- 요소에 마우스가 올라가는 경우('hover')
(hover : 마우스를 올리고 내릴 때)
[HTML]
<div class="div-cls" id="active-test">:active 테스트</div>
<div class="div-cls" id="hover-test">:hover 테스트</div>
[CSS]
.div-cls{
width : 200px;
height : 200px;
border : 1px solid black;
background-attachment: #ddd;
/* 아래쪽 요소와의 간격 */
margin-bottom: 30px;
/* 요소에 마우스 커서가 올라오면 손가락 모양으로 바꿔줌 */
cursor: pointer;
}
#active-test:active{
background-color: yellow;
}
-> 버튼을 누르고 있는 동안 색 변경 됨
#hover-test:hover {
background-color: hotpink;
width: 230px;
height: 230px;
}
/* 변화 시간 지정
#hover-test 요소가 변화를 일으키면 0.5초동안 변해라!*/
#hover-test {
transition-duration: 0.5s;
}
-> 커서를 박스 위로 올리면 설정한 크기만큼 커지면서 색 변경 됨상태 선택자
: 입력 양식(input, input 관련 태그)의 상태에 따라 선택되는 선택자
:focus -> 요소에 초점이 맞춰졌을 때
[HTML]
<input type="test" id="focus-test">
[CSS]
#focus-test:focus {
background-color : springgreen;
-> 입력 창에 입력하려고 누르면 배경 색이 변함:checked -> 요소가 체크 되었을 때(radio, checkbox)
[HTML]
<label for="apple">사과</label>
<input type="checkbox" name="fruits" id="apple"><br>
<label for="banana">바나나</label>
<input type="checkbox" name="fruits" id="banana"><br>
<label for="melon">멜론</label>
<input type="checkbox" name="fruits" id="melon"><br>
[CSS]
/* 요소가 체크 되었을 때 (:checked) */
input[name="fruits"]:checked{
width: 30px;
height:30px;
background-color: red;
/* radio, checkbox는 크기를 제외한 스타일은 적용되지 않는다*/
}
-> 색 변경은 안되고 체크박스 크기만 커진다:enabled / :disabled -> 요소가 사용가능한 / 불가능한 상태일 때
[HTML]
<div id="test-div2">
사용 가능: <input type="text" enabled> <br>
사용 불가능: <input type="text" value="변경하면 안되는 값" disabled>
</div>
[CSS]
/* 사용 가능 / 불가능 (:enabled / :disabled) */
#test-div2 > input:enabled{
background-color: lightgreen;
}
#test-div2 > input:disabled{
background-color: lightcoral;
}
동위 선택자
: 동위관계(동일한 위치 == 형제 관계)에서 뒤(다음)에 위치한 요소를 선택하는 선택자
A
B
B
1) A 바로 뒤(다음)에 있는 B요소 하나를 서택 (+)
A선택자 +B선택자 {css코드;}
2) A 뒤에 있는 모든 B요소를 선택 (~틸드)
A선택자 ~ B선택자 {css 코드;}
[HTML]
<div id="div1">1번입니다</div>
<div>2번 입니다</div>
<div id="div3">3번 입니다</div>
<div id="div4">4번 입니다</div>
<p>관련 없는 태그입니다~</p>
<div id="div5">5번 입니다</div>
[CSS]
/* 동위 선택자 */
#div1 + div {
background-color: olive;
}
#div3 ~ div {
background-color: chartreuse;
}
checkbox 모양 바꾸기
[CSS][준비물]
- 동위 선택자 (+)
- 상태 선택자 (:checked)
- input type="checkbox"
- label 태그(for 속성)
- 체크박스 이미지
[HTML]
/ label 태그 스타일 지정 /
#check1 + label {
width : 30px;
height: 30px;
border: 1px solid black;
/* 수평 분할 + 크기 조절 */
display: inline-block;
/* 마우스 손가락 모양*/
cursor: pointer;
/* 모서리 라운딩 처리 */
border-radius: 15%;}
/ 체크된 check1 뒤에 있는 label 태그 /
#check1:checked + label {
background-image: url(/images/check.png);
background-repeat: no-repeat;
background-size: cover;
}
#check1{
display: none;
