가상 요소 - by. UXKM

요약 설명

의사(가상) 요소(pseudo-elements)는 HTML 요소에는 없는 가상의 요소를 CSS로 제어합니다.
CSS1과 CSS2에서는 의사 클래스와 의사 요소를 나타낼 때 하나의 콜론(:)으로 함께 표기하였습니다.
하지만 CSS3에서는 의사 클래스의 표현과 의사 요소의 표현을 구분하기로 합니다.
따라서 CSS3에서는 의사 클래스는 하나의 콜론(:)을, 의사 요소에는 두 개의 콜론(::)을 사용하고 있습니다.
선택자에 오직 가상 요소 하나만 쓸 수 있습니다.

CSS3는 의사 클래스 와 의사 요소를 구별하기 위해 두 개의 콜론(::)이 있는 표기법을 도입했습니다.
콜론(::) 두 개의 인식 못하는 하위브라우저를 위해 콜론(:)하나를 사용해도 현재는 가능합니다.
의사(가상) 클래스(pseudo-class)는 콜론(:) 하나 사용
의사(가상) 요소(pseudo-elements)는 콜론(::) 두 개 사용
대표적인 의사요소로는 다음과 같은 요소들이 있습니다.
::first-letter (:first-letter)
::first-line (:first-line)
::before (:before)
::after (:after)
::selection

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

  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) 타입의 요소에만 사용할 수 있습니다.
이 의사 요소를 통해 사용할 수 있는 속성은 다음과 같습니다.

  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 관련 속성

    bword-spacing, bletter-spacing, btext-decoration, btext-transform, bline-height, btext-shadow, btext-decoration, btext-decoration-color, btext-decoration-line, btext-decoration-style, bvertical-align

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

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

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

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

  1. normal

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

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

  2. none

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

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

  3. 문자(String)

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

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

  4. url(주소)

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

  5. counter

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

    counter-increment, counter-reset 속성과 함께 사용합니다.

    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은 선택적임, style은 list-style-type과 동일한 값임, 즉 아래 중에서 선택

      list-style-type 속성
      (disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha, or none)

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

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

      name, string 값은 필수 (기본값 decimal)

      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는 placeholer 색 변경이 적용 안됩니다.
    선택자 지정시 -ms-input이라는 명령어를 추가해주면 됩니다.

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

::placeholder 예제

가상 요소(Pseudo-elements) 예제