본문 바로가기
프로그래밍/HTML, CSS, JavaScript

[CSS] 폰트 관련 속성 알아보기

by [바가지] 2018. 1. 29.
반응형

CSS 폰트와 관련된 속성을 이용하여

스타일을 지정하자 

 

 

CSS의 다양한 속성들 중에서 가장 많이 사용되는 속성 중 하나인 폰트 속성에 대하여 알아 보겠습니다.

 

font-family

 - 설명 : 글자체 이름

 - 속성값 :  글자체(굴림, 바탕, arial 등)

 - 사용 예 : <span style="font-family:굴림, 바탕"> 글자체를 굴림으로 설정</span>

 - 결과 :   글자체를 굴림으로 설정

 

font-style

 - 설명 : 글자 모양 지정

 - 속성값 : norma, italic, oblique

 - 사용 예 :  <span style="font-style : italic"> 글자모양 설정</span>

 - 결과 :   글자모양 설정

 

font-size

 - 설명 : 글자 크기 

 - 속성값 : pt(포인트), px(픽셀), in(인치), %(퍼센트), small, medium, large, x-large 등

 - 사용 예 : <span style="font-size : 20px"> 글자크기 설정</span>

 - 결과 : 글자크기 설정

 

font-weight

 - 설명 : 글자 굵기

 - 속성값 : normal, bold, light, blder, lighter

 - 사용 예 : <span style="font-weight : bold"> 글자굵기 설정</span> 

 - 결과 : 글자굵기 설정

 

font-variant

 - 설명 : 작은 대문자

 - 속성값 : normal, small-caps

 - 사용 예 : <span style="font-variant : small-caps"> 작은 대문자 설정 abcDEF</span>

 - 결과 : 작은 대문자 설정 abcDEF

 

블로그를 꾸미기 위한 가장 기본적인 태그가 폰트 관련 태그 인 것 같습니다.

여기까지 CSS 폰트 관련 태그들에 대하여 알아 보았습니다.

 

반응형