코드잇 위클리 페이퍼 Cascade란 무엇인가?

About this offer

1. 캐스케이드 (Cascade) CSS를 작성하다 보면 하나의 HTML 요소에 서로 다른 스타일 규칙이 동시에 적용될 수 있습니다. 이때 브라우저는 정해진 우선순위에 따라 어떤 값을 화면에 적용할지 결정합니다. 이 과정을 캐스케이드(Cascade) 라고 합니다. 예를 들어 같은 문단에 다음 두 규칙이 적용되면, 두 규칙의 다른 우선순위 조건이 같을 때 나중에 작성한 값이 적용됩니다. p { color: red; } p { color: blue; } 이 경우 문단 글자색은 파란색입니다. 캐스케이드의 주요 판별 기준 기초적으로 캐스케이드의 우선순위를 중요도와 출처, 명시도(특수성), 코드 순서 로 나누어 이해할 수 있습니다. 실제 브라우저는 캐스케이드 레이어와 같은 기준도 함께 확인하므로, 코드 순서는 앞의 우선순위 조건이 같을 때 최종적으로 비교됩니다. 1. 중요도와 스타일 출처 CSS 규칙에는 브라우저 기본 스타일(User Agent), 사용자 스타일, 개발자가 작성한 스타일이 있습니다. 일반 선언끼리는 보통 개발자 스타일이 사용자 스타일보다 우선하고, 사용자 스타일은 브라우저 기본 스타일보다 우선합니다. 속성값 뒤에 !important 를 붙이면 일반 선언보다 우선합니다. 하지만 !important 가 출처와 관계없이 무조건 가장 강한 것은 아닙니다. 중요 선언끼리는 우선순위가 다시 출처에 따라 달라지며, 브라우저의 중요 선언이나 사용자의 중요 선언은 개발자의 중요 선언보다 우선할 수 있습니다. CSS 전환 중인 값처럼 별도로 높은 우선순위를 갖는 경우도 있습니다. p { color: blue; } p { color: red !important; } 위 예시에서는 !important 가 붙은 red 가 적용됩니다. 다만 !important 를 자주 사용하면 스타일의 우선순위를 추적하기 어려워지므로 꼭 필요한 경우에만 사용하는 편이 좋습니다. 인라인 스타일( style="..." )은 일반적인 스타일시트의 일반 선언보다 우선하지만, 이것도 모든 CSS 선언을 무조건 이기는 것은 아닙니다. 특히 !important 가 붙은 선언과의 우선순위도 함께 따져야 합니다. 2. 명시도(특수성, Specificity) 중요도 조건이 같으면 선택자가 얼마나 구체적인지 비교합니다. 특수성은 보통 다음 세 항목의 묶음으로 나타냅니다. 선택자 종류 특수성 항목 예시 ID 선택자 ID 개수 #header → (1, 0, 0) 클래스·속성·의사 클래스 해당 개수 .btn , [type="text"] , :hover → (0, 1, 0) 태그·의사 요소 해당 개수 div , ::before → (0, 0, 1) 세 항목은 왼쪽부터 차례로 비교합니다. 따라서 ID 항목이 더 큰 선택자는 클래스나 태그 개수가 많더라도 우선합니다. 조합자( , > , + , ~ )와 전체 선택자( * )는 특수성을 더하지 않습니다. 선택자 계산 특수성 h1 태그 1개 (0, 0, 1) .box .title 클래스 2개 (0, 2, 0) #nav ul li ID 1개, 태그 2개 (1, 0, 2) a.btn:hover 클래스 2개, 태그 1개 (0, 2, 1) 예를 들어 다음 규칙은 같은 요소에 적용될 때 ID 선택자를 포함한 #title 쪽이 더 높은 특수성을 갖습니다. .title { color: blue; } #title { color: green; } 특수성은 흔히 점수라고 부르지만, (1, 0, 0) 을 (0, 100, 0) 처럼 단순 합산해 비교하지 않습니다. 각 자릿수를 왼쪽부터 비교합니다. 인라인 스타일은 이 선택자 특수성 표에 단순히 (1, 0, 0, 0) 으로 더하는 방식이 아니라 별도의 우선순위로 다룹니다. !important 도 특수성 점수가 아니라 중요도를 나타냅니다. 3. 코드 순서 (Source Order) 중요도와 출처, 레이어, 특수성이 모두 같으면 나중에 작성된 선언이 적용됩니다. h1 { color: red; } h1 { color: blue; } 두 선택자는 모두 h1 이라 특수성이 같습니다. 따라서 아래쪽에 나중에 작성된 color: blue 가 최종 적용됩니다. 2. 캐스케이드 우선순위 규칙 (Specificity) 선택자끼리 명시도를 비교할 때는 (ID, 클래스·속성·의사 클래스, 태그·의사 요소) 순서로 셉니다. 왼쪽 항목부터 비교하고, 앞 항목이 같을 때 다음 항목을 비교합니다. 계산 예시 h1 → 태그 1개: (0, 0, 1) .box .title → 클래스 2개: (0, 2, 0) #nav ul li → ID 1개, 태그 2개: (1, 0, 2) a.btn:hover → 클래스 2개, 태그 1개: (0, 2, 1) 예를 들어 (1, 0, 0) 은 (0, 99, 99) 보다 우선합니다. ID 항목이 클래스와 태그 항목보다 왼쪽에 있기 때문입니다. 반대로 같은 항목의 개수가 같으면 다음 항목과 코드 순서를 차례로 비교합니다. 종합 예시 <h1 id="title" class="main-title" style="color: purple;"> CSS 캐스케이드 테스트 </h1> h1 { color: gray; } .main-title { color: blue; } #title { color: green; } .main-title { color: orange; } 위 코드에서 인라인 스타일은 일반적인 스타일시트의 일반 선언보다 우선하므로 글자색은 보라색입니다. 인라인 스타일을 제거하면 ID 선택자인 #title 의 초록색이 적용됩니다. ID 규칙도 제거하면 클래스 선택자가 태그 선택자보다 우선하며, 두 .main-title 규칙끼리는 나중에 작성된 주황색이 적용됩니다. 정리 캐스케이드는 여러 CSS 선언 중 최종 스타일을 결정하는 과정입니다. 먼저 출처와 중요도 같은 상위 조건을 비교하고, 선택자의 특수성을 확인합니다. 이 조건들이 같을 때 소스 순서가 마지막 판단 기준이 됩니다. 따라서 스타일이 예상과 다르게 적용되면 무조건 !important 를 추가하기보다, 어떤 선언들이 충돌하는지 확인하고 우선순위를 차례로 비교하는 것이 좋습니다. 참고 자료 W3C CSS Cascading and Inheritance MDN: Specificity