웹 디자인을 위한 기본 폰트 단위: px, em, rem 이해하기

안녕하세요 찐망고입니다.

오늘은 폰트 단위 관련 포스팅을 시작해볼게요

 

HTML에서 단위는 상대적인수치와 절대적인수치로 나뉘는데요.

div {
    width: 200px;
    height: 200px;
    font-size: 16px;
}
div > span {
    display: block;
    width: 100%;
    height: 80%;
    font-size: 1em;
}

 

span이 div의 자식이라고 가정할 때  %는 부모요소의 크기를 기준으로 들어갑니다.

width와 height모두 200px이 되겠죠?

본인이 absolute인 경우엔 relative의 크기를 상속받기도 합니다.

참고로 height요소를 %로 지정할 경우 무조건 상속받을 부모에게 높이값이 존재해야 합니다.

 

px말고 가장 많이 사용하는 폰트 단위는 em과 rem인데

이 단위들은 font-size속성에 따라 달라지는 단위입니다.

div {
    width: 200px;
    height: 200px;
    font-size: 16px;
}
div > span {
    display: block;
    width: 100%;
    height: 80%;
    font-size: 1em; // 16px
}

 

이 코드에서 span의 폰트사이즈는 16px입니다.

부모요소인 div요소가 18px이면 18px이 되고, 20px이면 20px이 됩니다.

그래서 em단위는 마진이나 패딩 여백 혹은 border-radius에도 많이 사용합니다.

텍스트를 기준으로 여백을 잡기 좋거든요.

 

rem단위는 root의 font-size속성을 따라가는데요.

html요소의 font-size에 영향을 받아요.

기본 브라우저 html폰트사이즈가 16px이기 때문에 1rem은 16px입니다.

html {
    font-size: 62.5%;
}
div {
    font-size: 20px;
}
div > p {
    font-size: 1em; // 20px
}
div > p > span {
    font-size: 1rem; // 10px
}

 

하지만 16px은 계산하기가 힘들잖아요.

그래서 html에 font-size속성을 10px로 맞추는 작업을 하기도 합니다.

16px이 100%니까 계산을 해보면 10px은 62.5%가 나오겠죠?

 

저 요소들끼리 상속되어 있다고 가정하면 

div > p 요소인 1em은 그 부모요소의 20px을 고대로 받을 것이고

div > p > span 요소는 html의 font-size인 10px을 고대로 받겠죠?