Inheritance & Cascading (상속, 우선순위)

맹뿌·2021년 5월 31일

CSS 프론트엔드

CSS3

목록 보기

10/10

① 상속 (Inheritance)

상속이란 상위 요소에 적용된 속성을 하위 요소가 물려 받는 것을 의미

속성별 상속 여부 확인 링크

② 캐스캐이딩 (Cascading)

하나의 태그에 여러가지 방법으로 동일한 속성의 스타일을 적용하는 경우 우선순위에 따라서 적용될 스타일이 결정됨

⭕ 우선순위를 결정하는 요소

중요도 : CSS가 어디에 선언되었는지에 따라서 우선순위가 달라짐

명시도 : 대상을 명확하게 특정할수록 명시도가 높아지고 우선순위가 높아짐

코드의 순서(선언 순서) : 선언된 순서에 따라 우선순위가 적용됨. 즉, 나중에 선언된 스타일이 우선 적용

1. 중요도

head 요소 내의 style 요소
head 요소 내의 style 요소 내의 @import 문
<link>로 연결된 CSS 파일
ex) <link rel="stylesheet" href="style.css">
<link>로 연결된 CSS 파일 내의 @import문
브라우저 디폴트 스타일시트

2. 명시도

!important > 인라인 스타일 > 아이디 선택자 > 클래스/어트리뷰트/가상 선택자 > 태그 선택자 > 전체 선택자 > 상위 요소에 의해 상속된 속성 순서로 우선순위가 높음

<!DOCTYPE html>
<html>
<head>
  <style>
    p        { color: red !important; }
    #thing   { color: blue; }

    div.food { color: chocolate; }
    .food    { color: green; }
    div      { color: orange; }
  </style>
</head>
<body>
  <p id="thing">Will be Red.</p>    /* red로 표시 */
  <div class="food">Will be Chocolate.</div>    /* chocolate로 표시 */
</body>
</html>

3. 선언 순서

나중에 선언된 스타일이 우선 적용

<!DOCTYPE html>
<html>
<head>
  <style>
    p { color: blue; }
    p { color: red; }

    .red { color: red; }
    .blue { color: blue; }
  </style>
</head>
<body>
  <p>Will be RED.</p>    /* red로 표시 */
  <p class="blue red">Will be BLUE.</p>    /* blue로 표시 */
</body>
</html>

🎁 참조 및 출처

맹뿌

무엇이든 할 수 있고, 무엇이든 될 수 있는

이전 포스트