[CSS] 캐스캐이딩 Cascading

선택자를 이용하여 스타일을 지정할 때, <div> 태그에 이미 스타일을 지정한 후 <div> 태그 안에 속해있는 다른 태그에는 다른 스타일을 지정해야 할 때가 있다.

이때 선택자의 우선순위인 캐스캐이딩(Cascading)을 잘 이해하고 있어야 스타일 충돌 없이 내가 원하는 html을 작성할 수 있다.

중요도에 따른 우선순위

인라인 스타일 > 내부 스타일 시트 > 외부 스타일 시트 > 웹 브라우저 기본 스타일

위의 형태로 우선순위가 달라진다.

인라인 스타일: html요소 내부에 style 속성으로 사용

내부 스타일 시트: HTML 문서의 style태그 안에 위치

외부 스타일 시트: CSS파일을 따로 만들어서 불러오는 방법

1. 웹 브라우저의 기본 스타일이 있더라도 외부 CSS파일로 작성된 스타일 시트가 있다면 외부 스타일 시트가 적용된다.

2. 외부 CSS파일로 작성된 스타일 시트가 있더라도 html의 <style> 스타일 </style>가 작성되어 있다면 <style> 태그 안에 작성된 내용이 적용된다.

3. html의 <style> 스타일 </style>가 작성되어 있더라도 html body 안의 <태그명 style="스타일"> 이 작성되어 있다면 인라인 스타일이 적용된다.

! important > 인라인 스타일 > 아이디 선택자 > 클래스 선택자 > 태그 선택자 > 전체 선택자 > 상속받은 속성

위의 형태로 우선순위가 달라진다.

단순하게 인라인 스타일, 아이디 선택자, 클래스 선택자, 태그 선택자로 확인해보자.

See the Pen gOLraoV by Heekng (@heekng) on CodePen.

위처럼 우선순위에 따라 적용되는 값이 달라지는 것을 확인할 수 있다.

! important는 어떠한 상위 스타일이 있더라도 무시하고 적용하겠다는 키워드이다.

strong {color:yellow !important;}

위의 형태로 작성한다.