[ CSS 입문 ] font속성

| 개요

font 속성은 글자의 폰트를 정의하는 속성인데, 여러 기능을 동시에 가지고 있는 속성이기도 합니다.

정확히 말하면 6개의 세부적인 글꼴 관련 속성을 font라는 하나의 속성에 한번에 사용이 가능합니다.

 

• font-style : 이탤릭체 등의 글꼴 스타일을 지정
• font-weight : 글자 두께 (숫자 또는 bold, normal 등)
• font-variant : 글꼴 변형 (소문자를 대문자로 바꾸는 등)
• font-size : 글자 크기
• line-height : 줄간격
• font-family : 글꼴 (굴림, 돋움 등)
• letter-spacing : 글자 간격
• text-decoration : 글자 데코 (밑줄, 윗줄, 중간줄 등)

 

 

| 사용법

font-style

글꼴의 스타일로 주로 이탤릭체(기울여 표시)를 설정하기 위해 사용한다.

 

• normal : 기본
• italic : 이탤릭체

 

font-weight

글꼴의 두께로 미리 정의된 단어(bold, normal 등)나 100~900 사이의 숫자를 통해 설정합니다.

 

• 100 : lighter
• 200
• 300
• 400 : normal
• 500
• 600
• 700 : bold
• 800
• 900 : bolder

 

font-size

글자의 크기로 <font>태그의 size 속성과 효과가 같습니다.

앞 전 width, height 속성에 대한 내용을 다루었을때 사용된 사이즈 단위를 사용할 수 있고 small, big 등의 상수 크기를 사용할 수 있습니다. (기본적으로 px을 많이 사용)

 

line-height

글자간의 줄 간격이로 단위는 기본 normal로 1.0 ~ 1.2 입니다. 숫자와 각종 사이즈 단위를 사용할 수 있으며 음수의 값은 지정 되지 않습니다.

 

font-family

글꼴 종류로 <font>태그의 face 속성과 효과가 같습니다.

시스템 글꼴을 사용하게 되면 쉼표(,)를 구분자로 여러 글꼴을 등록 할 수 있는데, 이때 맨 앞에 있는 글꼴을 우선으로 적용시키며, 맨 앞의 글꼴이 사용자의 컴퓨터에 없다면 그 다음 글꼴을 사용하게 됩니다. 그리고 글꼴 이름에 공란이 들어가는 경우에는 인용부호 ("" 이나 '')를 사용합니다.

시스템 글꼴이 아닌 요즘은 "웹폰트" 또는 글꼴을 서버상에 업로드해두고 서버에 있는 경로를 지정하여 글꼴을 사용 할 수 있습니다.

웹폰트를 사용법은 추후 작성하겠습니다.

 

• Serif : 세리프 서체는 글꼴 끝부분에 꺽쇠가 붙어져 있는 서체로 한글 서체의 바탕체, 궁서체, 명조체가 있다.
• Sans-Serif : 산세리프 서체는 꺽쇠각 붙어 있지 않는 서체로 한글 서체의 돋움, 굴림, 맑은고딕, 나눔고딕 등이 있다.

 

 

text-decoration

text-decoration의 몇가지를 이용하면 텍스트를 또 다르게 꾸밀 수 있습니다.

 

• underline : 밑줄
• overline : 윗줄
• line-through : 중앙줄
• blink : 글자 깜박이는 효과 (익스플로러에선 효과가 나타나지 않습니다. 파이어폭스를 이용하면 효과가 나타납니다.)
• none : 데코를 없애기 (하이퍼링크가 있는 a태그의 속성을 제거할때 주로 사용)