CSS 폰트 스타일: font-size font-weight font-style font

CSS 폰트 스타일: font-size font-weight font-style font

  오늘은 글자 크기, 굵기, 스타일을 조절해보겠습니다.

 

 

1. font-size

속성 값	사용할 수 있는 값(단위)
절대 크기	브라우저에서 미리 정해놓은 크기: xx-small, x-small, small, medium, large, x-large, xx-large
상대 크기	부모 요소 글자 크기 기준으로 더 크거나 작거나: larger, smaller
직접 지정한 크기	CSS 작성자가 직접 지정한 크기: px, pt, em, ex, rem
백분율	부모 요소 글자 크기 기준으로 백분율: 예를 들어 100%는 부모 요소 크기와 같음

  - font-size는 글자의 크기를 지정해줍니다.

  - font-size 속성 값은 위와 같습니다.

  - 상황에 따라 절대 크기, 상대 크기, 직접 지정한 크기, 백분율을 적절히 잘 활용하면 됩니다.

  - 그러나 주로 font-size는 '직접 지정한 크기'를 자주 사용합니다.

 

  - 위 예시는 '직접 지정한 크기'를 사용한 것입니다.

  - 'px'은 픽셀을 말합니다. 1px은 디지털 이미지를 이루는 가장 작은 단위를 나타냅니다. px를 사용하면 폰트 크기가 고정됩니다. 따라서 어떤 창 크기의 기기로 웹사이트를 방문하든지 같은 크기로 글자가 보이게됩니다.

  - 'pt'는 포인트를 말합니다. 1pt는 약 0.3527mm로 크기가 딱 정해져 있는 절대값입니다. window에서는 9pt = 12px 이며, mac에서는 9pt = 9px 입니다. pt또한 어떤 창 크기의 기기로 웹사이트를 방문하든지 같은 크기로 글자가 보이게됩니다.

  - 'em'은 부모 요소 글자 M(대문자)의 너비를 기준으로 하는 상대 크기입니다. 부모 요소 글자 M의 너비가 1em이 됩니다. 따라서 부모 요소의 글자 크기가 달라지면 1em의 크기도 달라지게 됩니다. 만약 부모 요소에 글자 크기가 지정되어 있지 않다면, 기본 값인 16px을 부모 요소의 크기로 계산합니다.

  - 'ex'는 부모 요소 글자 x(소문자)의 높이를 기준으로 하는 상대 크기입니다. 부모 요소 글자 x의 높이가 1ex가 됩니다. 따라서 부모 요소의 글자 크기가 달라지면 1ex의 크기도 달라지게 됩니다. 1em의 절반 정도의 크기입니다.

  - 'rem'은 문서의 최상위 요소(html) 글자 크기를 기준으로 하는 크기입니다. html 요소 크기의 기본값은 보통 16px입니다. 따라서 주로 1rem = 16px이 됩니다.                                                                   

 

 

2. font-weight

속성 값	사용할 수 있는 값(단위)
상대 크기	lighter(가늘게), normal(원래 굵기), bold(굵게), bolder(더 굵게)
직접 지정한 크기	100에서 900 사이의 값 (400=normal, 700=bold)

  - font-weight는 글자의 굵기를 지정해줍니다.

  - font-weight 속성 값은 위와 같습니다.

  - 상황에 따라 상대 크기와 직접 지정한 크기를  적절히 잘 활용하면 됩니다.

  - 위 예시는 font-weight 속성을 지정한 것입니다.

  - 위 예시에서 볼 수 있듯이 font-weight: normal과 font-weight: 400이 같고, font-weight: bold와 font-weight: 700은 같습니다.

 

 

3. font-style

  - font-style은 글자를 이택릭체로 표현할지 결정할 수 있습니다.

  - italic과 oblique는 모두 기울어진 형태로 글꼴이 표현됩니다.

  - 그러나 italic은 처음부터 기울어진 디자인으로 만들어진 글꼴이고, oblique는 원래 보통 글꼴을 기울인 것입니다.

  - 주로 기울임 글꼴을 사용할 때는 italic을 사용합니다.

 

 

4. font

  - font를 활용하면 글꼴 속성들을 한 번에 작성할 수 있습니다.

  - 위 예시는 font-style: italic, font-weight: bold, font-size: 20px, line-height: 20px, font-family: 돋움 속성을 한 번에 지정한 것입니다.

  - font-size와 line-height는 슬래시(/)로 연결해 사용합니다.