[CSS] Responsive CSS 단위, EM과 REM의 차이

절대적인 단위 px

반응형 웹사이트 제작 시 절대 단위인 px을 사용할 경우

컨테이너의 사이즈가 변경되어도 콘텐츠가 고정된 값으로 유지되고,

사용자가 브라우저에서 폰트 사이즈 설정을 변경해도 전혀 반응하지 않는다.

그래서 반응형 웹에서의 px 사용은 적절하지 않다.

 

---

상대적인 단위_em, rem, vw, vh, %

EM

relative to parent element

타이포그래피에서 현재의 지정된 포인트 사이즈를 나타내는 단위

지금 폰트 사이즈를 나타내는 단위

 

<div class="parent">
    Parent
    <div class="child">Child</div>
</div>

 

.parent {
    font-size: 4em;  /* 4em= 400% */
}

.child {
    font-size: 0.5em;  /* 0.5em= 50% */
}

 

em은 부모 font-size에 상대적으로 계산되어 크기가 결정된다.

기본적으로 브라우저에서 html에 할당되는font-size는 16px이다.

따로 html이나body에 font-size를 지정하지 않은 이상 기본적으로 16px이다.

Parent는 부모 요소인 html의 16px에 4배인 64px로 표시되고,

Child는 부모 요소인 Parent의 64px에 0.5배인 32px로 표시된다.

em은 %와 비슷하다.

 

REM

relative to root element

 

<div class="parent">
    Parent
    <div class="child">Child</div>
</div>

 

.parent {
    font-size: 4rem;
}

.child {
    font-size: 0.5rem;
}

 

부모 요소가 아닌, root에 지정된 폰트 사이즈에 따라서 크기가 결정된다.

Parent는 root 인 html의 16px에 4배인 64px로 표시되고,

Child는 root 인 html의 16px에 0.5배인 8px로 표시된다.

 

언제 어떤 단위를 써야 할까?

1. 부모 요소에 따라 사이즈가 변경되어야 한다면 %, em

부모와는 상관없이 브라우저 사이즈에 대해서 반응해야 한다면 vw, vh, rem

 

2. 요소의 높이와 너비에 따라서 사이즈가 변경되어야 한다면 %, vw, vh

폰트 사이즈에 따라서 사이즈가 변경되어야 한다면 em, rem

 

*폰트 사이즈를 결정할 때는 em보다는 rem을 쓰는 것이 더 직관적이다.

em을 쓸 경우에는 부모 요소에 상대적으로 계산되기 때문에 요소가 많아지면 실제 폰트 크기를 알기가 어렵지만 rem은 최상위 root의 폰트 사이즈에 상대적으로 계산되기 때문에 실제 폰트 크기를 쉽게 알 수 있다.

 

 

px, em 사이즈 변환 사이트

http://pxtoem.com/

PXtoEM.com: PX to EM conversion made simple.