[HTML/CSS] font 속성 - 글꼴 속성을 한꺼번에 지정하기

 font 속성 - 간략하게 요약하여 표현하기 

[HTML/CSS] 글자색 변경하기 (font-color)

[HTML/CSS] 글자 굵기 변경하기 (font-weight)

[HTML/CSS] 글자 이탤릭체, 밑줄, 취소선 변경하기

[HTML/CSS] 대/소문자 변경하기 (text-transform)

[HTML/CSS] 작은 대문자로 표시하기 (font-variant)

[HTML/CSS] 글자 글꼴(폰트) 변경하기 (font-family)

[HTML/CSS] 구글 웹 폰트 사용하기 (@font-face)

 

앞에서 포스팅 했던 위의 소스들을 여러개 적용하기 위해서 글꼴 스타일을 하나하나 코딩하려고 하면 소스가 너무 지저분해질 것입니다.

 

See the Pen Untitled by wjdxo513 (@wjdxo513) on CodePen.

 

이럴때는 font 속성을 활용하여 font-style과 font0variant, font-weight, font-size/line-height, font-fmily 속성들을 한꺼번에 묶어 약식으로 표현할 수 있습니다.

 

 font 속성 - 지정된 글꼴 스타일 적용하기 

See the Pen font 묶기 by wjdxo513 (@wjdxo513) on CodePen.

 

여러가지 폰트 스타일이 묶어져 있는 키워드를 입력하여 글꼴의 스타일을 사용할 수 있습니다. 위와 같이 font에 특정 키워드를 입력하여 그것에 어울리는 글꼴 스타일로 표시할 수 있습니다.