V. 고급선택자 - 3. 가상 클래스와 가상 요소

Hush 2022. 6. 6. 19:34

선택자로 스타일을 지정하기 어려운 대상이 있다. 메뉴의 몇 번째 항목을 지정하거나, 단락의 첫 번째 글자만 지정할 경우이다. 이럴 때는 클래스 이름 앞에 콜론을 한개만 붙여 표시하는 가상 클래스와 두개 붙어 표시하는 가상 요소를 사용하면 해결할 수 있다.

사용자 동작에 반응하는 가상 클래스

사용자가 웹 요소를 클릭하거나 마우스 포인터를 올려놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들고 싶다면 가상 클래스 선택자를 사용하자.

다음은 자주 사용하는 가상 클래스 선택자이다.

①방문하지 않은 링크에 스타일을 적용하는 ':link 가상 클래스 선택자'

웹 문서의 링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용한다.
텍스트 링크는 기본적으로 파란색 글자와 밑줄로 표시된다.
이때 링크의 밑줄을 없애거나 색상을 바꾸려면 ':link 선택자'를 사용한다.

②방문한 링크에 스타일을 적용한 ':visited 가상 클래스 선택자'
웹 문서의 링크 중에서 한 번 이상 방문한 링크에 스타일을 적용한다.

한 번 이상 방문한 텍스트 링크는 보라색이 기본값이다.

이때 사용자가 방문한 텍스트 링크와 색상이 달라지지 않게 하라면 이 선택자를 사용해 조절한다.

③특정 요소에 마우스 포인터를 올려놓으면 스타일을 적용하는 ':hover 가상 클래스 선택자

이 선택자는 웹 요소 위로 마우스포인터를 올려놓을 때 스타일을 적용한다.

즉, 이 가상 클래스 선택자를 응용하면 이미지 위로 마우스 포인터를 올려놓았을 때 다른 이미지로 바뀌거나, 메인 메뉴 위로 마우스 포인터를 올려놓았을 때 서브메뉴가 나타나는 효과를 만들 수 있다.

④웹 요소를 활성화했을 때 스타일을 적용하는 ':active 가상 클래스 선택자'

이 선택자는 웹 요소의 링크나 이미지 등을 활성화했을 때, 즉 클릭했을 때 스타일을 지정한다.

예를 들어 어떤 웹 요소의 링크를 클릭하는 순간의 스타일을 지정할 수 있다.

⑤웹 요소에 초점이 맞추어졌을 때 스타일을 적용하는 ':focus 가상 클래스 선택자'

이 선택자는 웹 요소에 초점이 맞추어졌을 때 스타일을 적용한다.

예를 들어 텍스트 필드 안에 마우스 포인터를 올려놓건, 웹 문서에서 Tab 을 눌러 입력 커서를 이동했을 때 스타일을 지정한다.

지금까지 설명한 1~4번의 가상 클래스 선택자는 메뉴 링크에서 자주 사용하는데 이때 다음과 같은 순서로 정의해야 한다.

이 순서가 바뀌면 스타일을 정의하더라도 제대로 적용되지 않는다.

1. link 2. visited 3. hover 4. active

다음은 가상 클래스 선택자를 사용해서 메뉴의 텍스트를 상황에 따라 다르게 표현하는 예제이다.

먼저 링크와 방문했던 링크의 텍스트는 밑줄을 없앤다.

그리고 링크 위로 마우스 포인터를 올려놓으면 짙은 회색 배경에 힌색 글자로 바뀌고,

클릭하는 순간 배경이 빨간색으로 바뀐다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
        <style>
            .navi ul li {
                float: left;
                width: 150px;
                padding: 10px;
            }
            .navi a:link, .navi a:visited {
                display: block;
                font-size: 14px;
                color: black;
                padding: 10px;
                text-decoration: none;
                text-align: center;
            }
            .navi a:hover, .navi a:focus{
                background-color: #222;
                color: white;
            }
            .navi a:active{
                background-color: #f00;
            }
        </style>
    </head>
    <body>
        <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>
    </body>
</html>

요소 상태에 따른 가상 클래스

