본 게시글은 인프런 강의 "CSS 기본부터 활용까지"를 보고 공부한 내용을 정리하고 있습니다.
[무료] CSS 기본부터 활용까지 - 인프런 | 강의
CSS는 HTML을 아름답게 꾸며주는 디자이너의 언어입니다. CSS는 디지털 컨텐츠를 생산하는 사람들에게는 붓 질과 같은 것이 아닐까 싶습니다. 이 수업에서는 디지털 붓 질을 하는 법을 알려드립니
www.inflearn.com
상속
수업 내용의 h1태그와 리스트를 나타내는 li태그에 속해있는 텍스트의 색을 빨간색으로 하려고한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li{color : red;}
h1{color : red;}
</style>
</head>
<body>
<h1>수업내용</h1>
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
</body>
</html>
지금까지 배운것을 활용하여 폰트의 색상을 변경한다고 하면 다음과 같이 style태그를 열어서, li와 h1에 선택자를 만들어 지정하여 폰트 색상을 변경할 것이다.
h1과 li모두 html 태그 안에 속해 있다.
그렇기 때문에 html태그의 color값을 red로 정하면 안에 속해이쓴 h1 li의 텍스트의 색상이 빨간 색이 된다.
<style>
html { color : red;}
</style>
정리
html의 색상을 조정하면 하위에 모든 엘리먼트의 색상이 자동을 바뀌게 되는데, 각 엘리먼트가 상위 엘리먼트의 색상 값을 물려 받았기 때문입니다.
하이러한 기능을 상속이라합니다.
상속을 통해 복잡하고 길어지는 코드의 길이를 줄일수 있습니다.
하지만 모든 속성이 상속이 가능한건 아닙니다.
아래 링크는 속성들의 상속여부를 볼 수 있습니다
https://www.w3.org/TR/CSS21/propidx.html
Full property table
www.w3.org
'프론트엔드 > CSS' 카테고리의 다른 글
| CSS 기본부터 활용까지 - 캐스케이딩 실습 (0) | 2022.07.28 |
|---|---|
| CSS 기본부터 활용까지 - 캐스케이딩 소개 (0) | 2022.07.28 |
| CSS 기본부터 활용까지 - 가상클래스 선택자 (0) | 2022.07.25 |
| CSS 기본부터 활용까지 - 부모 자식 선택자 (0) | 2022.07.25 |
| CSS 기본부터 활용까지 - ID선택자 (0) | 2022.07.25 |