• 회원가입
  • 로그인
  • 구글아이디로 로그인
웹디자인언어 CSSLv 1 : 손님

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

홈짱 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 35,988  
목차
  1. font-size 예제 - 글자 크기
  2. font-size 정의
  3. font-size 구문
  4. font-size 예제1 - 부모 요소가 font-size:16px인 경우
  5. font-size 예제2 - 부모 요소가 font-size:1cm 경우
  6. em・ rem 비교 ★
  7. font-size 재정의 시 주의사항
  8. font-size 관련 주소

 

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.
모든 브라우저 지원.
 
4. MDN font-size 예제보기
 

 

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 재정의 시 주의사항

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


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

 

font-size 관련 주소

 

엘리 님 - CSS 단위 총정리 

https://youtu.be/7Z3t1OWOpHo

 

 
방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

CSS 관련글

코딩동강 관련글

HTML 관련글

JavaScript 관련글

JQuery 관련글

PHP 관련글

SQL 관련글

Bootstrap 3 관련글

Bootstrap 4 관련글
분류 제목
font CSS - font 속성 ★ - 글자스타일종합 (= font속성 = 글씨체 = 서체 = 글꼴 = 폰트속성, …
font CSS - font-size 속성 ★ - 글자크기 (= 글씨체크기= 글씨크기 = 서체크기= 글씨크기 = …
font CSS - font-family 속성 ★ - 글자종류 (= font-family속성 = 폰트패밀리속성 = 글…
font CSS - font-weight 속성 ★ - 글자굵기 (= font-weight속성 = 폰트굵기 = 글씨체굵…
font CSS - font-style 속성 - 글자기울기 (= 이텔릭체 여부 = 이탤릭 글씨체 = 글자 기울려쓰기 … 1
font CSS - font-variant 속성 - 작은 대문자 (= font-variant속성 = 폰트베리언트 = …
font CSS - @font-face 구문 - 다운받은 웹폰트적용 (= @font-face쿼리 = 다운글꼴적용 = …
font CSS - font-feature-settings 속성 - OpenType 글꼴의 고급 인쇄 기능 제어 (=…
font CSS - font-kerning 속성 - 문자 모양 고려해, 문자 사이 간격 지정 (= font-kerni…
font CSS - font-size-adjust 속성 - 소문자 x 높이 기준으로, 대체 글꼴 크기 재조정 (= f…
font CSS - font-stretch 속성 - 폰트 너비 조정 (= font-stretch속성 = 폰트스트레치속…
font CSS - font-variant-caps 속성 -
목록
오늘: 2,713 | 어제: 8,625 | 최대: 11,609 | 전체: 6,477,552
  • (견적/의뢰/질문/등업) 상담은 게시판 이용해 주세요.
  • 인터넷 임시파일 제거 시 속도 ↑ (Ctrl + Shift + Del)

공지사항

최신글

최신댓글

사이트명:홈짱, 연락처:
Copyright ⓒ https://homzzang.com. All rights reserved.
찾아주셔서 감사합니다. Since 2012