CSS - 문제 미리보기
문제 1475
medium
다음 코드에서 `.error` 클래스가 적용된 요소의 배경색은 무엇인가요?
```css
@property --bg-color {
syntax: "<color>";
inherits: true;
initial-value: white;
}
.container {
--bg-color: lightblue;
background-color: var(--bg-color);
}
.error {
--bg-color: 123;
background-color: var(--bg-color);
}
```
```css
@property --bg-color {
syntax: "<color>";
inherits: true;
initial-value: white;
}
.container {
--bg-color: lightblue;
background-color: var(--bg-color);
}
.error {
--bg-color: 123;
background-color: var(--bg-color);
}
```
정답: B
• 타입 검사 실패 시 동작:
• `--bg-color`는 `syntax: "<color>"`로 정의되어 색상 값만 허용합니다
• `.error`에서 `--bg-color: 123`을 설정했지만, 123은 유효한 색상 값이 아닙니다
• 타입 검사에 실패하면 `initial-value`에서 정의한 기본값 `white`가 사용됩니다
• @property의 장점:
• 잘못된 값이 할당되어도 브라우저가 자동으로 안전한 기본값을 사용
• 런타임 에러 대신 graceful fallback 제공
• 개발자 실수로 인한 레이아웃 깨짐 방지
• 일반 CSS Variables와의 차이:
• 일반 변수: 잘못된 값이라도 그대로 사용하여 스타일이 적용되지 않음
• `@property`: 타입 검사 후 안전한 기본값 제공
• `--bg-color`는 `syntax: "<color>"`로 정의되어 색상 값만 허용합니다
• `.error`에서 `--bg-color: 123`을 설정했지만, 123은 유효한 색상 값이 아닙니다
• 타입 검사에 실패하면 `initial-value`에서 정의한 기본값 `white`가 사용됩니다
• @property의 장점:
• 잘못된 값이 할당되어도 브라우저가 자동으로 안전한 기본값을 사용
• 런타임 에러 대신 graceful fallback 제공
• 개발자 실수로 인한 레이아웃 깨짐 방지
• 일반 CSS Variables와의 차이:
• 일반 변수: 잘못된 값이라도 그대로 사용하여 스타일이 적용되지 않음
• `@property`: 타입 검사 후 안전한 기본값 제공
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.