c CSS

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

37,351

font-size 예제 - 글자 크기

font-size 정의

font-size 구문

font-size 예제1 - 부모요소가 font-size:16px인 경우

font-size 예제2 - 부모요소가 font-size:1cm 경우

font-size 예제3 - 인라인블럭요소 사이의 공백 제거

em・ rem 비교 ★

font-size 재정의 시 주의사항

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.

display:inline-block 성격 요소 (예: <img> 태그) 사이의 공백을 제거하려면, 부모요소에 font-size:0 속성 추가해야 함. 즉, <img> 태그 너비를 33.33% 줘서 한 줄에 3개씩 나열하고자 할 경우 부모요소에 font-size:0 추가하거나 <img> 태그에 float:left 속성 추가해줘야 함.

2.

기본값 : medium

상속여부 : O

애니효과 : O

CSS버전 : CSS1

JS구문 : object.style.fontSize="14px";

3.

모든 브라우저 지원.

4. MDN font-size 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/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> 

결과 보기

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> 

결과 보기

font-size 예제3 - 인라인블럭요소 사이의 공백 제거

[방법1] - 부모요소에 font-size:0 추가.

<style>

div {font-size: 0;}

img {width: 33.3%;}

</style>

<div>

<img src="https://picsum.photos/600/600/?random" alt="">

<img src="https://picsum.photos/600/600/?random" alt="">

<img src="https://picsum.photos/600/600/?random" alt="">

<img src="https://picsum.photos/600/600/?random" alt="">

<img src="https://picsum.photos/600/600/?random" alt="">

<img src="https://picsum.photos/600/600/?random" alt="">

</div>

결과보기

[방법2] - 인라인블럭요소에 float:left 속성 추가.

<style>

img {float:left; width:33.3%;}

</style>

<div>

<img src="https://picsum.photos/600/600/?random" alt="">

<img src="https://picsum.photos/600/600/?random" alt="">

<img src="https://picsum.photos/600/600/?random" alt="">

<img src="https://picsum.photos/600/600/?random" alt="">

<img src="https://picsum.photos/600/600/?random" alt="">

<img src="https://picsum.photos/600/600/?random" alt="">

</div>

결과보기

PS. 부모요소에 font-size:0 추가 않거나 인라인블럭요소에 float:left 속성 추가 안 하면 한 줄에 3개씩 나열 안 됨. 예제보기

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

CSS 관련글

코딩동강 관련글

HTML 관련글

HTML - <h1> ~ <h6> 태그 ★ - 문단제목글씨크기 (= 표제태그 = 단락제목글자크기 = h1태그, h2태그, h3태그, h4태그, h5태그, h6태그 = 제목태그/헤딩태그/헤딩요소/에이치원태그~에이치식스태그)

JavaScript 관련글

jQuery 관련글

PHP 관련글

SQL 관련글

Bootstrap 3 관련글

Bootstrap 4 관련글

코멘트입력

목록 글쓰기


분류	제목



css	CSS - 이미지 세로 나열 (= 수직 정렬) 방법/경우/원인/이유

flex	CSS - order 속성(I) - 아이템 순서 재조정 (= order속성 = 오더속성, IE11) ※ 플렉…

func	CSS - rgb() 함수 - (빨강,녹색,파랑)으로 색상 정의. (= rgb함수 = 알지비함수)

list	CSS - list-style 속성 ★ - 리스트 스타일 일괄 (= 리스트마커 = list-style속성 =…

func	CSS - rgba() 함수 ★ - (빨강,녹색,파랑,불투명도)으로 색상 정의. (= rgba함수 = 알지비…

intro	CSS - 정의・장점・구문・초기화 + 주석

animation	CSS - animation-duration 속성 - 애니지속시간 (= 애니완료소요시간 = 움직임완료소요시간…

func	CSS - hsla() 함수 - (색조, 채도, 밝기, 불투명도)로 색상 정의. (= hsla함수 = 에이치…

css	CSS - zoom 속성 - 요소 확대 (= zoom속성 = 줌속성) ※ IE 하위 브라우저(예: IE6, …

css	CSS - 블럭요소 수직중앙정렬/수평중앙정렬 (= 가로가운데정렬) (IE9) ★★★★★ (HT - Cent…

flex	CSS - align-self 속성(I) ★ - 교차축 기준으로, 아이템 자체 정렬. (= align-sel…

transform	CSS - transform 속성 ★ - 요소 (회전/비틀기/크기확대) 변환 + 마우스 허버 시 줌효과 (=…

selector	CSS - ::after 가상선택자 ★ - 요소 뒤에 내용삽입 (= ::after선택자 = 에프터선택자/애프…

text	CSS - text-emphasis 속성 - 텍스트 강조마크의 '모먕/색깔' 일괄 지정 (= 텍스트 글자 위…

box	CSS - margin-top 속성 - 바깥여백상단 (= margin-top속성 = 마진탑속성 = 마진톱속성…

responsive	CSS - RES Video - (반응형 동영상)

selector	CSS - element~element 형제선택자 ★★ - 지정요소 뒤의 모든 특정형제요소 (요소선택자군…

border	CSS - border-top 속성 - 테두리상단일괄 (= border-top속성 = 보더탑속성 / 보더톱속…

table	CSS - table-layout 속성 ★★★ - 테이블 셀, 행 및 열을 레이아웃 (= table-layo…

border	CSS - border-style 속성 ★ - 테두리모양일괄 (= border-style속성 = 보더스타일속…

21/27