• Q&A
  • 회원가입
  • 로그인

[font] CSS - font-size 속성 ★ - 글자크기 (= font-size속성 = 글씨체크기= 글씨크기 = 서체크기= 글씨크기 = 폰트사이즈) (상속 O)

font-size 예제

 

<style>

div.a {font-size: 15px;}

div.b {font-size: large;}

div.c {font-size: 150%;}

</style>


<div class="a">홈짱닷컴 Homzzang.com</div>

<div class="b">홈짱닷컴 Homzzang.com</div>

<div class="c">홈짱닷컴 Homzzang.com</div>


결과보기

 
font-size 정의
 
글자크기 (= 폰트크기 = 서체크기 = 글꼴크기) 지정.

 


 
1.
<html> 태그에 대한 브라우저 기본 폰트 크기 : 100% (=약 16px)
※ em, rem 단위 등 사용할 때 중요. 
 
2.
<html> 태그 폰트 크기를 % 단위 대신 px 처럼 고정값으로 설정 시,
브라우저 설정에서 폰트 크기 조정해도 변화 X.
 
2.
기본값 : medium
상속여부 : O
애니효과 : O
CSS버전 : CSS1
JS구문 : object.style.fontSize="14px";
 
3.
모든 브라우저 지원.
 
 
 
font-size 구문
 
선택자 {font-size:속성값;}

 


[속성값]

xx-small
xx-small 사이즈로 지정

x-small
x-small 사이즈로 지정

small
small 사이즈로 지정
 
medium
medium(약 16px = 1em) 사이즈 = 기본값 
 
large
large 사이즈로 지정
 
x-large 
x-large 사이즈로 지정

xx-large
xx-large 사이즈로 지정
 
smaller
smaller 사이즈로 지정

larger
larger 사이즈로 지정
 
cm (센티미터) 단위
종속 X

px (픽셀) 단위 :  (반응형 웹에 부적합)
종속 제어 불가능
 
[참고]
IE9 이전 브라우저 (또는, 최신버전에서 폰트크기 재설정 기능 활성화한 브라우저) 사용하는 사람들은 
페이지의 폰트 크기 조정 불가능.
 
em (엠) 단위 :  (반응형 웹에 적합) ★★
1em = 16px
폰트 크기의 재조정이 가능하고 종속 제어가 가능. 
요소들간 폰트 크기의 구조적 설계가 중요.
부모 요소의 폰트 크기에 의해 폰크 크기 결정
 
rem (렘) 단위 :  (반응형 웹에 적합) ★★
root em의 줄임말 . 
em 단위와 유사하나, 
<html> 요소의 폰트 크기에 의해 폰트 크기 결정.
(html 요소에 대한 지정 없을 경우 body 요소 기준)
모바일은 rem 단위 지원 안 함.
font-size:16px ; font-size:1rem 식으로 rem 단위가 적용 안 될 경우 적용될 스타일을 함게 정의 필요.
IE11 이상 지원 자세히 보기
 
% (백분율) 단위 :  (반응형 웹에 적합)
100% = 16px , 부모 요소 폰트 크기와 비교해 %로 계산해 크기 지정 가능 
일관적인 백분율 사용 위해서는 body 기본 폰트 크기를 백분율로 설정해야 함. (∵ 익스 버그)
 
vh 단위 :  (반응형 웹에 가장 적합) ★★
viewport 높이의 1/100 (= 1%) 
(예1: viewport 높이가 1000px 일 때, 1vh = 10px)
(예2: 50vh 경우, 브라우저 가시 높이의 50%) 
IE9 이상 일부, 주요 최신 브라우저 지원 자세히 보기
 
vw 단위 :  (반응형 웹에 가장 적합) ★★
viewport 너비의 1/100 (= 1%)
(예1: viewport 너비가 1000px 일 때, 1vw = 10px)
(예2: 50vw 경우, 브라우저 가시 너비의 50%)
IE9 이상 일부, 주요 최신 브라우저 지원 자세히 보기
(예) font-size: calc((100vw / 1240) * 72); /* 반응형 글자크기 */
 
vmin 단위
vw, vh 중 최소값 적용.
(예: 50vmin 경우, 50vw와 50vh 중 최소값 적용.)
 
vmax 단위
vw, vh 중 최대값 적용.
(예: 50vmin 경우, 50vw와 50vh 중 최대값 적용.)
 
initial 
이 속성의 기본값으로 설정.
 
inherit 
부모 요소로부터 폰트 크기 상속
 
 

 

 

예제1과 예제2의 폰트 크기가 어떻게 달라지는지 확인 !!

 


font-size 예제1 - 부모 요소가 font-size:16px인 경우
 
<style>
div.box {
    font-size:16px;
  }
div.box div {
  margin: 20px 0; 
  font-family:arial sans-serif;
  border:1px dotted silver;
  padding:20px;
  }
  
div.xx-small {font-size:xx-small;}
div.x-small {font-size:x-small;}
div.small {font-size:small;}
  
div.medium {font-size:medium;}
  
div.large {font-size:large; }
div.x-large {font-size:x-large;}
div.xx-large {font-size:xx-large;}
  
div.smaller {font-size:smaller;}
div.larger {font-size:larger}

div.cm {font-size: 1cm;}
div.px {font-size: 16px;}
div.em {font-size: 1em;}
div.rem {font-size: 1rem;}
div.pro {font-size:100%;}
 
div.inherit {font-size:inherit;} 
</style>
  
