CSS - 문제 미리보기
문제 1292
medium
다음 CSS에서 ::first-line과 ::first-letter를 함께 사용했을 때의 결과는?
```css
p::first-letter {
color: red;
font-size: 3em;
}
p::first-line {
color: blue;
font-variant: small-caps;
}
```
```css
p::first-letter {
color: red;
font-size: 3em;
}
p::first-line {
color: blue;
font-variant: small-caps;
}
```
정답: B
Multiple Pseudo-elements의 조화로운 작동:
두 pseudo-element의 협력:
• ::first-letter가 우선순위를 가짐
• ::first-line은 나머지 부분에 적용
• 서로 충돌하지 않고 조화롭게 작동
구체적인 적용 결과:
첫 번째 글자:
• `color: red` (::first-letter 적용)
• `font-size: 3em` (::first-letter 적용)
• ::first-line의 스타일은 첫 글자에 적용되지 않음
첫 줄의 나머지 부분:
• `color: blue` (::first-line 적용)
• `font-variant: small-caps` (::first-line 적용)
• 첫 글자를 제외한 첫 줄의 모든 텍스트
두 pseudo-element의 협력:
• ::first-letter가 우선순위를 가짐
• ::first-line은 나머지 부분에 적용
• 서로 충돌하지 않고 조화롭게 작동
구체적인 적용 결과:
첫 번째 글자:
• `color: red` (::first-letter 적용)
• `font-size: 3em` (::first-letter 적용)
• ::first-line의 스타일은 첫 글자에 적용되지 않음
첫 줄의 나머지 부분:
• `color: blue` (::first-line 적용)
• `font-variant: small-caps` (::first-line 적용)
• 첫 글자를 제외한 첫 줄의 모든 텍스트
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.