pseudo-element selector - ::before,::after,::first-letter,::first-line,::selection

CSS에서 가상 요소 선택자(Pseudo-element selector)는 특정 HTML 요소에 직접적으로 존재하지 않는 스타일을 적용할 수 있게 해주는 선택자입니다. 이러한 선택자는 실제 DOM 요소가 아닌, 요소의 일부를 선택하거나 그 요소의 가상적인 부분을 스타일링할 수 있도록 해줍니다.

대표적인 가상 요소 선택자는 ::before, ::after, ::first-letter, ::first-line 등이 있습니다. 이들을 사용하면 HTML에 추가적인 마크업을 삽입하지 않고도 스타일을 개선할 수 있습니다.

주요 가상 요소 선택자

1. ::before

• ::before는 선택한 요소의 내용이 렌더링되기 전에 가상 콘텐츠를 삽입하는 데 사용됩니다.
• 주로 아이콘, 장식, 텍스트 등을 삽입할 때 사용됩니다.
• 이 가상 요소는 해당 요소의 첫 번째 자식으로 추가됩니다.

p::before {
  content: "🌟 ";
}

<p>This is a paragraph.</p>

• 이 예시에서, <p> 요소의 내용 앞에 "🌟 "가 추가됩니다.

2. ::after

• ::after는 선택한 요소의 내용이 렌더링된 후 가상 콘텐츠를 삽입하는 데 사용됩니다.
• ::before와 마찬가지로, 주로 아이콘이나 장식 요소를 추가할 때 유용합니다.

p::after {
  content: " 🌟";
}

<p>This is a paragraph.</p>

• 이 예시에서는 <p> 요소의 내용 뒤에 " 🌟"가 추가됩니다.

3. ::first-letter

• ::first-letter는 선택한 요소 내에서 첫 번째 글자에 스타일을 적용하는 가상 요소입니다.
• 주로 첫 글자 강조에 사용됩니다.

p::first-letter {
  font-size: 2em;
  color: red;
}

<p>This is a paragraph.</p>

• 이 예시에서 <p> 요소의 첫 글자는 크기가 두 배로 커지고 빨간색으로 표시됩니다.

4. ::first-line

• ::first-line은 선택한 요소 내에서 첫 번째 줄에 스타일을 적용하는 가상 요소입니다.
• 주로 첫 줄 강조에 사용됩니다.

p::first-line {
  font-weight: bold;
  color: blue;
}

<p>This is a paragraph.</p>

• 이 예시에서 <p> 요소의 첫 번째 줄이 굵게 표시되고 파란색으로 강조됩니다.

5. ::selection

• ::selection은 사용자가 선택한 텍스트에 스타일을 적용하는 데 사용됩니다.
• 주로 텍스트 강조에 사용되며, 배경색이나 글자 색상을 변경하는 데 유용합니다.

::selection {
  background-color: yellow;
  color: black;
}

<p>Select this text to see the effect.</p>

• 이 예시에서 텍스트를 선택하면 배경이 노란색, 글자는 검정색으로 바뀝니다.

::와 :의 차이

• ::는 가상 요소 선택자를 나타내며, 문서 구조에 존재하지 않는 가상적인 부분을 선택합니다.
• :는 가상 클래스 선택자를 나타내며, 사용자와의 상호작용(예: :hover, :focus) 또는 특정 상태(예: :first-child, :nth-child)를 선택합니다.

예시:

• ::before, ::after: 가상 요소 (HTML에 실제로 존재하지 않음)
• :hover, :active: 가상 클래스 (상태를 나타냄)

content 속성

• 가상 요소에서 내용을 삽입하려면 반드시 content 속성을 사용해야 합니다.
• ::before와 ::after는 content 속성이 없으면 작동하지 않습니다.

p::before {
  content: "⭐ ";
}

사용 예시

가상 요소는 웹 디자인에서 다양한 장식적인 효과를 추가하거나, HTML 요소를 수정하지 않고 콘텐츠를 삽입하는 데 매우 유용합니다. 예를 들어:

h2::before {
  content: "🔹 ";
  color: blue;
}

<h2>Heading 2</h2>

• 이 예시에서는 h2 요소의 앞에 파란색 다이아몬드 아이콘이 삽입됩니다.

결론

가상 요소 선택자는 HTML의 구조를 변경하지 않고도 페이지에 시각적인 장식을 추가하거나 특정 부분을 스타일링할 수 있는 유용한 도구입니다. ::before, ::after는 주로 콘텐츠 삽입에 사용되고, ::first-letter, ::first-line, ::selection은 각각 첫 글자, 첫 줄, 선택된 텍스트에 스타일을 적용하는 데 유용합니다.