유사 요소

콘텐츠가 있는 기사에서 첫 글자를 훨씬 더 큰 대문자로 표시하려면 어떻게 해야 하나요?

파란색 대문자가 있는 텍스트 문단

CSS에서는 ::first-letter 가상 요소를 사용하여 이러한 종류의 디자인 세부정보를 구현할 수 있습니다.

p::first-letter {
  color: blue;
  float: left;
  font-size: 2.6em;
  font-weight: bold;
  line-height: 1;
  margin-inline-end: 0.2rem;
}

가상 요소는 HTML을 추가하지 않고도 추가 요소를 추가하거나 타겟팅하는 것과 같습니다. ::first-letter를 사용하는 이 솔루션 예시는 여러 가상 요소 중 하나입니다. 가상 요소는 다양한 역할을 합니다. 이 강의에서는 사용할 수 있는 가상 요소와 가상 요소를 사용하는 방법을 알아봅니다.

::before::after

::before::after 가상 요소는 모두 content 속성을 정의하는 경우에만 요소 내부에 하위 요소를 만듭니다.

.my-element::before {
    content: "";
}

.my-element::after {
    content: "";
}

content는 비어 있는 문자열을 포함하여 어떤 문자열이든 될 수 있지만, 비어 있는 문자열이 아닌 경우 화면 리더에서 이를 읽어줄 수 있습니다. 이미지 url를 추가하면 원래 크기로 이미지가 삽입되므로 크기를 조절할 수 없습니다. counter를 삽입할 수도 있습니다.

::before 또는 ::after 요소가 생성되면 제한 없이 원하는 대로 스타일을 지정할 수 있습니다. 하위 요소를 허용하는 요소(문서 트리가 있는 요소)에만 ::before 또는 ::after 요소를 삽입할 수 있으므로 <img />, <video>, <input>와 같은 요소는 작동하지 않습니다.

::first-letter

이 가이드의 시작 부분에서 이 가상 요소를 다뤘습니다. ::first-letter를 타겟팅할 때는 일부 CSS 속성만 사용할 수 있다는 점에 유의하세요. 사용 가능한 속성은 다음과 같습니다.

  • color
  • background 속성 (예: background-image)
  • border 속성 (예: border-color)
  • float
  • font 속성 (예: font-sizefont-weight)
  • 텍스트 속성 (예: text-decorationword-spacing)
p::first-letter {
  color: goldenrod;
  font-weight: bold;
}

::first-line

::first-line 가상 요소를 사용하면 ::first-line가 적용된 요소의 display 값이 block, inline-block, list-item, table-caption 또는 table-cell인 경우에만 첫 번째 줄의 텍스트 스타일을 지정할 수 있습니다.

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

::first-letter 가상 요소와 마찬가지로 사용할 수 있는 CSS 속성의 하위 집합만 있습니다.

  • color
  • 숙박 시설 background
  • 숙박 시설 font
  • 숙박 시설 text

::backdrop

<dialog> 또는 <video>와 같이 전체 화면 모드로 표시되는 요소가 있는 경우 ::backdrop 가상 요소를 사용하여 요소와 페이지의 나머지 부분 사이의 공간인 배경에 스타일을 지정할 수 있습니다.

video::backdrop {
  background-color: goldenrod;
}

::marker

::marker 가상 요소를 사용하면 목록 항목의 글머리 기호나 숫자 또는 <summary> 요소의 화살표에 스타일을 지정할 수 있습니다.

::marker {
  color: hotpink;
}

ul ::marker {
  font-size: 1.5em;
}

ol ::marker {
  font-size: 1.1em;
}

summary::marker {
  content: '\002B'' '; /* Plus symbol with space */
}

details[open] summary::marker {
  content: '\2212'' '; /* Minus symbol with space */
}

::marker에는 일부 CSS 속성만 지원됩니다.

  • color
  • content
  • white-space
  • 숙박 시설 font
  • animationtransition 속성

content 속성을 사용하여 마커 기호를 변경할 수 있습니다. 예를 들어 이를 사용하여 <summary> 요소의 닫힌 상태와 빈 상태에 더하기 및 빼기 기호를 설정할 수 있습니다.

::selection

::selection 가상 요소를 사용하면 선택한 텍스트의 모양을 지정할 수 있습니다.

::selection {
  background: green;
  color: white;
}

이 가상 요소는 위의 데모와 같이 선택한 모든 텍스트의 스타일을 지정하는 데 사용할 수 있습니다. 또한 더 구체적인 선택 스타일을 위해 다른 선택기와 함께 사용할 수도 있습니다.

p:nth-of-type(2)::selection {
  background: darkblue;
  color: yellow;
}

다른 가상 요소와 마찬가지로 CSS 속성의 하위 집합만 허용됩니다.

  • color
  • background-color이지만 background-image아님
  • 숙박 시설 text

::placeholder

Browser Support

  • Chrome: 57.
  • Edge: 79.
  • Firefox: 51.
  • Safari: 10.1.

Source

placeholder 속성을 사용하여 <input>와 같은 양식 요소에 도우미 힌트를 추가할 수 있습니다. ::placeholder 가상 요소를 사용하면 텍스트의 스타일을 지정할 수 있습니다.

input::placeholder {
  color: darkcyan;
}

::placeholder는 CSS 규칙의 하위 집합만 지원합니다.

  • color
  • 숙박 시설 background
  • 숙박 시설 font
  • 숙박 시설 text

::cue

Browser Support

  • Chrome: 26.
  • Edge: 79.
  • Firefox: 55.
  • Safari: 7.

Source

이 가이드의 마지막 가상 요소는 ::cue 가상 요소입니다. 이렇게 하면 <video> 요소의 자막인 WebVTT 큐의 스타일을 지정할 수 있습니다.

선택기를 ::cue에 전달하여 자막 내부의 특정 요소에 스타일을 지정할 수도 있습니다.

video::cue {
  color: yellow;
}

video::cue(b) {
  color: red;
}

video::cue(i) {
  color: lightpink;
}

이해도 확인

가상 요소에 대한 지식 테스트

다음 중 가상 요소가 아닌 것은 무엇인가요?

::after
::marker
:active
::before
::first-paragraph
::pencil

가상 요소는 HTML 파일에서 찾을 수 있습니다.

거짓