[Web/CSS] CSS - 글꼴 관련 스타일

✏️ 글꼴을 지정하는 font-family 속성

웹 문서의 글꼴은 font-family 속성으로 지정 / font-family : <글꼴 이름> |[ <글꼴 이름>, <글꼴 이름>]

body{
  font-family: "맑은 고딕"
}

✏️ 기본형 기호 이해하기

1. '|' 는 나열한 옵션 중 하나가 값이 되어야 함
ex) font-size : 값1 | 값2 | 값3  /  font-size 속성은 값1 or 값2 or 값3 중 하나가 되어야 함

2. 속성값을 나열할 때 키워드(약속한 값)은 그대로 나열
ex) font-variant : normal | small-caps  / font-variant 속성은 normail이나 small-cpas의 값을 사용

3. 속성값을 나열할 때 값이 아니라 유형이라면 <>로 묶기
ex) font-size : <절대 크기> | <상대 크기> | <크기> | <백분율>
    font : <font-style> | <font-variant> | <font-weight>

 

✏️ 글자 크기를 지정하는 font-size 속성

글자 크기의 단위는 px(픽셀)이나 pt(포인트)등으로 지정할 수 있고 백분율을 사용할 수도 있음
font-size : <절대 크기> | <상대 크기> | <크기> | <백분율>

● 절대 크기 : 브라우저에서 지정한 글자 크기
● 상대 크기 : 부모 요소의 글자 크기를 기준으로 상대적인 글자 크기로 지정
● 크기 : 브라우저와 상관없이 글자 크기를 직접 지정
● 백분율 : 부모 요소의 글자 크기를 기준으로 %로 표시

 

키워드를 사용하여 글자 크기 지정하기

xx-small < x-small < small < medium < large < x-large < xx-large

단위를 사용하여 글자 크기 지정하기

사용자의 단위는 픽셀이나 포인트, em 등 이며 음숫값은 사용할 수 없음
예전에는 절대 크기 단위는 px나 pt를 많이 사용했으나 현재는 모바일 기기도 고려하여 상대 크기 단위인 em이나 rem 사용

● em : 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 1em으로 한 후 비율값 지정
● rem : 문서 시작 부분에서 지정한 크기를 기준(1rem)으로 한 후 비율값을 지정
● ex : 해당 글꼴의 소문자의 높이를 기준(1ex)로 한 후 비율값 지정
● px : 모니터의 1픽셀을 기준(1px)로 한 후 비율값을 지정
● pt : 포인트라고도 하며, 일반 문서에서 많이 사용

 

백분율을 사용하여 글자 크기 지정하기

부모 요소의 글자 크기를 기준으로 글자의 크기를 결정하므로, 부모 요소의 글꼴 크기가 px같은 단위로 표현이 되어햐 함

 

✏️ 이탤릭체로 글자를 표시하는 font-style 속성

글자를 이탤릭체로 표시할 대는 font-style 속성을 사용, 속성값으로는 italic과 oblique가 있음

italic은 기울어진 글꼴이 처음부터 디자인 되지만, oblique는 글꼴을 단지 기울어지게만 함 => itlalic을 많이 사용

 font-style: normal | italic | oblique;

✏️ 글자 굵기를 지정하는 font-weight 속성

글자 굵기를 지정하고 미리 만들어진 예약어(normal, bold, bolder)나 직접 숫자값을 이용해 굵기 지정 가능

font-weight: normal | bold | border | lighter