CSS 가상 클래스와 가상 요소 정리하기

이 글에서 다루는 내용

CSS 선택자는 HTML 요소를 선택해서 스타일을 적용할 때 사용합니다.

그런데 실제 웹페이지에서는 단순히 태그나 class만 선택하는 것으로 부족할 때가 있습니다.

예를 들어 버튼에 마우스를 올렸을 때 색을 바꾸고 싶을 수 있습니다.

또는 첫 번째 항목만 다르게 꾸미고 싶을 수도 있습니다.

이럴 때 사용하는 것이 가상 클래스와 가상 요소입니다.

이번 글에서는 자주 사용하는 가상 클래스와 가상 요소를 정리합니다.

• :hover
• :focus
• :first-child
• ::before
• ::after

가상 클래스와 가상 요소는 왜 필요할까?

HTML 코드에는 직접 적혀 있지 않지만, 특정 상황이나 위치를 기준으로 스타일을 적용하고 싶을 때가 있습니다.

예를 들어 다음 버튼이 있다고 가정합니다.

<button>확인</button>

기본 상태에서는 검은색 버튼으로 보이게 하고, 마우스를 올렸을 때는 회색으로 바꾸고 싶을 수 있습니다.

이때 HTML을 새로 만들 필요는 없습니다.

CSS에서 :hover를 사용하면 됩니다.

button:hover {
  background-color: gray;
}

이처럼 가상 클래스와 가상 요소는 HTML을 더 복잡하게 만들지 않고도 다양한 스타일을 적용할 수 있게 도와줍니다.

가상 클래스란?

가상 클래스는 요소의 상태나 조건을 기준으로 선택하는 문법입니다.

예를 들어 마우스를 올린 상태, 입력창이 선택된 상태, 첫 번째 자식 요소 같은 조건을 고를 수 있습니다.

가상 클래스는 콜론 하나 :를 사용합니다.

선택자:가상클래스 {
  속성: 값;
}

예시입니다.

button:hover {
  color: white;
}

여기서 :hover는 버튼에 마우스를 올린 상태를 의미합니다.

1. :hover

:hover는 사용자가 요소 위에 마우스를 올렸을 때 적용됩니다.

버튼, 링크, 카드 등에 자주 사용합니다.

<button class="button">저장</button>

.button {
  background-color: black;
  color: white;
}

.button:hover {
  background-color: gray;
}

위 코드에서는 기본 버튼 배경색이 검은색입니다.

마우스를 버튼 위에 올리면 배경색이 회색으로 바뀝니다.

:hover는 언제 사용할까?

사용자가 클릭할 수 있는 요소라는 느낌을 줄 때 사용합니다.

예를 들어 메뉴, 버튼, 카드에 마우스를 올렸을 때 색이 바뀌면 사용자는 “이 부분을 누를 수 있구나”라고 이해하기 쉽습니다.

2. :focus

:focus는 사용자가 입력창이나 버튼 같은 요소를 선택했을 때 적용됩니다.

주로 input, textarea, button 같은 요소에서 사용합니다.

<input class="input" type="text" placeholder="이름을 입력하세요">

.input {
  border: 1px solid #ccc;
}

.input:focus {
  border-color: blue;
  outline: none;
}

위 코드에서는 입력창을 클릭했을 때 테두리 색이 파란색으로 바뀝니다.

:focus는 왜 중요할까?

:focus는 사용자가 지금 어디에 입력하고 있는지 알려줍니다.

특히 키보드로 웹페이지를 이동하는 사용자에게 중요합니다.

입력창이 많을수록 현재 선택된 위치가 눈에 잘 보여야 합니다.

3. :first-child

:first-child는 부모 요소 안에서 첫 번째 자식인 요소를 선택합니다.

<ul>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ul>

li:first-child {
  color: red;
}

위 코드는 첫 번째 li만 빨간색으로 만듭니다.

즉, 첫 번째 항목에만 스타일이 적용됩니다.

