[CSS] 폰트 (font) - 폰트 속성 설정, 폰트의 축약형

font의 경우 앞서 배운 font와 관련된 다양한 값을 축약 속성에 넣을 수 있다. 다만 속성마다 선언 순서를 지켜야 하는 제약이 있음에 유의해야한다. 또한, 반드시 꼭 넣어야 하는 속성들이 있는 등 지켜야 할 규칙이 많고 가독성이 좋지 않기 때문에 실무에서 선호하는 편은 아님을 알아두자. 

 

그렇지만 font로 선언된 속성을 보고 어떤 값들이 적용되어 있는지 해석할 수 있어야 한다. 

 

축약 가능한  font 관련 속성

font-style, font-variant, font-weight, font-size/line-height, font-family 속성들은 한 번에 선언할 수 있는 축약형 속성이다. (기본 값 : 각 속성들의 기본 값)

font: font-style font-variant font-weight font-size/line-height font-family | initial | inherit;

/* style | size | family */
font: oblique 2em "돋움", dotum, sans-serif;

/* style | variant | weight | size/line-height | family */
font: oblique small-caps bold 16px/1.5 '돋움';

/* The font used in system dialogs */
font: message-box;
font: icon;

 

축약형을 선언할 때는 아래 사항들을 유의해야 한다. 

• font-size와 font-family는 반드시 선언해야 하는 필수 속성입니다.

• 빠진 속성이 있다면 기본 값으로 지정됩니다.

• 각 속성의 선언 순서를 지켜야 합니다.