아이디/비번 기억
  • 봉하마을 방문후기
  • 미디어협동조합 국민TV국민TV의 조합원이 되어주세요!
  • 한국탐사저널리즘센터
현재위치 : HOME > 구구자료실

em,rem 폰트크기 부모속성에서 조절하기(미디어쿼리 이용시 좋음)

구구 | 2021.01.07 04:00 | 조회 222
반응형 작업을 위한 폰트 단위 em / rem  사용



css에서 사용 하는 단위는 여러가지가 있다.

가장 많이 사용하고 있는 px를 비롯해  % / em / rem / vh / vw / vmin / vmax / ex / ch /  등이 있다.



요즘엔 사용하지 않는 것들도 있고 새롭게 떠오르는 단위도 있고..IE버전 지원 문제로 외면 받는 단위도 있다.



여기서도 IE지원 문제가 있다.

IE구버전에서 지원 되지 않는 단위들이 있기 때문에 공공기관 사이트를 작업하는 일을 하게 된다면 과감히 포기해야한다.



이 중에서 대표적인 세가지만 알아보겠습니다.



px

절대값으로 사용 되는 단위이다. 웹디자이너를 비롯한 디자이너들이 가장 많이 사용하고 디자인을 넘겨 받을때에도 px로 작업해서 넘겨주고 있어 정말 많이 사용 되는 단위이다.

고정된 값이기 때문에 사용하기 편하고 이해하기도 쉽지만 반응형 웹사이트를 만들때에는 적절하지 않은것 같다



em

부모 태그의 영향을 받는 상대적인 길이. 부모의 사이즈를 기준으로 하기 때문에 매우 유동적이고 파악하기 어려울 수 있다.

반응형 웹사이트를 작업할때 많이 사용 된다.



rem

rem(root em)은 최상위 요소인 html요소에 비례하여 크기를 가지는 상대적인 길이를 말한다.

즉 html 요소에 font-size를 고정값으로 지정해 두면 그 비율에 따라 크기가 계산된다.

rem은 IE9 버전까지는 지원이 된다.

(댓글로 헷갈려 하시는 분이 계시네요..IE9 ~ IE11 버전까지 지원합니다._201223)





반응형 홈페이지를 만들때 px로 작업을 하면 브레이크 포인트 마다 일일이 찾아서 px값을 수정해야 하는 엄청난 수고를 하게 된다.



px는 절대값으로 사용 되는 단위이기 때문에 반응형 홈페이지를 작업할때는 불편하고 문제가 되게 때문에 em / rem 을 사용 하는 것이 좋은 것 같다



이 중에서 rem의 사용을 권장한다.

rem은 html에서 font-size를 정의 해 놓으면 그 사이즈를 기준으로 계산이 되기 때문에 이해 하기 쉬워 사용하기도 편합니다.



html에서 사이즈를 지정하지 않으면 기본적으로 시스템 사이즈가 적용 된다.

html의 기본 시스템 사이즈는 { font-size:16px;} 이다.



html { font-size:16px; } 에서 

16px은 1rem, 

17px은 1.063rem이 된다.

이렇게 되면 계산하기 어렵기 때문에 rem을 계산해주는 사이트를 이용하면 되는데..



더 쉬운 방법은 html { font-size:62.5%; }, 또는 html { font-size:10px; }로 하면 

10px은 1rem,

12px은 1.2rem,

14px은 1.4rem 이 되기 때문에 따로 계산할 필요가 없어 px을 사용 할때 처럼 사용 할 수 있어 편리하다.



rem이 반응형 홈페이지에 사용되는 이유는 

미디어쿼리로 css를 처리할때 브레이크 포인트에서 html의 폰트사이즈만 변경 해주면 하위 rem단위의 크기가 전부 변경 되기 때문에 편리하다.





이미 반응형 두개를 만들면서 엄청난 노가다를 해봤는데 진작 알았다면....어렵게 작업하지 않았을 텐데....너무 아쉽단 생각이 든다.



font-size 이외에도 margin / padding도 rem으로 작업하면 좋다고 한다.



참고 사이트
rem 계산해주는 사이트 : https://offroadcode.com/rem-calculator

em,px 계산해주는 사이트 : http://pxtoem.com
twitter facebook me2day 요즘
98개(1/5페이지)
소스자료실
번호 제목 글쓴이 조회 날짜
>> [html/css] em,rem 폰트크기 부모속성에서 조절하기(미디어쿼리 이용시 좋음) 구구 223 2021.01.07 04:00
97 [html/css] 배경고정 스크롤 구구 905 2020.03.16 21:28
96 [html/css] 가로 세로 가운데 정렬 구구 2505 2017.04.14 17:54
95 [etc] 유튜브, 네이버 동영상 자동재생 구구 4502 2015.08.26 17:28
94 [html/css] 폰트 글꼴 단위비교 구구 3617 2014.11.20 18:45
93 [html/css] 맵(Map)의 이해 - 이미지맵걸기 사진 첨부파일 구구 5861 2014.11.06 17:05
92 [html/css] Image Sprites 또는 CSS SPRITE 첨부파일 구구 3942 2014.09.18 17:39
91 [etc] 킴스큐 Tip 구구 4102 2014.06.16 11:23
90 [모바일] PC홈페이지 > 모바일홈페이지 연결소스 구구 7006 2013.07.26 14:22
89 [기획] 색체 이미지맵 첨부파일 구구 14882 2013.03.29 13:26
88 [html/css] 검색폼 만들기 개념 사진 첨부파일 구구 6226 2013.03.07 10:28
87 [html/css] 간단한 롤오버 이미지 만들기 사진 첨부파일 구구 9588 2012.12.05 14:59
86 [etc] 저작권 표시방법 4가지 [1] 구구 13753 2012.07.04 10:14
85 [html/css] float 정렬 해제 등~ 코딩관련정보 사진 첨부파일 구구 5544 2012.06.15 13:39
84 [html/css] 플래시 대체 문구 넣기 구구 5828 2012.06.15 13:36
83 [html/css] 메타태그 총정리 구구 6854 2012.06.15 13:35
82 [html/css] 텍스트에 효과를 주자! 구구 5565 2012.06.15 13:34
81 [html/css] 레어어(div)를 투명하게~ (익스,오페라,파이어폭스) 구구 10003 2012.06.15 13:33
80 [html/css] tr 에 스타일 줘서 링크걸기 구구 6768 2012.06.15 13:33
79 [html/css] 웹표준 교과서 요약 (속성) 구구 9667 2012.06.15 13:32