나의 개발일지

상속(Inheritance)에 대하여~ 본문

CSS

상속(Inheritance)에 대하여~

heew0n 2023. 10. 11. 21:30
상속이란
하위 요소가 상위 요소의 스타일 속성값을 물려받는 것을 의미한다

 

 

 

* 각 속성마다 상속이 되는 것과 상속이 되지 않는 것이 있다   

 

상속이 되는 속성

 : color, font-family, font-size, font-weight, text-align, cursor 등

 

상속이 되지 않는 속성

 : background-color, background-image, background-repeat, border, display 등

 

 

 

* 공용키워드

모든 css 속성에 사용 가능한 키워드가 있다. 전역값이라 표현하기도 한다

 

키워드 의미
inherit 상위 요소로부터 해당 속성의 값을 받아 사용한다
initial (브라우저에 지정되어 있는) 해당 속성의 기본값을 요소에 적용한다
unset 상속 속성에 대해서는 inherit 처럼, 상속되지 않는 속성에 대해서는 initial처럼 적용한다

 

 

코드세팅

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 300px; height: 300px;

            color: teal;
            font-size: 24px;
            border: 3px dashed red;
        }
        p {
            color: tomato;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <div>
    <p>가운데 p 태그</p>
    </div>
</body>
</html>

 

 

 

 

 

inherit
    <style>
        div{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 300px; height: 300px;

            color: teal;
            font-size: 24px;
            border: 3px dashed red;
        }
        p {
            color: inherit;
            border: 1px solid blue;
        }
    </style>

 상속받는 속성 inherit 은 p태그의 색깔 tomato 색을 갖고 있음에도 불구하고

interit을 주니까 div태그(상위요소)에서 색깔을 상속 받아 teal 색으로 바뀌었다

 

 

 

 

initial
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 300px; height: 300px;

            color: teal;
            font-size: 24px;
            border: 3px dashed red;
        }
        p {
            color: initial;
            border: initial;
            font-size: initial;
        }
    </style>
</head>
<body>
    <div>
    <p>가운데 p 태그</p>
    </div>
</body>
</html>

 

초기값을 나타내는 initial을 쓰니 color의 초기값으로 글자색이 검정색으로 바뀌었고

border에 초기값은 '없음'이므로 테두리가 없어졌다

또한 font-size의 초기값은 16px 이므로 글씨가 작아졌다

 

 

 

 

unset
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 300px; height: 300px;

            color: teal;
            font-size: 24px;
            border: 3px dashed red;
        }
        p {
            color: unset; /*상속을 받는 속성*/
            border: unset; /*상속을 받지 않는 속성*/
            font-size: unset; /*상속을 받는 속성*/
        }
    </style>
</head>
<body>
    <div>
    <p>가운데 p 태그</p>
    </div>
</body>
</html>

 

- color는 상속 받는 속성이므로 div태그의 색을 상속받아 teal로 색이 변했다

 

- border은 상속 받지 않는 속성으므로 div태그의 상속을 받지 않고 초기값 initial로 되었다

 

-font-size는 상속 받는 속성이므로 div태그의 크키를 상속받아 24px로 글씨가 커졌다

 

 

 

 

 

 

저작자표시

'CSS' 카테고리의 다른 글

z-index에 대하여~  (0) 2023.10.12
의사(가상)클래스에 대하여~  (0) 2023.10.11
의사요소/after/before/first-line/marker/placeholder  (0) 2023.10.11
특성 선택자와 결합선택자에 대하여~  (0) 2023.10.10
float과 clear에 대하여~  (0) 2023.10.10
'CSS' Related Articles more