CSS 속성 상속

단락 안에 i 태그로 감싸인 텍스트가 있다고 가정해 봅시다:

html<p>
  This is some <i>text</i> in paragraph.
</p>

단락의 색상을 빨간색으로 설정해 봅시다:

cssp {
  color: red;
}

결과적으로 단락의 텍스트뿐만 아니라 i 태그의 텍스트도 빨간색이 됩니다:

그 이유는 color 속성이 상속(inherit)되기 때문입니다. 이는 부모 태그에 특정 색상이 지정되어 있으면, 자식 태그에도 그 색상이 적용된다는 의미입니다. 모든 CSS 속성이 상속되는 것은 아니지만, 많은 속성이 상속됩니다(지금까지 배운 속성들은 모두 상속됩니다).

그러나 원한다면, 자식에 대한 선택자를 설정하여 부모의 속성을 재정의할 수 있습니다. 예를 들어, 단락에는 빨간색을, 이탤릭체에는 파란색을 지정해 봅시다:

html<p>
  This is some <i>text</i> in paragraph.
</p>

cssp {
  color: red;
}
i {
  color: blue;
}

Результат:

이 경우 CSS 코드에서 선택자의 순서는 중요하지 않습니다. i 선택자와 p 선택자의 위치를 바꾸어도 동일하게 작동합니다:

html<p>
  This is some <i>text</i> in paragraph.
</p>

cssi {
  color: blue;
}
p {
  color: red;
}

Результат:

Задание 1

코드를 분석하고 b 태그 안의 텍스트가 어떤 색상일지 말해보세요:

html<p>
  This is some <b>text</b> in paragraph.
</p>

cssp {
  color: blue;
}

Задание 2

코드를 분석하고 b 태그 안의 텍스트가 어떤 색상일지 말해보세요:

html<p>
  This is some <b>text</b> in paragraph.
</p>

cssp {
  color: blue;
}
b {
  color: red;
}

Задание 3

코드를 분석하고 b 태그 안의 텍스트가 어떤 색상일지 말해보세요:

html<p>
  This is some <b>text</b> in paragraph.
</p>

cssb {
  color: red;
}
p {
  color: blue;
}

Задание 4

코드를 분석하고 li 태그 안의 텍스트가 어떤 색상일지 말해보세요:

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

cssul {
  color: blue;
}

Задание 5

코드를 분석하고 li 태그 안의 텍스트가 어떤 색상일지 말해보세요:

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

cssul {
  color: blue;
}
li {
  color: red;
}

Задание 6

코드를 분석하고 i 태그 안의 텍스트가 어떤 색상일지 말해보세요:

html<ul>
  <li>text <i>italic</i> text</li>
  <li>text <i>italic</i> text</li>
  <li>text <i>italic</i> text</li>
</ul>

cssul {
  color: blue;
}
li {
  color: red;
}
i {
  color: green;
}

Задание 7

코드를 분석하고 i 태그 안의 텍스트 크기가 어떻게 될지 말해보세요:

html<ul>
  <li>text <i>italic</i> text</li>
  <li>text <i>italic</i> text</li>
  <li>text <i>italic</i> text</li>
</ul>

cssi {
  font-size: 30px;
}
ul {
  font-size: 20px;
}
li {
  color: red;
  font-weight: bold;
}