CSS units

1. percentages

%는 항상 다른 값에 대한 상댓값입니다. 다른 값은 부모의 값이 될수도, 요소 자신의 값이 될 수 도 있습니다.
width: 50% -> 부모의 width의 50%
line-height 50% -> 자기 자신의 font-size의 50%

2. em

em도 relative unit입니다. font-size에 em을 사용할 때, 1em은 부모 요소와 같은 크기의 font-size, 2em은 부모 요소 font-size의 2배가 됩니다. 다른 property와 사용하면 1em은 요소 자체의 font-size와 같고 2em은 요소 자체의 font-size의 2배입니다.

/*html
<article>
	<p></p>
</article>
*/

article{
	font-size:20px;
}

p{
	font-size:2em;
        margin-left:1em;
}

위 예시에서 p의 font-size는 부모 font-size의 2배이므로 40px, margin-left는 자신의 font-size와 같으므로 40px입니다.

3. rem

em을 중첩해서 사용하면 문제가 생깁니다.

/* html
<article>
        <ul>
            <li>
                Pasta
                <ul>
                    <li>
                        Ravioli
                        <ul>
                            <li>Spinach Ricotta</li>
                        </ul>
                    </li>
                    <li>Penne</li>
                </ul>
            </li>
            <li>Salad</li>
            <li>Gelato</li>
        </ul>
    </article>
*/

article {
    font-size: 20;
}
ul {
    font-size: 1.5em;
}

실행결과

위 이미지처럼 중첩해서 커지는 문제가 발생할 수 있습니다. 이 문제를 해결할 수 있는 방법이 rem입니다.
rem은 root em의 줄임말로 root html element의 font-size을 기준으로 합니다. 만약 html의 font-size가 10px이라면 1rem은 항상 10px, 2rem은 항상 20px입니다.