[Front-End] 6) CSS 상속과 우선순위 결정

css_inheritance.html

0.00MB

css_priority.html

0.00MB

학습 목표

1. CSS 상속의 특징과 상속이 되지 않는 상황에 대해서 이해합니다.

 

 

---

핵심 개념

• CSS 상속
• 선택자 우선순위 (CSS Specificity)

 

 

---

학습하기

상속과 우선순위 결정 (1)

상위에서 적용한 스타일은 하위에도 반영됩니다.

이로 인해 여러 단계로 중첩된 엘리먼트마다 매번 같은 색상과 글자 크기를 부여하지 않아도 됩니다.

하지만 모든 CSS 속성이 이런 특징을 갖게 되면, 몇 가지 문제가 생깁니다.

예를 들어 width 속성이 상속되면 하위 엘리먼트가 모든 같은 크기의 넓잇값을 가질 수 있습니다.

이런 것은 원하는 것이 아니죠.

그래서 box-model이라고 불리는 속성들(width, height, margin, padding, border)과 같이 크기와 배치 관련된 속성들은 하위엘리먼트로 상속이 되지 않습니다.

이렇게 CSS는 꽤 똑똑한 방식으로 동작합니다.  

아직 혼란스러운 부분이 있다면, 여러분들이 중첩된 엘리먼트를 만들고, CSS 속성을 부여하면서 이 특징을 잘 이해해보면 좋습니다.

 

상속과 우선순위 결정 (2)

[영상보강]
영상 1:34에 나온 inline > internal > external 로 강의자료에 표현되어 있습니다. 일반적인 CSS위치는 css파일(external)에 두고 그 아래 style태그를 사용해서(internal 방식) 표현하기 때문에 그런경우 위에 나온 내용이 맞습니다.
하지만, internal과 external은 같은 우선순위를 가집니다.
같은 css내용이 있는 경우를 예로 보죠.

만약 css.css에서 div color를 blue로 주었다면, 뒤에 선언된 external방식의 css내용이 반영됩니다. 따라서 blue색깔로 나오겠죠.

즉 internal과 external은 같은 우선순위로 결정된다고 아셔야 합니다.

CSS는 여러가지 스타일정보를 기반으로 최종적으로 '경쟁'에 의해서 적절한 스타일이 반영된다는 점을 잘 기억해야 합니다.

위 코드에서 id, class, 엘리먼트 순으로 우선순위를 가집니다.

id는 클래스보다 우선되고 클래스는 엘리먼트보다 우선됩니다.
위 코드에서는 id인 a의 색상이 적용되게 됩니다.
CSS의 이런 성질을 캐스캐이딩이라고 합니다.

 

선언방식에 따른 차이

같은 선택자(selector)라면 나중에 선언한 것이 반영됩니다.

선택자의 표현이 구체적인 것이 있다면 먼저 적용됩니다.

• body > span (O)
• span (X)

 

ID > CLASS > ELEMENT 순으로 반영

만약 h1태그가 div > p > h1 구조로 HTML으로 짜여있다고 가정하면, 아래에 색깔 중 h1이 가진 색깔은 어떤 것일까요?

여러분들이 실험을 통해서 그 결과를 확인해보세요.

jsbin과 유사한 사이트 하나 더 알려드릴게요.

이번에는 codepen.io 라는 사이트를 이용해서 테스트해보세요.

 

 

* reference :

1) https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Specificity

2) https://www.edwith.org/boostcourse-web/lecture/16674

[LECTURE] 2) 상속과 우선순위 결정 : edwith