고정 헤더 영역
상세 컨텐츠
본문
반응형
사용 동작에 반응하는 가상 클래스
- 사용자가 웹 요소를 클릭하거나 마우스 커서를 올려놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들고 싶다면 가상 클래스 선택자를 사용한다.
- :link 가상 클래스 선택자
- 문서 안의 하이퍼링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용한다.
- :visited 가상 클래스 선택자
- 문서의 링크 중에서 한 번 이상 방문한 링크에 대한 스타일을 적용한다.
- :hover 가상 클래스 선택자
- 웹 요소 위로 마우스 커서를 올려놓을 때의 스타일을 지정한다.
- :active 가상 클래스 선택자
- 링크나 이미지 등 웹 요소를 활성화했을 때 스타일을 지정한다.
- :focus 가상 클래스 선택자
- 웹 요소에 초점이 맞추어졌을 때의 스타일을 지정한다.
<html>
<head>
<meta charset="utf-8">
<style>
.selectorClass:hover {
background-color: red;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a href="#" class="selectorClass">메뉴 1</a></li>
<li><a href="#" class="selectorClass">메뉴 2</a></li>
<li><a href="#" class="selectorClass">메뉴 3</a></li>
<li><a href="#" class="selectorClass">메뉴 4</a></li>
</ul>
</body>
</html>
실행 화면
UI 요소 상태에 따른 가상 클래스
- 웹 요소의 상태에 따라 스타일을 지정할 때도 가상 클래스 선택자를 사용한다.
- :enabled와 :disabled 가상 클래스 선택자
- 해당 요소가 사용 가능한 상태일 때의 스타일을 지정하려면 :enabled 클래스를 사용하고, 사용 불가능일 때 스타일을 지정하려면 :disabled 클래스 선택자를 사용한다.
- :checked 가상 클래스 선택자
- 라디오 박스나 체크 박스에서 사용자가 해당 항목을 선택했을 때의 스타일을 지정한다.
<html>
<head>
<meta charset="utf-8">
<style>
.test:checked + span {
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<input type="radio" class="test" name="chk_info" value="HTML"><span>HTML</span>
<input type="radio" class="test" name="chk_info" value="CSS"><span>CSS</span>
<input type="radio" class="test" name="chk_info" value="Javascript"><span>Javascript</span>
</body>
</html>
실행 화면
구조 가상 클래스
- 웹 문서 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 지정할 때 사용하는 가상 클래스 선택자다.
- :root 가상 클래스 선택자
- 문서 안의 루트(root) 요소에 스타일을 적용한다.
- :nth-child(n)와 :nth-last-child 가상 클래스 선택자
- :nth-child(n) 선택자는 자식 요소 중 n 번째 자식 요소에 스타일을 적용한다.
- :nth-last-child 선택자는 자식 요소 중 마지막 자식 요소에 스타일을 적용한다.
<html>
<head>
<meta charset="utf-8">
<style>
.table tr:nth-child(2n+1) {
background-color: green;
color: white;
}
</style>
</head>
<body>
<table class="table">
<tr>
<td>사과</td>
<td>딸기</td>
<td>복숭아</td>
<td>수박</td>
</tr>
<tr>
<td>사과</td>
<td>딸기</td>
<td>복숭아</td>
<td>수박</td>
</tr>
<tr>
<td>사과</td>
<td>딸기</td>
<td>복숭아</td>
<td>수박</td>
</tr>
<tr>
<td>사과</td>
<td>딸기</td>
<td>복숭아</td>
<td>수박</td>
</tr>
</table>
</body>
</html>
실행 화면
반응형
'IT > HTML 및 CSS' 카테고리의 다른 글
| [CSS] 변형과 관련된 속성들 (0) | 2021.05.17 |
|---|---|
| [CSS] 변형 (0) | 2021.05.16 |
| [CSS 기초] 속성 선택자 (0) | 2021.05.12 |
| [CSS 기초] 연결 선택자 (0) | 2021.05.11 |
| [HTML5] 시맨틱 태그 (0) | 2021.05.10 |
댓글 영역