2021-09-17 CSS 상속과 캐스케이딩

1. Inheritance (상속)

- CSS에서 한 엘레먼트에 스타일을 주면 그 자식들 역시 영향을 받는다.

- 모든 스타일이 상속되는 것은 아니며 border, margin, padding, border 등은 상속되지 않는다.

 

 

2. Cascading (캐스케이딩)

- 한 대상에 대해 중복되는 스타일 선언이 존재할 경우 어떤 스타일을 선택할지에 대한 규칙이다.

- 캐스케이딩은 중요도, 명시도, 순서 이렇게 3가지 규칙에 따른다.

 

(1) 중요도

CSS 소스의 출처로부터 중요도를 구분한다. (먼저 언급될수록 우선순위가 높다)

1. !important 속성
2. 개발자 CSS
   1. 인라인 스타일
   2. style 태그
   3. link 태그로 가져온 stylesheet css 파일
3. 유저 CSS : 폰트 설정 등 사용자가 브라우저에 적용한 설정을 말한다.
4. 브라우저 CSS : 아무런 스타일도 주지 않았을 때 적용되는 디폴트 CSS (브라우저마다 다르다)

 

※ !important 키워드를 적용하면 모든 케스케이딩을 무시하고 해당 스타일이 최우선으로 적용된다. 그러나 이는 보통 HTML, CSS 구조가 잘못된 경우이기 때문에 좋게 작성되지 못한 코드라는 뜻이 된다.

 

(2) 명시도

CSS에서 요소를 지정하기 위해 선택한 Selector에 따라 우선순위가 달라진다.

1. 인라인 스타일 : 태그 안에 style 속성을 이용해 직접 스타일을 지정한 것  ex) <p style="color:red">
2. ID
3. Class
4. Type
5. * (전체 요소 선택자)

 

(3) 순서

중요도와 명시도가 같은 경우 가장 마지막에 선언된 스타일이 적용된다.