Font 속성 - by. UXKM
요약 설명CSS를 사용하면 웹 페이지에 나타나는 글꼴(Font) 선언하여 다양하게 정의하는 CSS 모듈입니다.
font-family 속성
폰트를 지정합니다. 컴퓨터에 해당 폰트가 설치되어 있지 않으면 적용되지 않습니다.
font-family 속성은 하나의 글꼴만을 설정할 수도 있고, 여러 개의 글꼴을 같이 설정할 수도 있습니다.
font-family 속성값이 여러 개의 글꼴로 설정되어 있으면, 웹 브라우저는 앞에서부터 순서대로 글꼴을 읽어 들입니다.
만약 사용자의 컴퓨터에 첫 번째로 읽어 들인 글꼴이 없으면 다음 글꼴을 확인하게 됩니다.
이런 방식으로 계속해서 읽어 들인 글꼴이 존재하는지를 확인하여, 읽어 들인 글꼴이 사용자의 컴퓨터에 존재하면 해당 글꼴로 표시하게 됩니다.
글꼴의 이름이 한 단어 이상으로 이루어지면 반드시 따옴표를 사용하여 둘러 쌓아야 합니다.
또한, 여러 개의 글꼴을 나열할 때에는 쉼표(,)로 구분 짓습니다.
Serif, Sans Serif, Display, Handwriting, Monospace 등)font family : 특정 글꼴 집합 (
"Roboto", "Noto Sans KR", "Nanum Gothic" 등)
font-style 속성
font-style 속성은 주로 이탤릭체를 사용하기 위해 사용하며, 다음과 같이 4가지의 속성값을 가집니다.
- normal : 기본값으로 텍스트에 어떠한 스타일도 적용하지 않습니다.
- italic : 텍스트를 이탤릭체로 나타냅니다.
- oblique : 비스듬한(oblique) 모양으로 지정한다. 이 속성값은 italic과 매우 유사하지만 지원하는 웹 브라우저가 거의 없습니다.
- inherit : 부모 요소로부터 값을 상속 받습니다.
font-size 속성
font-size 속성은 텍스트의 크기를 설정합니다.
웹 디자인에서 텍스트의 크기는 매우 중요한 표현 요소입니다.
하지만 제목을 표현하기 위해서 텍스트의 크기만을 크게 해서는 안 됩니다.
이때에는 제목을 위한 HTML 요소인 <h1>부터 <h6> 요소를 사용해야 합니다.
font-size 속성값은 절대 크기 와 상대 크기로 사용할 수 있습니다.
절대 크기는 텍스트의 크기를 명시된 크기 그대로 설정하고자 할 때 사용합니다.
절대 크기로 설정된 텍스트는 모든 웹 브라우저에서 같은 크기로 표현됩니다.
상대 크기는 텍스트를 둘러싸고 있는 HTML 요소들의 크기에 따라 텍스트의 크기도 같이 변하는 방식입니다.
또한, 사용자가 웹 브라우저를 통해 텍스트의 크기를 직접 변경할 수도 있습니다.
font-size 속성값에 자주 사용되는 대표적인 크기 단위는 백분율 단위(%), 배수 단위(em), 픽셀 단위(px)를 설정합니다.
- length(길이) : 부동 소수점 숫자 뒤에 절대 단위 지정자( cm , mm , in , pt , pc ) 또는 상대 단위 지정자( em , ex , px )가 오는 값을 지정한다.
- %(퍼센트) : 퍼센트 부호(%)가 뒤에 오는 정수를 지정한다.
- intial : 기본값을 지정한다.
- inherit : 부모 요소로부터 값을 상속 받는다.
font-weight 속성
글꼴의 두께를 지정합니다.
font-weight 속성은 텍스트를 얼마나 두껍게 표현할지를 설정합니다.
사용할 수 있는 속성값에는 lighter, normal, bold, bolder 등이 있습니다.
또한, 100, 200, 300, ... , 900 등과 같이 숫자로 텍스트의 두께를 설정할 수도 있습니다.
- normal : 기본값으로 보통 두께를 지정한다.
- bold : 굵은 글꼴을 지정한다.
- bolder : 두께가 기본 bold 이상인 글꼴을 지정한다.
- lighter : 보통보다 두께가 얇은 글꼴을 지정한다.
- 100, 200, 300, 400, 500, 600, 700, 800, 900 : 100이 가장 얇고 숫자가 커질수록 더 굵어 진다. 400이 보통인 normal과 같고 700이 굵은인 bold와 같다.
font-variant 속성
글꼴을 작은 대문자로 지정합니다.
font-variant 속성은 속성값이 small-caps로 설정되면, 텍스트에 포함된 영문자 중 모든 소문자를 작은 대문자(small-caps) 글꼴로 변경시킵니다.
이때 영문자 중 대문자는 기존 크기 그대로 출력합니다.
작은 대문자(small-caps) 글꼴이란 텍스트의 기존 대문자보다는 약간 작은 크기의 대문자를 의미합니다.
font-variant 속성은 한글에는 적용되지 않으며, 영문자에만 적용됩니다.
글자 크기를 줄이는 font-size:0.8em 과 함께 text-transform:uppercase를 지정하면
smallcaps과 비슷한 효과를 얻을수 있다.(smallcaps를 지원하는 기본폰트가 적기때문에)
- normal : 기본값으로 보통 글꼴을 지정한다.
- small-caps : 작은 대문자 글꼴을 지정한다.
- inherit : 부모 요소로부터 값을 상속 받는다.
font-stretch 속성
CSS3에 추가된 속성입니다.
글자의 폭을 넓게(wide) 늘이거나 좁게(narrow) 축소합니다. 즉 글자의 폭(너비)에 대해서 설정하는 속성입니다.
font-stretch 속성은 처음에 CSS2에서 정의되었지만 브라우저 구현 부족으로 인해 CSS2.1에서 삭제되고 CSS3로 다시 정의되었습니다.
- ultra-condensed : 할수있는 한 폭을 좁힌다.
- extra-condensed : condensed 보다 좁지만, ultra-condensed 보다 폭을 좁히진 않는다.
- condensed : semi-condensed 보다 좁지만, extra-condensed 보다 폭을 좁히진 않는다.
- semi-condensed : normal 보다 좁지만, condensed 보다 폭을 좁히진 않는다.
- normal : 기본값으로, 글꼴을 넓히거나 좁히지 않는다.
- semi-expanded : normal 보다 넓지만, expanded 보다 폭을 넓히진 않는다.
- expanded : semi-expanded 보다 넓지만, extra-expanded 보다 폭을 넓히진 않는다.
- extra-expanded : expanded 보다 넓지만, ultra-expanded 보다 폭을 넓히진 않는다.
- ultra-expanded : 할수있는 한 폭을 넓힌다.
- inherit : 부모 요소로부터 값을 상속 받는다.
font-size-adjust 속성
대문자가 아닌 소문자의 높이에 따라 선택되는 방법.
작은 크기에서 글꼴의 가독성이 대문자의 크기보다 소문자의 크기에 의해 결정되므로 유용합니다.
소문자 (글꼴의 x 높이에 의해 결정됨)
CSS3에 추가된 속성으로 소문자와 대문자 사이의 비율을 유지하고 font-size 속성 값을 조정하여 x-height 속성 값이 글꼴에 관계없이 고정되게 함으로써 가독성을 유지하고 값이 상속됩니다.
일반적으로 font-family에 지정한 글꼴에 따라 글꼴 크기가 다르기 때문에 문제가 될 여지가 있습니다.
이때 font-size-adjust 속성으로 글꼴 크기를 지정해 놓으면 이에 대한 예방이 됩니다.
대소문자 사이의 비율은 font x-height/font size 값입니다.
font-size-adjust은 처음에 CSS2에서 정의되었지만 CSS 2.1에서는 삭제되고 CSS3에서 새롭게 정의되었습니다.
지원 안되는 브라우저가 많아서 사용하기에는 아직 유용하지 않습니다.
현재 파이어폭스에서만 지원하고 있습니다.
- nubmer(숫자) : 사용할 비율을 지정한다.
- none : 기본값으로 글꼴 크기를 변경하지 않는다.
- inherit : 부모 요소로부터 값을 상속 받는다.
line-height 속성
line-height 속성은 텍스트의 줄 간격을 설정합니다.
line-height 속성은 font의 축약형 방식으로 사용할 때 font-size/line-height 형식으로 같이 사용됩니다.
축약형 속성
font 속성을 축약형(Shorthand font property) 방식으로 사용합니다. 모든 font 속성을 한번에 사용할 수 있습니다.
축약형 방식으로 사용할 때는 line-height 속성도 같이 사용 가능합니다.
Font 속성 예제
