Computer >> 컴퓨터 >  >> 프로그래밍 >> CSS

CSS 의사 클래스(Pseudo-Class)와 의사 요소(Pseudo-Element)의 차이점 완벽 정리

CSS를 배우다 보면 의사 클래스(Pseudo-Class)와 의사 요소(Pseudo-Element)를 자주 접하게 됩니다. 두 개념은 이름이 비슷해 혼동하기 쉽지만, 역할과 문법이 분명히 다릅니다. 이 글에서는 두 개념의 차이점을 문법과 실제 예제를 통해 명확하게 정리해 드립니다.

의사 클래스(Pseudo-Class)란?

의사 클래스는 선택자(selector)가 처한 상태(state)를 표현할 때 사용합니다. 대표적인 예로 :hover, :active, :last-child 등이 있으며, 항상 콜론 하나(:)로 시작한다는 특징이 있습니다.

예를 들어 마우스 커서를 올렸을 때(:hover), 클릭하는 순간(:active), 형제 요소 중 마지막일 때(:last-child)처럼 특정 조건이나 상황에 따라 스타일을 적용할 수 있습니다.

의사 클래스의 기본 문법은 다음과 같습니다.

:pseudo-class {
   attribute: /*값*/;
}

의사 요소(Pseudo-Element)란?

의사 요소는 실제로 HTML에 존재하지 않는 가상의 요소를 선택하고 스타일을 적용할 때 사용합니다. 대표적인 예로 ::after, ::before, ::first-line 등이 있으며, 콜론 두개(::)로 시작합니다.

예를 들어 요소 앞뒤에 장식용 콘텐츠를 추가하거나(::before, ::after), 단락의 첫 번째 줄만 꾸미는(::first-line) 등 문서의 일부분을 별도의 요소처럼 다룰 수 있습니다.

의사 요소의 기본 문법은 다음과 같습니다.

::pseudo-element {
   attribute: /*값*/;
}

핵심 차이점 요약

  • 의사 클래스: 요소의 '상태'를 나타냄 → 콜론 하나(:) 사용
  • 의사 요소: 존재하지 않는 가상의 '요소'를 생성·선택함 → 콜론 두개(::) 사용

예제 1 — 의사 클래스 :hover 활용하기

다음 예제는 링크에 마우스를 올렸을 때(:hover) 스타일이 변경되는 모습을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<style>
a:hover {
    padding: 3%;
    font-size: 1.4em;
    color: tomato;
    background: bisque;
}
</style>
</head>
<body>
<p>You're somebody else</p>
<a href=#>Dummy link 1</a>
<a href=#>Dummy link 2</a>
</body>
</html>

실행 결과: 링크 위에 마우스 커서를 올리면 글자 크기가 커지고, 배경색과 글자색이 지정한 값으로 바뀌는 것을 확인할 수 있습니다.

예제 2 — 의사 요소 ::after와 의사 클래스 함께 사용하기

다음 예제는 ::after로 각 단락 뒤에 콘텐츠를 삽입하고, :last-child로 마지막 단락에 다른 스타일을 적용합니다.

<!DOCTYPE html>
<html>
<head>
<style>
p::after {
    content: " BOOM!";
    background: hotpink;
}
p:last-child {
    font-size: 1.4em;
    color: red;
}
</style>
</head>
<body>
<p>Anymore Snare?</p>
<p>Donec in semper diam. Morbi sollicitudin sed eros nec elementum. Praesent eget nisl vitae neque consectetur tincidunt. Ut molestie vulputate sem, nec convallis odio molestie nec.</p>
<p>Hit</p>
<p>Pop</p>
</body>
</html>

실행 결과: 모든 <p> 태그 뒤에는 핫핑크 배경의 " BOOM!" 텍스트가 추가되며, 마지막 단락인 "Pop"은 더 큰 빨간색 글씨로 표시됩니다.

마무리

정리하면, 의사 클래스는 콜론 하나(:)로 요소의 상태를 나타내고, 의사 요소는 콜론 두개(::)로 가상의 요소를 만들어 선택합니다. 이 차이만 기억하면 CSS 선택자를 훨씬 자유롭게 활용할 수 있습니다. 참고로 CSS3부터는 의사 클래스와 의사 요소를 구분하기 위해 의사 요소에는 반드시 이중 콜론(::)을 사용하는 것이 표준 권장 사항입니다.