CSS 팟캐스트 - 014: Pseudo-elements
콘텐츠 기사가 있고 첫 글자를 더 크게 만들고 싶다면 어떻게 해야 할까요?
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-size
및font-weight
)- 텍스트 속성 (예:
text-decoration
및word-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
개 animation
및transition
속성
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
placeholder
속성이 있는 <input>
와 같은 요소를 형성하는 도우미 힌트를 추가할 수 있습니다.
::placeholder
의사 요소를 사용하면 텍스트의 스타일을 지정할 수 있습니다.
input::placeholder {
color: darkcyan;
}
::placeholder
는 CSS 규칙의 하위 집합만 지원합니다.
color
- 숙박 시설
background
개 - 숙박 시설
font
개 - 숙박 시설
text
개
::cue
유사 요소 둘러보기의 마지막 항목은 ::cue
유사 요소입니다.
이를 통해 <video>
요소의 설명인 WebVTT 큐의 스타일을 지정할 수 있습니다.
캡션 내의 특정 요소의 스타일을 지정할 수 있도록 선택기를 ::cue
에 전달할 수도 있습니다.
video::cue {
color: yellow;
}
video::cue(b) {
color: red;
}
video::cue(i) {
color: lightpink;
}
이해도 테스트
유사 요소에 관한 지식 테스트
다음 중 유사 요소가 아닌 것은 무엇인가요?
::before
content: '';
를 추가해야 합니다.::first-paragraph
::after
content: '';
를 추가해야 합니다.::marker
::pencil
:active
유사 요소는 HTML 파일에서 찾을 수 있습니다.