7.1 상태 가상 클래스
CSS의 가상 클래스는 셀렉터에 추가되어 요소의 상태나 문서 구조 내에서의 위치를 표시하는 특수 키워드들이야. 일반적인 셀렉터로는 지정할 수 없는 특정 상태나 상황에 있는 요소에 스타일을 적용할 수 있게 해줘.
주요 가상 클래스:
- 상태 가상 클래스
- 구조 상태 가상 클래스
- 폼 가상 클래스
- 내비게이션 가상 클래스
문법:
selector:pseudo-class {
property: value;
property: value;
}
상태 가상 클래스
이 가상 클래스들은 요소의 현재 상태에 따라 스타일을 지정하는 데 사용돼, 예를 들어 커서를 올렸을 때나 요소가 활성화되었을 때.
:hover— 사용자가 요소에 커서를 올렸을 때 적용:active— 요소가 활성화되었을 때 적용 (보통 클릭 시):focus— 요소가 포커스를 받을 때 적용 (예: 키보드 사용 시):visited— 방문한 링크에 적용:link— 방문하지 않은 링크에 적용
7.2 가상 클래스 hover
:hover 가상 클래스는 사용자가 요소 위에 마우스 포인터를 갖다 댈 때 요소에 적용돼.
주로 링크와 버튼의 외관을 커서가 올려졌을 때 변경하는 데 사용되지.
문법:
selector:hover {
property: value;
property: value;
}
예제:
이 셀렉터는 마우스 포인터가 올라갔을 때 링크의 텍스트 색상을 변경하고 밑줄을 추가해.
HTML
<a href="#">플레이스홀더 링크</a>
CSS
a:hover {
color: red;
text-decoration: underline;
}
적용:
- 시각적 피드백을 통해 사용자 인터페이스 (UI) 상호작용 개선
- 버튼, 링크 및 기타 상호작용 요소에 사용
7.3 가상 클래스 focus
:focus 가상 클래스는 요소가 포커스를 받을 때 적용돼. 예를 들어 클릭하거나 탭 키로 이동할 때.
주로 입력 필드나 다른 폼 요소에 많이 사용되지.
문법:
selector:focus {
property: value;
property: value;
}
예제:
이 셀렉터는 입력 필드가 포커스를 받을 때 경계선 색상을 변경하고 외곽선을 제거해.
HTML
<input type="text" name="text" id="text">
CSS
input:focus {
border-color: blue;
outline: none;
}
적용:
- 웹 페이지 접근성 (accessibility) 향상
- 포커스가 주어졌을 때 상호작용 요소를 더 두드러지게 만듬
7.4 가상 클래스 nth-child
:nth-child 가상 클래스를 사용하면 부모의 자식 요소 중에서 위치에 따라 스타일을 적용할 수 있어.
숫자, 키워드 또는 수식을 인수로 받아.
문법:
selector:nth-child(n) {
property: value;
property: value;
}
예제:
이 셀렉터는 형제 요소들 중에서 위치에 따라서 요소에 스타일을 적용할 수 있게 해줘.
HTML
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
<li>Element 6</li>
<li>Element 7</li>
</ul>
CSS
/* 모든 홀수 자식 요소에 스타일 적용 */
li:nth-child(odd) {
background-color: lightgray;
}
/* 모든 짝수 자식 요소에 스타일 적용 */
li:nth-child(even) {
background-color: lightblue;
}
/* 두 번째 자식 요소에 스타일 적용 */
li:nth-child(2) {
color: red;
}
적용:
- 테이블 줄, 리스트 요소 및 다른 반복 구조 스타일링
- 추가 클래스 없이 복잡한 레이아웃 및 스타일링 가능
7.5 가상 클래스 사용 예제
HTML
<button type="button">Button</button>
CSS
button:hover, button:focus {
background-color: darkblue;
color: white;
}
테이블의 짝수 줄 스타일링:
HTML
<table>
<tr>
<th>이름</th>
<th>수량</th>
<th>가격</th>
</tr>
<tr>
<td>상품 1</td>
<td>5</td>
<td>10 원</td>
</tr>
<tr>
<td>상품 2</td>
<td>3</td>
<td>15 원</td>
</tr>
<tr>
<td>상품 3</td>
<td>8</td>
<td>7 원</td>
</tr>
</table>
CSS
tr:nth-child(even) {
background-color: #f2f2f2;
}
일반 스타일에서 특정 요소 제외하기:
HTML
<ul>
<li class="list-item">Element 1</li>
<li class="list-item">Element 2</li>
<li class="list-item">Element 3</li>
<li class="list-item">Element 4</li>
<li class="list-item">Element 5</li>
<li class="list-item">Element 6</li>
<li class="list-item">Element 7</li>
</ul>
CSS
.list-item:not(:last-child) {
border-bottom: 1px solid #ddd;
}
GO TO FULL VERSION