CSS 적용 우선순위

 CSS를 사용하다 보면 여러 가지 선택자로 인해서 같은 태그에 다른 스타일이 적용되는 경우가 있는데요.

 

 이럴 땐 어떻게 될까요? 첫 번째 CSS를 소개 할때도 잠깐 얘기 했지만 가장 가까이 있는 룰이 적용됩니다. 

 그런데 가까운 룰이라는 얘기는 곧 가장 구체적인 룰 이라는 얘기와 같습니다.

 개념적으로만 설명했는데 이제 구체적으로 알아보겠습니다. 간단합니다. 앞으론 이 그림을 생각하시면 됩니다.

 

 왼쪽부터 인라인 방식, 아이디 선택자, 클래스 선택자, 엘리먼트 선택자 입니다. 

 

 자 이제부터는 저 녀석들을 점수판 이라고 생각해봅시다. 해당 되는 녀석이 있으면 1점씩 올리는 방식입니다.

 이렇게만 봐선 이해가 어려울 것 같아서 예를 들어 설명하겠습니다. 

 우리가 <h2> 태그를 스타일링 했다고 가정해봅시다. 이런 식으로 말이죠. 그리고선 위에 그림을 한번 상기 시켜 봅시다.

 <h2> 태그에 적용된 방식은 인라인 방식 입니다. 그렇다면 이제 점수판을 올려 보면 1000 점이 됩니다. 

 결론적으로 <h2> 태그에 적용된 우선순위 스코어는 1000점이라고 할 수 있습니다.

 이 경우는 하나의 스타일이 적용되는 경우라서 문제될 건 없지만 이제부터 스타일이 중복되는 경우를 보겠습니다.

 이 두녀석을 봅시다. <p> 태그가 ID = "myParag" 라는 ID와 big 이라는 Class 를 동시에 가지고 있을 때 어떻게 될까요?? 

 

 쉬우니까 생각해보고 내려오세요 :)

 

 결과는 이렇습니다. 

==================================================

1. div (엘리먼트) , #myParag(아이디) 이므로 101  점

2. div(엘리먼트), .big(클래스), p(엘리먼트) 이므로 12 점 

1번이 더 크므로 첫 번째 스타일이 적용되게 됩니다. 

==================================================

 물론 이 방법 말고 우선순위를 나타낸 표가 있는데요. 저 한테는 이 그림이 더 이해하기가 쉽더라구요.

 저도 이 방법을 강의를 통해서 알게 되었는데요 정말 좋은 방법인것 같습니다.:)

출처 ㅣ https://www.coursera.org/learn/html-css-javascript-for-web-developers/home/week/2