가상 요소

5.1 주요 가상 요소

CSS의 가상 요소는 개발자가 일반 셀렉터로 선택할 수 없는 문서의 특정 부분에 스타일과 콘텐츠를 추가할 수 있게 해줘. "가상" 요소를 만들어줘서, 그것을 마치 HTML 마크업의 일부인 것처럼 스타일링할 수 있어. 복잡한 레이아웃을 만들고 웹 페이지의 외관을 개선하는 강력한 도구야.

가상 요소란

가상 요소는 셀렉터에 추가되는 키워드로, 요소의 특정 부분을 스타일링할 수 있게 해줘. 시각적 표시의 일부가 되는 가상 요소를 만들어, 원래 HTML 마크업을 변경하지 않아. 가상 요소는 주로 첫 글자, 텍스트 줄 스타일링, 장식 요소 추가 등의 작업에 사용돼.

주요 가상 요소

자주 사용되는 가상 요소들:

• ::before: 선택된 요소의 내용 앞에 콘텐츠 추가
• ::after: 선택된 요소의 내용 뒤에 콘텐츠 추가
• ::first-letter: 요소의 첫 글자 스타일링
• ::first-line: 요소의 첫 줄 스타일링
• ::selection: 사용자가 선택한 텍스트 스타일링

가상 요소 사용법

CSS의 가상 요소는 이중 콜론 (::)으로 표시돼, 하지만 몇몇 가상 요소들은 구 버전 호환성을 위해 오래된 단일 콜론 표기법 (:)도 지원할 수 있어.

문법:

    
      셀렉터::가상요소 {
        속성: 값;
        속성: 값;
        속성: 값;
        ...
      }
    
  

5.2 가상 요소 사용 예시

1. 장식 요소 추가

가상 요소는 종종 요소의 내용 전후에 장식 요소를 추가하는 데 사용돼:

    
      /* 링크 텍스트 앞에 아이콘 추가 */

      a::before {
        content: "🔗";
        margin-right: 5px;
      }

      /* 문단 뒤에 장식 요소 추가 */

      p::after {
        content: "❦";
        display: block;
        text-align: right;
        color: red;
      }
    
  

이 예시에서 가상 요소 ::before와 ::after는 각각 링크 텍스트 앞에 아이콘을 추가하고 문단 뒤에 장식 요소를 추가하는 데 사용돼.

2. 첫 글자 및 줄 스타일링

가상 요소는 텍스트의 첫 글자나 첫 줄을 스타일링하는데 사용할 수 있어, 이는 타이포그래피에서 종종 사용돼:

    
      /* 문단의 첫 글자 스타일링 */

      p::first-letter {
        font-size: 2em;
        font-weight: bold;
        color: #3498db;
      }

      /* 문단의 첫 줄 스타일링 */

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

이 예시에서 가상 요소 ::first-letter와 ::first-line은 각각 문단의 첫 글자와 첫 줄을 스타일링하는 데 사용돼.

3. 텍스트 선택

가상 요소 ::selection은 사용자가 선택한 텍스트를 스타일링하는 데 사용돼:

    
      /* 선택된 텍스트 스타일링 */

      ::selection {
        background-color: #3498db;
        color: white;
      }
    
  

이 예시에서 사용자가 선택한 텍스트는 파란색 배경과 흰색 텍스트 색상을 가지게 돼.

5.3 가상 요소의 특성과 한계

한계:

• 단일 사용: 가상 요소 ::before와 ::after는 각 요소에서 한 번만 사용할 수 있어
• content 요구사항: 가상 요소 ::before와 ::after는 비어 있더라도 content 속성의 사용을 필요로 해
• 브라우저 호환성: 현대 브라우저는 가상 요소 표시에 이중 콜론을 지원 하지만, 구 버전 가상 요소에서는 단일 콜론도 작동해

content 속성 사용 예시

    
      /* 장식 요소를 위한 빈 가상 요소 사용 예시 */

      div::before {
        content: "";
        display: block;
        width: 100%;
        height: 10px;
        background-color: #3498db;
      }
    
  

이 예시에서 빈 가상 요소 ::before는 div의 내용 앞에 장식 띠를 추가하는 데 사용돼.