액티브 스타일
Coddy HTML 여정의 CSS Mastery 섹션에 포함된 레슨 — 43개 중 10번째.
:active 의사 클래스는 사용자가 요소를 활성화할 때(일반적으로 사용자가 요소를 클릭하고 마우스 버튼을 누르고 있을 때) 요소에 스타일을 적용합니다.
예를 들어:
<button class="action-button">Click Me!</button>버튼이 활성화되었을 때 스타일을 지정하기 위해 CSS를 추가합니다:
.action-button {
background-color: blue;
}
.action-button:active {
background-color: darkblue;
}버튼을 클릭하고 누르고 있으면 색상이 파란색에서 진한 파란색으로 바뀝니다. 이는 사용자에게 자신의 동작이 등록되고 있다는 시각적 피드백을 제공합니다.
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
챌린지
쉬움링크가 활성(active) 상태일 때 다음 스타일을 추가하도록 .special-link 클래스에 대한 CSS를 작성하세요:
- 텍스트 색상을 #e74c3c로 변경합니다.
- 1px 1px 2px rgba(0,0,0,0.3)의 텍스트 그림자(text shadow)를 추가합니다.
치트 시트
:active 의사 클래스는 사용자가 요소를 활성화할 때(일반적으로 마우스 버튼을 클릭하고 누르고 있을 때) 스타일을 적용합니다.
.action-button {
background-color: blue;
}
.action-button:active {
background-color: darkblue;
}이는 사용자의 동작이 등록되고 있다는 시각적 피드백을 제공합니다.
직접 해보기
<!DOCTYPE html>
<html>
<head>
<title>Active Pseudo-class</title>
<style>
/* Write your CSS here */
</style>
</head>
<body>
<a href="#" class="special-link">Interactive Link</a>
</body>
</html>이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.