1. 동작반응
1-1. 의사 클래스
CSS 선택자에 추가할 수 있는 키워드로 선택한 요소가 어떤 상태에 머무르거나 어떤 조건을 만족할 때 스타일을 적용하기 위해 사용된다. 웹 요소의 특정 상태나 동작에 따라 스타일을 변경하는데 유용하게 활용된다.
1-1-1. 기본의사 클래스
- :hover : 요소에 마우스 포인터를 올렸을 때의 상태를 나타낸다.
- :active : 요소가 활성화된(클릭한) 상태를 나타낸다.
- :focus : 요소에 초점이 맞춰진 상태를 나타낸다.
1-1-2. 링크 관련 의사 클래스
링크 요소인 <a> 태그와 관련된 의사 클래스는 주로 아래와 같이 사용된다.
- :link : 방문하지 않은 링크를 나타낸다.
- :visited : 이미 방문한 링크를 나타낸다.
- :hover : 링크에 마우스 포인터를 올렸을 때의 상태를 나타낸다.
- :active : 링크가 활성화된(클릭한) 상태를 나타낸다.
- :focus : 링크에 초점이 맞춰진 상태를 나타낸다.
1-1-3. 입력 요소 관련 의사 클래스
입력요소(<input>, <select>등)와 관련된 의사 클래스는 주로 아래와 같이 사용된다.
- :disabled : 요소가 비활성화(사용 불가)된 상태를 나타낸다.
- :enabled : 요소가 활성화(사용가능)된 상태를 나타낸다.
- :checked : 체크박스나 라디오 버튼과 같은 선택 요소가 선택된 상태를 나타낸다.
1-1-4. 의사 클래스의 사용 예제
선택자:의사클래스{
…스타일 정의…
}<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>의사 클래스 예제</title>
<style>
/* 링크 스타일 */
a:link { color: blue; } /* 방문하지 않은 링크 */
a:visited { color: purple; } /* 이미 방문한 링크 */
a:hover { text-decoration: underline; } /* 링크 위에 마우스 호버 시 밑줄 표시 */
a:active { color: red; } /* 링크 클릭 시 색상 변경 */
/* 입력 요소 스타일 */
input:disabled { background-color: lightgray; } /* 비활성화된 입력 요소 */
input:checked { border: 2px solid green; } /* 체크된 입력 요소 */
</style>
</head>
<body>
<p><a href="#">방문하지 않은 링크</a></p>
<p><a href="#">이미 방문한 링크</a></p>
<input type="text" value="활성화된 입력 요소">
<input type="text" value="비활성화된 입력 요소" disabled>
<input type="checkbox" id="checkbox">
<label for="checkbox">체크박스</label>
</body>
</html>방문하지 않은 링크와 이미 방문한 링크의 스타일을 다르게 적용하고, 입력 요소의 활성화 및 체크된 상태에 따라 다른 스타일을 적용하고 있다.
728x90
'웹 서비스 개발(FB,BE,SERVER,DB) > HTML & CSS' 카테고리의 다른 글
| 8.CSS_활용 (1) | 2024.01.26 |
|---|---|
| 7. Text (0) | 2024.01.22 |
| 6. CSS_Box Model (0) | 2024.01.21 |
| 5. CSS (Cascading Style Sheets) (0) | 2024.01.21 |
| 4. HTML 멀티미디어 (0) | 2024.01.21 |
댓글