CSS 상속과 우선순위

CSS의 스타일을 적용하는 여러 가지 방법 중 상속이라는 것이 존재합니다.

 

상속은 대표적인 CSS적용 규칙인데 중복된 속성을 매번 적용하는 일을 줄여 재사용성을 늘릴 수 있습니다.

 

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

이로 인해 여러 단계로 중첩된 엘리먼트마다 스타일을 매번 주지 않아도 됩니다.

하지만 모든 CSS 속성이 상속이란 특징을 갖게되면 문제가 발생합니다.

예를 들어 부모의 크기인 width속성이 상속된다면 하위 엘리먼트가 모두 같은 넓이 값을 가져버리게 되므로 문제가 발생되게 됩니다.

그래서 box-model이라고 불리는 속성들(width, height, margin, padding, boder)와 같이 크기와 배치에 관련된 속성들은

하위 엘리먼트로 상속이 되지않습니다.

 

또한 css적용순위에서도 결정이 필요합니다.

1. 선언방식에 따른 차이가 존재합니다.

 

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

 

span{
color : red;
}

span{
color : blue;
}

 

선택자가 동일하므로 color : blue가 적용됩니다.

body >span{
color : red;
}

span{
color : blue;
}

 

 

이번에는 red가 적용됩니다. red가 좀 더 구체적으로 표현되어있기 때문에 우선적으로 적용됩니다.

#test{
color : red;
}

.test{
color : blue;
}

 

 

 

이번에도 red가 적용됩니다.  ID> CLASS > ELEMENT 순서로 적용됩니다.

 CSS에는 이런 성질을 cascading이라고 합니다.

 

 

CSS selector

 

HTML의 요소를 tag, id, html 태그 속성 등을 통해 쉽게 찾아주는 방법입니다.

 

태그로 선택하기

span{

color :red;

}

 

id로 선택하기

#spanTag{

color :red;

}

 

class로 선택하기

.spanTag{

color :red;

}

그룹 선택

 

h1 ,div,span {

color :red;

}

 

요소 선택 :자손 요소(공백)

 

.spanTag h1{

color :red;

}

 

자식 선택 (>) 바로 하위 엘리먼트를 가리킵니다.

div > span{color : red;}

<div>

<div>

<span></span>

</div>

<span></span> 가 선택 됩니다.

</div>

 

n번째 자식 요소를 선택합니다.

select nth-child(n)

<div class="select">
  <h2>단락 선택</h2>
  <p>첫번째 단락입니다</p>
  <p>두번째 단락입니다</p>
  <p>세번째 단락입니다</p>
  <p>네번째 단락입니다</p>
</div>