저번 CSS 기초(1) 편에서 배웠듯이, CSS는 특정 태그에 대해 스타일 정의하는 방식을 따릅니다. 하지만, 어떤 태그에 대해 스타일을 한 번만 선언하지는 않습니다. 하나의 태그에 대하여 스타일 경로를 여러가지로 적용해줄 수도 있고, class나 id로 동시에 스타일을 적용할 수도 있습니다. 이럴 경우, CSS는 여러가지 스타일 지정 방식들에 대해 우선순위를 결정할 필요가 있습니다. 즉, class가 먼저냐, id가 먼저냐. inline 방식이 먼저냐, internal 방식이 먼저냐를 결정해줄 필요가 있다는 것입니다. 이처럼 여러가지 스타일 규칙 중에서 어떤 규칙을 먼저 적용할지 브라우저가 결정하는 방식을 'Cascading'이라고 합니다. Cascading을 이해하기 위해서는 상속과 우선순위 결정 방식을 잘 알아둘 필요가 있습니다. 상속과 우선순위의 개념은 눈으로 코드를 읽는 것만으로는 이해하기가 어렵습니다. 꼭 실습과 함께 학습을 진행하시길 바랍니다.

​

※ 이 글은 커넥트재단의 실무형 온라인 교육 프로그램인 부스트코스 웹 프로그래밍 과정을 기반으로 작성되었습니다.

2-5 CSS 기초 (2)

1. 상속

상속이란, 상위에 설정된 스타일을 하위에도 쓴다는 것을 의미합니다. 이는 코드 재사용 면에서 중요한 개념이므로, 잘 알아둘 필요가 있습니다. 다음 예시를 봅시다.

코드를 실행해보면, 분명 div 영역에 대하여 폰트 색을 지정하였지만, div의 하위요소인 p 태그에도 스타일이 지정된 것을 알 수 있습니다. 상위 요소인 div에 스타일을 지정해주었기 때문에 하위 요소인 p 태그에도 스타일이 지정된 것 입니다.

​

2. 우선순위 결정

만약 동일한 태그에 대하여 다른 방식으로 스타일을 정의하였다면, CSS는 어떤 스타일 방식을 우선적으로 따를 것인지 결정해야 합니다. CSS는 우선 순위를 결정하기 위해 각기 다른 스타일 방식에 대하여 점수를 부여합니다.

CSS Specificity (by CSS-TRICKS)

예를 들어, 어떤 태그에 대하여 id와 class에 스타일이 적용되어 있다고 합시다. 그럼 CSS는 우선순위 결정 기준에 따라 id에 더 높은 점수를 부여합니다. 따라서, 점수가 높은 id가 class보다 우선적으로 스타일이 적용됩니다. 다음은 CSS의 우선 순위 결정 기준입니다.

​

1) inline > internal > external 순으로 우선순위가 결정이됩니다.

​

2) 동일한 규칙의 경우 나중의 것이 적용이 됩니다.

이경우, span 태그는 color: blue로 설정됩니다.

​

3) 구체적으로 설정된 규칙이 먼저 적용

body 속에 span 태그(body > span) 가 더 구체적이므로, span 태그는 color: blue로 지정됩니다.

​

4) class와 id 선택자가 동시에 적용이 되었을 경우, id 선택자가 우선적으로 적용이 됩니다.

id 'b'가 class 속성보다 우선적으로 적용됩니다.또한, 만약 element에 바로 스타일을 선언할 경우, id > class > element 순으로 반영됩니다.

​