18.10.18 (수)

총정리

그럼 지금까지 설명한 내용의 요점들을 짚어보겠습니다:

• 디자인에 쓰인 rem과 em 단위는 폰트 크기를 기준으로 브라우저에 의해 픽셀값으로 변환됩니다.
• em 단위는 지정된 요소의 폰트 크기를 기준으로 합니다.
• rem 단위는 html 요소의 폰트 크기를 기준으로 합니다.
• em 단위는 모든 상위 부모 요소로부터의 폰트 크기를 상속받으면서 영향을 받을 수 있습니다.

• rem 단위는 브라우저에 설정된 폰트 크기를 상속받는 특성이 있습니다.

• em 단위는 최상위 요소에 지정된 폰트 크기 말고, 다른 특정 요소의 폰트 크기에 따라 그 크기가 변해야 하는 곳에 사용하십시오.
• rem 단위는 em 단위를 쓸 필요가 없고, 또 브라우저의 폰트 크기 설정에 따라 그 크기가 변해야 하는 곳에 사용하십시오.
• 폰트 크기 지정을 비롯해서 꼭 em 단위를 써야 하는 곳이 아니라면 rem 단위를 사용하십시오.
• media queries에도 rem 단위를 쓰세요.
• 다중 칼럼 레이아웃의 너비에는 em 혹은 rem을 쓰진 마십시오 - 대신 %를 쓰세요.
• 만약에 크기가 변할 경우 해당 요소의 레이아웃이 깨지는 걸 막을 수 없다면 em과 rem 모두 쓰지 마세요.

이제 em과 rem 단위가 어떻게 작동하는지 전체적인 윤곽을 명확히 이해하셨을 거로 생각합니다. 또 이를 통해 얻은 지식이 여러분의 디자인에도 충분히 활용될 수 있기를 바랍니다.

여기서 설명한 사용 요령을 직접 실험해 보시고, 이렇게 해서 다듬어진 훨씬 유연한 반응형 레이아웃의 장점들을 여러분도 십분 활용해 보세요.

https://webdesign.tutsplus.com/ko/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984

http://indivdot.github.io/css/2016/03/26/emrem.html