HTML - 문제 미리보기
문제 1019
hard
다음 SVG 코드의 실행 결과를 예측해보세요:
```html
<svg width="300" height="200">
<defs>
<linearGradient id="grad1">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</linearGradient>
</defs>
<rect x="50" y="50" width="100" height="80"
fill="url(#grad1)" stroke="black" stroke-width="2" />
</svg>
```
```html
<svg width="300" height="200">
<defs>
<linearGradient id="grad1">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</linearGradient>
</defs>
<rect x="50" y="50" width="100" height="80"
fill="url(#grad1)" stroke="black" stroke-width="2" />
</svg>
```
정답: C
이 코드는 SVG의 선형 그라데이션(Linear Gradient) 기능을 사용합니다:
1. `<defs>` 섹션: 재사용 가능한 정의들을 담는 영역
2. `<linearGradient id="grad1">`: "grad1"이라는 ID로 선형 그라데이션 정의
3. `<stop>` 요소들:
• `offset="0%"`: 시작점(0%)에서 빨간색
• `offset="100%"`: 끝점(100%)에서 파란색
4. `<rect>` 요소:
• `fill="url(#grad1)"`: 정의된 그라데이션으로 채우기
• `stroke="black" stroke-width="2"`: 검은색 테두리, 두께 2px
결과적으로 왼쪽은 빨간색, 오른쪽은 파란색이고, 중간은 부드럽게 변하는 그라데이션 효과가 적용된 사각형이 검은 테두리와 함께 표시됩니다.
1. `<defs>` 섹션: 재사용 가능한 정의들을 담는 영역
2. `<linearGradient id="grad1">`: "grad1"이라는 ID로 선형 그라데이션 정의
3. `<stop>` 요소들:
• `offset="0%"`: 시작점(0%)에서 빨간색
• `offset="100%"`: 끝점(100%)에서 파란색
4. `<rect>` 요소:
• `fill="url(#grad1)"`: 정의된 그라데이션으로 채우기
• `stroke="black" stroke-width="2"`: 검은색 테두리, 두께 2px
결과적으로 왼쪽은 빨간색, 오른쪽은 파란색이고, 중간은 부드럽게 변하는 그라데이션 효과가 적용된 사각형이 검은 테두리와 함께 표시됩니다.
💡 학습 팁
이 문제를 포함한 HTML 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.