[2-5] CSS 케스케이드(Cascade) 에서 질문이 있습니다!

조회수 711회

id 선택자의 점수가 100점이고 class의 점수가 10점이라고 하셔서 궁금증이 생겨서 코드펜에 예문을 하나 만들어 보았습니다.

https://codepen.io/Neodahl/pen/MVXxyg

위의 펜에서 p태그에 id선택자 한 개와 동시에 class 선택자 11개를 사용했을때 class의 스타일이 적용되어야 하는데 id선택자의 스타일이 적용됩니다.

제가 생각한 계산 방식에 뭐가 문제인지를 잘 모르겠습니다ㅠ

1 답변

  • 좋아요

    3

    싫어요
    채택 취소하기

    안녕하세요 :-D 야무입니다.

    영상 강의에서는 수강생의 이해를 돕기 위해 편의상 id 속성의 점수가 class 속성 보다 높아 우선순위에 있다고 이야기 드렸습니다.

    하지만 @NeoDahl 님께서 직접 수행해보신 결과에서는 class 개수가 11개여도, id 속성 값보다 우선할 수 없었습니다. 여기에는 이유가 있는데요. 왜 그러한 지 이유를 알아보겠습니다. :-)

    CSS는 캐스케이드(우선 적용 순위) 개념 이해가 중요한 언어입니다.

    가장 기본적인 수준에서는 CSS 규칙의 순서가 중요하지만, 실상은 그보다 더 복잡합니다. 캐스케이드에서 어떤 선택자가 우선권을 가지는지는 3가지 요인에 달려 있습니다.

    1. 중요성
    2. 속성 (계산된 점수)
    3. 소스 순서

    2번 항목을 기준으로 실습한 결과를 통해 11개 값을 가진 class 속성이 id 속성 값보다 우선할 것이라 생각하기 쉽죠. 아래 이미지를 살펴보면 각 속성의 개수에 따른 점수 기준을 확인할 수 있습니다.

    캐스케이딩 규칙

    하지만 2번 항목보다 우선하는 것이 1번 항목인 중요성입니다.

    즉, class 속성 값의 개수가 아무리 많아도 id 속성 보다 중요성이 떨어집니다. 아래 이미지를 살펴보면 속성 값의 계산보다 중요성이 CSS 캐스케이딩에서 우선권이 높습니다.

    우선 순위

    추가적으로 아래 참고서를 읽어보시면 도움이 될 겁니다. :-)

    FIN.

    • 와!! 속이 다 시원한 답변 감사드립니다!!👍🏻 NeoDahl 2018.4.6 10:25
    • 시원하셨다면 ^^ 답변 채택 부탁드립니다. :-) 야무 2018.4.6 12:04
    • 넵!ㅎㅎ NeoDahl 2018.4.10 16:11

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.