CSS 단위 px vs em vs rem
px은 고정적인 절대값의 단위입니다. 반면 em과 rem환경에 따라 변하는 단위입니다
em vs rem
em 과 rem은 가변단위로서 브라우저 환경에서 px로 변환됩니다.
em은 같은 엘리먼트에서 지정된 font-size를 기준으로 px로 바뀌어 화면에 표시됩니다. 같은 엘리먼트에 설정된 폰트 크기 값이 없을 경우, 상위 요소의 폰트 사이즈가 기준이 됩니다.
* 0.5em = 16px x 0.5 = 8px
* 1em = 16 px x 1 = 16px
* 2em = 16 px x 2 = 32px
* 3em = 16 px x 3 = 48px
div {
font-size: 16
}
div {
//16x
font-size : 1em
rem은 최상위 엘리먼트에서 지정된 font-size의 값을 기준으로 변환됩니다. 대개는 HTML tag에서 지정된 font-size가 기준이 됩니다.
만약 별도의 font-size를 설정하지 않은 경우에는 각 브라우저에서 기본적으로 설정된 값을 상속 받습니다.
html {
font-size : 10px; /*설정 안했을 때는 브라우저 기본 값으로 */
}
div {
margin: 1.5em; /*대략 15px*/
}
rem은 기준이 되는 폰트 크기 하나로 고정되어 있는 반면, em은 같은 엘리먼트는 어디서라도 그 기준이 바뀔 수 있기 때문에 복잡한 css를 가질 경우 변환될 크기를 예측하기 어렵다는 단점이 있습니다.
많은 CSS 가이드들이 em을 사용해야만 하는 타당한 이유가 없는 경우라면 가급적 rem을 우선적으로 쓰도록 권고하고 있습니다.
Author And Source
이 문제에 관하여(CSS 단위 px vs em vs rem), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jackma914/CSS-단위-px-vs-em-vs-rem저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)