[css] 가상 클래스(pseudo-class)와 가상 요소 선택자 (pseudo-element)

 

 

가상 선택자

CSS에는 가상 요소(:pseudo-element)와 가상 클래스(:pseudo-class)가 있다. 이것들을 사용해서 html 문서의 수정 없이 CSS만으로 디자인적 요소를 추가할 수 있어 html 문서에 쓸데없는 태그를 사용하여 화면 리더기 등에 쓸데없는 정보가 읽히거나 불필요한 클래스를 남발해 코드 가독성을 낮추지 않게 한다.

 

 

    선택자:가상클래스 { property: value; }

 

 

앵커 가상 클래스

앵커 가상 클래스는 화면의 특정 요소에 커서가 향했을 때 특정 디자인을 입혀주는 등 어떤 요소에 동적인 스타일을 입혀준다.

앵커 가상 클래스에서 가장 자주 쓰이는 패턴이다. :link는 아직 방문하지 않은 링크를 나타낸다. 다음을 사용해서 아직 방문하지 않은 링크를 파란색으로, 방문한 링크는 밑줄 없이 보라색으로 표현할 수 있다.

 

 

    a:link {
        color: blue;
    }
    a:visited {
        color:purple;
        text-decoration: none;
    }

몇가지 앵커 가상 클래스는 사용자의 행동에 영향을 받는다.

    a:hover {
        color: red;
    }
    a:active {
        color: gray;
    }
    a:focus {
        color: yellow;
    }

 

 

• :hover : 사용자가 해당 요소에 커서를 가져다 댔을 때
• :active : 요소가 활성화 되었거나 클릭 되었을 때
• :focus : 해당 요소에 키보드 포커스가 맞춰졌을 때

 

순서에 따른 가상 클래스

가상 클래스의 장점 중 하나는 오직 CSS를 주기 위해 클래스를 추가할 필요가 없다는 것이다.

 

 

• :first-child : li 중 첫번쩨 요소에 해당 CSS를 적용한다.
• :last-child : li 중 마지막에 해당 CSS를 적용한다.
• :nth-child(n) : li 중 n번쩨 요소에 해당 CSS를 적용한다.

    ol li:first-child {
        border-top: none;
    }

    ol li:last-child {
        border-top: none;
    }

    ol li:nth-child(2) {
        border-top: none;
    }

가상 요소

 

가상 클래스가 실제로 존재하는 요소에 클래스 추가 없이 디자인을 입히기 위한 것이라면, 가상 요소는 아예 실제로 존재하지 않는 요소를 만들게 해준다.

    선택자::가상요소 { property: value; }

• ::first-line : 해당 가상 요소는 텍스트의 첫번째 줄에만 특정 스타일을 입혀준다. 문장의 첫 줄은 상위 요소의 크기나 브라우저의 크기에 따라 달라질 수 있으니 주의하자.

    p::first-line {
        color: #ff0000;
        font-variant: small-caps;
    }

 

• ::first-letter : 이 요소는 텍스트의 첫 문자에 특정 스타일을 입혀준다. 미디엄 글 맨 상단에 있는 이런 스타일을 입힐 때 좋다.

 

    p::first-letter {
        color: #ff0000;
        font-size: xx-large;
    }

 

::before 과 ::after 요소

이 요소들은 생성된 콘텐츠의 내부에 삽입된다. 이 요소는 특정 요소를 풍부하게 하는데 좋다. 보통 이미지나 글, 그라데이션 등을 삽입하는 경우가 많다.

 

    h1::before {
        content: 'hello';
    }
    h1::after {
        content: url("images/marker-right.gif");
    }

 

이전에 구현했던 박스 모델도 이 요소를 이용해 만들었다.

 

 

 

위 선택자들을 직접 체험해 보고 싶다면 다음 사이트에 들어가 try it yourself를 통해 체험해보자.

• 가상 클래스

https://www.w3schools.com/css/css_pseudo_classes.asp

CSS Pseudo-classes

• 가상 요소

https://www.w3schools.com/css/css_pseudo_elements.asp

CSS Pseudo-elements