<div class="box"> 홈짱닷컴 (Homzzang.com) 폰트 가이드
  
   <div class="xx-small">xx-small 홈짱닷컴 (homzzang.com) </div>
   <div class="x-small">x-small 홈짱닷컴 (homzzang.com) </div>
   <div class="small">small 홈짱닷컴 (homzzang.com) </div>
  
   <div class="medium">medium 홈짱닷컴 (homzzang.com) </div>
  
   <div class="large">large 홈짱닷컴 (homzzang.com) </div>
   <div class="x-large">x-large 홈짱닷컴 (homzzang.com) </div>
   <div class="xx-large">xx-large 홈짱닷컴 (homzzang.com) </div>
  
   <div class="smaller">smaller 홈짱닷컴 (homzzang.com) </div>
   <div class="larger">larger 홈짱닷컴 (homzzang.com) </div>

   <div class="1cm">1cm 홈짱닷컴 (homzzang.com) </div>
   <div class="px">16px 홈짱닷컴 (homzzang.com) </div>
   <div class="em">1em 홈짱닷컴 (homzzang.com) </div>
   <div class="rem">1rem 홈짱닷컴 (homzzang.com) </div>
   <div class="pro">100% 홈짱닷컴 (homzzang.com) </div>

   <div class="inherit">inherit 홈짱닷컴 (homzzang.com) </div>
  
</div> <!--class="box"-->



결과 보기

 
font-size 예제2 - 부모 요소가 font-size:1cm 경우
 
<style>
div.box {
    font-size:1cm;
  }
div.box div {
  margin: 20px 0; 
  font-family:arial sans-serif;
  border:1px dotted silver;
  padding:20px;
  }
  
div.xx-small {font-size:xx-small;}
div.x-small {font-size:x-small;}
div.small {font-size:small;}
  
div.medium {font-size:medium;}
  
div.large {font-size:large; }
div.x-large {font-size:x-large;}
div.xx-large {font-size:xx-large;}
  
div.smaller {font-size:smaller;}
div.larger {font-size:larger}

div.cm {font-size: 1cm;}
div.px {font-size: 16px;}
div.em {font-size: 1em;}
div.rem {font-size: 1rem;}
div.pro {font-size:100%;}
 
div.inherit {font-size:inherit;} 
</style>
  
<div class="box"> 홈짱닷컴 (Homzzang.com) 폰트 가이드
  
   <div class="xx-small">xx-small 홈짱닷컴 (homzzang.com) </div>
   <div class="x-small">x-small 홈짱닷컴 (homzzang.com) </div>
   <div class="small">small 홈짱닷컴 (homzzang.com) </div>
  
   <div class="medium">medium 홈짱닷컴 (homzzang.com) </div>
  
   <div class="large">large 홈짱닷컴 (homzzang.com) </div>
   <div class="x-large">x-large 홈짱닷컴 (homzzang.com) </div>
   <div class="xx-large">xx-large 홈짱닷컴 (homzzang.com) </div>
  
   <div class="smaller">smaller 홈짱닷컴 (homzzang.com) </div>
   <div class="larger">larger 홈짱닷컴 (homzzang.com) </div>

   <div class="1cm">1cm 홈짱닷컴 (homzzang.com) </div>
   <div class="px">16px 홈짱닷컴 (homzzang.com) </div>
   <div class="em">1em 홈짱닷컴 (homzzang.com) </div>
   <div class="rem">1rem 홈짱닷컴 (homzzang.com) </div>
   <div class="pro">100% 홈짱닷컴 (homzzang.com) </div>

   <div class="inherit">inherit 홈짱닷컴 (homzzang.com) </div>
  
</div> <!--// class="box"-->



결과 보기
 
 
em・ rem 비교 ★ 

  

em
부모 요소 폰트 크기에 의해 폰크 크기 결정.
아래 예제들 경우, <body> 태그 글자 크기에 좌우.

rem
<html> 요소의 폰트 크기에 의해 폰트 크기 결정

 


em vs rem 예제1

<style>

html {font-size: 100%}

body {font-size: 100%}

h1 {font-size:1em}

span {font-size:1rem}

</style>
 

<html>

 <body>

   <h1>h1 (1em) - 홈짱닷컴 Homzzang.com</h1> 

   <span>span (1rem) - 홈짱닷컴 Homzzang.com</span>

 </body>

</html>


결과 보기


em vs rem 예제2

 

<style> 

html {font-size: 100%}

body {font-size: 200%}

h1 {font-size:1em}

span {font-size:1rem}

</style>

<html>

 <body>

   <h1>h1 (1em) - 홈짱닷컴 Homzzang.com</h1> 

   <span>span (1rem) - 홈짱닷컴 Homzzang.com</span>

 </body>

</html>


결과 보기


em vs rem 예제3

 

<style> 

html {font-size: 200%}

body {font-size: 100%}

h1 {font-size:1em}

span {font-size:1rem}

</style>

<html>

 <body>

   <h1>h1 (1em) - 홈짱닷컴 Homzzang.com</h1> 

   <span>span (1rem) - 홈짱닷컴 Homzzang.com</span>

 </body>

</html>


결과 보기


em vs rem 예제4

 

<style>

html {font-size: 200%}

body {font-size: 200%}

h1 {font-size:1em}

span {font-size:1rem}

</style>

<html>

 <body>

   <h1>h1 (1em) - 홈짱닷컴 Homzzang.com</h1> 

   <span>span (1rem) - 홈짱닷컴 Homzzang.com</span>

 </body>

</html>


결과 보기 

 
 
주의
각각의 요소에 대해 font-size 속성을 이용해 크기를 재정의 가능하지만,
익스9 이전의 버전 (즉, 익스8이하) 에서는 font-size 재정의가 안 먹힘.

h1 {font-size: 40px;}
h2 {font-size: 30px;}
p {font-size: 14px;}

 
 
PS.

 

엘리 님 - CSS 단위 총정리 

https://youtu.be/7Z3t1OWOpHo

 


오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012