가상 요소 - by. UXKM

  • Publishing
  • CSS
  • CSS 중급
  • 가상 요소
요약 설명

의사(가상) 요소(pseudo-elements)는 HTML 요소에는 없는 가상의 요소를 CSS로 제어하는 기능입니다.

CSS1과 CSS2에서는 의사 클래스와 의사 요소를 나타낼 때 하나의 콜론(:)으로 함께 표기하였습니다.
하지만 CSS3에서는 의사 클래스와 의사 요소의 표현을 구분하기로 하여, 의사 클래스는 하나의 콜론(:)을, 의사 요소에는 두 개의 콜론(::)을 사용하고 있습니다.
콜론(::) 두 개를 인식하지 못하는 하위 브라우저를 위해 콜론(:) 하나를 사용해도 현재는 가능합니다.
선택자에 오직 가상 요소 하나만 쓸 수 있으며, 대표적인 의사 요소로는 ::first-line, ::before, ::after, ::selection, ::placeholder 등이 있습니다.

브라우저별 콜론(:) 하나, 콜론(::) 두 개 사용여부

  1. Internet Explorer 8.0 = :pseudo-element
  2. Internet Explorer 9.0 = :pseudo-element, ::pseudo-element
  3. Firefox (Gecko) 1.0 (1.0) = :pseudo-element
  4. Firefox (Gecko) 1.0 (1.5) = :pseudo-element, ::pseudo-element
  5. Opera 4.0 = :pseudo-element
  6. Opera 7.0 = :pseudo-element, ::pseudo-element
  7. Safari (WebKit) 1.0 (85) = :pseudo-element, ::pseudo-element

::first-line (:first-line)

CSS Level 1
이 의사 요소는 텍스트의 첫 라인만을 선택합니다. 단, 블록(block) 타입의 요소에만 사용할 수 있습니다.
이 의사 요소를 통해 사용할 수 있는 속성은 다음과 같습니다.
::first-line 선택자에는 box-model 속성(margin, border, padding, width, height)이 적용되지 않습니다.

  1. 모든 글꼴 관련 속성

    font, font-kerning, font-style, font-variant, font-variant-numeric, font-variant-position, font-variant-east-asian, font-variant-caps, font-variant-alternates, font-variant-ligatures, font-synthesis, font-feature-settings, font-language-override, font-weight, font-size, font-size-adjust, font-stretch, font-family

  2. 모든 배경 관련 속성

    background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment, background-blend-mode

  3. color 속성
  4. text 관련 속성

    word-spacing, letter-spacing, text-decoration, text-transform, line-height, text-shadow, text-decoration-color, text-decoration-line, text-decoration-style, vertical-align

::first-line (:first-line) 예제

::before (:before) / ::after (:after)

CSS Level 2
::before 의사 요소는 특정 요소의 내용(content) 부분 바로 앞에, ::after 의사 요소는 바로 뒤에 다른 요소를 삽입할 때 사용합니다.
::before와 ::after 요소는 content 속성을 사용해야만 콘텐츠를 삽입할 수 있으며, content 속성이 설정되어 있지 않으면 표시되지 않습니다.
특수 문자 사용 시 HTML 마크업 엔티티를 사용할 수 없으므로, 백 슬래시(\)와 16진 유니코드 값으로 구성되는 유니코드 이스케이프 시퀀스를 사용해야 합니다.
content 속성은 기본적으로 인라인 요소로 표현되지만 display: block을 선언하여 블록 요소로 사용할 수 있습니다.

