- em
em은 이 단위가 적용된 엘리먼트의 font-size에 비례한다.
예를 들어 보자!
div에 width: 2em을 줬더니 40px이 되어있다.
왜냐하면 해당 엘리먼트의 font-size가 이미 20px으로 설정되어 있기 때문이다.
만약 해당 엘리먼트에 font-size를 따로 설정해준적이 없다면, 기본값인 font-size: inherit;에 따라서 부모의 15px를 물려받아 사용된다.
위 예제에서는 2em이 30px이 될 것이다.
em을 사용하면, pixel보다 상대적으로 더욱 유연하게 처리할 수 있어서 조건에 맞게 length를 조절할 수 있다.
하지만 em을 선호하지 않는 사람도 있다.
퍼블리싱을 할 때, 디자인의 변경 또는 요구사항 변경을 이유로 글자크기나 다른 요소들이 바뀌는 경우가 많은데,
em의 가장큰 단점이 자기 자신의 font-size를 참조하여 em을 사용하는 다른 속성 역시, 글자 크기에 영향을 받을 수 밖에 없다는 것이다.
또한, 자신의 font-size가 정해져 있지 않은 경우에는, 부모의 font-size가 변할 시에 자신의 속성이 영향을 받을 수 있다.
- rem
rem도 em과 마찬가지로, 글자 크기에 따라 비레되는 속성인데, em과의 차이점은 rem은 오직 html 태그의 글자크기만 참조한다는 것이다. 다른 모든 태그의 글자 크기는 일체 신경쓰지 않는다.
예를 들어보자.
div에 width: 2rem;을 주었는데,
자신, 또는 부모의 font-size를 참조하는 것이 아니라, 문서의 root인 HTML의 font-size를 참조하여 계산된다.
큰 차이는 없고, 상대적인 기준이 되는 값의 위치만 다른 것이다.
어떤 단위가 옳다고 단언할 수는 없으나, 그때 그때 유지보수가 용이하고 가독성이 높은 코드가 되도록 작성하면 될 듯하다~
'개발 > FrontEnd Interview' 카테고리의 다른 글
| 라이브러리? 프레임워크? (2) | 2021.04.05 |
|---|---|
| ECMA script 란? (0) | 2021.04.05 |
| 모듈, 라이브러리 차이 (0) | 2021.04.05 |
| javascript GC 동작 (0) | 2021.04.05 |
| SPA에서 SSR를 사용할 수 있을까? (0) | 2021.04.04 |
