-
Notifications
You must be signed in to change notification settings - Fork 0
폰트 단위 크기 비교
html의 default 폰트 크기는 16px입니다.
em은 상대적인 크기를 지니는 단위이다. 본래 em이라는 단어는 어원적으로 알파벳 대문자 'M'의 너비를 의미한다.
일반적으로 웹 브라우저에서는 1em = 16px 로 환산되며, 1em은 웹 브라우저에서 글자 크기사이즈를 지정하지 않았을 때 표시되는 글꼴 크기의 기본값이다.
em 단위를 사용하면 부모 요소에서 지정한 글자 크기를 기준으로 배율을 조정하게 된다.
따라서, 1.5em을 지정하면 부모요소의 글자 크기의 1.5배가 된다.
html = 100% = 16px
body = 0.5em = 8px
div = 0.5em = 4px
p = 0.5em = 2px딱 봐도 엄청나게 문제가 생길 것 같은 구조이다. 부모 또는 조상 노드 가운데 어떤 요소의 폰트 사이즈값을 변경할 경우 모든 자식과 자손요소도 그 영향을 받는다는 점이다.
때문에 예측하기 어렵고 계산하기 복잡하다는 단점이 있다. 물론 글꼴의 확대 축소를 유연하게 만들기 위한 목적으로 존재하기는 하지만 이러한 복잡성으로 개발자들은 이 방법을 잘 이용하지 않는다.
rem은 root em이라는 뜻으로, HTML 문서의 root 요소인 요소를 가리키며, 이 요소에 지정된 크기를 기준으로 상대적인 값을 가지게 된다.
em 단위는 부모로부터 글꼴 크기를 상속받지만. rem 단위는 부모가 아닌 root(html)로 부터 폰트 크기를 상속받는다는 점이 다르다.
html = 100% = 16px
body = 0.5rem = 8px
div = 0.5rem = 8px
p = 0.5rem = 8px
em과는 달리 rem은 root로부터 글꼴 크기를 상속받는다. html 요소의 글꼴 크기를 변경하는 것 만으로 페이지의 모든 글꼴 크기를 변경할 수 있다는 점 자체는 em 요소와 다를 바 없지만, rem 요소는 부모 요소로부터 상속을 받지 않기 때문에 페이지의 모든 글꼴 크기 변화를 예측할 수 있고 계산하기도 훨씬 수월하다.
단말기의 해상도에 따라 기본 글꼴 크기를 전체적으로 다르게 제어할 필요가 있을 경우 미디어쿼리와 함께 rem 단위를 사용하면 효과적이다. (html의 font-size만을 조절하면 전체 폰트 사이즈가 바뀌기 때문)
절대값, 즉 em, rem처럼 특정한 값에 의해 변하지 않는다.
웹디자이너를 비롯한 디자이너들이 가장 많이 사용하고 디자인을 넘겨 받을 때에도 보통 px 단위로 계산되어 넘어온다.
반응형 웹디자인 테크닉은 퍼센트 값에 상당히 의존하게 된다.
하지만, CSS의 퍼센트 값이 모든 문제를 해결할 수 있는 좋은 방법은 아니다. CSS의 너비 값은 가장 가까운 부모 요소에 상대적인 영향을 받기 때문에 의도하지 않은 결과가 만들어질 수 있다.
때문에 이럴 때 vh와 vw를 사용하는 것이 좋은 선택지가 될 수 있다.
해당 단위는 사용자의 뷰포트에 의존한다. 0 - 100을 줄 수 있으며 0은 사용자 뷰포트의 0%, 100은 사용자 뷰포트의 100%를 의미한다.
또, 이들은 calc()와 결합하여 좋은 시너지를 낼 수 있다. 헤더 영역 높이가 50px이고 컨텐츠 영역 높이를 '헤더를 제외한 나머지 높이 전체'로 만들고 싶다면, height: calc(100vh - 50px);을 지정해주면 된다. 그냥 height: 100%로 지정하면 안되나요? 라는 의문이 제기될 수 있지만 %는 부모 요소를 기준으로 계산되기 때문에 의도와 다른 결과가 만들어 질 수도 있다.
vw와 vh 중 더 작거나 큰 것을 찾아서 적용한다.
예를 들어 1200px * 600px의 뷰포트가 있다고 가정한다. 1vw는 12px, 1vh는 6px 일 것이다.
따라서, 1vmax는 12px, 1vmin은 6px이 된다.
항상 반응형을 고려해야 한다고 생각했기 때문에 rem/em과 같이 상대적인 단위를 사용하는 것이 좋은 선택이라 생각했다. 하지만, 실제 현업의 계신 분들에게 물어보면 거의 대부분이 px을 사용한다고 말씀해주신다. px을 사용하게 되면 반응형을 만들기 위해 매번 미디어 쿼리를 통해 값을 수정해주어야 하는 엄청난 번거로움이 있을 것 같은데 왜 px을 쓰는건지 항상 궁금했다.
Ans: 출처(https://yeoninim.tistory.com/38)
반응형 디자인을 할 때 정작 디자이너들은 비율을 따져가며 디자인하지 않은데, 몇몇 퍼블리셔들은 앞뒤 상황 안따지고 반응형이라는 이유 하나만으로 비율을 열심히 계산해가며 em,rem을 사용하는 모습을 보면 있으면 솔직히 답답합니다. 심지어 모바일웹만 하는데 em,rem을 쓰는 사람들도 있는데, "대체 왜 저리 고생을 사서하나?" 이런 생각밖에 안듭니다.
플젝하면서 반응형 디자인들을 보게되면 Base 폰트사이즈(html,body폰트사이즈)를 똑같이 두거나 1px 정도의 차이 정도만 두는게 대부분입니다.
모바일에서도 폰트크기 1213px은 생각보다 작아보이기 때문에 PC,모바일 모두 기본폰트 사이즈를 14px16px 정도로 사용합니다.
반면에 제목,여백,이미지 크기 등은 굉장히 많이 바꾸죠.
결국 rem을 사용했다 하더라도 결국 디바이스별 디자인파일이 각각 존재하기 때문에 디자인파일에 맞춰 모든 요소의 여백&폰트,넓이,높이 등을 디테일하게 다시 설정해줘야 한다는 겁니다.
때문에 어느정도 규모 있는 플젝에선 em,rem을 이용해서 쉽게 반응형 작업을 끝낼 확률은 거의 0에 가깝습니다.
물론 소규모 홈페이지 제작 회사에서 디자인&퍼블리싱을 동시에 하는 사람들은 em,rem을 적절하게 써서 작업 시간을 단축할 수 있겠지만요.
퍼블리셔 입장에선 em,rem보단 그냥 px단위로 작업하는게 디자이너와의 협업하기 훨씬 수월합니다.
em,rem 같은 단위는 그냥 개인적인 목적으로 써보시고 즐기시는 선에서 끝내는 편을 추천드립니다.
https://www.slideshare.net/NaverEngineering/23-121486418
디자이너와의 협업 과정에서 이해하면 좋을 것들
일단 지금의 생각으로는 레이아웃을 잡을 때는 상대적인 값인 rem, vh, vw, %를 사용하고 폰트에 한해서만 px 단위를 쓰는게 가장 좋지 않을까라는 생각이 든다.
위의 답변 처럼 기본 폰트 크기가 정해지면 해당 폰트 크기에서 벗어나는 부분은 그리 많지 않다. 때문에 폰트에 관련된거는 상속되는 CSSOM의 특징을 활용해 기본 폰트 크기를 root에 지정하고, 크기에서 벗어나는 부분만을 따로 지정하면 되지 않을까? 라는 생각이 든다. 디자이너분과 협업을 해본적은 없지만 만약에 폰트의 크기 또한 px 단위로 나온다면 이를 매번 rem으로 전환하는 일도 만만치 않은 일이 될 것이다. 또한, 이 과정에서 정확히 나눠 떨어지지 않고 소수점들이 남기 시작하면, 그 유명한 "1px만 오른쪽으로 옮겨주세요." 가 나올 수 있게 된다.
https://webclub.tistory.com/122 [Web Club]
https://webclub.tistory.com/356