CSS - 문제 미리보기
문제 1371
easy
border-image가 정상적으로 작동하기 위해 반드시 함께 설정해야 하는 속성은?
```css
#image-border-box {
_____: 10px solid transparent;
border-image: url(decorative.png) 25 stretch;
}
```
```css
#image-border-box {
_____: 10px solid transparent;
border-image: url(decorative.png) 25 stretch;
}
```
정답: B
• `border-image`는 기존 `border` 속성이 설정되어야만 작동합니다
• border 속성의 필수 이유:
• `border-image`는 기존 테두리를 이미지로 대체하는 기능
• 테두리의 두께와 스타일이 미리 정의되어야 함
• 이미지가 적용될 영역의 크기를 결정
• 올바른 설정 순서:
```css
.image-border {
/* 1단계: 기본 테두리 설정 (필수) */
border: 15px solid transparent;
/* 2단계: 이미지 테두리 적용 */
border-image: url(pattern.png) 30 round;
}
```
• transparent 사용 이유:
• 이미지로 완전히 대체되므로 기본 테두리 색상은 보이지 않음
• `transparent`로 설정하여 불필요한 색상 간섭 방지
• 이미지 로딩 실패 시에도 투명한 테두리로 레이아웃 유지
• border 속성의 필수 이유:
• `border-image`는 기존 테두리를 이미지로 대체하는 기능
• 테두리의 두께와 스타일이 미리 정의되어야 함
• 이미지가 적용될 영역의 크기를 결정
• 올바른 설정 순서:
```css
.image-border {
/* 1단계: 기본 테두리 설정 (필수) */
border: 15px solid transparent;
/* 2단계: 이미지 테두리 적용 */
border-image: url(pattern.png) 30 round;
}
```
• transparent 사용 이유:
• 이미지로 완전히 대체되므로 기본 테두리 색상은 보이지 않음
• `transparent`로 설정하여 불필요한 색상 간섭 방지
• 이미지 로딩 실패 시에도 투명한 테두리로 레이아웃 유지
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.