font-family속성- 글꼴 지정하기
웹 문서에서 사용할 글꼴은 font-family 속성으로 지정합니다.
이속성은<body>,<p>,<hn>태그처럼 텍스트를 사용하는 요소들에게 주로 사용합니다.
- 예를 들어 텍스트 문단의 글꼴을 "굴림"으로 하고싶다면 이와 같이 정의합니다.
p{font-family:굴림;}- 웹 문서에서 글꼴을 지정할 때는 한가지 글꼴만 지정해두기도 하지만 지정한 글꼴이 없을 경우에 대비해 두 번째,세 번째 글꼴까지 지정해야합니다.(두 개 이상의 글꼴 이름을 지정할 때는 글꼴 이름과 이름사이에 (,)로 구분합니다.
body{ font-family:"맑은고딕",돋음,굴림}-만약 "맑은고딕" 글꼴이 없다면 "돋음"글꼴을 적용하고, 그것마저 없다면 "글꼴"로 적용하라는 의미입니다.
font-face 속성- 웹 폰트 사용하기
``html
구글 웹 폰트 이용하기브라우저 기본 글꼴 사용
나눔고딕 웹 폰트 사용
``` font-size 속성 -글자 크기 조절하기
글자크기는 font-size 속성으로 조절합니다.픽셀이나 포인트를 비롯해 크기를 여러 단위로 지정할 수 있고 백분율을 사용할 수도 있습니다.
- 절대 크기, 상대 크기, 크기, 백분율 로 지정할수 있습니다.
-절대크기:브라우저에서 지정한 클가 크기입니다.
사용할 수 있는 값은
xx-small,x-samll,small,medium,large,x-large,xx-large입니다.
-상대크기:부모 요소의 글자크기를 기준보다 더 크게 표시하거나 더 작게 표시합니다.
사용할수 있는 값은
large,smaller 입니다.
-크기:브라우저와 상관없이 글 크기를 직접 지정합니다.
-백분율:부모 요소의 글자 크기를 기준으로 해당하는 %를 계산해 표시합니다.
font size에서 사용할 수 있는 값은 여러 형태이지만 주로<크기>값을 지정하는 방법을 사용합니다.
| 단위 | 설명 |
|---|---|
| em | 해당 글꼴의 대문자 M의 너비를 기준으로 크기를 조절합니다. |
| ex | x-height(엑스 하이트),해당 글꼴의 소문자x의 높이를 기준으로 크기를 조절합니다. |
| px | 픽셀,모니터에 따라 상대적 크기가 됩니다. |
| pt | 포인트,일반 문서에서 많이 사용하는 단위입니다. |
px단위 사용하기
웹에서 font-size속성을 사용해 폰트 크기를 지정할 떄는 주로 px단위를 많이 사용합니다.
- 하지만 px단위를 사용하면 폰트 크기가 고정되기 때문에 창 크기가 작은 모바일 기기로 볼때도 같은 크기로 화면에 표시됩니다.
- 결국 작은 화면 안에 작은 글씨로 보이게 됩니다.
- 따라서 모바일 기기에서 접속할 경우까지 고려한다면 px단위보다 em단위를 사용하는 것이 좋습니다.
em단위사용하기
em은 글꼴의 대문자 M을 기준으로 하므로 그 발을을 따 em이라는 단위를 사용합니다.
- 부모요소에서 지정한 폰트의 대문자 M의 너비를 1em으로 놓고 상대적 값을 계싼해 다른 요소들의 글자 크기를 조절합니다.
- 만약 지정한 크기가 없다면
<body>요소의 크기 16px이 기본 값 1em으로 지정됩니다.
-부모 요소의 크기를 지정하지 않은 상태에서 <h1>의 크기를 3em, <p>의 크기를 1em으로 지정한 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>em단위로 글자 크기 지정하기</title>
<style>
h1{
font-size: 3em;
}
p{
font-size:1em;
}
</style>
</head>
<body>
<h1>3em의 크기를 가진 제목</h1>
<p>1em의 크기를 가진 단락</p>
</body>
</html>
-각각 48px,16px로 나와있음을 알수 있다.
font-weight속성- 글자 굵기 지정하기
font-weight속성은 글자 굵기를 지정합니다.
| 속성값 | 설명 |
|---|---|
| nomal | 일반적인 형태로 기본 값입니다. |
| bold, bolder, lighter | 굴게, 더굵게, 더 가늘게 |
| 100~999 사이의 수치 | 400은 nomal, 700은 bold에 해당하며숫자 값을 조절해 좀더 세밀한 글꼴 두꼐를 조절할수 있습니다. |
font-syle 속성-글자 스타일 지정하기
글자를 이텔릭체로도 표시할 수 있습니다.
| 속성 값 | 설명 |
|---|---|
| normal | 일반적인 형태로 표시합니다. |
| italic | 이탤릭체로 표시합니다. |
| oblique | 이탤릭체로 표시합니다. |
<style>
p{
font-style:italic;
}
</style>font속성-글꼴 속성을 한꺼번에 묶어 표현하기
font속성을 이용하면 font-style,font-variant,font-weight,font-size,line-height,font-family 속성들을 한꺼번에 묶어 약식으로 표현할 수 있습니다.
-또한 특정 키워드를 입력해 그것에 어울리는 글꼴 스타일로 표시할 수도 있습니다.
| 속성 값 | 설명 |
|---|---|
| font-* | font-로 시작하는 글꼴 관련 속성을 한꺼번에 나열합니다. |
| caption | 캡션에 어울리는 글꼴 스타일로 표시합니다. |
| icon | 아이콘에 어울리는 글꼴 스타일로 표시합니다. |
| menu | 드롭다운 메뉴에 어울리는 글꼴 스타일로 표시합니다. |
| message-box | 대화상자에 어울리는 글꼴 스타일로 표시합니다. |
| small-caption | 작은 캡션에 어울리는 글꼴 스타일로 표시합니다. |
| status-bar | 상태 표시줄에 어울리는 글꼴 스타일로 표시합니다. |
