HTML - 문제 미리보기
문제 941
hard
다음 CSS Grid 코드에서 3개의 `<div>` 요소가 어떻게 배치될까요?
```css
.grid-container {
display: grid;
grid-template-columns: 25% 50% 25%;
}
```
```html
<div class="grid-container">
<div>첫 번째</div>
<div>두 번째</div>
<div>세 번째</div>
</div>
```
```css
.grid-container {
display: grid;
grid-template-columns: 25% 50% 25%;
}
```
```html
<div class="grid-container">
<div>첫 번째</div>
<div>두 번째</div>
<div>세 번째</div>
</div>
```
정답: B
CSS Grid의 `grid-template-columns: 25% 50% 25%`는 3개의 열을 정의하며, 각각의 너비를 지정합니다:
• 첫 번째 열: 전체 너비의 25%
• 두 번째 열: 전체 너비의 50%
• 세 번째 열: 전체 너비의 25%
Grid는 자식 요소들을 정의된 열의 순서대로 배치하므로, 세 개의 `<div>` 요소가 각각 25%, 50%, 25%의 너비를 가지며 가로로 나란히 배치됩니다. Grid는 Flexbox와 달리 명확한 행과 열의 구조를 제공하여 더 정밀한 레이아웃 제어가 가능합니다.
• 첫 번째 열: 전체 너비의 25%
• 두 번째 열: 전체 너비의 50%
• 세 번째 열: 전체 너비의 25%
Grid는 자식 요소들을 정의된 열의 순서대로 배치하므로, 세 개의 `<div>` 요소가 각각 25%, 50%, 25%의 너비를 가지며 가로로 나란히 배치됩니다. Grid는 Flexbox와 달리 명확한 행과 열의 구조를 제공하여 더 정밀한 레이아웃 제어가 가능합니다.
💡 학습 팁
이 문제를 포함한 HTML 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.