웹 사이트나 애플리케이션 화면에서 요소의 상태에 따라 스타일을 적용할 수 있는데, 이때 가상 클래스 선택자를 사용한다.

-앵커 대상에 스타일을 적용하는 ':target 가상 클래스 선택자'

문서에서 같은 사이트나 다른 사이트의 페이지로 이동할 때에는 링크를 이용하고, 같은 문서 안에서 다른 위치로 이동할 때에는 앵커를 이용한다. (목적지의 요소에 id를 부여하고, 앵커에는 href의 속성값으로 "#목적지아이디" 를 지정하면 앵커가 완성된다.)

이때 :target 선택자를 사용하면 앵커로 연결된 부분, 즉 앵커의 목적지가 되는 부분의 스타일을 쉽게 적용할 수 있다.

앵커를 이용해 intro라는 위치로 링크할 경우 intro 요소의 스타일을 바꾸고 싶다면 :target 선택자를 사용해 다음 예제와 같이 작성할 수 있다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
        <style>
            p {
                white-space: normal;
                word-break: break-all;
            }
            #d:target{
                background-color: blue;
                color: white
            }
        </style>
    </head>
    <body style="width:200px;">
        <ul>
            <li><a href="#a">A</a></li>
            <li><a href="#b">B</a></li>
            <li><a href="#c">C</a></li>
            <li><a href="#d">D</a></li>
        </ul>
        <p id="a">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
        <p id="b">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
        <p id="c">ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</p>
        <p id="d">ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p>
    </body>
</html>

요소의 사용 여부에 따라 스타일을 적용하는 ':enabled와 :disabled 가상 클래스 선택자;

해당 요소가 사용 가능한 상태일 때 스타일을 지정하려면 :enabled 선택자를 사용하고, 반대로 사용할 수 없는 상태일 때 스타일을 지정하려면 : disabled 선택자를 사용한다.

예를 들어 텍스트 영역 필드(textarea)를 사용해 회원 약관을 보여 줄 때는 사용자가 입력할 수 없도록 disabled 속성을 지정해야 한다. 이때 :disabled 선택자를 사용하면 이런 텍스트 영역 필드의 스타일을 쉽게 적용할 수 있다.

선택한 항목의 스타일을 적용하는 ':checked 가상 클래스 선택자'

폼의 라디오 박스나 체크 박스에서 선택된 항목에는 checked 라는 속성이 추가됩니다. 이렇게 checked 속성이 있는 요소의 스타일을 지정할 때 :checked 선택자를 사용하면 편리합니다.

예를 들어 라디오 버튼을 클릭했을 때 레이블을 빨간색 굵은 글자로 바구려면 다음과 같이 입력합니다. 여기서는 <input> 과 <label> 태그가 형제 관계이므로 + 선택자를 사용합니다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
        <style>
            #signup input:checked + label{
                color: red;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <form action="" id="signup">
            <input type="radio" name="room" value="basic" id="basic">
            <label for="basic">기본형(최대 2인)</label>
            <input type="radio" name="room" value="family" id="family">
            <label for="family">가족형(최대 4인)</label>
        </form>
    </body>
</html>

특정 요소를 제외하고 스타일을 적용하는 ':not 가상 클래스 선택자'

:not 선택자는 이름에서도 알 수 있듯이 부정의 의마기 있다. 여기서 not은 '괄호 안에 있는 요소를 제외한'이라는 의미이다.

폼에 텍스트 필드, 전화번호 필드, 라디오 버튼이 있다고 하자. 이 중에서 텍스트와 전화번호 필드에 스타일을 적용하려면 어떻게 하면 될까?

속성 선택자를 사용해서 텍스트와 전화번호 필드를 선택한 뒤 스타일을 부여하는 것도 물론 가능할 것이다.

하지만 :not 선택자를 사용하면 더 편리하게 이 작업을 수행할 수 있다.

라디오 필드가 아닌 필드를 선택하는 것이다.

아래 두 코드는 결과적으로 같은 기능을 수행한다.

#signup input[type=text], input[type=tel] {
border: 1px solid white;
padding: 5px;
width: 200px;
}

