본문 바로가기
CSS

[CSS] 상속과 캐스케이딩

by 기리의 개발로그 2022. 3. 3.

상속

상속이란 상위 요소에 적용된 속성을 하위 요소가 물려 받는 것을 의미한다.
속성 중에는 상속되지 않는 것과 상속되는 것이 있다.


속성 상속여부
width/height no
margin no
padding no
border no
box-sizing no
display no
visibility yes
opacity yes
background no
font yes
color yes
line-height yes
text-align yes
vertical-align no
text-decoration no
white-space yes
position no
top/right/bottom/left no
z-index no
overflow no
float no 
<html>
    <head>
        <style>
           html {
               color:red;
           }
           body {
               border: 1px solid red;
           }
        </style>
    </head>
    <body>
        <h1>Web</h1>
        <ul>
            <li>html</li>
            <li>css</li>
            <li id="select">javascript</li>
        </ul>
        <button>Button</button>
    </body>
</html>

상속과케스케이딩

color 는 상속되는 속성으로 html 선택자에 red 를 줬는데 문서의 모든 글씨에 적용되었다. 해당 속성 값이 자식에게 상속되었기 때문이다.
button 의 경우 상속되지 않는 속성이기 때문에 적용되지 않았다.
border 의 경우 상속되지 않는 속성이기 때문에 하위 요소에 적용되지 않았다.

자식 요소에 직접 속성값을 주면 부모로부터 상속된 값은 무시된다. 즉, 속성값을 주지 않은 경우에만 상속된 값이 적용된다.
또한, 상속되지 않는 속성의 경우 inherit 값을 통해 명시적으로 상속받게 할 수 있다.

<html>
    <head>
        <style>
           html {
               color: red;
           }
           #select {
               color: green
           }
           body {
               border: 1px solid red;
           }
           button {
               color: inherit;
           }
        </style>
    </head>
    <body>
        <h1>Web</h1>
        <ul>
            <li>html</li>
            <li>css</li>
            <li id="select">javascript</li>
        </ul>
        <button>Button</button>
    </body>
</html>

상속과케스케이딩1


캐스케이딩

요소는 하나 이상의 CSS 선언에 영향을 받을 수 있는데 이 충돌을 피하기 위해 우선순위가 필요하며 이를 캐스캐이딩이라고 한다.


  • 중요도 : 어디에 선언되었는지

  • 명시도 : 명확하게 지정

  • 순서 : 선언 순서, 나중에 선언될수록 우선 적용


중요도

CSS가 어디에 선언되었는지에 따라 순위가 달라진다.

  1. head 요소 내의 style
  2. head 요소 내의 style 요소 내의 @import 문
  3. <link> 로 연결된 CSS 파일
  4. <link> 로 연결된 CSS 파일 내의 @import 문
  5. 브라우저 기본 스타일시트
div {
    color: blue;
}
<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <style>
            div {
                color: red;
            }
        </style>
    </head>
    <body>
        <div>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolor, pariatur.
        </div>
    </body>
</html>

상속과케스케이딩2


명시도

대상을 명확하게 특정할수록 우선순위가 높아진다.

  1. !important
  2. inline 스타일
  3. 아이디 selector
  4. 클래스 selector / 가상 선택자
  5. 태그 선택자
  6. 상속된 스타일
<html>
    <head>
        <style>
            li {
                color: blue;
            }
            .first, .second {
                color: red;
            }
            #first {
                color: green;
            }
        </style>
    </head>
    <body>
        <ol>
            <li id="first" class="first">first</li>
            <li id="second" class="second">second</li>
            <li id="third" class="third">third</li>
        </ol>
    </body>
</html>

상속과케스케이딩3

태그 선택자(li)로 지정한 파란색은 class,id 선택자에 우선순위가 밀려 third에만 적용되었으며, id 선택자의 우선 순위가 가장 높기 때문에 first에는 초록색이 적용되었다.

같은 선택자라면 구체적으로 명시할수록 순위가 높다.

<html>
    <head>
        <style>
            ol {
                color: blue;
            }
            ol .first, .second {
                color: red;
            }
            ol #first {
                color: gray;
            }
        </style>
    </head>
    <body>
        <ol>
            <li id="first" class="first">first</li>
            <li id="second" class="second">second</li>
            <li id="third" class="third">third</li>
        </ol>
    </body>
</html>

상속과케스케이딩4

모두 같은 ol 선택자로 시작하지만 구체적으로 id 선택자, class 선택자를 명시한 것이 우선 순위가 높음을 알 수 있고 class 선택자보다 id 선택자 순위가 더 높음을 알 수 있다.


순서

동일 요소에 대해 선언된 순서에 따라 우선 순위가 적용된다. 즉, 나중에 선언된 스타일이 우선된다.

<html>
    <head>
        <style>
            ol {
                color: blue;
            }
            ol {
                color: red;
            }
        </style>
    </head>
    <body>
        <ol>
            <li id="first" class="first">first</li>
        </ol>
    </body>
</html>

상속과케스케이딩5

나중에 선언된 red 색으로 표시됨을 확인할 수 있다.
아래와 같은 단순히 선언 순서에 따라 우선 순위가 적용되지 않는 경우도 있다.

<html>
    <head>
        <style>
            ol {
                color: blue;
            }
            ol .second {
                color: green;
            }
            ol .first, .second {
                color: red;
            }   
        </style>
    </head>
    <body>
        <ol>
            <li id="first" class="first">first</li>
            <li id="second" class="second">second</li>
        </ol>
    </body>
</html>

상속과케스케이딩6

.second 에 대해 나중에 선언된 red 색으로 적용되지 않았다. 즉, 같은 .second 요소에 대해 콤마(,)로 구분된 경우가 더 우선순위가 낮음을 알 수 있다.

반응형
저작자표시

'CSS' 카테고리의 다른 글

[CSS] Font  (3) 2022.03.05
[CSS] Background  (4) 2022.03.04
[CSS] Visibility / Opacity  (0) 2022.03.02
[CSS] Display  (0) 2022.03.02
[CSS] 박스(Box) 모델  (0) 2022.03.01

댓글

티스토리툴바