앞선 아티클에서 우리는 고급 선택자를 통해 세부적인 조건을 지정하여 요소를 선택해 스타일을 적용하는 방법에 대해서 알아보았습니다. 하지만 첫 번째 글자만 선택한다거나 특정 리스트의 두 번째 항목만 선택한다든지의 세부적인 요소 지정은 어려운 상태입니다. 이럴 때 가상 클래스, 또는 가상 요소를 사용하게 됩니다.
○ 가상 클래스 : 사용자의 동작에 따라 반응
가상 클래스는, 유저가 특정 요소를 클릭하거나 마우스 포인터를 올리는 등의 동작을 할 때와 같이 상태 변경 시에 어떤 스타일을 바꿀 때 사용하게 됩니다. 대표적인 가상 클래스 선택자를 요약하면 아래와 같습니다.
1) :link - 방문하지 않은 링크
일반적으로 웹 문서에서 한 번도 방문하지 않은 링크는 파란색 글자 + 밑줄로 표시되는 것을 경험해 보셨을 것입니다. 이때 이러한 기본 스타일을 변경하기 위해서는 :link 선택자를 사용하면 됩니다.
a:link {
// ...
}
2) :visited - 이미 방문한 링크
반대로 한 번 방문(클릭)한 링크는 대부분 기본값이 보라색으로 변하게 됩니다. 이 때 이러한 스타일을 제거하기 위해서는 역시 :visited 선택자를 사용하면 됩니다.
a:visited {
// ...
}
3) :hover - 마우스 포인터를 올려놓음
웹 문서의 요소에 마우스 포인터를 갖다댔을 경우 스타일을 적용합니다. 이를 이용해서 마우스 포인터를 갖다 대면 이미지가 바뀌거나 서브메뉴를 출력하는 등의 효과를 구현하게 됩니다.
4) :active - 웹 요소를 활성화 함
이것은 웹의 이미지, 링크 등을 활성화했을 때 - 즉, 클릭했을 때의 스타일을 지정하게 됩니다. 클릭하는 순간 무엇인가 스타일을 변경하는 경우에 사용할 수 있죠.
5) :focus - 웹 요소에 초점이 맞춰졌을 때
이 가상 클래스는 웹 요소에 초점이 맞춰졌을 때를 의미하게 되는데, 여기서 말하는 '초점이 맞춰진'상태는 무엇을 의미할까요? 일단 마우스 포인터를 올려놓거나, Tab을 눌러서 커서가 이동하거나 하는 경우를 의미하게 됩니다.
참고로 위 1) ~ 4) 가상 클래스는 정의할 때 순서가 있습니다. :link > :visited > :hover > :active 이죠. 스타일 적용 순서가 바뀌면, 적용이 정상적으로 되지 않기도 합니다. 순서는 LOVE & HATE로 외웁니다.
다음 예제를 통해서 적용 사례를 살펴봅시다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>example</title>
<style>
.container {
width: 960px;
margin : 0 auto;
}
.navi{
width:960px;
height:60px;
padding-bottom:10px;
border-bottom:2px solid #ccc;
}
.navi ul{
list-style: none;
padding-top:10px;
padding-bottom:5px;
}
.navi ul li {
float:left;
width:150px;
padding:10px;
}
.navi a:link, .navi a:visited{
display:block;
font-size:14px;
color:#000;
padding: 10px;
text-decoration: none;
text-align: center;
}
.navi a:hover, .navi a:focus {
background-color:#222;
color:#fff;
}
.navi a:active {
background-color:#f00;
}
</style>
</head>
<body>
<div class="container">
<nav class="navi">
<ul>
<li><a href="#">회사소개</a></li>
<li><a href="#">서비스 소개</a></li>
<li><a href="#">구매방법</a></li>
<li><a href="#">문의</a></li>
</ul>
</nav>
</div>
</body>
</html>
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 7. 가상 클래스와 가상 요소(2) - 요소 상태에 따른 가상 클래스 2 (0) | 2023.06.18 |
|---|---|
| [CSS] 7. 가상 클래스와 가상 요소(2) - 요소 상태에 따른 가상 클래스 1 (0) | 2023.06.14 |
| [CSS] 6. 고급 선택자(2) - 속성 선택자 3 (0) | 2023.06.06 |
| [CSS] 6. 고급 선택자(2) - 속성 선택자 2 (0) | 2023.06.05 |
| [CSS] 6. 고급 선택자(2) - 속성 선택자 1 (0) | 2023.05.30 |