:first-child 주의할 점

:first-child는 “첫 번째로 등장한 해당 태그”라는 뜻이 아니라, “부모 안에서 첫 번째 자식인지”를 확인합니다.

<div>
  <p>첫 번째 문장</p>
  <span>두 번째 요소</span>
</div>

span:first-child {
  color: red;
}

위 코드는 적용되지 않습니다.

왜냐하면 span은 부모 안에서 첫 번째 자식이 아니기 때문입니다.

첫 번째 자식은 p 태그입니다.

가상 요소란?

가상 요소는 HTML에 실제로 적지 않은 요소를 CSS로 만들어 꾸미는 문법입니다.

대표적으로 ::before와 ::after가 있습니다.

가상 요소는 콜론 두 개 ::를 사용합니다.

선택자::가상요소 {
  속성: 값;
}

쉽게 말하면 가상 클래스는 “상태를 고르는 것”이고, 가상 요소는 “가짜 요소를 만들어 붙이는 것”입니다.

4. ::before

::before는 선택한 요소의 내용 앞에 가상 요소를 만듭니다.

<p class="notice">중요 안내입니다.</p>

.notice::before {
  content: "※ ";
  color: red;
}

브라우저에는 다음처럼 보입니다.

※ 중요 안내입니다.

HTML에는 ※ 문자를 직접 쓰지 않았지만, CSS의 ::before가 앞에 추가한 것입니다.

::before에서 content는 필수에 가깝다

::before를 사용할 때는 보통 content 속성을 함께 사용합니다.

.notice::before {
  content: "NEW";
}

content가 없으면 화면에 보이지 않는 경우가 많습니다.

5. ::after

::after는 선택한 요소의 내용 뒤에 가상 요소를 만듭니다.

<a class="link" href="#">자세히 보기</a>

.link::after {
  content: " →";
}

브라우저에는 다음처럼 보입니다.

자세히 보기 →

HTML에는 화살표를 직접 쓰지 않았지만, CSS에서 뒤에 붙인 것입니다.

::before와 ::after 차이

간단히 기억하면 됩니다.

before는 앞에 붙이고, after는 뒤에 붙입니다.

가상 클래스와 가상 요소 차이

가상 클래스와 가상 요소는 이름이 비슷해서 헷갈리기 쉽습니다.

하지만 역할이 다릅니다.

쉽게 말하면 가상 클래스는 “언제 꾸밀지”를 정하고, 가상 요소는 “무엇을 추가해서 꾸밀지”를 정합니다.

전체 예시

HTML 코드입니다.

<ul class="menu">
  <li>홈</li>
  <li>게시글</li>
  <li>문의</li>
</ul>

<button class="button">저장</button>

<p class="notice">점검 시간이 예정되어 있습니다.</p>

CSS 코드입니다.

.menu li:first-child {
  font-weight: bold;
}

.button {
  background-color: black;
  color: white;
}

.button:hover {
  background-color: gray;
}

.button:focus {
  outline: 2px solid blue;
}

.notice::before {
  content: "※ ";
  color: red;
}

.notice::after {
  content: " 확인해 주세요.";
}

각 코드의 의미는 다음과 같습니다.

정리

가상 클래스는 요소의 상태나 조건을 기준으로 선택합니다.

대표적으로 :hover, :focus, :first-child가 있습니다.

가상 요소는 HTML에 없는 가짜 요소를 CSS로 만들어 꾸밉니다.

대표적으로 ::before, ::after가 있습니다.

가상 클래스는 콜론 하나 :를 사용하고, 가상 요소는 콜론 두 개 ::를 사용합니다.

처음에는 이렇게 기억하면 됩니다.

:  상태나 조건을 선택
:: 가짜 요소를 만들어 추가

이 차이를 이해하면 버튼 효과, 입력창 효과, 리스트 꾸미기, 작은 장식 요소를 훨씬 깔끔하게 만들 수 있습니다.