px와 rem의 사용 기준이 궁금합니다.

Question

안녕하세요? 저는 디자이너이고, 아주 예전의 html/css를 배웠다가 이 강의를 통해 다시 업데이트를 하고 있습니다. 예제를 쭉 따라가며 html과 css를 만들다 보니, 폰트 사이즈는 rem으로 하고, width나 height는 고정값을 가질 경우 px로 하고, margin이나 padding은 rem일 때도 있고 px일 때도 있더라구요. 디자인 할 때는 아무래도 기기의 화면 사이즈별로 케이스를 나눈 다음, %로 따로 고려하는 레이아웃 요소 이외의 모든 사이즈가 고정되어 있다고 생각하고 작업하게 되고, 디자인 툴 자체도 px 단위로 설정하게 되는 경우가 많습니다. 물론 폰트 사이즈를 조절했을 때 깨지지 않게끔 나름 고려하긴 하지만요. 아무래도 rem은 상대 사이즈이다보니 브라우저나 OS상에서 폰트 사이즈를 조정할 때 또는 해상도가 바뀔 때 대응해야 하는 요소에 쓰는 것일까..? 하는 생각이 들긴 하는데요, 어떤 기준을 가지고 크기 단위를 사용하면 좋을지 궁금합니다.

잔재미코딩 DaveLee · Answer

안녕하세요. 이 부분은 영상과 제가 공유드린 css 단위정리 pdf 파일에서 기본 설명을 드린 부분이라서, 해당 자료를 우선 찾아보시면 좋을 것 같고요. (마지막 설명과 다음과 같습니다.) 말씀하신대로, px로 딱 맞게 설정하는 것이 본래 일반적이었는데요. 이게 모바일 환경이나, 굉장히 다양한 해상도를 지원해야 함에 따라서, px 로만 설정하는 것이 만만한 상황은 아니더라고요. 그래서, px 와 rem 을 적절히 쓰는 경우도 많더라고요. 완벽하게는 rem 으로만 해도 좋겠는데, 또 만들다보면, 모든 것을 rem 으로 쓰기는 애매한 부분이 있어서요. 여러 해상도에서 테스트해보면서, 해상도에 따라 변하지 않을 부분들은 px 로, 나머지는 rem 을 기준으로 하되, 해상도가 확연히 달라질 때는 media 쿼리로 아예 또다른 px 나 rem 을 적용하는 것이 일반적입니다. media 쿼리를 적용하는 부분도 영상에서 설명드리고 있으니, 이부분도 참고해보시면 좋을 것 같습니다. px 픽셀(화소) 단위, 해상도에 따라 상대적인 크기를 가짐 rem em 과 달리 rem 은 root em 으로, 최상위 요소(html) 사이즈를 기준으로 함