CSS - 문제 미리보기
문제 1116
medium
다음 두 코드는 동일한 결과를 만듭니다. 빈칸에 들어갈 값은?
```css
/* 코드 A - 개별 속성 */
.button {
border-width: 2px;
border-style: dashed;
border-color: green;
}
/* 코드 B - 단축 속성 */
.button {
border: ______;
}
```
```css
/* 코드 A - 개별 속성 */
.button {
border-width: 2px;
border-style: dashed;
border-color: green;
}
/* 코드 B - 단축 속성 */
.button {
border: ______;
}
```
정답: B
`border` 단축 속성에는 정해진 순서가 있지만, 실제로는 순서가 유연합니다. 하지만 일반적인 관례를 따르는 것이 좋습니다.
일반적인 순서 (권장):
```css
border: [두께] [스타일] [색상];
```
순서의 유연성: 실제로 CSS는 다음 순서들도 모두 인식합니다:
• `border: 2px dashed green;` ✓ (권장)
• `border: dashed 2px green;`
• `border: green 2px dashed;`
하지만 권장하는 이유:
• 가독성: 두께 → 스타일 → 색상이 논리적
• 일관성: 대부분의 개발자가 사용하는 순서
• 유지보수: 팀 작업에서 통일성 제공
일반적인 순서 (권장):
```css
border: [두께] [스타일] [색상];
```
순서의 유연성: 실제로 CSS는 다음 순서들도 모두 인식합니다:
• `border: 2px dashed green;` ✓ (권장)
• `border: dashed 2px green;`
• `border: green 2px dashed;`
하지만 권장하는 이유:
• 가독성: 두께 → 스타일 → 색상이 논리적
• 일관성: 대부분의 개발자가 사용하는 순서
• 유지보수: 팀 작업에서 통일성 제공
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.