글꼴을 지정하는 속성
- font-family 속성
- 웹 문서에서 사용할 글꼴은 font-family 속성으로 지정함
- font-family 속성은 <body> 태그, <p> 태그, <hn> 태그처럼 텍스트를 사용하는 요소에서 주로 사용함
- 기본형 :
font-family: <글꼴 이름> | [<글꼴 이름>, <글꼴 이름>] - 글꼴 이름을 2개 이상 지정할 때는 두 글꼴 이름 사이에 쉼표(,)를 넣어 구분함
- 텍스트 글꼴을 지정할 때 두 단어 이상으로 된 글꼴 이름은 한 덩어리라는 것을 명시하기 위해 큰따음표(")로 묶음
-(예시) :
body { font-family: "맑은 고딕", 궁서, 돋움 }-(결과) : 웹 문서 전체에 "맑은 고딕" 글꼴을 적용하고
만약 "맑은 고딕" 글꼴이 없다면 "궁서" 글꼴로 적용하고
만약 "궁서" 글꼴이 없다면 "돋움" 글꼴로 적용함
- 기본형 기호
- | 는 나열한 옵션 중 하나가 값이 되어야 한다는 의미
└ 값1, 값2, 값3 중 하나가 font-size 속성값이 됨font-size: 값1 | 값2 | 값3 - 속성값을 나열할 때 키워드는 그대로 나열함
└ font-variant 속성은 normal이나 small-caps 라는 값을 사용함font-variant: normal | small-caps - 속성값을 나열할 때 값이 아니라 유형이면 < >로 묶음, 이때 다른 속성을 유형처럼 사용 가능
font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>
ex) font-size: 30%
font: <font-style><font-variant><font-weight>
- | 는 나열한 옵션 중 하나가 값이 되어야 한다는 의미
글자 크기를 지정하는 속성
- font-size 속성
- 글자 크기를 조절함
- 글자 크기의 단위는 px(픽셀), pt(포인트) 등으로 지정할 수 있으며 백분율도 사용 가능
- 기본형 :
font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>
├ 상대 크기 : 부모 요소의 글자 크기를 기준으로 상대적인 글자 크기 지정
├ 크기 : 브라우저와 상관없이 글자 크기를 직접 지정
└ 백분율 : 부모 요소의 글자 크기를 기준으로 백분율(%)로 표시
- 키워드를 사용한 글자 크기 지정
- 글자 크기로 사용하도록 미리 약속해 놓은 키워드 (밑으로 갈수록 크기가 커짐)
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- 글자 크기로 사용하도록 미리 약속해 놓은 키워드 (밑으로 갈수록 크기가 커짐)
- 단위를 사용한 글자 크기 지정
- 음숫값은 사용 불가능
- 요즘에는 em이나 rem을 많이 사용함
- em : 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 비율값을 지정
- rem : 문서 시작 부분에서 지정한 크기를 기준(1rem)으로 한 후 비율값을 지정
- ex : 해당 글꼴의 소문자 x의 높이를 기준(1ex)으로 한 후 비율값을 지정
- px : 모니터의 1픽셀을 기준(1px)으로 한 후 비율값을 지정
- pt : 포인트라고 하며, 일반 문서에서 많이 사용함
- 백분율을 사용하여 글자 크기 지정
- 백분율은 부모 요소의 글자 크기를 기준으로 계산하여 지정
- 단, 백분율로 계산하려면 부모 요소의 글꼴 크기가 font-size: 10px 처럼 단위로 표현되어 있어야 함
이탤릭체로 글자를 표시하는 속성
- font-style 속성
- 글자를 이탤릭체로 표시할 때는 font-style 속성을 사용함
- 기본형 :
┌ normal : 기본값으로 일반적인 형태로 표시font-style : normal | italic | oblique
├ italic : 이탤릭체로 표시함, 기울어진 글꼴이 처음부터 디자인 되어 있음
└ oblique : 이탤릭체로 표시함, 원래 글꼴을 단지 기울어지게 표시함
글자 굵기를 지정하는 속성
- font-weight 속성
- 미리 만들어진 예약어(normal, bold, bolder) 혹은 숫자값을 사용하여 굵기를 지정함
- 예약어 대신 숫자값을 사용하면 글꼴 굵기를 세밀하게 조절 가능
- 기본형 :
┌ normal : 기본값, 보통 굵기font-weight: normal | bold | bolder | lighter | 100 | 200 | ... | 800 | 900
├ bold : 굵게
├ bolder : 원래보다 더 굵게
├ lighter : 원래보다 더 가늘게
└ 100~900 : 굵기를 표현함, 100은 가장 가늘게, 900은 가장 굵게
-(예시) :
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Example</title>
<style>
body {
font-size: 20px;
}
h1 {
font-family: 궁서;
font-size: 3em;
}
.accent {
font-size: 150%;
font-weight: 700;
}
.italic {
font-style : italic;
}
</style>
</head>
<body>
<h1>예제 1</h1>
<p>예시 1 <span class="accent">예시 2 </span>예시 3</p>
<p class="italic">예시 4</p>
</body>
</html>-(결과) :
