🎨 CSS 속성 상속 개념 & 적용 우선순위

Style Sheet/CSS

🎨 CSS 속성 상속 개념 & 적용 우선순위

인파_ 2021. 9. 28. 16:41

CSS 속성 상속

CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있다.

상속하는 속성은 자식 요소에 영향을 미친다.
상속하지 않는 속성은 자식 요소에 영향을 미치지 않는다.

property	상속
width/height	no
margin	no
padding	no
border	no
box-sizing	no
display	no
visibility	yes
opacity	yes
background	no
font	yes
color	yes
line-height	yes
text-align	yes
vertical-align	no
text-decoration	no
white-space	yes
position	no
top/right/bottom/left	no
z-index	no
overflow	no
float	no

상속하는 속성

예를 들어 color는 상속하는 속성이다. 부모 요소에서 정한 색이 자식 요소에도 적용된다.

<style>
  p { color: blue; }
</style>

<p>Lorem <em>Ipsum</em></p> 
<!-- Lorem 뿐만 아니라 Ipsum의 색도 파란색이 됩니다. -->

상속하지 않는 속성

예를 들어 padding은 상속하지 않는 속성이다. 부모 요소에서 padding을 정의해도 자식 요소에 적용되지 않는다.

<style>
  p { padding: 20px; }
</style>

<p>Lorem <em>Ipsum</em></p> 
<!-- p 요소에만 안쪽 여백을 만들고 em 요소에는 안쪽 여백을 만들지 않습니다. -->

CSS 캐스캐이딩(Cascading)

요소는 하나 이상의 CSS 선언에 영향을 받을 수 있다. 이때 충돌을 피하기 위해 CSS 적용 우선순위가 필요한데 이를 캐스캐이딩(Cascading Order)이라고 한다.

캐스캐이딩에는 다음과 같이 세가지 규칙이 있다.

중요도 : CSS가 어디에 선언 되었는지에 따라서 우선순위가 달라진다.
명시도 : 대상을 명확하게 특정할수록 명시도가 높아지고 우선순위가 높아진다.
선언순서 : 선언된 순서에 따라 우선 순위가 적용된다. 즉, 나중에 선언된 스타일이 우선 적용된다.

CSS 중요도

CSS가 어디에 선언 되었는지에 따라서 우선순위가 달라진다.

head 요소 내의 style 요소
head 요소 내의 style 요소 내의 @import 문
~~<link>~~ 로 연결된 CSS 파일
~~<link>~~ 로 연결된 CSS 파일 내의 @import 문
브라우저 디폴트 스타일시트

CSS 명시도

대상을 명확하게 특정할수록 명시도가 높아지고 우선순위가 높아진다.

!important
인라인 스타일
아이디 선택자
클래스 / 어트리뷰트 / 가상 선택자
태그 선택자
전체 선택자
상위 요소에 의해 상속된 속성

p        { color: red !important; } /* 1 */

#thing   { color: blue; }/* 2 */

div.food { color: chocolate; } /* 3 */

.food    { color: green; } /* 4 */

div      { color: orange; } /* 5 */

!important

CSS는 같은 속성을 여러 번 정의했을 때, 나중에 설정한 값이 적용된다. 만약 나중에 설정한 값이 적용되지 않게 하려면 속성값 뒤에 ~~!important~~를 붙이면 무조건 이 부분이 적용된다. (거의 치트급)

color: red !important;

CSS 선언순서

p { color: blue; } 
p { color: red; } /* 우선 적용 */

.red { color: red; }
.blue { color: blue; } /* 우선 적용 */

<body>
  <p>Will be RED.</p>
  <p class="blue red">Will be BLUE.</p>
</body>