가상 선택자

mandoo·2022년 10월 27일

HTML/CSS

목록 보기

10/12

비전공자를 위한 HTML/CSS 강의 공부 기록입니다.

1. 가상 클래스(pseudo class)

가상 클래스는 미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스를 말한다.
가상 클래스는 :(콜론) 기호를 써서 나타낸다.

HTML과 CSS는 정적인 언어이기 때문에 특정 이벤트에 동적으로 변화하는 스타일을 적용하려면 다른 언어를 사용해야 한다.
이는 개발 비용이 추가되는 일이기 때문에 CSS는 흔하게 사용되는 여러 패턴에 대해 가상 클래스를 사전에 정의해놓고 이를 활용하여 동적 이벤트에 대응할 수 있게 하였다.

a:hover {
    color: orange;
}

위 코드는 <a> 태그에 마우스를 올리면 글자 색상이 주황색으로 변하는 예시이다.

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

문서 구조와 관련된 가상 클래스는 first-child와 last-child 가상 클래스 선택자이다.

:first-child : 선택자의 부모의 첫 번째 자식 요소 선택
:last-child : 선택자의 부모의 마지막 자식 요소 선택

li:first-child { color: red; }
li:last-child { color: blue; }

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
</ul>

HTML
CSS
JS

자식 요소를 선택하는 가상 클래스 선택자는 부모 클래스가 아니라 자식 클래스이니 유의해야 한다.

:first-child === :nth-child(1)과 같다.

li:nth-child(2) { color: green; }

만약 2번째 자식 요소 CSS 를 선택하고 싶다면 위 코드를 사용하면 된다.

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

앵커 요소와 관련된 가상 클래스로는 :link와 :visited가 있다.

:link : 하이퍼링크(href 속성이 존재하는 앵커)이면서 아직 방문하지 않은 앵커
:visited : 이미 방문한 하이퍼링크를 의미

a:link { color: blue; }
a:visited { color: gray; }

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

조건에 맞는 상황이 되는 요소들에 모두 사용할 수 있지만 주로 <a> 클래스에 많이 쓰인다.

:focus: 현재 입력 초점을 가진 요소에 적용
:hover: 마우스 포인터가 있는 요소에 적용
:active: 사용자 입력으로 활성화된 요소에 적용

a:focus { background-color: yellow; }
a:hover { font-weight: bold; }
a:acitve { color: red; }

4) 기타 가상 클래스

2. 가상 요소

가상 요소는 HTML 코드에 존재하지 않는 구조 요소에 스타일을 부여할 수가 있다.
가상 클래스와 마찬가지로 :(콜론) 기호를 써서 나타내며,
주로 요소의 앞이나 뒤에 별도의 내용을 추가하는 데 쓰인다.

CSS3부터는 가상 클래스와 가상 요소를 구분하기 위해 가상 요소에는 ::(더블 콜론) 기호를 사용하기로 했습니다.
하지만 하위 브라우저에서 :: 문법을 지원하지 않는 문제가 있으므로 상황에 따라 : 기호를 사용하셔야 합니다.

p::before {
  content: "[before 위치]";
  padding: 5px;
  border: 3px solid rgba(250,0,0,0.5);
}

p::after {
  content: "[afer 위치]";
  padding: 5px;
  border: 3px solid rgba(250,0,0,0.5);
}

p::first-line {
  background-color: yellow;
}

p::first-letter {
  font-size: 30px;
  font-weight: bold;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,<br> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,<br> quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>