유사 요소

CSS 팟캐스트 - 014: 유사 요소 를 통해 개인정보처리방침을 정의할 수 있습니다.

이 기사의 게시글이 있는 경우 첫 글자는 더 큰 드롭 캡이 되도록 하고 싶습니다. 어떻게 달성할 수 있을까요?

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 pseudo-elements는 content 속성을 정의하는경우에만 요소 내에 하위 요소를 만듭니다.

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

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

content는 임의의 문자열일 수 있습니다. 심지어 빈 공간도 빈 문자열 이외의 텍스트는 스크린 리더에서 읽을 수 있습니다. url 이미지를 추가할 수 있습니다. 원본 크기로 이미지를 삽입하므로 크기를 조절할 수 없습니다. 또한 counter

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

::first-letter

우리는 강의를 시작할 때 이 유사 요소를 만났습니다. 타겟팅 시 일부 CSS 속성은 사용하지 못할 수도 있다는 점에 ::first-letter 사용 가능한 속성은 다음과 같습니다.

• color
• background 속성 (예: background-image)
• border 속성 (예: border-color)
• float
• font 속성 (예: font-size 및 font-weight)
• 텍스트 속성 (예: text-decoration 및 word-spacing)

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

::first-line

::first-line pseudo-element를 사용하면 텍스트의 첫 번째 줄의 스타일을 지정할 수 있습니다. ::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 pseudo-element를 사용하면 목록 항목의 글머리기호나 숫자 또는 <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개
• animation 및 transition 속성

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

::selection

::selection pseudo-element를 사용하면 선택한 텍스트의 스타일을 지정할 수 있습니다.

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

이 의사 요소는 위의 데모에서와 같이 선택된 모든 텍스트의 스타일을 지정하는 데 사용할 수 있습니다. 다른 선택기와 함께 사용하여 보다 구체적인 선택 스타일을 지정할 수도 있습니다.

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

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

• color
• background-color(background-image이 아님)
• 숙박 시설 text개

::placeholder

도우미 힌트를 추가하여 요소를 형성할 수 있습니다. (예: placeholder 속성이 있는 <input>) ::placeholder pseudo-element를 사용하면 해당 텍스트의 스타일을 지정할 수 있습니다.

input::placeholder {
  color: darkcyan;
}

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

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

::cue

유사 요소 둘러보기의 마지막 부분은 ::cue 의사 요소. 이렇게 하면 WebVTT 신호의 스타일을 지정할 수 있습니다. 이는 <video> 요소의 설명입니다.

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

video::cue {
  color: yellow;
}

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

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

이해도 확인

유사 요소에 관한 지식 테스트