1. rem/em : 길이가 유연한 가변 폰트
데스크탑, 모바일, 태블릿 등 다양한 모바일 장치의 가로 규격에 맞게 글자 크기가 적용된다.
컴퓨터 웹사이트 폰트가 모바일에서 깔끔하게 보이기 위해서는 px 을 버려야 한다.
2. rem/em 을 사용해야 하는 이유
px 은 절대값으로 사용되는 단위이므로 반응형 제작시 과감히 포기해야한다
3. rem/em 중에 어떤게 좋을까?
rem 을 많이 추천한다. body 에 폰트 사이즈를 정해놓으면 그 사이즈를 기준으로 계산되기 때문이다.
rem/em 차이
(1) rem (root em) *위에 얘기한 권장 단위
html에서 지정된 font-size의 고정값에 비례하여 크기가 계산됨
body {font-size:10px}
1rem : 10px
2rem : 10*2 = 20px(2) em
body(부모)에 정의된 사이즈를 기준으로 영향을 받기때문에 매우 유동적이고 파악하기 힘들 수 있음
> 반응형을 위해서라면 얘라도 써야하는데 얘는 rem보다 손이 마니 가는 애라서 번거로움
/** CSS **/
body {font-size: 10px;}
.wrap {font-size: 20px;} /** 2) <<< 정답 **/
.box {font-size: 1em;}
/** HTML **/
<body>
<div class="wrap"> /** 3) 얘한테 영향을 받기때문에
<div class="box"> /** 1) 문제: <<< box의 폰트 사이즈는? **/
</div>
</div>
</body>
사용법
알아두자! 기본 시스템 사이즈는 16px이다!!!!
- html에서 폰트 사이즈를 지정해놓지 않았다면 기본적으로 시스템 사이즈 16px이 지정된다.
그런데 기본 시스템 사이즈가 16px이라고해서
나의 html 문서 폰트 기준까지 16px로 해버리면 아래처럼 계산이 너무 어렵기때문에
별도의 사이트를 사용하여 수치를 확인해야한다.
그래서 더 쉬운 방법은
이렇게 애초에 폰트 기준 사이즈를 62.5%나 10px로 설정해두면
따로 계산할 필요가 없어 편리하다!
{font-size: 62.5%} 또는 {font-size: 10px;}
10px: 1rem
12px: 1.2rem
14px: 1.4rem출처 : https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=designmeraki&logNo=221594425832
