○ font-family 속성 : 폰트의 종류 지정
우선 해당 웹 문서에서 적용될 폰트를 지정하는 방식에 대해서 살펴보겠습니다. 주로 <body>, <p>, <hn> 태그에서 적용되겠죠? 기본적으로 웹 문서의 폰트 스타일을 지정하게 되면 사용자의 시스템(PC)에 설치된 폰트를 이용하게 됩니다. 그런데 항상 모든 사용자의 PC에 우리가 지정한 폰트가 있을 것이라는 보장은 없습니다.
그래서 font-family 속성에는 두 번째, 세 번째.... 폰트를 미리 설정하여 차순위로 사용할 폰트까지 지정하게 됩니다. 이런 방식으로 폰트를 설정하게 된다면, 애초에 사용자의 PC에 기본적으로 설치되는 폰트를 사용하는 게 좋겠죠?
아래의 사례와 같이, font-family 속성 값으로 다수의 폰트를 우선 순위로 지정하게 될 때는 쉼표(,)를 사용하여 나열하게 됩니다. 만일 폰트 이름이 두 단어 이상일 경우에는 혼선을 피하기 위하 큰 따옴표로 폰트 이름을 묶어주게 됩니다.
body {
font-family: "맑은 고딕", 돋움, 굴림
}
○ font-size 속성 : 폰트 크기 지정
말 그대로 폰트의 크기를 지정하는 속성 입니다. 다만, 문서 작업 등에서 지정하는 폰트의 크기와 다르게 웹 문서에서는 여러 가지 상황을 고려해야 하므로 그렇게 크기 지정이 단순한 일은 아닙니다. 하나씩 짚어보도록 하겠습니다.
선택자 {
font-size: 절대크기 | 상대크기 | 크기 | 백분율
}
1. 키워드를 사용할 수 있습니다. 숫자를 사용하지 않고, 약속된 아래의 키워드를 사용할 수 있습니다.
xx-samll < x-small < medium < large < x-large < xx-large
2. 크기 단위 값 사용하기
CSS에서는 대부분 키워드를 사용하기보다는, 단위를 주로 이용하게 됩니다. 기본적으로 음수는 사용할 수 없으며, px(픽셀), pt(포인트), em 등을 사용합니다. 이 중 px와 pt는 절대크기 단위로서 많이 사용했지만 최근에는 모바일 디바이스 등 이용 환경이 다변화되었기 때문에 em, rem 같은 상대 크기 단위를 많이 사용하게 됩니다.
- px : 모니터의 1픽셀을 기준(1px)으로 한 후, 비율값을 지정합니다.
- pt : 일반 문서에서 사용하는 포인트입니다.
- em : 부모 요소에서 지정한 폰트의 대문자 M 너비를 기준(1em)으로 한 후 비율값을 지정합니다.
- rem : 문서 시작(root)부분에서 지정한 크기를 기준(1rem)으로 한 후 비율값을 지정합니다.
- ex : 해당 폰트의 소문자 x의 높이를 기준(1ex)으로 한 후 비율값을 지정합니다.
3. 백분율 사용하기
백분율은 부모 요소의 폰트 크기를 기준으로 계산하여 지정하는 방법입니다. 단, 이를 위해서는 부모 요소의 폰트 크기가 'font-size: 20px'처럼 단위로 표현되어 있어야 가능합니다.
○ font-style속성 : 이탤릭체 지정
흔히 사용하게 되는 기울어진 폰트 모양인 이탤릭체를 적용할 때, font-style을 사용하게 됩니다. 이때 사용할 수 있는 속성값은 normal | italic | oblique인데 주로 italic을 많이 사용합니다.
선택자 {
font-style: normal | italic | oblique
}
그럼 italic과 oblique의 차이는 무엇일까요? italic은 해당 폰트에 디자인된 이탤릭체를 사용하는 것이며, oblique는 강제로 해당 폰트를 기울이는 것입니다. 폰트들은 대부분 미리 이탤릭체가 디자인되어 있어서 italic을 사용하는 것입니다.
○ font-weight속성 : 글자 굵기 지정
흔히 말하는 '굵은 글자'를 적용할 때 사용하는 속성입니다. 이 때 사용할 수 있는 예약어는 [normal | bold | bolder | lighter] 입니다. 혹은 수치로도 글자 굵기를 지정할 수도 있습니다. 100 ~ 900 사이의 값으로 지정할 수 있는데요, 400은 예약어 normal, 700이 예약어 bold에 해당합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
font-size: 20px;
}
h1 {
font-family: 바탕;
font-size: 3em;
}
.accent {
font-size: 150%;
font-weight: 800;
}
.italic {
font-style: italic;
}
</style>
</head>
<body>
<h1>3em을 적용한 h1입니다.</h1>
<p>M_p태그 문장인데, <span class="accent">이 부분에 accent</span>를 적용합니다.</p>
<p>별다른 스타일을 적용하지 않은 p태그 문장이며</p>
<p class="italic">이 문장은 p 태그에 이탤릭 클래스를 적용합니다.</p>
</body>
</html>
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 2. 텍스트 스타일(3) - 텍스트 컬러 (0) | 2023.03.27 |
|---|---|
| [CSS] 2. 텍스트 스타일(2) - 웹(외부) 폰트 사용하기 (0) | 2023.03.26 |
| [CSS] 1. CSS의 기본 개념(4) - Cascading (0) | 2023.03.23 |
| [CSS] 1. CSS의 기본 개념(3) - 기본 선택자 (0) | 2023.03.22 |
| [CSS] 1. CSS의 기본 개념(2) - 스타일 시트란? (0) | 2023.03.20 |
