CSS - 문제 미리보기
문제 1372
medium
border-image에서 이미지의 중간 부분이 반복되도록 하는 키워드는?
```css
.repeated-border {
border: 15px solid transparent;
border-image: url(pattern.png) 30 _____;
}
```
정답: B
• `round` 키워드는 이미지의 중간 부분을 반복하여 테두리를 채웁니다
• border-image의 repeat 옵션들:
`round` (올바른 답):
• 이미지 패턴을 반복하여 테두리 채움
• 패턴이 잘리지 않도록 크기를 조정하여 반복
• 일정한 패턴이 있는 이미지에 적합
`stretch`:
• 이미지를 늘려서 테두리 전체를 채움
• 반복 없이 하나의 이미지를 확대
• 그라데이션이나 단순한 패턴에 적합
• 실제 비교 예시:
```css
/* 패턴 반복 - 점선이나 무늬가 반복됨 */
.pattern-repeat {
border-image: url(dots.png) 20 round;
}
/* 이미지 늘림 - 하나의 이미지가 확대됨 */
.pattern-stretch {
border-image: url(gradient.png) 20 stretch;
}
```
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.