CSS - 문제 미리보기
문제 1293
hard
다음 상황에서 가장 적절한 pseudo-element 조합은?
요구사항:
• 제목 앞에 카테고리 아이콘 추가
• 제목 뒤에 "새글" 배지 추가
• 첫 번째 글자만 특별한 스타일 적용
• 모든 효과가 HTML 수정 없이 CSS로만 구현
```css
.news-title::_____ { content: "📰"; }
.news-title::_____ { content: "NEW"; }
.news-title::_____ { color: gold; }
```
정답: C
복합 pseudo-element 활용의 실무적 구현:
각 pseudo-element의 역할 분담:
::before (앞쪽 아이콘):
• 제목 시작 부분에 카테고리 아이콘 배치
• `content: "📰";`로 뉴스 아이콘 추가
• 콘텐츠 앞에서 컨텍스트 제공
::after (뒤쪽 배지):
• 제목 끝 부분에 상태 표시
• `content: "NEW";`로 새글 표시
• 추가 정보나 액션 힌트 제공
::first-letter (첫 글자 강조):
• 실제 제목 텍스트의 첫 번째 글자 스타일링
• 드롭캐피털이나 시각적 임팩트 강화
• 타이포그래피 효과 구현
다른 선택지들의 문제점:
• first-line: 첫 글자가 아닌 첫 줄 전체 (요구사항 불일치)
• 순서 변경: 논리적 흐름과 맞지 않음
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.