프리랜서 웹디자이너 RELATION RELATION.CO.KR

RELATION 로고

홈페이지 소스

[HTML] css font-size :: em, pt, px, %, rem, keyword

2017.11.08
css 폰트를 지정하지 않는다면 기본 설정은
16px 이며 1em, 12pt, 100% 모두 같은 사이즈를 뜻한다.

하지만 em, pt, px, %, rem, keyword 를 쓰는 경우에 따라
css font-size는 다르게 보이게 된다
위에 표처럼 body가 font-size:100%일때와
120%일때로 변경될때 사용에 따라서 변경되게 된다.
px과 pt의 경우 고정된 크기로 해상도에 따라서 변화가 되지 않는다
em, rem, %는 해상도에 따라서 사이즈 조정이 가능하다.(넓이의 기준)

위에 세가지를 구분하자면
em: 부모(상위 엘리먼트)의 단위에 맞추어 해상도 따라서 사이즈 조정을 하게 된다
% : 기본사이즈에 대한 상대적 사이즈 조정이 가능하다
위에 둘은 비슷하지만 조금 달라지는 부분은 rem이다
rem: 최상위 요서 html요소에 비례하는 단위를 가졌으며, 기본html의 font-size를 고정값으로
지정해두면 나머지는 그 비율에 따라서 크기를 계산한다.


em을 이용하여 <article>요소에 크기를 조절하면,
html { font-size:10px; }
section { font-size:2em; }
section>article { font-size:1em }

=> article속 글자크기는 20px이 됩니다.
em 단위는 자신 바로 위 요소 (부모요소) 크기를 기준으로 상대 조절합니다.
위의 마크업에서 article요소의 부모는 section이며, section의 글자크기는 root 요소인 html 글자 크기의 두배인 20px입니다.
article 자신의부모인 section요소의 1em 크기이므로, 결과적으로 20px이 됩니다.



rem 을 이용하여 <article>요소의 크기를 조절하면
html { font-size:10px; }
section { font-size:2rem; }
section>article { font-size:1rem; }

=> article 속 글자크기는 10px 이됩니다.
rem 단위는 웹문서의 최상위 요소(html)의 크기를 기준으로 상대조절 합니다.
자신의 부모요소 크기와는 아무상관이 없습니다.
현재 최상위 요소인 html요소의 글자크기가 10px이고, article 요소는 1rem 이므로 article속 글자크기는 10px이 됩니다.

이 포스트 공유하기

글수정  글삭제 전체목록
<
 
1
           
검색    글쓰기
번호 제 목 작성자 작성일 조회수
중요 [소스] 기존 a 태그 href를 이용하여 부드럽게 스크롤 이동하기 작성글은 비공개로 설정 되었습니다. 꿘쓰 2017.02.10 73
중요 [기타] 구글맵 플랫폼 꿘쓰 2019.01.22 3512
중요 [소스] 구글맵 반경 검색 작성글은 비공개로 설정 되었습니다. 꿘쓰 2018.01.08 17
중요 [소스] 구글맵 이동 경로 표시 꿘쓰 2018.01.18 3507
중요 [소스] 구글맵 좌표값 구하기 꿘쓰 2019.01.08 2166
중요 [소스] 구글맵 웹사이트 띄우기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2013.01.02 20763
227 [소스] 마우스 롤오버 효과 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.30 2
226 [기타] 퍼센트 계산, 백분율 계산 방식 꿘쓰 2020.06.22 53
225 [소스] Window.scroll() 꿘쓰 2020.06.22 60
224 [소스] scrollLeft(), scrollTop() 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.15 0
223 [소스] 숫자 카운트 1 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.03 1
222 [CSS] 그라데이션 자동 생성 사이트 꿘쓰 2020.05.29 94
221 [CSS] flex-wrap:wrap 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.05.29 0
220 [SCRIPT] 자바스크립트 number_format 숫자 콤마 제이쿼리 꿘쓰 2019.12.03 169
219 [소스] 구글 로그인 API 자바스크립트 꿘쓰 2019.08.16 321
218 [JQUERY] 체크박스 체크 유무 jquery 꿘쓰 2019.07.23 350
217 [CSS] css webkit, moz, ms, o 의미 꿘쓰 2019.04.16 518
216 [HTML] HTML5 Canvers 태그 꿘쓰 2019.03.22 613
215 [기타] 카카오 상담톡 비즈니스 메신져 꿘쓰 2019.03.21 587
214 [기타] a태그 onclick 클릭 이벤트 차이점 꿘쓰 2019.03.13 578
213 [소스] 카카오 로그인 작성글은 비공개로 설정 되었습니다. 꿘쓰 2019.03.08 1
212 [소스] 별점주기 꿘쓰 2019.02.21 684
211 [소스] Select option를 버튼(div) 방식으로 변경하기 꿘쓰 2019.02.21 672
210 [소스] 코멘트 게시판 디자인 이미지 테두리 둥글게 하기 (border-radius) 꿘쓰 2019.02.13 875
209 [소스] 아이폰 갤러리 이미지 저장 방지 꿘쓰 2019.01.09 621
208 [CSS] 줄바꿈, URL 줄바꿈을 위한 CSS 꿘쓰 2019.01.04 664