[CSS 이해하기] 가상 선택자

[CSS 이해하기] 가상 선택자
/category/%EA%B3%B5%EB%B6%80/HTML%EA%B3%BC%20CSS

2022. 12. 15. 13:52

가상 선택자에는 가상 클래스와 가상 요소가 있다.

가상 클래스 선택자는 특정 요소의 상태를 미리 추정해서(어떤 동작이나 상태일 경우에) 가상의 클래스로 스타일을 적용할 수 있는 선택자이다.

class 선택자와 조금 다르지만, 마치 class 선택자처럼 동작하기 때문에 가상 클래스 선택자라고 부른다.

가상 요소는 가상 클래스와 비슷하다. 다만 가상 클래스가 아닌 요소라는 점만 다르다.

가상 요소는 현재 문서 내에 존재하지 않는 구조, 즉 문서에 존재하지 않는 요소에 내용을 추가할 수 있고, 스타일을 부여할 수 있다.

가상 클래스

가상 클래스는 미리 정의해놓은 상황에 적용되도록 약속한 보이지 않는 클래스이다.

우리가 직접 요소에 클래스를 선언하는 것은 아니고, 약속된 상황이 되면 브라우저 스스로 클래스를 적용한다.

예를 들어 p 태그가 있다고 하자.

이 p 태그에 마우스 커서를 올렸을 때에만 글자가 빨간색으로 바뀌게 하고 싶다.

가상 클래스를 모르는 상태에서는 방법이 없다(자바 스크립트도 모른다고 가정).

p 태그에 class를 선언해서 CSS로 color를 지정해도, '마우스 커서를 올렸을 때에만'이라는 조건을 만족할 수 없다.

HTML과 CSS는 정적인 언어이기 때문에 이러한 동작을 처리할 수가 없다.

어쩔 수 없이 다른 언어들을 사용해야 하는데 이는 비용이 드는 일이다.

그래서 다른 언어를 사용할 필요 없이 CSS에서 흔하게 사용되는 여러가지 패턴에 대해 미리 정의해놓고, 가상 클래스로 제어할 수 있게 했다.

:pseudo-class {
	property: value;
}

위 코드처럼 가상 클래스는 :(콜론) 기호를 써서 나타낸다.

가상 클래스를 이용하면 특정 동작에 다른 언어 사용없이 CSS로만 처리가 가능하여 훨씬 효율적이다.

가상 클래스의 종류는 여러가지가 있다. 아래 링크를 참조하자.

https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes

의사 클래스 - CSS: Cascading Style Sheets | MDN

CSS 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을

developer.mozilla.org

문서 구조와 관련된 가상 클래스

문서 구조와 관련된 가상 클래스로 first-child와 last-child 선택자에 대해 알아보자.

first-child 선택자는 첫 번째 자식 요소를 선택한다.

last-child 선택자는 마지막 자식 요소를 선택한다.

<!--HTML파일-->
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>가상 선택자</title>
        <link rel="stylesheet" href="css/가상_선택자.css">
    </head>
    <body>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
        </ul>
    </body>
</html>

/*가상_선택자.css파일*/
li:first-child { color: red; }
li:last-child { color: blue; }

ul 태그의 첫 번째 <li>와 마지막 <li>에 가상 클래스가 적용된다.

실제 <li>에는 class 속성이 없지만 실제로는 아래와 같이 동작하게 된다.

<ul>
    <li class="first-child">HTML</li>
    <li>CSS</li>
    <li class="last-child">JS</li>
</ul>

앵커 요소와 관련된 가상 클래스

앵커 요소와 관련된 가상 클래스로 :link와 :visited를 살펴보자.

:link는 하이퍼 링크이면서 아직 방문하지 않은 앵커를 뜻한다.

:visited는 이미 방문한 하이퍼 링크를 뜻한다.

<!--HTML 파일-->
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>가상 선택자</title>
        <link rel="stylesheet" href="css/가상_선택자.css">
    </head>
    <body>
        <a href="https://www.instagram.com/">인스타</a>
    </body>
</html>

/*가상_선택자.css파일*/
a:link { color: blue; }
a:visited { color: gray; }

인스타그램 사이트 링크를 클릭하지 않은 상태에서는 :link 가상 선택자에서 설정한 것 처럼 파란색 글자로 보인다.

이 링크를 클릭해보면

회색으로 변하는 것을 확인할 수 있다.

사용자 동작과 관련된 가상 클래스

이 클래스도 주로 <a>에 사용된다.

<a>에만 사용되는 것은 아니며, 이 조건에 맞는 상황이 되는 요소들은 다 사용이 가능하다.

:focus, :hover, :active에 대해서 알아보자.

:focus는 현재 입력 초점을 가진 요소에 적용한다.

:hover는 마우스 포인터가 있는 요소에 적용한다.

