처음에 html, css를 배울때 항상 px로만 div, span, img 등을 생성하여 사용하였습니다.
하지만 최근 들어서 react 프로젝트 강의를 유튜브에서 찾아 보는데 mui도 그렇고 tailwindcss를 적용할때도 그렇고 단위가 rem으로 들어가 있는 것을 보았습니다.
이 순간 rem과 em은 반응형 웹을 만들때 그냥 좋다고만 어렴풋이 알고 있었고 px은 고정 단위로만 알고 있지 설명할 지식이 없다고 생각을 하게 되었습니다.
그래서 이 3가지 단위들에 대해서 무엇인지 글을 작성해보겠습니다.
em과 rem은 우선 px과 다르게 상대 단위를 사용합니다.
상대 단위란 고정되지 않고 기준에 따라서 유동적으로 바뀔수 있는 단위라고 할 수 있습니다.
em과 rem은 둘다 font-size 속성값에 비례해서 값이 결정 됩니다.
font-size: 16px이라고 가정하겠습니다. 상대 단위는 브라우저에 의해 아래 처럼 계산됩니다.
- 1em = 16px x 1 = 16px
- 2em = 16px x 2 = 32px
- 3em = 16px x 3 = 48px
- 4em = 16px x 4 = 64px
font-size: 18px로 증가한다면, 앞에 곱해지는 16px이 18px로 변경되어 계산이 됩니다.
그러면 둘 다 상대 단위를 사용하는데 무엇이 다를까요? 차이점을 알아보겠습니다.
em은 현재 해당 단위가 사용되고 있는 요소의 font-size 속성값이 기준이 됩니다. rem도 font-size의 값을 사용하지만 rem에서 r은 root를 의미하고, 즉 최상위 요소의 font-size값을 의미합니다. HTML에서의 최상위 요소는 태그입니다.
아래 처럼 html 요소의 font-size: 20px로 가정하겠습니다.
html {
font-size: 10px
}div {
font-size: 16px;
width: 10em;
}이렇게 했을 경우 이 div에 width 크기는 16px x 10 = 160px이 됩니다.
하지만 rem을 사용한다면?
이 div에 width 크기는 10px x 10 = 100px이 됩니다.
div {
font-size: 16px;
width: 10rem;
}
그런데 여기서 생각해야 될 것이 하나 더 있습니다. rem은 html 요소의 font-size 크기의 상대적으로 증가하는데 아래 코드처럼 em을 사용하는데 font-size값이 존재하지 않는다면 어떻게 해야 할까요? 이 경우는 font-size값이 존재하지 않기 때문에 html 요소의 font-size 크기인 10을 상속받아 100px이 될 것 입니다. 간단합니다.
하지만 실제로는 요소 사이 중간중간에 다른 상위 요소가 존재합니다. div요소가 font-size가 40px인 부모를 가진다면 40px x 10 = 400px가 될 것입니다. 그런데 div부모의 font-size 단위가 절대 단위인 40px가 아닌 상대 단위인 3rem을 사용한다면? html의 font-size인 10px * 3 =30px가 되고 결론적으로 아래 width: 10em은 300px가 됩니다.
이 처럼 em 단위를 사용한 요소가 존재하면 여러 가지 상위 요소들이 존재하기 때문에 실제 어떤 값으로 계산될지 예측이 어렵습니다.
div {
width: 10em;
}px단위
- px 단위는 "픽셀"을 의미하며 절대 단위입니다. 화면에 고정된 크기를 나타내며 상황에 따라 변경되지 않습니다.
- 요소의 글꼴 크기를 16px로 설정하면 해당 요소의 부모 또는 페이지의 다른 요소에 관계없이 항상 글꼴 크기가 16픽셀입니다.
- em 및 rem과 달리 px는 확장 가능하거나 반응성이 없습니다. 즉, 사용자의 기본 글꼴 크기 또는 상위 요소의 크기에 따라 조정되지 않습니다.
요약하면 em은 부모 요소의 글꼴 크기에 상대적이고 rem은 루트 요소의 글꼴 크기에 상대적이며 px는 화면에서 고정된 크기를 나타내는 절대 단위입니다.
