2.1 의사 클래스 :hover
상태 의사 클래스는 사용자와의 상호 작용 또는 현재 상태에 따라 요소에 스타일을 적용할 수 있게 해줘. 이 의사 클래스는 자주 사용자 인터페이스를 개선하고, 사용자 행동에 대한 시각적 피드백을 제공하는 데 사용돼.
:hover 의사 클래스는 사용자가 마우스 커서를 요소 위로 가져갈 때 적용돼.
문법:
선택자:hover {
속성: 값;
}
예시:
이 예제에서는 링크가 커서를 올리면 색이 변하고 밑줄이 추가돼, 버튼은 배경색과 텍스트가 바뀌어.
/* 링크에 커서를 올렸을 때의 스타일 */
a:hover {
color: red;
text-decoration: underline;
}
/* 버튼에 커서를 올렸을 때의 스타일 */
button:hover {
background-color: #3498db;
color: white;
}
2.2 의사 클래스 :focus
:focus 의사 클래스는 요소가 포커스를 받을 때 적용돼. 예를 들어, form 요소를 클릭했거나 Tab 키를 사용해 이동했을 때.
문법:
선택자:focus {
속성: 값;
}
예시:
이 예제에서는 입력 필드가 포커스일 때 테두리 색이 변하고 윤곽이 없어지고, 텍스트 필드는 배경색이 바뀌어.
/* 포커스일 때 입력 필드의 스타일 */
input:focus {
border-color: blue;
outline: none;
}
/* 포커스일 때 텍스트 필드의 스타일 */
textarea:focus {
background-color: #f0f0f0;
}
2.3 의사 클래스 :active
:active 의사 클래스는 사용자가 요소를 활성화할 때 적용돼, 예를 들어 마우스 버튼을 누를 때. 이 의사 클래스는 인터페이스 요소를 클릭할 때 시각적인 피드백을 제공하는 데 자주 사용돼.
문법:
선택자:active {
속성: 값;
}
예시:
이 예제에서는 링크가 클릭될 때 색이 변하고, 버튼은 배경 색이 변하며 살짝 줄어들어 클릭 효과를 줘.
/* 클릭할 때 링크의 스타일 */
a:active {
color: green;
}
/* 클릭할 때 버튼의 스타일 */
button:active {
background-color: #2980b9;
transform: scale(0.98);
}
2.4 의사 클래스 :visited
:visited 의사 클래스는 사용자가 이미 방문한 링크에 적용돼. 이걸로 방문한 링크를 방문하지 않은 링크와 다르게 스타일링할 수 있어.
문법:
선택자:visited {
속성: 값;
}
예시
이 예제에서는 방문한 링크는 보라색으로 변해서 방문하지 않은 링크와 다르게 보여:
/* 방문한 링크의 스타일 */
a:visited {
color: purple;
}
2.5 의사 클래스 조합하기
상태 의사 클래스는 조합하여 복잡한 인터랙티브 스타일을 만들 수 있어. 예를 들어, 링크의 상태에 따라 다양한 스타일을 지정할 수 있지.
완전한 구현 예
이 예제에서는 링크 스타일이 상태에 따라 변해: 기본 상태, 방문한 링크, 커서를 올린 링크, 클릭할 때의 링크:
/* 링크의 기본 스타일 */
a {
color: blue;
text-decoration: none;
}
/* 방문한 링크의 스타일 */
a:visited {
color: purple;
}
/* 링크에 커서를 올렸을 때의 스타일 */
a:hover {
color: red;
text-decoration: underline;
}
/* 클릭할 때의 링크 스타일 */
a:active {
color: green;
}
GO TO FULL VERSION