CSS - 문제 미리보기
문제 1052
medium
다음 CSS 코드에서 실제로 적용되는 width 값은?
```css
.box {
width: -100px;
height: 50px;
width: 200px;
}
```
```css
.box {
width: -100px;
height: 50px;
width: 200px;
}
```
정답: C
이 문제는 유효하지 않은 값과 CSS 속성 덮어쓰기 두 가지 개념을 다룹니다.
코드 분석:
1. `width: -100px;` → 유효하지 않은 값 (음수 width는 불가능)
2. `height: 50px;` → 정상 적용
3. `width: 200px;` → 정상적인 값으로 덮어쓰기
CSS 처리 과정:
• 첫 번째 width(-100px)는 유효하지 않아 무시됨
• 두 번째 width(200px)가 유효하므로 적용됨
• 같은 속성이 여러 번 나올 때는 마지막 유효한 값이 적용
유효하지 않은 값들의 예:
• `width: -100px;` (음수 너비)
• `color: 999;` (잘못된 색상 형식)
• `font-size: -20px;` (음수 글자 크기)
• `margin: hello;` (숫자가 아닌 값)
결과: width는 200px로 적용됩니다.
코드 분석:
1. `width: -100px;` → 유효하지 않은 값 (음수 width는 불가능)
2. `height: 50px;` → 정상 적용
3. `width: 200px;` → 정상적인 값으로 덮어쓰기
CSS 처리 과정:
• 첫 번째 width(-100px)는 유효하지 않아 무시됨
• 두 번째 width(200px)가 유효하므로 적용됨
• 같은 속성이 여러 번 나올 때는 마지막 유효한 값이 적용
유효하지 않은 값들의 예:
• `width: -100px;` (음수 너비)
• `color: 999;` (잘못된 색상 형식)
• `font-size: -20px;` (음수 글자 크기)
• `margin: hello;` (숫자가 아닌 값)
결과: width는 200px로 적용됩니다.
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.