coolx.net

Programming

No.

774

Name.

swindler

Subject.

반응형 웹을 위한 em, rem 사용하기

Main Cate.

CSS

Sub Cate.

Date.

2016-12-22 10:00

Hit.

4049 (121.78.49.66)

File.

이쪽에 워낙 관심이 없기도 했지만,
rem 이라는건 어제 처음 들어봤다 ㅎㅎ

w3c의 css3 스펙 중 distance unit을 살펴봤다. css의 거리 단위는 크게 상대적 길이와 절대적 길이가 있다. 상대적 길이는 em, ex, ch, rem, vw, vh, vmin, vmax가 있고 절대적 길이는 cm, mm, q, in, pt, pc, px가 있다. 대개 크로스 브라우징이나 쉬운 계산 때문에 강제적으로 길이를 px로 많이 사용한다. 여러 디바이스를 모두 대응해야 하는 문제 때문에 em을 사용하기도 했는데, css3에는 rem이라는 새로운 거리 단위를 지원하게 되었다.

기준에 따른 상대적 길이
단위 설명 기준점
*em 엘리먼트의 폰트 사이즈 글자 크기
ex 엘리먼트의 폰트의 x(소문자) 높이 값
ch 엘리먼트 폰트의 0(숫자)glyphs의 가로값
*rem 루트 엘리먼트의 폰트 사이즈
vw 뷰포트 너비의 1% 화면 크기
vh 뷰포트 높이의 1%
vmin 뷰포트의 중 작은 크기의 1%
vmax 뷰포트의 중 큰 크기의 1%
스펙과 다른 글들을 통해 내가 이해한 내용이다. 다른 상대적 길이 단위를 이용하면 좀 더 가변적인 디자인이 가능 할 것 같다. 하지만 영어 해석이 좀 어려워서 일단은 em과 rem에 집중하기로 했다.

em과 rem은 왜 쓰는가?

상대적 길이 단위를 쓰는 이유는 물론 가변적 디자인을 하기 위해서이다. 유연한 디자인과 유지보수의 편리함. 또 어느 디바이스 어떤 상황에서도 사용자에게 같은 컨텐츠를 제공할 수 있다. 반응형 웹이나 웹 표준, 웹 접근성 모두 같은 맥락이라고 볼 수 있다. 자세한 내용은 인터넷의 많은 글에서 찾아 볼 수 있다.

em과 rem의 차이점

em과 rem의 가장 큰 차이점은 기준이 무엇이냐는 것이다. em은 상위 엘리먼트의 폰트 사이즈가 기준이고, rem은 루트 엘리먼트(html)의 폰트 사이즈가 기준이 된다.

[바로가기 링크] : http://coolx.net/cboard/develop/774


swindler	'퍼블리셔'라는 단어를 쓰지 않을때는 html 코딩을 참 많이 했었는데, 안 한지 한 10년? 요즘들어 다시 한번 해볼까 싶기도 한데 ㅎㅎ	2016-12-22


[Modify] [Delete]		[Reply] [List]