[html/css] font 속성에 대하여 (2)

 

지난 게시물에 이어서 font에 대해서 마무리 하도록 하겠습니다

font-style
font-variant
font-weight

이 세가지 속성에 대해 설명을 했었습니다.

 

 

 

---

 

 

★font-size

-폰트 크기를 지정한다

 

 

**

폰트 크기를 나타내는 단위에는 두가지 종류가 있다

- 절대크기
      font-size가 지정되지 않으면 기본 크기 16px
      **단위: px: 픽셀단위. 기본 16px
                pt: 일반적인 문서프로그램에 사용되는 크기 16px=12pt
                그 밖에 인치(in), 밀리미터(mm), pc(1pc=12pt)등등

- 상대크기
       말 그대로 상대적인 크기
       기준이 되는 font-size 속성이 앞에서 지정되어있거나 감싸는 태그에 지정되어있어야함(상속된 속성)
         (기준이 없다면 디폴트값인 16px 기준)

 

 

---

★font-family 

글꼴 종류에 대해서 다루는 속성이다.

font-family는 지난 시간에 따로 정리한 게시물이 있으니 참고하면 될 것 같다.

 

2021.06.02 - [개발자] - [HTML/CSS] font-family 속성에 대하여

[HTML/CSS] font-family 속성에 대하여

 

 

---

 

★letter-spacing

-글자간의 간격 (자간)

 

 

단위는 픽셀(px), mm, in등 폰트사이즈 단위 모두 쓸수 있지만
글자간격 세밀히 조정해야해 픽셀 사용 권장
음수는 자간이 좁아지고 양수는 자간이 넓어진다
normal= 0px - 폰트의 기본글자간격

 

 

 

---

 

 

★word-spacing

-단어간의 간격, 띄어쓰기 기준으로 간격 조정함
단위 픽셀(px)사용 권장

 

 

---

 

★정리

font: (style) (variant) (weight) (size) (family);

이렇게 한번에 사용이 가능하다.

 

예) 

div {

    font: italic small-caps bold 16px Verdana;

}