[ font-family ]
: 폰트의 글꼴을 지정하는 속성(property)으로써
비슷비슷한 폰트들을 우선 순위에 따라서 보여주기 때문에 font-family라는 이름을 사용합니다.
<!DOCTYPE html> <html> <head> <style> p { font-size: 5rem; } #font-size { font-family: arial; // or // font-family: Arial, Helvetica, sans-serif; // Arial이 없으면 Helvetica, Helvetica가 없으면 sans-serif로 글꼴 지정한다는 뜻 } </style> </head> <body> <p id="font-size">Hello World</p> <p>Hello World</p> </body> </html>
+ serif vs sans serif
: serif는 글꼴에서 사용하는 장식을 의미합니다. sans는 부정을 표현합니다.
즉, sans serif는 serif가 아니다. (장식이 없다)는 뜻입니다.
[ font-size ]
: 폰트의 크기를 지정하는 속성(property)
<!DOCTYPE html> <html> <head> <style> #font-size { font-size: 5rem; } </style> </head> <body> <p id="font-size">Hello World</p> <p>Hello World</p> </body> </html>
[ font-weight ]
: 폰트의 두께를 지정하는 속성(property)입니다.
[ font-height ]
: 폰트의 자간을 지정하는 속성(property)입니다.
[ font ]
: 폰트와 관련된 여러 속성을 축약형으로 표현하는 속성입니다.
형식은 아래와 같습니다. 순서를 지켜서 기술 해야 합니다.
font: font-style font-variant font-weight font-size/line-height
font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;
'프레임워크 > CSS' 카테고리의 다른 글
| [생활코딩] 타이포그래피 - 웹폰트 (0) | 2022.01.25 |
|---|---|
| [CSS] linear-gradient (0) | 2022.01.25 |
| [생활코딩] 타이포그래피 - text-align (0) | 2022.01.24 |
| [생활코딩] 타이포그래피 - color (0) | 2022.01.24 |
| [생활코딩] 속성을 공부하는 방법 (0) | 2022.01.22 |
댓글