JUST GO
[의사클래스] 의사클래스 종류 본문
Active 의사 클래스
- Active 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소가 마우스를 누르고 있는 상태(Mouse Down)일 때에 대한 선택자이다.
- 다음과 같이 작성한다.("는 없는 것으로 한다.)
"선택자":active {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
Hover 의사 클래스
- Hover 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소에 마우스가 올라가 있는 상태 (Mouse Hover)일 때에 대한 선택자이다.
- 다음과 같이 작성한다.("는 없는 것으로 한다.)
"선택자":hover {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
Checked 의사 클래스
- Checked 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소가 체크 되어 있는 상태에 대한 선택자이다.
- 주로 type이 checkbox인 input을 위해 사용한다.
- 다음과 같이 작성한다.("는 없는 것으로 한다.)
"선택자":checked {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
= 체크리스트 =
- <body>의 내용은 <label> 태그 하나, <input> 태그 하나, <span> 태그 하나로 구성하세요.(10점)
- "위 약관을 읽어보았고..." 텍스트를 클릭하여도 체크박스의 체크가 토글(Toggle)되게 하세요.(20점)
- 체크 박스가 체크되지 않은 상태라면 "위 약관.."텍스트의 색상을 빨간색으로 만드세요.(color:red;)(20점)
- 체크 박스가 체크된 상태라면 "위 약관을..." 텍스트의 색상을 초록색으로 만드세요.(color: green;)(50점)
- 클래스 및 ID 적극 활용 가능
Disabled 의사 클래스
- Disabled 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소가 비활성화 되어 있는 상태에 대한 선택자이다.
- 다음과 같이 작성한다. ("는 없는 것으로 한다.)
"선택자":disabled {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
first-child 의사 클래스
- first-child 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소들 중 첫번째 요소를 선택하기 위해 사용한다.
- 다음과 같이 작성한다.("는 없는 것으로 한다.)
"선택자":first-child {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
nth-child 의사 클래스
- nth-child(n) 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소들 중 n번째 요소를 선택하기 위해 사용한다. 이 때 n 값은 1이상의 자연수 혹은 xn+y(이때 n은 자동 증가, x 배수와 y 오프셋), odd(홀수 번째), even(짝수 번째)로 지정가능하다.
- 이때 순번은 1부터 시작한다.(0 아님)
- 가령 nth-child(2n + 1)이라는 값은 3,5,7,9...번째 값을 의미하는데 n이 1부터 1씩 증가한다고 생각하면 됨.
- 단, n이 음수일 경우, 가령, nth-child(-n+3)은, (-0+3), (-1+3), (-2+3) 으로 그 값이 0을 초과할 때 -0부터 1씩 감소한다고 계산하면 됨.
- 다음과 같이 작성한다.("는 없는 것으로 한다.)
"선택자":nth-child(3) {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
last-child 의사 클래스
- last-child 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소들 중 마지막 요소를 선택하기 위해 사용한다.
- 다음과 같이 작성한다.("는 없는 것으로 한다.)
"선택자":last-child {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
first-of-type, nth-of-type, last-of-type
first-of-type 의사 클래스
- first-of-type 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소들 중 마지막 요소를 선택하기 위해 사용한다.
- 다음과 같이 작성한다.("는 없는 것으로 한다.)
"선택자":first-of-type {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
nth-of-type 의사 클래스
- nth-child(n) 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소들 중 n번째 요소를 선택하기 위해 사용한다. 이 때 n 값은 1이상의 자연수 혹은 xn+y(이때 n은 자동 증가, x 배수와 y 오프셋), odd(홀수 번째), even(짝수 번째)로 지정가능하다.
- 이때 순번은 1부터 시작한다.(0 아님)
- 가령 nth-child(2n + 1)이라는 값은 3,5,7,9...번째 값을 의미하는데 n이 1부터 1씩 증가한다고 생각하면 됨.
- 단, n이 음수일 경우, 가령, nth-child(-n+3)은, (-0+3), (-1+3), (-2+3) 으로 그 값이 0을 초과할 때 -0부터 1씩 감소한다고 계산하면 됨.
- 다음과 같이 작성한다.("는 없는 것으로 한다.)
"선택자":nth-of-type(3) {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
last-of-type 의사 클래스
- last-of-type 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소들 중 마지막 요소를 선택하기 위해 사용한다.
- 다음과 같이 작성한다.("는 없는 것으로 한다.)
"선택자":last-of-type {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
Not 의사 클래스
- Not 의사 클래스(Pseudo Class)는 다른 의사 클래스를 부정하기 위해 사용한다.
- 다음과 같이 작성한다.("는 없는 것으로 한다.)
"선택자":not(:"다른 의사 클래스"){
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
- 가령, 마지막 요소가 아닌 모든 요소는 다음과 같이 선택한다.
*:not(:last-child) {...}
Focus 의사 클래스
- Focus 의사 클래스(Pseudo Class)는 선택된 요소에 포커스(Focus)가 있을 때에 대한 의사 클래스이다.
- 다음과 같이 작성한다.("는 없는 것으로 한다.)
"선택자":focus {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
'CSS > 학습내용' 카테고리의 다른 글
| [속성] CSS 속성 (2) | 2022.10.04 |
|---|---|
| [선택자] 선택자 종류 (0) | 2022.10.03 |
| [결합자] 결합자 종류 (0) | 2022.10.03 |
| [선택자] ID 선택자 (1) | 2022.10.03 |
| [선택자] 클래스 선택자 (0) | 2022.10.03 |