고정 헤더 영역
상세 컨텐츠
본문
반응형
font-family 속성 - 글꼴 지정하기
- 웹 문서에 사용할 글꼴을 font-family 속성으로 지정한다. 텍스트를 사용하는 요소들에서 주로 사용한다.
font-family: <글꼴이름>[, <글꼴 이름>, <글꼴이름>]body {
font-family: "맑은 고딕", 돋움, 굴림 }
}- 글꼴이 없는 경우를 대비해서 두 번째나 세 번째 글꼴까지 지정해야 한다.
구글 웹 폰트 사용하기
- 구글에서 무료로 제공하는 웹 폰트를 사용할 수 있다. 웹 폰트를 직접 다운로드 하지 않고 직접 링크를 이용해 사용할 수 있다.
- https://fonts.google.com 사이트에 들어가서 원하는 글꼴을 사용할 수 있다.
- 원하는 글꼴을 선택해서 숫자 1~3 번까지 클릭을 한다. <style>와 </style> 태그 사이에 넣을 import 부분을 복사한다.
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap');
<html>
<head>
<meta charset="utf-8">
<style>
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap');
p {
font-family: "Oswald script=latin rev=2"; font-weight: 200; font-style: normal; line-height: 1.482;
}
</style>
</head>
<body>
<p>동해물과 백두산이 마르고 닳도록 대한사람 대한으로 길이 보전하세</p>
</body>
</html>
font-size 속성 - 글자 크기 조절하기
- font-size는 글자 크기를 조절할 때 사용하는 속성이다. 픽셀이나 포인트를 비롯해 크기를 여러 단위로 지정할 수있다.
font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>- <절대 크기> : 브라우저에서 지정한 글자 크기(xx-small | x-small | small | medium | large | x-large | xx-large)
- <상대 크기> : 부모 요소의 글자 크기를 기준으로 더 크게 표시하거나 더 작게 표시한다. (larger | smaller)
- <크기> : 브라우저와 상관없이 글자 크기를 직접 지정
- <백분율> : 부모 요소의 글자 크기를 기준으로 해당하는 %로 계산해 표시
font-size 글자 크기 단위
- em : 해당 글꼴의 대문자 M의 너비를 기준으로 크기를 조절한다.
- ex : x-height. 해당 글꼴의 소문자 x의 높이를 기준으로 크기를 조절한다.
- px : 픽셀. 모니터에 따라 상대적 크기가 된다.
- pt: 포인트. 일반 문서에서 많이 사용하는 단위다.
팁
- px 단위로 글자 크기를 지정을 많이 한다. 주로 px 단위로 사용을 하면 폰트 크기가 고정되기 때문에 창 크기가 작은 모바일 기기로 볼 때도 같은 크기로 화면에 표시된다. 작은 화면 안에 작은 글씨로 표시가 되기 때문에 px 단위보다는 em 단위로 사용하는 게 좋다.
- 1em의 기본 값은 16px다.
<html>
<head>
<meta charset="utf-8">
<style>
p {
font-size: 1em;
}
</style>
</head>
<body>
<p>동해물과 백두산이 마르고 닳도록 대한사람 대한으로 길이보전 하세</p>
</body>
</html>
반응형
'IT > HTML 및 CSS' 카테고리의 다른 글
| [CSS 기초] 텍스트 스타일 (0) | 2021.04.19 |
|---|---|
| [CSS 기초] 글꼴 관련 스타일 (2) (0) | 2021.04.16 |
| [CSS 기초] 주요 선택자 (0) | 2021.04.13 |
| [CSS 기초] 스타일과 스타일 시트 (0) | 2021.04.12 |
| [HTML 기초] 기타 다양한 폼 요소들 (0) | 2021.04.08 |
댓글 영역