1. 폰트 패밀리 설정 (font-family)
텍스트의 폰트를 지정하는 속성이다.
경우에 따라 브라우저가 폰트를 지원하지 않거나 사용자가 가지고 있지 않을 경우해당 폰트가 표시되지 않는데, 이를 대비하여 여러 개의 폰트를 함께 지정해 주어야 한다.
브라우저는 첫 번째로 지정해준 폰트를 지원하지 않으면 자동으로 다음 폰트로 대체시킨다.
각 폰트는 쉼표로 구분하고, 폰트 이름에 공백이 존재한다면 큰따옴표로 묶어주어야 한다.
<폰트별 특징>
- Serif(Times New Roman, Georgia) : 글자 끝에 삐침이 있다.
- Sans-serif(Arial, Verdana) : 글자 끝에 삐침이 없다.
- Monospace(Courier New, Lucida Console) : 모든 글자의 너비가 같다.
2. 폰트 크기 설정 (font-size)
폰트 크기를 조절할 때는 몇 가지 단위 혹은 키워드를 이용한다.
<절대 크기>
텍스트를 지정한 크기로 설정한다.
- px, cm : 지정한 숫자를 폰트의 높이로 설정한다.
- xx-small, x-small, small, medium, large, x-large, xx-large : 키워드를 이용해 폰트 크기를 설정한다.
<상대 크기>
주변 요소를 기준으로 크기를 설정한다.
- % : 부모 요소의 폰트 크기에 대한 백분율로 설정한다.
- smaller, larger : 부모 요소의 폰트 크기보다 작게/크게 설정한다.
- em : 1em은 부모 요소의 기본 텍스트 크기와 같다. 2em이라면 부모 요소의 크기보다 두배 큰 크기이고, 0.5em이라면 두배 작은 크기가 된다.
* 폰트 크기를 지정해주지 않았을 경우 브라우저에서 기본 크기는 16px(=1em)이다.
3. 폰트 스타일 설정 (font-style)
텍스트를 이탤릭체로 나타낼 지 여부를 설정한다.
사용할 수 있는 속성은 세 가지가 있는데 normal(기본), italic(기울임꼴), oblique(기울임꼴)중에서 사용할 수 있다.
* 참고 - italic과 oblique의 차이
4. 폰트 굵기 설정 (font-weight)
폰트의 두께를 설정한다.
속성으로는 normal, bold, bolder, lighter, 100, 200, ... , 800, 900을 사용할 수 있다.
5. 폰트 변형 설정 (font-variant)
텍스트를 작은 대문자 글꼴로 표시할 지 여부를 설정한다.
작은 대문자 글꼴에서는 모든 소문자가 대문자로 변형되는데, 변형된 문자는 일반 대문자보다 작은 크기로 나타난다.
6. 폰트 속기 속성 (font)
모든 폰트 관련 속성들을 하나의 선언으로 설정한다.
사용할 수 있는 속성들은 "font-style font-variant font-weight font-size/line-height font-family"이며 사용할 속성을 이 순서대로 나열해 주어야 한다.
font-size와 font-family는 필수로 입력해야 하며, 다른 속성들은 생략 시 디폴트 값으로 설정된다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .ft1 { font: italic bold 30px/40px serif, sans-serif, monospace; } .ft2 { font: 500 20px monospace; } </style> </head> <body> <div class="ft1">Learn font properties!</div> <div class="ft2">Learn font properties!</div> </body> </html> | cs |
'프로그래밍 > 웹표준' 카테고리의 다른 글
| [CSS] 7. 박스 모델(Box Model) (0) | 2017.12.22 |
|---|---|
| [CSS] 6. 링크에 스타일 적용 (0) | 2017.09.22 |
| [CSS] 4. 텍스트 서식 지정 (1) | 2017.06.30 |
| [CSS] 3. 배경 설정하기 (0) | 2017.06.27 |
| [CSS] 2.CSS에서 색상 표현하기 (0) | 2017.06.24 |
댓글,
