CSS 속성 상속
단락 안에 i 태그로 감싸인
텍스트가 있다고 가정해 봅시다:
<p>
This is some <i>text</i> in paragraph.
</p>
단락의 색상을 빨간색으로 설정해 봅시다:
p {
color: red;
}
결과적으로 단락의 텍스트뿐만 아니라
i 태그의 텍스트도 빨간색이 됩니다:
그 이유는 color 속성이
상속(inherit)되기 때문입니다. 이는
부모 태그에 특정 색상이 지정되어 있으면,
자식 태그에도 그 색상이 적용된다는 의미입니다.
모든 CSS 속성이 상속되는 것은 아니지만,
많은 속성이 상속됩니다(지금까지 배운 속성들은
모두 상속됩니다).
그러나 원한다면, 자식에 대한 선택자를 설정하여 부모의 속성을 재정의할 수 있습니다. 예를 들어, 단락에는 빨간색을, 이탤릭체에는 파란색을 지정해 봅시다:
<p>
This is some <i>text</i> in paragraph.
</p>
p {
color: red;
}
i {
color: blue;
}
:
이 경우 CSS 코드에서 선택자의 순서는
중요하지 않습니다. i 선택자와
p 선택자의 위치를 바꾸어도
동일하게 작동합니다:
<p>
This is some <i>text</i> in paragraph.
</p>
i {
color: blue;
}
p {
color: red;
}
:
코드를 분석하고 b 태그 안의 텍스트가
어떤 색상일지 말해보세요:
<p>
This is some <b>text</b> in paragraph.
</p>
p {
color: blue;
}
코드를 분석하고 b 태그 안의 텍스트가
어떤 색상일지 말해보세요:
<p>
This is some <b>text</b> in paragraph.
</p>
p {
color: blue;
}
b {
color: red;
}
코드를 분석하고 b 태그 안의 텍스트가
어떤 색상일지 말해보세요:
<p>
This is some <b>text</b> in paragraph.
</p>
b {
color: red;
}
p {
color: blue;
}
코드를 분석하고 li 태그 안의 텍스트가
어떤 색상일지 말해보세요:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
ul {
color: blue;
}
코드를 분석하고 li 태그 안의 텍스트가
어떤 색상일지 말해보세요:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
ul {
color: blue;
}
li {
color: red;
}
코드를 분석하고 i 태그 안의 텍스트가
어떤 색상일지 말해보세요:
<ul>
<li>text <i>italic</i> text</li>
<li>text <i>italic</i> text</li>
<li>text <i>italic</i> text</li>
</ul>
ul {
color: blue;
}
li {
color: red;
}
i {
color: green;
}
코드를 분석하고 i 태그 안의 텍스트
크기가 어떻게 될지 말해보세요:
<ul>
<li>text <i>italic</i> text</li>
<li>text <i>italic</i> text</li>
<li>text <i>italic</i> text</li>
</ul>
i {
font-size: 30px;
}
ul {
font-size: 20px;
}
li {
color: red;
font-weight: bold;
}
