가상 클래스, 가상요소 비교

CSS에서 가상 클래스(Pseudo-classes)와 가상 요소(Pseudo-elements)는 비슷해 보일 수 있지만, 그 목적과 동작 방식에서 중요한 차이가 있습니다. 두 개념은 모두 HTML 문서에서 존재하지 않는 부분에 스타일을 적용할 수 있게 해 주지만, 각각 다르게 작동합니다.

1. 가상 클래스 (Pseudo-classes)

가상 클래스는 특정 상태나 조건을 만족하는 HTML 요소를 선택할 때 사용됩니다. 즉, 요소의 상태(예: 마우스 오버 상태, 포커스 상태 등)에 따라 스타일을 다르게 적용할 수 있습니다.

주요 가상 클래스 예시

• :hover: 마우스가 요소 위에 올라갔을 때 스타일을 적용
• :focus: 요소가 포커스를 가질 때 스타일을 적용 (예: 입력 필드)
• :active: 사용자가 클릭할 때 스타일을 적용
• :nth-child(): 특정 순서에 있는 자식 요소를 선택
• :first-child: 부모 요소의 첫 번째 자식 요소를 선택
• :last-child: 부모 요소의 마지막 자식 요소를 선택

예시:

a:hover {
  color: red;  /* 마우스를 링크 위에 올리면 빨간색으로 변경 */
}

input:focus {
  background-color: yellow;  /* 포커스를 받을 때 배경색을 노란색으로 변경 */
}

li:nth-child(odd) {
  background-color: lightgray;  /* 홀수 번째 자식 요소에 배경색 적용 */
}

2. 가상 요소 (Pseudo-elements)

가상 요소는 HTML 요소의 특정 부분이나 그 부분을 가상으로 만들어 스타일을 적용할 수 있게 해주는 선택자입니다. 실제 DOM 요소는 없지만, CSS만으로 특정 부분을 가상적으로 삽입하여 스타일을 적용할 수 있습니다. 대표적인 가상 요소는 ::before, ::after와 같은 선택자입니다.

주요 가상 요소 예시

• ::before: 선택한 요소의 내용이 렌더링되기 전에 콘텐츠를 삽입
• ::after: 선택한 요소의 내용이 렌더링된 후 콘텐츠를 삽입
• ::first-letter: 요소의 첫 번째 글자에 스타일을 적용
• ::first-line: 요소의 첫 번째 줄에 스타일을 적용
• ::selection: 사용자가 텍스트를 선택했을 때 스타일을 적용

예시:

p::before {
  content: "✨";  /* p 요소의 앞에 "✨" 아이콘을 삽입 */
}

p::after {
  content: "✨";  /* p 요소의 뒤에 "✨" 아이콘을 삽입 */
}

h1::first-letter {
  font-size: 2em;  /* h1의 첫 번째 글자 크기를 두 배로 확대 */
  color: red;      /* 첫 번째 글자 색상을 빨간색으로 변경 */
}

::selection {
  background-color: yellow;  /* 텍스트 선택 시 배경색을 노란색으로 변경 */
}

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

특성 가상 클래스 (Pseudo-classes) 가상 요소 (Pseudo-elements)

목적	요소의 상태에 따라 스타일을 적용	요소의 부분에 스타일을 적용 (실제 요소 없이)
상태	마우스 오버, 클릭, 포커스 등 상태에 반응	요소의 특정 부분을 가상으로 스타일링 (예: 첫 글자, 첫 줄 등)
형태	: (콜론)으로 시작	:: (두 개의 콜론)으로 시작
예시	:hover, :focus, :nth-child() 등	::before, ::after, ::first-letter 등
적용 대상	HTML 요소의 상태(사용자 상호작용에 따른 변화 등)	요소의 특정 부분 또는 가상 콘텐츠

예시로 이해하기

가상 클래스 예시:

/* 링크에 마우스를 올리면 색상이 빨간색으로 바뀜 */
a:hover {
  color: red;
}

/* 첫 번째 자식 요소에만 스타일을 적용 */
ul > li:first-child {
  font-weight: bold;
}

가상 요소 예시:

/* p 요소의 앞에 "✨" 아이콘을 삽입 */
p::before {
  content: "✨";
}

/* p 요소의 끝에 "✨" 아이콘을 삽입 */
p::after {
  content: "✨";
}

/* h1의 첫 번째 글자 크기를 두 배로 키우고 빨간색으로 변경 */
h1::first-letter {
  font-size: 2em;
  color: red;
}

결론

• 가상 클래스는 요소의 상태나 조건을 기반으로 스타일을 적용하는 데 사용됩니다. 예를 들어, 사용자가 요소와 상호작용할 때 발생하는 상태에 반응합니다.
• 가상 요소는 HTML의 구조적인 부분을 수정하거나, 가상적인 콘텐츠를 삽입하는 데 사용됩니다. 실제 HTML 요소를 추가하지 않고도 다양한 스타일 효과를 추가할 수 있습니다.

두 개념은 서로 보완적이며, 각각의 목적에 맞게 사용하면 HTML 문서를 더 깔끔하고 효율적으로 스타일링할 수 있습니다.