[카카오테크캠퍼스 3주차] CSS 개요: 상속, 우선순위

⏳ 2023. 4. 24. - 2023. 4. 30.

 

상속

스타일을 적용했을 때, 적용된 내용이 하위 요소까지 영향을 미치는 것을 스타일 상속이라고 한다.

자연스럽게 상속되는 css 속성들은 모두 글자/문자 관련 속성들이다.(모든 속성은 아님주의!)

강제 상속

코드의 유지 보수 측면에서, 상위 요소의 값을 변경하면 하위 요소의 값도 그에 따라 자동으로 바뀌는 것이 유리한데, 그때 inherit을 사용할 수 있다.

.parent {
  width: 400px;
  height: 400px;
  background-color: red;
}
.child {
  width: 300px;
  height: inherit;
  background-color: orange;
}

child 요소는 parent 요소의 height 값을 따른다.

---

우선순위

어떤 css 속성을 우선으로 적용하지? → 우선순위(점수)에 따라 결정!

1. 점수가 높은 스타일 적용
2. 점수가 같으면, 가장 마지막의 스타일 적용

꼭 알아두자!

상속 < 전체 < 태그 < 클래스 < 아이디 < 인라인 < !important