본문으로 바로가기



이번 시간에는 CSS 에서 font 속성에 대해 알아보도록 하겠습니다.


폰트 크기 조정


폰트의 크기를 조정합니다. font-size 를 통해 사용하실 수 있습니다.


1
2
3
4
5
6
// HTML
<p class="small">작은 글자</p>
 
<p class="middle">보통 글자</p>
 
<p class="big">큰 글자</p>
cs


1
2
3
4
5
6
7
8
9
10
/* CSS */
.small {
  font-size: 12px;
}
.middle {
  font-size: 24px;
}
.big {
  font-size: 36px;
}
cs


결과 보기: https://jsfiddle.net/yoonano/tb0z0yp5/


폰트 두께 조정


폰트 두께는 font-weight 를 통해 조정합니다. light, normal, bold 또는 100~700 의 숫자를 통해 조정합니다.


1
2
3
4
5
6
7
8
// HTML
<p class="normal">일반 글자</p>
 
<p class="normal2">일반 글자2</p>
 
<p class="bold">두꺼운 글자</p>
 
<p class="bold2">두꺼운 글자2</p>
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
/* CSS */
.normal {
  font-weight: normal;
}
.normal {
  font-weight: 500;
}
.bold {
  font-weight: bold;
}
.bold2 {
  font-weight: 700;
}
cs


결과 보기: https://jsfiddle.net/yoonano/aLkkj0km/


폰트 스타일 조정


폰트 스타일은 font-style 을 통해 조정합니다. normal, italic 등의 기울어짐을 조정할 수 있습니다.


1
2
3
4
// HTML
<p class="normal">일반 글자</p>
 
<p class="italic">기울어진 글자</p>
cs


1
2
3
4
5
6
7
/* CSS */
.normal {
  font-style: normal;
}
.italic {
  font-style: italic;
}
cs


결과 보기: https://jsfiddle.net/yoonano/rL2yt21x/1/


폰트 서체 변경


폰트 서체는 font-family 를 통해 변경합니다. 서체를 정할 수 있습니다.


1
2
3
4
// HTML
<p class="marg-eun">맑은 고딕</p>
 
<p class="na-num">나눔 고딕</p>
cs


1
2
3
4
5
6
7
8
9
10
/* CSS */
.marg-eun {
  font-family: 맑은 고딕, 맑은고딕;
}
 
.na-num {
  font-family: 나눔 고딕, 나눔고딕;
}
 
/* 폰트의 경우 접속하는 유저에 따라 다르기 때문에 여러가지를 넣어 확실히 적용되도록 합니다. */
cs


결과 보기: https://jsfiddle.net/yoonano/8m093a3t/



댓글을 달아 주세요