CSS 상속이해

CSS는  스타일링 도구로서 독립적으로 기능하지 않습니다. HTML이라는 마크업 언어가 있어야 동작할 수 있습니다.

CSS는 HTML을 스타일링하게 바꿈으로서 디자인적으로 html을 더 훌륭하게 만들어줍니다.

CSS의 디자인적인 기능외에도 상속을 할 수 있는 기능이 있는데요 다음과 같습니다.

 

 

CSS 상속 적용한 화면

 

 

body와 span 셀렉터에 color 속성을 부여했습니다. 

.main {
    color: rebeccapurple;
    border: 2px solid #ccc;
    padding: 1em;
}

.special {
    color: black;
    font-weight: bold;
}

 

그리고 html 소스를 보겠습니다.

main class 하위 자식 중 Item One, Item Two, Item Three까지는 main의 css 영향을 받지만 

ul class인 "special"부터는 부모의 영향없이 special의 영향만 받고 적용됩니다. 

 

<ul class="main">
    <li>Item One</li>
    <li>Item Two
        <ul>
            <li>2.1</li>
            <li>2.2</li>
        </ul>
    </li>
    <li>Item Three
        <ul class="special">
            <li>3.1
                <ul>
                    <li>3.1.1</li>
                    <li>3.1.2</li>
                </ul>
            </li>
            <li>3.2</li>
        </ul>
    </li>
</ul>