HTML, CSS

미디어 쿼리 조건문에서 rem, em 단위가 어떻게 작동하는지 몰랐던 이야기

heavy-bear 2024. 10. 18. 12:49

예전에 프로젝트에서 퍼블리싱을 진행하면서 rem과 em 단위를 도입할 때 생긴 문제점들이 있었다. 기본적으로 사용자가 브라우저의 줌이나 폰트 크기를 변형시킬 때에도 만족스러운 경험을 제공하려고 고민된 문제들이었다. 헷갈리거나 잘못 알고 있던 내용들이 있어서 이번 기회에 정리를 하게 되었다.

 

브라우저의 줌 레벨은 폰트 사이즈를 키우는 것이 아니라, viewport의 크기를 조절한다. 

 

줌 레벨을 키우면 viewport 사이즈가 줄어들어 모바일 화면처럼 보이는 원리이다.

현업에서 W3C의 준수사항을 체크할때, 브라우저 줌레벨을 200%를 해서 체크했는데 잘못된 체크 방식이었던 것 같다. (실제로는 텍스트 크기를 키워야 한다고 한다.)

 

 

브라우저의 환경설정에서 폰트크기를 조절하면 viewport는 그대로지만 기본 폰트 사이즈가 변화가 일어난다. 

 

이 부분을 실제 프로젝트에서 사용을 할때는 역이용했었다.

컨텐츠 내용 및 폰트 사이즈를 px로 지정해 두면 사용자가 브라우저의 기본 폰트 사이즈를 조절해도 실제 콘텐츠의 폰트사이즈는 변하지 않아서 화면구성이 무너지는 것을 막았다. 하지만 이렇게 사용하면 정작 필요해서 기능을 쓰시는 분들이 피해를 입게 된다.

 

Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.

 

“캡션과 텍스트 이미지 외에, 텍스트는 보조 기술 없이도 최대 200%까지 확대할 수 있으며, 이때 콘텐츠나 기능의 손실이 없어야 한다.”

 

W3C의 WCAG 2.1에 따르면사용자가 텍스트 크기를 최대 200%로 확대해도 콘텐츠나 기능의 손실이 없어야 한다고 명시하고 있다.

 

 

 

미디어쿼리 조건문에 적은 rem,em 단위는 독립적으로 동작한다. 

A media query is a method of testing certain aspects of the user agent or device that the document is being displayed in. Media queries are (almost) always independent of the contents of the document, its styling, or any other internal aspect

 

“미디어 쿼리는 문서가 표시되고 있는 사용자 에이전트나 장치의 특정 측면을 테스트하는 방법이다. 미디어 쿼리는 (거의 항상) 문서의 내용, 스타일링 또는 기타 내부 요소와는 독립적으로 동작한다.”

 

https://drafts.csswg.org/mediaqueries-5/#media

 

When used outside the context of an element (such as in media queries), these units refer to the computed font metrics corresponding to the initial values of the font property.

https://www.w3.org/TR/css-values-3/#rem

 

이전에 프로젝트에서 1440px 아래에서 작동하는 미디어쿼리 css를 만들때, html의 폰트사이즈를 1rem = 10px로 선언했기에 미디어쿼리속의 rem도 144rem으로 표현했는데, 정확히 1440px에서 작동안하는 문제가 있었다. 위 공식문서에 나온 사항을 모르고 잘못사용하고 있었다.

html{
  font-size:62.5%
}

body{
  background:red;
}

/* 2304px */
@media (max-width:144rem){
  body{
    background: pink;
  }
}

/* 1440px */
@media (max-width:90rem){
  body{
    background: blue;
  }
}

 

실험을 해보면 html 루트 폰트 사이즈를 62.5%로 설정하고 미디어쿼리의 조건 너비를 144rem으로 작성하면 1440px에서 작동할 것 같지만, 실제로는 더 2304px에서 작동한다. 144rem * 16px / rem 으로 2304px에서 작동한 것이다. 미디어쿼리에 적은 rem, em 단위가 브라우저의 기본 폰트 사이즈에 대응한다는 사실을 몰랐기에 예전에 프로젝트를 할 때에는 이렇게 잘못된 방식으로 미디어쿼리를 적었다. 앞으로는 조심해서 작성해야겠다. 참고로 gpt에 물어봐도 해당부분을 144rem이라고 알려준다. 잘못된거라고 위 내용을 말해줘야 그때부터 제대로 대답을 해준다...

 

 

참고로 이 rem 단위를 미디어쿼리 조건문에 써도 될까 하는 질문에는 webkit기반 브라우저의 버그(https://bugs.webkit.org/show_bug.cgi?id=156684)때문에 em이나 px을 권장했다. 하지만  2016년도에는 해당 부분이 고쳐져서 rem도 사용해도 된다고 한다.