font -family 속성 - 글꼴 지정하기
예] p {font-family: 굴림;}
- 웹 문서에서 글꼴을 지정할 때는 한 자기 글꼴만 지정하기도 하지만 지정한 글꼴이 없을 경우에 대비해 두 번째, 세 번째 글꼴까지 지정해야 한다. 두 개이 상의 글꼴 이름을 지정할 때는 글꼴 이름과 이름 사이의 ,로 구분한다.
- 그러면 사용자 시스템에 없는 글꼴을 다른 글꼴로 대체하는 것이 아니라 그대로 보여주려고 하면 웹 폰트를 사용하면 된다. 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장 했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드시키는 방식이다.
font-size 속성 - 글자 크기 조절하기
- 단위
em : 해당 글꼴의 대분자 M의 너비를 기준으로 크기를 조절한다.
ex : 글꼴을 소문자 x의 높이를 기준으로 크기를 조절한다.
px : 픽셀. 모니터에 따라 상대적 크기가 된다.
pt : 포인트. 일반 문서에서 많이 사용한다.
- px단위를 사용하면 폰트가 고정된다. 따라서 px 단위보다 em단위를 사용하는 것이 좋다.
- em은 부모 요소에서 지정한 폰트의 대문자 M의 너비를 1em으로 놓고 상대적 값을 계산해 다른 요소들의 글자 크기를 조절한다.
만약 지정한 크기가 없다면 <body> 요소의 크기 기본 값 16px이 기본 값 1em이 된다.
font-weight 속성 - 글자 굵기 지정하기
- font-weight: 속성 값
- 아래 값이 속성 값으로 입력 될 수 있는 것들이다.
normal : 일반적인 형태로 기본 값이다.
bold 혹은 lighter 혹은 bolder : bold - 굵게, lighter - 원래 굵기보다 더 가늘게, bolder - 원래 굵기보다 더 굵게 나타낸다.
- 100~900 : 400은 normal , 700은 bold에 해당하고 해당 숫자를 조절하여 글자의 세밀한 굵기를 조절할 수 있다.
font-variant 속성 - 작은 대문자로 표시
- font-variant: 속성 값
- 아래 값이 속성 값으로 입력 될 수 있는 것들이다.
normal : 일반적인 형태
small-caps : 작은 대문자로 표시한다.
font-style 속성 - 글자 스타일 지정
- normal : 일반적인 형태로 표시
- 아래 값이 속성 값으로 입력 될 수 있는 것들이다.
normal : 일반적인 형태
italic : 이탤릭체로 표시한다.
oblique : 이탤릭체로 표시한다. 그러나 italic속성과 다른 것은 italic은 처음부터 기울어진 글꼴이 디자인되어 있는데 oblique는 원래 글꼴을 단순히 기울인다.
font 속성 - 글꼴 속성을 한꺼번에 묶어 표현하기
'Web > HTML&CSS' 카테고리의 다른 글
| [CSS기초]박스모델 (0) | 2017.07.28 |
|---|---|
| [CSS기초]03 캐스캐이딩 스타일 시트 (0) | 2017.07.28 |
| [CSS 정리]02 주요 선택자 (0) | 2017.07.27 |
| [CSS 기초]01 CSS 적용하기 (2) | 2017.07.27 |