Relative Css unites

%

 

section {

    background-color: #6d6875;

    width: 800px;

    height: 800px;

}

section div {

    background-color: #e5979b;

    width: 50%;

    height: 50%;

}

위같은 요소는 section의 자식값이 div인데, div의 width와 height가 50%즉, relative이기 때문에                                          부모값 section의 width height 800px의 50%인 400px이 div의 width와 height가 된다.                                                         하지만 무조건 부모의 값을 따르는 것은 아니다.

h1 {

    font-size: 40px;

    line-height: 200%;

    border: 1px black solid;

}

위 값의 경우는 부모의 height가 아니라 font-size의 200%( 80px )이다.

 

EM

 

    <article>

        <h2>I am h2</h2>

        <h3>I am h3</h3>

        <button>Click Me</button>

</article>

위같은 html 값이 있을때 css 값이

article {

    font-size: 40px;

}

이렇게 된다면,

button {

    font-size: 1em;

    padding: 0 1em;

    border-radius: 0.5em;

}

em의 단위는 부모값의 font-size를 따라가기 때문에 h2,h3,button의 부모값은 article 이므로

button의 font-size는 40px padding은 0 40px border-readius는 20px이 된다 .

이렇게 단위를 정하면 부모값의 폰트사이즈를 변경하면 button의 값들을 하나하나 바꾸지 않고 em이기 때문에

알아서 부모값의 변화를 감지하고 값이 변한다. 

REMS

        <ul>

            <li>Pasta</li>

            <ul>

                <li>Ravioli</li>

                <ul>

                    <li>Spunach Ricotta</li>

                </ul>

                <li>Penne</li>

            </ul>

            <li>Salad</li>

            <li>Helato</li>

        </ul>

위 같이 부모자식의 관계가 연속적인 코드가 있을때

css를

ul {

    font-size: 0.7em;

}

 

이렇게 코드를 짠다면 부모의 fontsize에 영향을 받는 em으로 ul마다 크기가 0.7로 작아진다. 이를 방지하기 위해 rem 사용

 

#rems ul {

    font-size: 0.8rem;

}

 

(article의 id가 rems다) 1rem이란 html의 기본 폰트사이즈를 뜻하기 때문에 부모의 영향이 아닌 html 기본 font size의

영향을 받는 단위이다. rem의 단위를 바꾸고 싶다면

 

html {

    font-size: 30px;

}

 

를 사용하면 된다.