가상 요소란?

CSS 가상 요소는 요소의 지정된 부분을 스타일화 하는데 사용됩니다.

요소의 첫 번째 문자 또는 선 스타일 지정

요소의 내용 앞이나 뒤에 내용 삽입

문법

        selector::pseudo-element {
            property:value;
          }

** 이중 콜론 표기법 - ::first-line 과 :first-line

** CSS3 가상 요소에서 단일 콜론 표기법을 이중 콜론으로 대체했습니다.

** 이것은 가상 클래스와 가상 요소를 구별하기 위한 W3C의 시도였습니다.

** 단일 콜론 구문은 CSS2 및 CSS1의 의사 클래스 및 의사 요소 모두에 사용되었습니다.

** 이전 버전과의 호환성을 위해 단일 콜론 구문은 CSS2 및 CSS1 의사 요소에 허용됩니다.

::first-line 가상 요소

::first-line 가상 요소는 텍스트의 첫 번째 줄에 특별한 스타일을 추가하는 데 사용됩니다.

다음 예는 모든 <p>요소에서 텍스트의 첫 번째 행을 선언합니다.

        p::first-line {
            color: #ff0000;
            font-variant: small-caps;
          }

** ::first-line 가상 요소는 블록 수준 요소에만 적용할 수 있습니다.

::first-line 가상 요소에 적용되는 속성은 다음과 같습니다.

• font properties (글자 속성)
• color properties (색 속성)
• background properties (배경 속성)
• word-spacing (단어 간격)
• letter-spacing (문자 간격)
• text-decoration (텍스트 장식)
• vertical-align (수직 정렬)
• text-transform(텍스트 변형)
• line-height (선 높이)
• clear

::first-letter 가상 요소

::first-letter 가상 요소는 텍스트의 첫 번째 문자에 특별한 스타일을 추가하는 데 사용됩니다.

다음 예는 모든 <p>요소의 텍스트 첫 글자의 서식을 지정합니다.

        p::first-letter {
            color: #ff0000;
            font-size: xx-large;
          }

** ::first-letter 가상 요소는 블록 수준 요소에만 적용할 수 있습니다.

::first-letter 가상 요소에 적용되는 속성은 다음과 같습니다.

• font properties (글자 속성)
• color properties (색 속성)
• background properties (배경 속성)
• margin properties (바깥 여백 속성)
• padding properties (안쪽 여백 속성)
• border properties (테두리 속성)
• text-decoration (텍스트 장식)
• vertical-align (수직 정렬) - "float"이 "none"인 경우만
• text-transform(텍스트 변형)
• line-height (선 높이)
• float
• clear

가상 요소와 CSS 클래스

가상 요소는 CSS 클래스와 결합 할 수 있습니다.

        p.intro::first-letter {
            color: #ff0000;
            font-size:200%;
          }

위의 예는 class = "intro"인 단락의 첫 글자를 빨간색으로 표시하고 글자 크기를 200%로 표시합니다.

다중 가상 요소

여러 개의 가상 요소를 결합 할 수도 있습니다.

다음 예는 단락의 첫 글자를 빨간색으로  xx 큰 글꼴 크기로 표시됩니다.

첫 번째 줄의 나머지 부분은 파란색으로 표시되며 작은 대문자로 표시됩니다.

단락의 나머지 부분은 기본 글꼴 크기 및 색상으로 표시됩니다.

        p::first-letter {
            color: #ff0000;
            font-size: xx-large;
          }
          
          p::first-line {
            color: #0000ff;
            font-variant: small-caps;
          }

CSS - ::before 가상 요소

::before 가상 요소는 요소의 내용 앞에 내용을 삽입하는 데 사용할 수 있습니다.

다음 예제는 각 <h1> 요소의 내용 앞에 이미지를 삽입합니다.

        h1::before {
            content: url(smiley.gif);
          }

CSS - ::after 가상 요소

::after 가상 요소는 요소의 내용 뒤에 일부 내용을 삽입하는 데 사용할 수 있습니다.

다음 예제에서는 각 <h1> 요소의 내용 뒤에 이미지를 삽입합니다.

        h1::after {
            content: url(smiley.gif);
          }

CSS - ::selection 가상 요소

::selection 가상 요소는 사용자가 선택한 요소의 일부와 일치합니다.

다음 CSS 속성은 ::selection : color, background, cursor 및 outline에 적용할 수 있습니다.

다음 예는 노란색 배경에 선택한 텍스트를 빨간색으로 만듭니다.

        ::selection {
            color: red; 
            background: yellow;
          }