css 폰트(font)에 관련된 주요 속성은 다음과 같은 것들이 있다.
font-family, font-size, font-style, font-variant, font-weight
다음 역시 폰트에 관련된 속성이다.
letter-spacing, word-spacing, line-height
속성이 이름만 봐도 대략 느낌이 온다.
이제 하나씩 알아보도록 하겠다.
- font-familiy
font-familiy의 속성 값들은 왼쪽에 있는 것이 우선순위를 갖는다. 위에서는 Nofont라는 폰트가 최 우선순위지만, 이런 폰트가 없다면 다음 우선순위인 Malgun Gothic 폰트가 사용된다.
물론 font-family를 설정하지 않아도 기본 글꼴로 사용된다.
'Malgun Gothic' 과 같이 폰트이름에 띄어쓰기가 있다면 따옴표로 묶어주면 된다. 외부 따옴표가 "쌍따옴표이므로 이와 구별되기 위해 내부에서는 '홑따옴표를 사용했다.
- font-size
| xx-large | 32px | 24pt | 2pc |
| x-large | 24px | - | - |
| large | 18px | - | - |
| medium | 16px | 12pt | 1pc |
| small | 13px | - | - |
| x-small | 10px | - | - |
| xx-small | 9px | - | - |
※ 단위
px : 픽셀(pixel) 단위다. font-size가 지정되지 않으면 기본 사이즈인 16px로 표시된다.
pt : 일반적인 문서프로그램에서 사용되는 폰트 크기 16px = 12pt
그 밖에 in(인치), cm(센티미터), mm(밀리미터), pc(1pc = 12pt) 등이 있다.
B. 상대 크기 단위 (em, %)
말 그대로 상대적인 크기를 나타낸다. 따라서 기준이 되는 font-size 속성이 앞에서 지정되거나 또는 감싸는 태그에 지정되어 있어야 한다. (이런 속성을 상속된 속성이라고 한다.)
만약 앞에서 지정된 font-size 속성이 없다면 디폴트인 16px를 기준(1em = 16px)으로 한다.
<div style="font-size: 20px">
20px
20px 의 1.2배
20px 의 0.5배
20px
<div style="font-size: 20px">
20px
20px 의 50%
20px 의 150%
20px 의 100%
- font-style
*나눔 고딕 폰트의 경우
font-style, 폰트 스타일, 12345
font-style, 폰트 스타일, 12345
font-style, 폰트 스타일, 12345
font-style, 폰트 스타일, 12345
normal : 글꼴의 기본 형태로 표시
oblique : 글꼴을 기운형태로 표시
italic : italic은 기운 글꼴이지만 oblique와는 다를 수 있다. 필기체와 같은 모양으로 글꼴에 따라서 표현이 될 수도 있고 안될 수도 있다. 만약 글꼴이 italic을 지원하지 않으면 oblique로 표현한다.
inherit : 앞에서 설정된 또는 감싼 태그가 설정한 font-style을 따른다.
- font-variant
<div>
abcdEFG
abcdEFG
font_variant의 속성값을 small-caps로 하면 소문자를 작은 대문자로 변경한다. 특이한 속성이다.
- font-weight
Hello Css3, 하이~!, 1234
Hello Css3, 하이~!, 1234
Hello Css3, 하이~!, 1234
Hello Css3, 하이~!, 1234
Hello Css3, 하이~!, 1234
Hello Css3, 하이~!, 1234
Hello Css3, 하이~!, 1234
Hello Css3, 하이~!, 1234
font-weight는 100, 200, 300, .... 900 까지 값을 가질 수 있다.
normal : 기본 굵기 (400)
bold : 굵은 굵기 (700)
bolder : "상대적으로 굵게"를 의미한다. 위 코드는 div 태그의 font-weight:700 을 상속받으므로 700보다 굵은 값을 의미한다.
lighter : 위 코드에서는 700 보다 가는 값
- letter-spacing
Hello Css3, 하이~!, 1234
Hello Css3, 하이~!, 1234
Hello Css3, 하이~!, 1234
Hello Css3, 하이~!, 1234
Hello Css3, 하이~!, 1234
Hello Css3, 하이~!, 1234
Hello Css3, 하이~!, 1234
Hello Css3, 하이~!, 1234
단위는 픽셀(px), cm, in 등 폰트 사이즈 단위를 쓸 수 있는데 글자간격은 세밀히 조정해야하므로 픽셀(px)을 쓰도록 한다.
음수는 자간이 좁아지고, 양수는 자간이 넓어진다.
normal과 0px은 동일하고 폰트의 기본 글자 간격이다.
- word-spacing
단어간의 간격이다. 띄어쓰기를 기준으로 간격을 조정한다.
안녕하세요, Hellow!, 1234
안녕하세요, Hellow!, 1234
안녕하세요, Hellow!, 1234
안녕하세요, Hellow!, 1234
안녕하세요, Hellow!, 1234
letter-spacing과 마찬가지로 여러 단위로 사용할 수 있지만 세세한 조정을 위해 px(pixel)로 사용하자.
line-height라는 속성도 있는데 글이 길어져서 이건 따로 정리해야할 것 같다.