#signup input:not([type=radio]){
    border: 1px solid white;
    padding: 5px;
    width: 200px;
}

구조 가상 클래스

구조 가상 클래스란 웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 적용할 때 사용하는 가상 클래스 선택자이다.

특정 위치의 자식 요소 선택하기

웹 문서에서 특정 요소에 스타일을 적용하려면 보통 class나 id 선택자를 사용한다. 하지만 요소가 여러 개 나열되어 있는 경우에는 class나 id를 사용하지 않고도 스타일을 지정할 요소가 몇 번째인지를 따져서 스타일을 적용할 수 있다.

다음 표는 구조 가상 클래스 선택자의 종류를 정리한 것이다.

종류	설명
: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번째 요소를 선택합니다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
        <style>
            .contents :nth-child(3){
                color: red;
            }
            .contents p:nth-of-type(3){
                color: blue;
            }
        </style>
    </head>
    <body>
        <div class="contents">
            <h1>제목 1</h1>
            <p>문단 1</p>
            <p>문단 2</p>
            <h1>제목 2</h1>
            <p>문단 3</p>
            <p>문단 4</p>
        </div>
    </body>
</html>

수식을 사용해 위치 지정하기

위치를 지정할 때 :nth-child(n) 선택자처럼 위치를 정확히 알려 줄 수도 있지만 1,3,5번쨰 처럼 위치가 계속 바뀐다면 반복된 규칙을 찾아서 an+b 처럼 수식을 사용할 수도 있다.

이때 n값은 0부터 시작한다.

또는 홀수 번째에 스타일을 줄 때는 :nth-child(odd), 짝수째에는 :nth-child(even)을 사용할 수 있다.

/* 홀수일때 */
div p:nth-child(odd), div p:nth-child(2n+1)

/* 짝수일때 */
div p:nth-child(even), div p:nth-child(2n)

가상 요소

가상 클래스가 웹 문서의 여러 요소 중에서 원하는 요소를 선택한다면, 가상 요소는 문서 안의 특정 부분에 스타일을 지정하기 위해 가상으로 요소를 만들어 추가한다.

가상 요소를 만들어 사용하는 이유는 특별히 화면에 보이는 부분을 꾸밀 때 불필요한 태그를 사용하지 않도록 하기 위한 것이다.

가상 요소는 가상 클래스와 구별하도록 가상 요소 이름 앞에 콜론 두개를 붙여서 사용한다.

다음은 자주 사용하는 가상 요소이다.

첫 번째 줄, 첫 번째 글자에 스타일을 적용하는 '::first-line 요소, ::first-letter 요소'

::first-line 요소와 ::first-letter 요소를 사용하면 지정한 요소의 첫 번째 줄이나 첫 번째 글자에 스타일을 적용할 수 있다.

::first-letter 요소는 해당 요소의 첫 번째 글자를 가리키는 데, 첫 번째 글자는 반드시 첫 번째 줄에 있어야 한다.

만약 <p> 태그 안에 <br> 태그가 있어서 첫 번째 글자가 첫 번째 줄에 없을 경우에는 적용할 수 없다.

내용 앞뒤에 콘텐츠를 추가하는 '::before 요소, ::after 요소'

::before 요소와 ::after 요소를 사용하면 지정한 요소의 내용 앞뒤에 스타일을 넣을 수 있다.

이 요소를 사용하면 요소의 앞뒤에 텍스트나 이미지 등을 추가할 수 있다.

다음은 ::after 요소를 사용해서 제품 목록에 'NEW!!' 라는 텍스트를 추가한 예제입니다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
        <style>
            ul li.new::after {
                content: "NEW!!";
                font-size: x-small;
                padding: 2px 4px;
                margin: 0 10px;
                border-radius: 2px;
                background: red;
                color: white;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1>제품 목록</h1>            
            <ul>
                <li class="new">제품 A</li>
                <li>제품 B</li>
                <li>제품 C</li>
                <li class="new">제품 D</li>
            </ul>
        </div>
    </body>
</html>

저작자표시 (새창열림)