px값은 브라우저에서 절대값으로 인식해 1px은 항상 정확히 1px로 표시되는 반면 em과 rem은 가변 단위로서, 디자인에 설정된 폰트 크기에 따라 브라우저에 의해 픽셀값으로 변환된다.


ex) .emClass{font-size: 16px; padding-top: 1em;} -> .emClass{font-size: 16px; padding-top: 16px}


1. rem

페이지 최상위(root)요소, 즉 html 요소의 폰트 크기가 기준이 되어, 최상위 요소의 폰트 크기에다 rem 단위로 지정한 숫자를 곱한 값이 px로 변환된 값이다. 

변환된 픽셀 크기는 페이지 최상위(root)요소, html 요소이 폰트 크기가 기준이 된다. 최상위 요소의 폰트 크기에다 rem 단위로 지정한 숫자를 곱한 값이 변환된 값이다.


ex) html{font-size: 16px; padding-top: 1em;} -> html{font-size: 16px; padding-top: 16px;}


2. em

스타일을 지정한 요소가 기준이 되어 지정한 요소의 폰트 크기를 곱한 값이 px로 변환된 값이다.


ex) .emClass{font-size: 16px; padding-top: 1em;} -> .emClass{font-size: 16px; padding-top: 16px;}


*스타일 상속

em 단위가 상위 요소의 폰트 크기와 직접 연관되어 있다고 잘못 알려져 있다. W3 명세서에 의하면, 상위 요소가 아닌 실제 사용된 요소의 폰트 크기와 직접 연관되어 있다. 상위 요소의 폰트 크기가 em값에 영향을 줄 수는 있지만, 그것은 오로지 스타일 상속 때문이다.

모든 요소가 자동으로 상위 요소로부터 폰트 크기를 상속받기 때문에 em 단위로 작업을 할 땐 상속과 관련해서 문제가 있을 수 있다. 상속의 영향을 뒤엎는 방법은 오로지 폰트 크기를 px 혹은 vw와 같이 상속에 영향을 받지 않는 단위를 써서 일일이 지정해 주어야 한다.


ex)

html               -font-size: 16px

   .wrapper       -font-size: 1.25em;           //1.25 X 16 =20 font-size: 20px;

      .box          -padding: 1.5em;             //1.5  X 20 =30 padding: 30px


html               -font-size: 16px

   .wrapper       -font-size: 1.25em;          //1.25 X 16 =20 font-size: 20px;

      .box          -font-size: 1.2em;           //1.2  X 20 =24 font-size: 24px;

                     -padding: 1.5em;            //1.5  X 24 =36 padding: 36px



em 단위는 상위 요소와는 상관없이 실제 사용된 요소의 폰트 크기에 비례 하다.


ex)

html               -font-size: 16px

   .wrapper       -font-size: 1.25em;          //1.25 X 16 =20 font-size: 20px;

      .box          -font-size: 14px;                                              font-size: 14px;

                     -padding: 1.5em;            //1.5  X 14 =21 padding: 21px



3. 브라우저 설정


기본적으로 브라우저의 폰트 크기는 보통 16px로 설정되어 있지만, 사용자에 의해 최소 9px부터 72px까지 변경될 수 있다. html 요소의 폰트 크기는 고정 을 명시적으로 지정하여 덮어씌우지 않으면 브라우저에 설정된 값을 상속받게 된다.

html 요소에 em 기반의 폰트 크기를 지정했다면, 변환된 픽셀값은 브라우저에 지정된 폰트 크기의 배수가 된다. 

html 요소가 font-size: 1.25em 일 경우 최상위 요소의 폰트 크기는 브라우저에 설정된 폰트 크기의 1.25배 이다.

브라우저 폰트 크기 설정이 16px일 경우 최상위 요소의 폰트 크기는 20px이다.

계산 1.25 X 16 = 20.



4. em 과 rem 차이점

* rem

페이지 최상위(root)요소, 즉 html 요소의 폰트 크기에 따라 결정되고 이 폰트 크기는 상속에 영향을 받지 않는 절대 단위를 지정해서 직접 덮어씌우지 않았다면, 브라우저에 설정된 폰트 크기를 그대로 상속 받게 된다.

*em

사용된 요소의 폰트 크기에 따라 결정되고 이 폰트 크기 또한 상속에 영향을 받지 않는 절대 단위를 가지고 명시적으로 덮어 씌우지 않았다면, 상위 요소로부터 상속의 영향을 받는다.


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

'퍼블리싱 > HTML&CSS' 카테고리의 다른 글

HTML5 video 자동재생  (0) 2019.06.05
안드로이드 킷캣 4.4.2 웹뷰 css  (0) 2018.06.07
페이스북 공유하기  (0) 2018.05.24
CSS 디바이스별 미디어 쿼리  (0) 2018.03.15
CSS 인쇄화면 설정  (0) 2018.03.14

+ Recent posts