CSS - 문제 미리보기

문제 1223

hard
다음 CSS 코드가 적용된 테이블 셀의 최종 정렬 상태는? ```css th { text-align: left; vertical-align: top; height: 60px; } td { text-align: center; vertical-align: bottom; height: 40px; } ```
A. 헤더: 왼쪽상단, 데이터: 가운데하단
B. 헤더: 가운데상단, 데이터: 왼쪽하단
C. 헤더: 왼쪽가운데, 데이터: 가운데가운데
D. 헤더: 가운데하단, 데이터: 왼쪽상단

정답: A

각 CSS 규칙의 최종 효과: 헤더 셀 (th) 분석: • text-align: left → 수평으로 왼쪽 정렬 • vertical-align: top → 수직으로 상단 정렬 • height: 60px → 높은 셀에서 상단 정렬 효과 확실히 보임 • 결과: 왼쪽 상단 정렬 데이터 셀 (td) 분석: • text-align: center → 수평으로 가운데 정렬 • vertical-align: bottom → 수직으로 하단 정렬 • height: 40px → 적당한 높이에서 하단 정렬 • 결과: 가운데 하단 정렬 실무에서의 활용: • 헤더를 상단 정렬하면 데이터와 명확히 구분 • 숫자 데이터를 하단 정렬하면 소수점 맞춤 효과 • 높이가 다른 셀들 간의 시각적 일관성 확보

💡 학습 팁

이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.