[CSS] 10-3. 가상 클래스와 가상 요소
10-3. 가상 클래스와 가상 요소
활용할 수 있는 여러 선택자들이 있지만, 이러한 선택자들로도 스타일을 지정하기 어려운 대상이 있습니다.
이럴 때 가상 클래스와 가상 요소를 사용할 수 있습니다.
사용자 동작에 반응하는 가상 클래스
1. 방문하지 않은 링크에 스타일을 적용하는 ‘:link 가상 클래스 선택자’
텍스트 링크는 기본적으로 파란색 글자와 밑줄로 표시되는데, 링크의 밑줄을 없애거나 색상을 바꾸려면 :link 선택자를 사용합니다.
2. 방문한 링크에 스타일을 적용하는 ‘:visited 가상 클래스 선택자’
한 번 이상 방문한 텍스트 링크는 보라색이 기본 값입니다. 이를 바꾸려면 :visited 선택자를 사용합니다.
3. 특정 요소에 마우스 포인터를 올려놓으면 스타일을 적용하는 ‘:hover 가상 클래스 선택자’
이미지 위로 마우스 포인터를 올려놓았을 때 다른 이미지로 바뀌거나, 메인 메뉴 위로 마우스 포인터를 올려놓았을 때 서브메뉴가 나타나는 효과를 만들 수 있습니다. 이럴 때 :hover 선택자를 사용합니다.
4. 웹 요소를 활성화했을 때 스타일을 적용하는 ‘:active 가상 클래스 선택자’
웹 요소의 링크나 이미지 등을 클릭했을 때 스타일을 지정하라면 :active 선택자를 사용합니다.
5. 웹 요소에 초점이 맞추어졌을 때 스타일을 적용하는 ‘:focus 가상 클래스 선택자’
텍스트 필드 안에 마우스 포인터를 올려놓거나, 웹 문서에서 [Tab]을 눌러 입력 커서를 이동했을 때 스타일을 지정하려면 :focus 선택자를 사용합니다.
위의 가상 클래스 선택자들은 메뉴 링크에서 자주 사용하는데, 이때 반드시 다음과 같은 순서로 정의해야 합니다.
:link -> :visited -> :hover -> :active
👍 예시
.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>
...
<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>
- 평상 시 화면
- 커서를 올려놓았을 경우
- 클릭했을 경우
요소 상태에 따른 가상 클래스
요소의 상태에 따라 스타일을 적용하고 싶을 때도 가상 클래스 선택자를 사용합니다.
앵커 대상에 스타일을 적용하는 ‘:target 가상 클래스 선택자’
문서에서 같은 사이트나 다른 사이트의 페이지로 이동할 때는 _링크(link)_를 이용하고, 같은 문서 안에서 다른 위치로 이동할 때는 _앵커(anchor, a)_를 이용합니다. 이때 :target 선택자를 사용하면 앵커의 목적지가 되는 부분의 스타일을 쉽게 적용할 수 있습니다.
요소의 사용 여부에 따라 스타일을 적용하는 ‘:enabled와 :disabled 가상 클래스 선택자’
해당 요소가 사용할 수 있는 상태일 때 스타일을 지정하려면 :enabled 선택자를 사용하고, 반대로 사용할 수 없는 상태일 때 스타일을 지정하려면 :disabled 선택자를 사용합니다.
예를 들어 텍스트 영역 필드(textarea)를 사용해 회원 약관을 보여줄 때는 사용자가 입력할 수 없도록 disabled 속성을 지정해야 하는데, 이때 :disabled 선택자를 사용하면 이런 텍스트 영역 필드의 스타일을 쉽게 지정할 수 있습니다.
선택한 항목의 스타일을 적용하는 ‘:checked 가상 클래스 선택자’
폼이 라디오 박스나 체크 박스에서 선택된 항목에는 checked 라는 속성이 추가됩니다. 이렇게 checked 속성이 있는 요소의 스타일을 지정할 때 :checked 선택자를 사용하면 편리합니다.
특정 요소를 제외하고 스타일을 적용하는 ‘:not( ) 가상 클래스 선택자’
:not( ) 선택자는 ‘괄호 안에 있는 요소를 제외한’ 요소에 스타일을 적용합니다.
보통 스타일을 적용하려는 필드보다 적용하지 않는 필드가 더 적을 때 사용합니다.
#signup input:not([type=radio]) {
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px;
width: 200px;
}
구조 가상 클래스
구조 가상 클래스란 웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 적용할 때 사용하는 가상 클래스 선택자입니다.
특정 위치의 자식 요소 선택하기
| 종류 | 설명 |
|---|---|
| :only-child | 부모 안에 자식 요소가 하나뿐일 때 자식 요소를 선택합니다. |
| A:only-type-of | 부모 안에 A 요소가 하나뿐일 때 선택합니다. |
| :first-child | 부모 안에 있는 모든 요소 중에서 첫번째 자식 요소를 선택합니다. |
| :last-child | 부모 안에 있는 모든 요소 중에서 마지막 자식 요소를 선택합니다. |
| A:first-of-type | 부모 안에 있는 A 요소 중에서 첫번째 요소를 선택합니다. |
| A:last-of-type | 부모 안에 있는 A 요소 중에서 마지막 요소를 선택합니다. |
| :nth-child(n) | 부모 안에 있는 모든 요소 중에서 n번째 자식 요소를 선택합니다. |
| :nth-last-child(n) | 부모 안에 있는 모든 요소 중에서 끝에서 n번째 자식 요소를 선택합니다. |
| A:nth-of-type(n) | 부모 안에 있는 A 요소 중에서 n번째 요소를 선택합니다. |
| A:nth-last-of-type(n) | 부모 안에 있는 A 요소 중에서 끝에서 n번째 요소를 선택합니다. |
수식을 사용해 위치 지정하기
위치를 지정할 때 :nth-child(n) 선택자처럼 위치를 정확히 알려줄 수도 있지만 1, 3, 5 번째처럼 위치가 규칙있게 바뀐다면 an+b 처럼 수식을 사용할 수도 있습니다. 이때 n값은 0부터 시작합니다.
또는 홀수 번째에 스타일을 줄때는 nth-child(odd), 짝수 번째에 스타일을 줄 때는 :nth-child(even)을 사용할 수 없습니다.
👍 예시
/* div 요소에서 세 번째 자식인 p 요소에 스타일 적용 */
div p:nth-child(3)
/* div 요소에서 홀수 번째로 나타나는 자식인 p 요소에 스타일 적용 */
div p:nth-child(odd), div p:nth-child(2n+1)
/* div 요소에서 짝수 번째로 나타나는 자식인 p 요소에 스타일 적용 */
div p:nth-child(even), div p:nth-child(2n)
가상 요소
가상 클래스가 웹 문서의 여러 요소 중에서 원하는 요소를 선택한다면, 가상 요소는 문서 안의 특정 부분에 스타일을 지정하기 위해 가상으로 요소를 만들어 추가하는 것입니다.
첫번째 줄, 첫번째 글자에 스타일을 적용하는 ‘::first-line 요소, ::first-letter 요소’
::first-line 요소와 ::first-letter 요소를 사용하면 지정한 요소의 첫번째 줄이나 첫번째 글자에 스타일을 적용할 수 있습니다.
이때 첫번째 글자는 반드시 첫번째 줄에 있어야 합니다. 만약에 < br > 태그로 첫번째 글자가 첫번째 줄에 없을 경우에는 적용할 수 없습니다.
내용 앞뒤에 콘텐츠를 추가하는 ‘::before 요소, ::after 요소’
::before 요소와 ::after 요소를 사용하면 지정한 요소의 내용 앞뒤에 스타일을 넣을 수 있습니다. 이 요소를 사용하면 요소의 앞뒤에 텍스트나 이미지를 넣을 수 있습니다.
👍 예시
li.new::after {
content:"NEW!!";
font-size:x-small;
padding:2px 4px;
margin: 0 10px;
border-radius:2px;
background:#f00;
color:#fff;
}
</style>
...
<div class="container">
<h1>제품 목록</h1>
<ul>
<li class="new">제품 A</li>
<li>제품 B</li>
<li>제품 C</li>
<li class="new">제품 D</li>
</ul>
</div>
정리
- 가상 클래스
| 종류 | 스타일 적용 대상 |
|---|---|
| :link | 방문하지 않은 링크 |
| :visited | 방문했던 링크 |
| :hover | 지정한 요소에 마우스 포인터를 올려놓을 때 |
| :active | 지정한 요소를 활성화했을 때 |
| :focus | 지정한 요소에 초점이 맞춰졌을 때 |
| :target | 앵커 대상 (목적지) |
| :enabled | 지정한 요소가 사용할 수 있는 상태일 때 |
| :disabled | 지정한 요소가 사용할 수 없는 상태일 때 |
| :checked | 선택한 요소 |
| :not | 지정한 요소가 아닌 요소 |
- 구조 가상 클래스
| 종류 | 스타일 적용 대상 |
|---|---|
| :only-child | 부모 안에 자식 요소가 하나뿐일 때 자식 요소 |
| A:only-type-of | 부모 안에 A 요소가 하나뿐일 때 |
| :first-child | 부모 안에 있는 모든 요소 중에서 첫번째 자식 요소 |
| :last-child | 부모 안에 있는 모든 요소 중에서 마지막 자식 요소 |
| A:first-of-type | 부모 안에 있는 A 요소 중에서 첫번째 요소 |
| A:last-of-type | 부모 안에 있는 A 요소 중에서 마지막 요소 |
| :nth-child(n) | 부모 안에 있는 모든 요소 중에서 n번째 자식 요소 |
| :nth-last-child(n) | 부모 안에 있는 모든 요소 중에서 끝에서 n번째 자식 요소 |
| A:nth-of-type(n) | 부모 안에 있는 A 요소 중에서 n번째 요소 |
| A:nth-last-of-type(n) | 부모 안에 있는 A 요소 중에서 끝에서 n번째 요소 |
- 가상 요소
| 선택자 | 스타일 적용 대상 |
|---|---|
| ::first-line | 첫번째 줄 |
| ::first-letter | 첫번째 줄의 첫번째 글자 |
| ::before | 특정 요소의 앞 |
| ::after | 특정 요소의 뒤 |
Leave a comment