font-size

CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!

font-size 는 글자의 크기를 지정합니다.
px, pt, em, % 단위를 사용할 수 있습니다.

예제 1
글자의 크기를 지정합니다.
보기
가나다라 1234 ABCD - 10pt
가나다라 1234 ABCD - 15pt
가나다라 1234 ABCD - 20pt
가나다라 1234 ABCD - 1em
가나다라 1234 ABCD - 2em
소스
<div style="font-size:10pt;">가나다라 1234 ABCD - 10pt</div>
<div style="font-size:15pt;">가나다라 1234 ABCD - 15pt</div>
<div style="font-size:20pt;">가나다라 1234 ABCD - 20pt</div>

<div style="font-size:1em;">가나다라 1234 ABCD - 1em</div>
<div style="font-size:2em;">가나다라 1234 ABCD - 2em</div>
사용된 CSS (클릭시 보기) : font-size
예제 2
실습 - 크기 조절하기 (pt 단위)
보기
CSS 공작소
font-size :
10pt
 
CSS 공작소
설명
슬라이더를 움직여 보세요 ^^
예제 3
굴림체 폰트 크기
보기
가나다라 1234 ABCD - 9pt
가나다라 1234 ABCD - 10pt
가나다라 1234 ABCD - 11pt
소스
<div style="font-family:굴림; font-size:9pt;">가나다라 1234 ABCD - 9pt</div>
<div style="font-family:굴림; font-size:10pt;">가나다라 1234 ABCD - 10pt</div>
<div style="font-family:굴림; font-size:11pt;">가나다라 1234 ABCD - 11pt</div>
사용된 CSS (클릭시 보기) : font-familyfont-size
설명
- 친근한 굴림체의 pt 크기입니다.
예제 4
실습 - 크기 조절하기 (px 단위)
보기
CSS 공작소
font-size :
10px
 
CSS 공작소
예제 5
실습 - 크기 조절하기 (em 단위)
보기
CSS 공작소
font-size :
1em
 
CSS 공작소
설명
- em 은 배수 단위입니다. 1em 은 1배, 2em 은 2배 입니다.
- 1.5em 처럼 소수점 단위도 쓸 수 있습니다.
- % 단위도 사용할 수 있는데 200% 는 2em 입니다.
예제 6
실습 - 크기 조절하기 , em 중첩하기
보기
CSS 공작소
CSS 공작소
font-size :
1em
 
CSS 공작소
설명
위 예제에서 큰 글자는 1.5em 입니다. 그리고 작은 글자의 태그안에 들어있습니다.
슬라이더를 움직여 작은 글자의 크기를 늘리면 1.5em 으로 인해 그 배수 만큼 같이 커지게 됩니다.

위 예제의 글자부분 태그입니다.
<span style="font-size:1em;">CSS 공작소<br><span style="font-size:1.5em;">CSS 공작소</span></span>
 
+ 관련 CSS +