○ :target - 앵커 대상에 스타일 적용
앵커(anchor)는 같은 문서 내에서, 다른 위치로 이동할 때 사용하는 요소입니다. <a href>를 사용할 때 외부 링크 이동을 위해 URL을 요소 속성 값으로 입력하게 되는데, 여기에 속성 값으로 특정 id를 '#news' 같은 형태로 작성하게 되면 이 링크를 클릭했을 때 한 번에 해당 영역으로 이동하게 됩니다.
이제 스타일 태그나 CSS에서, 특정 id에 ':target' 가상 클래스를 추가하여 스타일을 선언한다면, 해당 앵커 영역으로 이동을 진행하게 되는 대상 id 영역에 스타일을 적용하게 됩니다.
예제를 통해서 살펴보도록 하겠습니다.
<!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 {
display:inline-block;
width:150px;
padding:10px;
}
.navi a:link, .navi a:visited {
font-size:14px;
padding: 10px;
text-decoration: none; /* 밑줄 없음 */
}
.navi a:hover, .navi a:focus {
background-color:#222; /* 배경색 */
color:#fff; /* 글자색 */
}
.navi a:active {
background-color:#f00; /* 배경색 */
}
.contents {
margin:30px auto;
width:400px;
padding:20px;
border:1px solid #222;
border-radius:5px;
}
#intro:target {
background-color:#0069e0; /* 배경색 - 파란색 */
color:#fff; /* 글자색 - 흰색 */
}
#room:target {
background-color:#ff9844; /* 배경색 - 주황색 */
}
#reservation:target{
background-color:#fff8dc; /* 배경색 - 베이지색 */
}
</style>
</head>
<body>
<div class="container">
<nav class="navi">
<ul>
<li><a href="#intro">회사 소개</a></li>
<li><a href="#room">서비스 소개</a></li>
<li><a href="#reservation">결제 및 환불</a></li>
<li><a href="ps-2.html">문의하기</a></li>
</ul>
</nav>
<div id="intro" class="contents">
<h2>회사 소개</h2>
<p>Excepteur do est eiusmod nulla et veniam. Labore officia officia ex aliqua exercitation aliqua laborum Lorem deserunt ut ullamco labore anim. Officia eu duis aliquip incididunt. Do laborum et consequat aliqua sint consectetur.</p>
</div>
<div id="room" class="contents">
<h2>서비스 소개</h2>
<p>Qui magna culpa minim reprehenderit magna in nisi ipsum. Ad cillum tempor minim fugiat est dolor. Cillum sit qui minim sint officia nostrud cillum cupidatat pariatur ipsum eiusmod velit labore. Sit in non fugiat minim sit.</p>
</div>
<div id="reservation" class="contents">
<h2>결제 및 환불</h2>
<p>Fugiat aliquip mollit proident velit magna esse ea officia eu. Esse do aliqua proident culpa eiusmod duis minim deserunt eu reprehenderit ut tempor. </p>
</div>
</div>
</body>
</html>
위와 같이, 앵커가 적용된 요소를 클릭하는 순간 앵커로 이동하면서 :target을 통해 지정해 둔 스타일이 적용됩니다.
○ :enabled / :disabled - 요소의 사용 여부에 따른 스타일 적용
특정 요소가 사용할 수 있는 상태(enabled) 혹은 사용할 수 없는 상태(disabled)인지 여부에 따라서 스타일을 적용할 수도 있습니다. 예를 들어서 <textarea> 요소를 사용하는데, 유저가 입력하는 부분이 아닌 사용 약관이나 계약 사항을 보여주는 요소라면 여기에 disabled 속성을 지정하게 됩니다. 이런 경우에 가상 클래스 :disabled 선택자를 사용하게 되면, 이 요소에만 해당하는 스타일을 적용이 가능합니다.
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 7. 가상 클래스와 가상 요소(3) - 구조 가상 클래스 1 (0) | 2023.07.07 |
|---|---|
| [CSS] 7. 가상 클래스와 가상 요소(2) - 요소 상태에 따른 가상 클래스 2 (0) | 2023.06.18 |
| [CSS] 7. 가상 클래스와 가상 요소(1) - 가상 클래스 정의 (0) | 2023.06.10 |
| [CSS] 6. 고급 선택자(2) - 속성 선택자 3 (0) | 2023.06.06 |
| [CSS] 6. 고급 선택자(2) - 속성 선택자 2 (0) | 2023.06.05 |