content 속성 사용 방법은 다음과 같이 사용할 수 있습니다.

  1. normal

    기본값으로 아무것도 표시하지 않습니다. (none과 같습니다)

    ::before{content:normal} / ::after{content:normal}

  2. none

    none 내용에 아무것도 표시하지 않습니다.

    ::before{content:""} / ::after{content:""}

  3. 문자(String)

    텍스트 내용입니다. 일반 텍스트와 유니코드 문자를 삽입할 수 있습니다.

    쌍따옴표("") 또는 홀따옴표('') 안에 삽입해야 합니다.

  4. url(주소)

    외부 자원(이미지, 음악, 비디오 등)을 생성합니다.

  5. counter

    counter는 HTML 문서에 쓰지 않고도, CSS로 숫자를 생성하면서 자동으로 번호를 매기는 역할을 합니다.

    counter-increment, counter-reset 속성과 함께 사용하며, 사용 방법은 CSS 카운터 에서 자세히 설명합니다.

    CSS counter를 사용하려면 먼저 counter-reset 속성(초깃값 0)을 사용하여 초기화해야 하며, 초기화된 counter의 값은 counter-increment에 따라 증가하거나 감소합니다.
    counter의 이름으로 "none", "inherit", "initial"은 사용할 수 없습니다.

    counter와 counters가 있으며, counters는 숫자를 좀 더 세부적으로 지정합니다. (예. 1.1)

    1. 5.1. counter(name, style)

      name만 쓸 경우 기본값 decimal(십진수)이 적용됩니다.

      style은 선택적이며, list-style-type과 동일한 값입니다.

      사용 예) h1::before{content:counter(name, upper-roman);}

    2. 5.2. counters(name, string, style)

      name, string 값은 필수이며, string은 마침표(.)처럼 앞뒤를 분리하기 위한 용도로 사용합니다.

      style은 선택적입니다.

      사용 예) h1::before {content: counters(name, ".", upper-roman);}

  6. attr(속성값)

    선택자의 속성을 생성합니다.

  7. open-quote

    여는 인용부호를 생성합니다.

  8. close-quote

    닫는 인용부호를 생성합니다.

  9. no-open-quote

    여는 인용부호를 없앱니다. (open-quote를 취소하기 위해 사용됩니다.)

  10. no-close-quote

    닫는 인용부호를 없앱니다.

  11. initial

    기본값으로 설정합니다.

  12. inherit

    부모 요소 속성값을 상속합니다.

::before (:before) / ::after (:after) 예제

::selection

요약 설명

::selection은 CSS 선택기 레벨 3의 초안에 있었지만 후보 권장 사항 단계에서 (특히 중첩된 요소로) 지정되지 않았으며, 상호 운용성이 달성되지 않았기 때문에 (W3C 스타일 메일 링리스트의 토론을 기반으로) 후보 추천 단계에서 제거되었습니다.
Pseudo-Elements Level 4로 반환되었습니다.

CSS Level 3
이 의사 요소는 해당 요소에서 사용자가 선택한 부분만을 선택할 때 사용합니다.
마우스 드래그 등으로 선택한 텍스트를 선택합니다.
::selection 요소는 항상 이중 콜론(::)으로 시작합니다.
파이어폭스 브라우저에서는 ::-moz-selection과 같이 접두사를 붙여 사용합니다.

::selection은 다음과 같은 특정 CSS 속성만 사용할 수 있습니다.

::before (:before) / ::after (:after) 예제

::placeholder

CSS Level 3
::placeholder 선택자는 항상 이중 콜론(::)으로 시작합니다.
HTML5에서 새로 나온 속성(attribute)으로 input 요소나 textarea 요소에 안내문(알맞은 힌트를 제공)을 넣을 수 있습니다.
CSS에서 placeholder 속성 사용은 ::placeholder 선택자로 선택하여 꾸밀 수 있습니다.
다만, 브라우저별로 해당 요소에 포커스가 될 때 작동하는 방식에서 차이점이 발생합니다.

브라우저 호환성을 위해 사용하는 방법은 다음과 같습니다.

  1. 지원하지 않는 브라우저들이 있어서 접두사를 붙여서 같이 사용합니다.

  2. 파이어폭스의 경우 같은 색을 입력하면 투명도가 증가하여 색이 흐리게 나옵니다.
    파이어폭스는 CSS 투명도를 조절하는 속성인 opacity 값을 조절하면 됩니다.

  3. 마이크로소프트 Edge는 placeholder 색 변경이 적용되지 않습니다.
    선택자 지정 시 -ms-input이라는 명령어를 추가해주면 됩니다.

  4. 익스플로러는 엣지에 삽입한 선택자로는 placeholder 색 변경이 되지 않습니다.
    명령어는 똑같지만 앞에 콜론(:) 개수를 1개로 변경해줍니다.

::placeholder 예제

가상 요소(Pseudo-elements) 예제