CSS - 문제 미리보기
문제 1491
easy
다음 HTML에서 flex item이 되는 요소는 무엇인가요?
```html
<div class="flex-container">
<div>A</div>
<div>B
<span>내부 요소</span>
</div>
<div>C</div>
</div>
```
```html
<div class="flex-container">
<div>A</div>
<div>B
<span>내부 요소</span>
</div>
<div>C</div>
</div>
```
정답: B
• flex item의 정의: flex container의 직접적인 자식 요소만이 flex item이 됩니다.
• 구조 분석:
• `flex-container`: 부모 요소 (flex container)
• `A`, `B`, `C`: 직접 자식 요소 → flex item이 됨
• `내부 요소 (span)`: 손자 요소 → flex item이 아님
• 중요한 원칙:
• flex 속성은 한 단계 아래 자식에게만 적용
• 손자 요소에게 flex를 적용하려면 그 부모에도 display: flex 필요
• 실무 예시:
```html
<nav class="flex-container"> <!-- flex container -->
<div>로고</div> <!-- flex item -->
<ul> <!-- flex item -->
<li>메뉴1</li> <!-- 일반 요소 (flex item 아님) -->
<li>메뉴2</li> <!-- 일반 요소 (flex item 아님) -->
</ul>
<div>로그인</div> <!-- flex item -->
</nav>
```
• 구조 분석:
• `flex-container`: 부모 요소 (flex container)
• `A`, `B`, `C`: 직접 자식 요소 → flex item이 됨
• `내부 요소 (span)`: 손자 요소 → flex item이 아님
• 중요한 원칙:
• flex 속성은 한 단계 아래 자식에게만 적용
• 손자 요소에게 flex를 적용하려면 그 부모에도 display: flex 필요
• 실무 예시:
```html
<nav class="flex-container"> <!-- flex container -->
<div>로고</div> <!-- flex item -->
<ul> <!-- flex item -->
<li>메뉴1</li> <!-- 일반 요소 (flex item 아님) -->
<li>메뉴2</li> <!-- 일반 요소 (flex item 아님) -->
</ul>
<div>로그인</div> <!-- flex item -->
</nav>
```
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.