NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


CSS3: {font-size:*rem} new relative value.

본문 건너 뛰기

CSS3 font-size 속성 값으로 새로운 상대적 단위 ‘rem’을 사용할 수 있게 됐습니다.

rem 값의 의미

본래 em이라는 단위는 글꼴 세트의 알파벳 대문자 ‘M’의 너비를 의미한다고 합니다. 어원 자체는 그렇고 통상 웹 브라우에서는 1em = 16px 으로 환산이 되고요. 1em은 웹 브라우저에서 글꼴 사이즈를 지정하지 않았을 때 표시되는 글꼴 크기의 기본값입니다. CSS3의 글꼴 크기 값으로 새로 등장한 ‘rem’ 단위는 root em 이라는 의미입니다. HTML 문서에서 root 요소는 <html> 요소를 의미하고 html 요소에 지정된 글꼴 크기로부터 선택된 요소의 글꼴 크기를 상대적으로 결정하는 것이 바로 rem 단위의 핵심입니다.

’em’ vs ‘rem’

em 단위는 부모로부터 글꼴 크기를 물려받지만, rem 단위는 부모가 아닌 시조(root = html)로부터 글꼴 크기를 물려받는다는 점이 다릅니다. 예를 들어.. em 단위는 부모로부터 글꼴 크기를 물려받기 때문에 같은 값을 지니더라도 노드가 깊어질수록 글꼴 크기가 기하 급수적으로 크거나 작아집니다. 이런 방식의 문제는 부모 또는 조상 노드 가운데 어떤 요소의 글꼴 사이즈 값을 변경할 때 모든 자식과 자손 요소도 그 영향을 받는다는 점입니다. 예측하기 어렵고 계산하기 복잡하다는 것이 치명적인 문제입니다. 글꼴의 확대 축소를 유연하게 만들기 위한 목적으로 존재하지만 복잡하기 때문에 개발자들은 이 방법을 기피해왔습니다.

  • html = 100% = 16px
    • body = 0.5em = 8px
      • div = 0.5em = 4px
        • p = 0.5em = 2px

rem 단위는 부모 아닌 시조로부터 글꼴 크기를 물려받기 때문에 html 요소에 기본 글꼴 크기를 지정해 두면 항상 html 요소로부터 글꼴 크기를 상속 받습니다. html 요소의 글꼴 크기를 변경하는것 만으로 페이지의 모든 글꼴 크기를 변경할 수 있다는 점 자체는 em 요소와 다를바 없지만 rem 요소는 부모 요소로부터 상속을 받지 않기 때문에 페이지 모든 글꼴의 크기 변화를 예측할 수 있고 계산하기도 쉽습니다. em 단위를 사용했을 때 p 요소가 2px 크기로 현실성 없게 작아진 것에 비하면 rem 단위를 사용했을 때에는 그렇지 않게 됩니다.

  • html = 100% = 16px
    • body = 0.5rem = 8px
      • div = 0.5rem = 8px
        • p = 0.5rem = 8px

유용한 상황

단말기의 해상도에 따라 기본 글꼴 크기를 전체적으로 다르게 제어할 필요가 있을 때 미디어쿼리와 함께 rem 단위를 사용하면 효과적입니다.  예를 들어 데스크톱 글꼴이 10px ~ 20px 범위인데 모바일 단말에서 전체적으로 20px ~ 40px 범위로 키우고 싶다면 CSS 만으로 아주 간단하게 처리할 수 있습니다.

분류: CSS,웹 디자인,웹 표준 | 2014년 9월 16일, 18:17 | 정찬명 | 댓글: 5개 |
트랙백URI - http://naradesign.net/wp/2014/09/16/2067/trackback/

5개의 댓글이 있습니다.

  1. 제이디 댓글:

    그렇군요. 우리나라도 html5와 css3를 맘껏 쓸수있는 인터넷 환경이 빨리 왔음 좋겠네요. rem 함 적용해봐야겠어요.

  2. 이원민 댓글:

    좋군요 :) -_-b

  3. 고정아 댓글:

    아.. em 쓸때마다 ㅋㅋ.. 내가 계산안되는 무식인가? 하고 멘붕엄청왔었는데 ㅋㅋ
    와.. 이걸로 한번 해봐야겠네요!! ㅎㅎ
    감사합니다!

  4. 통스 댓글:

    CSS3로 업댓되면서 정말 별의별게 다 나오는군요…
    참 신기하면서도 배울 게 하나하나 늘어간다는 머리아픔이… ^^

    여기는 생각날 때마다 한번씩 들르게 될 거 같네요~*

  5. 익명 댓글:

    간결하고 쉽게 설명 해주셔서 감사합니다.

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님