CSS - 문제 미리보기

문제 1385

hard
다음 코드의 실행 결과로 올바른 설명은? ```css .container { color: blue; border: 2px solid red; } .item { color: currentcolor; border: inherit; background-color: transparent; } ``` ```html
Content
```
A. item의 색상은 파란색, 테두리는 빨간색, 배경은 투명
B. item의 색상은 빨간색, 테두리는 파란색, 배경은 흰색
C. item의 색상은 검은색, 테두리는 없음, 배경은 투명
D. 모든 속성이 브라우저 기본값으로 표시됨

정답: A

• 세 가지 키워드가 각각 다른 방식으로 작동하는 복합적인 상황입니다 • 각 속성별 상세 분석: 색상 (`color: currentcolor`): • `currentcolor`는 자신의 `color` 속성을 참조하려 함 • 하지만 자신이 `currentcolor`로 설정되어 있어 순환 참조 • CSS는 이런 경우 상속된 값을 사용: 파란색 (container에서 상속) 테두리 (`border: inherit`): • `inherit`는 부모 요소의 속성값을 그대로 상속받음 • container의 `border: 2px solid red`를 상속 • 결과: 빨간색 2px 실선 테두리 배경 (`background-color: transparent`): • `transparent`는 완전히 투명한 배경 • 결과: 투명 배경 (뒤의 배경이 보임)

💡 학습 팁

이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.