:active는 사용자 입력으로 활성화된 요소에 적용한다.

<!--HTML 파일-->
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>가상 선택자</title>
        <link rel="stylesheet" href="css/가상_선택자.css">
    </head>
    <body>
        <a href="https://www.naver.com">네이버</a>
    </body>
</html>

/*가상_선택자.css파일*/
a:focus { background-color: yellow; }
a:hover { font-weight: bold; }
a:active { color: red; }

아무 동작을 하지 않았을 때 네이버 링크의 모습이다.

여기서 tab키를 사용해서 초점을 옮겨보면

:focus에서 설정한 것 처럼 배경색이 노란색으로 변하는 것을 확인할 수 있다.

이번에는 네이버 링크에 커서를 올려보자.

:hover에서 설정한 것 처럼 글자가 bold처리 된 것을 확인할 수 있다.

마지막으로 네이버 링크를 클릭해보자.

:active에서 설정한 것 처럼 글자색이 빨간색으로 변한 것을 확인할 수 있다.

클릭하면서 초점이 네이버 링크에 가게 되어 :focus도 동작했다.

가상 요소

가상 요소는 HTML 코드에 존재하지 않는 구조 요소에 스타일을 부여할 수 있다.

가상 요소도 가상 클래스처럼 문서 내에 보이지 않지만, 미리 정의한 위치에 삽입되도록 약속되어있다.

선언 방법은 가상 클래스와 동일하게 콜론 기호를 사용하며,

CSS3버전부터는 가상 클래스와 가상 요소를 구분하기 위해 가상 요소에는 ::(더블 콜론) 기호를 사용하기로 했다.

하지만 하위 브라우저에서 :: 문법을 지원하지 않는 경우가 있으니 때에 따라서 : 기호를 사용해야 한다.

::pseudo-element {
	property: value;
}

사용법은 가상 클래스와 거의 비슷하다.

가상 요소도 여러 종류가 있으니 아래 링크에서 확인해보자.

https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements

의사 요소 - CSS: Cascading Style Sheets | MDN

CSS 의사 요소(가상 요소)는 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있습니다. 예를 들어 ::first-line (en-US)을 사용하면 문단 첫 줄의 글씨체만 바꿀 수 있습니다.

developer.mozilla.org

before, after, first-line, first-latter

가상 요소들 중에서 before, after, first-line, first-latter에 대해 살펴보자.

::befor는 가장 앞에 요소를 삽입한다.

::after는 가장 뒤에 요소를 삽입한다.

::frist-line은 요소의 첫번째 줄(브라우저 기준)에 있는 텍스트에 적용한다.

::first-latter는 블록 레벨 요소의 첫번째 문자에 적용한다.

<!--HTML 파일-->
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>가상 요소</title>
        <link rel="stylesheet" href="css/가상_요소.css">
    </head>
    <body>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit vel molestiae adipisci debitis alias fuga dolorem maxime quaerat! Porro, repellendus excepturi cumque natus assumenda alias ex obcaecati! Qui, repellat quae.Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit vel molestiae adipisci debitis alias fuga dolorem maxime quaerat! Porro, repellendus excepturi cumque natus assumenda alias ex obcaecati! Qui, repellat quae.Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit vel molestiae adipisci debitis alias fuga dolorem maxime quaerat! Porro, repellendus excepturi cumque natus assumenda alias ex obcaecati! Qui, repellat quae.
        </p>
    </body>
</html>

/*가상_요소.css파일*/
p:before { color: red; content: "before 가상 요소를 활용한 내용"; }
p:after { color: blue; content: "after 가상 요소를 활용한 내용"; }

:before과 :after는 내용이 없기 때문에 content 속성을 사용해서 내용을 넣어주어야 한다.

::before과 ::after가 각각 <p>의 앞 뒤에 삽입된 것을 확인할 수 있다.

이번에는 ::first-line을 예제에서 확인해보자.

/*가상_요소.css파일*/
p:first-line { color: yellow; }

브라우저에서의 첫번째 줄 글자색이 노랑색으로 변한 것을 확인할 수 있다.

마지막으로 ::first-latter를 확인해보자.

/*가상_요소.css*/
p:first-letter { font-size: 3em; }

첫번째 문자가 3배 커진 것을 확인할 수 있다.

부스트코스의 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/cs120

비전공자를 위한 HTML/CSS

부스트코스 무료 강의

www.boostcourse.org

'공부 > HTML과 CSS' 카테고리의 다른 글

[CSS 이해하기] 상속 (0)	2022.12.15
[CSS 이해하기] 구체성 (0)	2022.12.15
[CSS 이해하기] 선택자 (0)	2022.12.14
[CSS 이해하기] CSS 문법과 적용 (0)	2022.12.13
[CSS 이해하기] CSS 소개 (0)	2022.12.13

김철용 기록소

CATEGORIES