폰트크기 em vs rem 의 차이, 언제 쓰는 지

em에 대해 어렴풋이 배수로 커진다로 개념을 알고 있었지만 최근에 제대로 개념을 잡았다. em과 rem 속성에 대해 다시 생각해보게 된 원인은 html 태그의 font-size css를 제이쿼리로 바꾸려 하는데 결과가 폰트사이즈 변경이 아니라 높이가 변경되거나 일부의 글자 크기만 변경되었기 때문.

만들고자 하는 기능은 흔한 뉴스기사, 블로그, 관공서 등에 많이 쓰이는 돋보기 기능으로 텍스트의 크기를 조절하는 것으로 자바스크립트나 제이쿼리로 글자크기변경 기능을 구현해보려 했었다. 반복문을 돌려서 몇씩 커지는 방식은 아니었고 좀 단순하게 작게/보통/크게 3단계로만 폰트크기를 나눠서 변경하는 게 목적이었다.

 

var radioVal = $('input[name="font-size"]:checked').attr("id");

if (radioVal == "small") {
	$("html").css("font-size", "10px");
} else if (radioVal == "middle") {
	$("html").css("font-size", "13px");
} else if (radioVal == "big") {
	$("html").css("font-size", "16px");
 }

 

참고한 코드는 위와 같으며 해결해보려고 체크한 부분은 선택자($("html") 를 콘솔에 찍어보면 정확한 것을 선택하고 있는지와 기존 css파일의 font-size 속성에 !important가 없나 하는 거였다.  특정 id 등으로 정확하게 선택하기에는 선택할 것이 많아 html 태그를 사용했다. 참고해서 만들어보는 중인, 즉 정상 작동하는 코드는 이 방법이 문제 없는 것으로 보였고 폰트사이즈 변경이 수행되는 자바스크립트는 클릭이벤트가 발생하면 작동하게 되어있다.

해결방법은 기존 font-size 단위를 px이나 pt가 아닌 rem을 사용한 것. em과 rem이 비율로 계산한다는 걸 알고있었는데 이럴 때 쓰는구나, 싶었다.

 

 

 

em - 상위 요소 기준

CSS의 길이 단위 중 em과 rem은 상대적으로 크기를 정하며 em 단위는 상위 요소 크기의 몇 배인지로 크기를 정함

font-size: 1.5em;

 

 

rem - html 요소 기준

문서의 최상위 요소인 html을 기준으로 정한다. html 요소 크기의 기본값은 웹브라우저 설정에서 정한 글자 크기로 보통 16px이며 body 요소의 크기는 영향을 미치지 않는다.

font-size: 2.0rem;

 

 

CSS의 zoom 속성을 사용해서 만드는 방법 :
브라우저가 firefox인 경우에는 지원하지 않아 transform의 scale() 로 대체할 것

http://jemajin.blogspot.com/2017/12/all-javascript-css.html
https://esajin.kr/102


rem과 em에 대해 참고한 글 :
https://www.codingfactory.net/10748