0047 CSS의 Font Weight, Style, Variant
Font Weight
Font Weight는 글꼴의 굵기를 말한다. font-weight 속성(property)으로 다음과 같이 설정한다.
font-weight: normal; → 굵지 않음
font-weight: bold; → 굵음
만일, 기본 설정이 bold이거나 부모로부터 bold를 상속받는 요소라면 해당 요소에 다음과 같은 선언을 다시 적용하여 bold를 제거할 수 있다.
font-weight: normal; → 굵지 않음
이론적으로는 bolder와 lighter와 같은 상대적인 굵기 단위를 사용하여 상속받은 굵기를 보다 굵거나 얇게 만들 수 있다.
혹은, 절대적인 굵기 단위인 100~900 사이의 숫자로 font-weight의 속성값을 설정할 수 있다. 하지만 대부분의 폰트들은 이렇게 다채로운 굵기로 제시되지 않고 브라우저도 잘 지원하지 않아 결국, 실무에서는 normal과 bold만 그 속성값으로 사용한다.
다음과 같이 작성하여 
0047_font_weight.html로 저장하고 실행해보자.
<!DOCTYPE html>
<html>
<head>
<title>font weight</title>
</head>
<body>
<p style="font-weight: bold;">폰트 굵기(bold)</p>
<p style="font-weight: normal;">폰트 굵기(normal)</p>
<p style="font-weight: 100;">폰트 굵기(100)</p>
<p style="font-weight: 200;">폰트 굵기(200)</p>
<p style="font-weight: 300;">폰트 굵기(300)</p>
<p style="font-weight: 400;">폰트 굵기(400)</p>
<p style="font-weight: 500;">폰트 굵기(500)</p>
<p style="font-weight: 600;">폰트 굵기(600)</p>
<p style="font-weight: 700;">폰트 굵기(700)</p>
<p style="font-weight: 800;">폰트 굵기(800)</p>
<p style="font-weight: 900;">폰트 굵기(900)</p>
</body>
</html>
실행한 결과는 다음과 같다. 폰트 굵기 100~500까지는 normal과 동일하고, 600~900까지는 bold와 동일하게 굵게 나타나기만 하는 것을 확인할 수 있다.
Font Style
Font Style은 보통 텍스트를 이탤릭으로 처리하기 위하여 font-style 속성(property)을 사용한다.
font-style 속성(property)은 세 가지 속성값을 갖는다.
font-style: normal; → 변화 없음
font-style: italic; → 이탤릭
font-style: oblique; → oblique는 italic과 매우 비슷
Font Variant
Font Variant는 font-variant 속성을 이용하여 텍스트를 작은 대문자 글꼴(small-caps font)로 할지 여부를 결정한다. 작은 대문자 글꼴(small-caps font)은 소문자를 전부 원래의 글꼴 크기보다 작은 대문자로 표기하는 글꼴을 말한다.
font-variant: normal; → 변화 없음
font-variant: small-caps; → 텍스트가 작은 대문자 글꼴로 나타남
작은 대문자 글꼴로 텍스트를 나타내면 다음과 같다.
<p style="font-variant: small-caps;">HTML ankilog font variant</p>
Anki 파일
아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다.
Ankilog 파일: 
0047 CSS의 Font Weight, Style, Variant.apkg
'Anki로 공부하기 > HTML공부' 카테고리의 다른 글
| 0049 div 요소와 span 요소 (0) | 2019.01.24 |
|---|---|
| 0048 CSS로 색깔 넣기 (0) | 2019.01.11 |
| 0046 font-size 설정하기 (0) | 2019.01.07 |
| 0045 CSS 반응형 길이(responsive length) 단위 (0) | 2019.01.04 |
| 0044 CSS의 길이(length) 중 상대 길이(relative length) (0) | 2019.01.03 |
