CSS 페인트 엘리먼트 참조 가이드

CSS 위탁 요소

CSS 위탁 요소는 요소의 특정 부분의 스타일을 설정하는 데 사용됩니다.

예를 들어, 다음과 같이 사용할 수 있습니다:

  • 요소의 첫 번째 글자나 첫 번째 줄 스타일을 설정합니다
  • 요소 내용 전후에 내용을 삽입합니다
  • 리스트 항목 태그 스타일을 설정합니다
  • 대화 상자 배경 뷰 스타일을 설정합니다

다음 표는 CSS에서 다양한 위탁 요소를 보여줍니다:

위탁 요소 예제 예제 설명
::after p::after 지정된 요소의 내용 후에 내용을 삽입합니다.
::backdrop dialog::backdrop 대화 상자나 팝업 요소의 배경 뷰 스타일을 설정합니다.
::before p::before 지정된 요소의 내용 전에 내용을 삽입합니다.
::file-selector-button ::file-selector-button <input type="file"> 타입의 버튼을 선택합니다.
::first-letter p::first-letter 각 <p> 요소의 첫 번째 글자를 선택합니다.
::first-line p::first-line 각 <p> 요소의 첫 번째 줄을 선택합니다.
::grammar-error ::grammar-error 브라우저가 문법 오류로 표시하는 텍스트 스타일을 설정합니다.
::highlight() ::highlight(custom-name) 사용자 정의 강조를 선택합니다.
::marker ::marker 리스트 항목의 태그를 선택합니다.
::placeholder input::placeholder <input> 또는 <textarea> 요소의占位符 텍스트 스타일을 설정합니다.
::selection ::selection 사용자가 선택한 텍스트의 스타일을 설정합니다.
::spelling-error ::spelling-error 브라우저가 오류로 표시하는 텍스트 스타일을 설정합니다.
::view-transition ::view-transition 뷰 전환叠加층의 뿌리를 표시하고, 페이지에 있는 모든 뷰 전환을 포함합니다.
::view-transition-group ::view-transition-group 단일 뷰 전환 스냅샷 그룹을 표시합니다.
::view-transition-image-pair ::view-transition-image-pair 표시하는 뷰 전환의 '오래된'과 '새' 뷰 상태의 컨테이너(전환 전후)
::view-transition-new ::view-transition-new 뷰 전환을 나타내는 '신' 뷰 상태.
::view-transition-old ::view-transition-old 뷰 전환을 나타내는 '구' 뷰 상태.