CSS - 문제 미리보기
문제 1237
hard
다음 CSS가 적용된 HTML의 최종 레이아웃은?
```html
<div class="container">
<span class="item-a">A</span>
<span class="item-b">B</span>
<span class="item-c">C</span>
</div>
```
```css
.item-a { display: inline; }
.item-b { display: none; }
.item-c { display: block; }
```
```html
<div class="container">
<span class="item-a">A</span>
<span class="item-b">B</span>
<span class="item-c">C</span>
</div>
```
```css
.item-a { display: inline; }
.item-b { display: none; }
.item-c { display: block; }
```
정답: C
각 요소별 display 속성 분석:
item-a (display: inline):
• span의 기본 inline 특성 유지
• 첫 번째 줄에 표시
• 다음 요소와 같은 줄 공유 가능
item-b (display: none):
• 완전히 숨겨짐
• 공간을 차지하지 않음
• 렌더링에서 제외됨
item-c (display: block):
• 원래 inline인 span이 block으로 변경
• 새로운 줄에서 시작
• 전체 너비를 차지
최종 레이아웃 결과:
• 첫 번째 줄: A만 표시 (B가 없으므로)
• 두 번째 줄: C가 블록 요소로 새 줄에 표시
• B는 완전히 보이지 않음
item-a (display: inline):
• span의 기본 inline 특성 유지
• 첫 번째 줄에 표시
• 다음 요소와 같은 줄 공유 가능
item-b (display: none):
• 완전히 숨겨짐
• 공간을 차지하지 않음
• 렌더링에서 제외됨
item-c (display: block):
• 원래 inline인 span이 block으로 변경
• 새로운 줄에서 시작
• 전체 너비를 차지
최종 레이아웃 결과:
• 첫 번째 줄: A만 표시 (B가 없으므로)
• 두 번째 줄: C가 블록 요소로 새 줄에 표시
• B는 완전히 보이지 않음
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.