CSS - 문제 미리보기
문제 1357
easy
다음 코드에서 문단의 배경색은 무엇인가요?
```css
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
```
```html
<p id="myid" class="myclass">Hello World!</p>
```
```css
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
```
```html
<p id="myid" class="myclass">Hello World!</p>
```
정답: C
• !important 규칙은 모든 특이성 계산을 무시하고 최우선 적용됩니다
• 일반적인 특이성 순서:
• ID 선택자 (`#myid`) > 클래스 선택자 (`.myclass`) > 요소 선택자 (`p`)
• !important 적용 시:
• 특이성과 관계없이 `!important`가 붙은 규칙이 최우선
• 이 경우 `p` 요소 선택자의 빨간색이 적용됨
• 실제 적용 과정:
1. 브라우저가 모든 적용 가능한 CSS 규칙을 수집
2. `!important`가 붙은 규칙을 먼저 확인
3. `background-color: red !important`가 다른 모든 규칙을 덮어씀
• 일반적인 특이성 순서:
• ID 선택자 (`#myid`) > 클래스 선택자 (`.myclass`) > 요소 선택자 (`p`)
• !important 적용 시:
• 특이성과 관계없이 `!important`가 붙은 규칙이 최우선
• 이 경우 `p` 요소 선택자의 빨간색이 적용됨
• 실제 적용 과정:
1. 브라우저가 모든 적용 가능한 CSS 규칙을 수집
2. `!important`가 붙은 규칙을 먼저 확인
3. `background-color: red !important`가 다른 모든 규칙을 덮어씀
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.