[CSS] 속성 - 글꼴, 문자

 

font : 글자 관련 속성들을 지정. 단축 속성

 

값	의미	기본값
font-sytle	글자 기울기 지정	normal
font-weight	글자 두께 지정	normal
font-size	글자 크기 지정	medium(16px)
line-height	줄 높이(줄 간격) 지정	normal(Reset.css 적용시 약 1)
font-family	글꼴 지정	운영체제(브라우저)에 따라 달라짐

 

 

사용법  * 단축 속성을 사용하려면 font-size와 font-family를 필수로 입력해야 함

font: 기울기 두께 크기 / 줄높이 글꼴; /* 크기와 줄높이는 슬래쉬로 구분! */

.box{
    font: italic bold 20px / 1.5 "Arial", sans-serif;
}

 

 

font-sytle  의 개별속성

값	의미	기본값
normal	스타일 없음	normal
italic	이텔릭체(활자)
oblique	기울어진 글자

oblique보단 italic 사용

 

 

font-size  의 개별속성

값	의미	기본값
단위	px,em,cm	16px
%	부모요소의 비율로 지정
xx-small	가장 작은 크기
x-small	더 작은 크기
small	작은 크기
medium	중간 크기	medium
large	큰 크기
x-large	더 큰 크기
xx-large	가장 큰 크기
smaller	부모요소보다 작은 크기
larger	부모요소보다 큰 크기

%는 대체로 em으로 대체해서 쓰는 것을 추천. 웬만하면 불명확한 단위보다는 px 사용하기를 권고

 

 

line-height 의 개별속성

값	의미	기본값
normal	브라우저의 기본 정의 사용	normal
숫자	요소 자체 글꼴 크기의 배수로 지정
단위	px,em,cm
%	요소 자체 글꼴 크기의 비율로 지정

숫자(1.4~1.7배를 권고)와 단위 가장 많이 사용.

 

 

line-height = 폰트사이즈 + 2x

 

 

 

 

font-family의 개별속성

값	의미	기본값
글꼴이름	글꼴 후보 목록 지정
serif (바탕체) sans-serif(고딕체) monospace cursive(필기체) fantasy(장식)	후보목록 실패할경우 글꼴 계열 이름 지정

 

사용법  * 글꼴 계열 필수 입력

font-family: [글꼴후보1, 글꼴후보2...], 글꼴계열;

.box{
    font-family: Arial, "Open Sans", "돋움", dotum, snas-serif;
}

웹에서 사용하기엔 폰트 용량이 크므로, 폰트 후보들을 지정해주면 그 중 사용자 브라우저에 있는 글꼴로 지정이 되어서 보여짐

 

웹폰트(웹에 맞게 경량화된 폰트)를 제공하면 사용자게에 무조건 그 폰트를 보여줄 수도 있다.

 

 

 

color : 문자의 색상을 지정

 

속성 값	의미	기본값
색상	문자의 색상을 지정	rgb(0,0,0)

 

 

색상 표현

 

표현	의미	예시
색상이름	브라우저에서 제공하는 색상이름	red, blue
Hex 색상코드	16진수 색상	#000000
RGB	빛의 삼원색	rgb(255,255,255)
RGBA	빛의 삼원색, 투명도	rgba(255,0,0, .5)
HSL	색상,채도,명도	hsl(120,100%, 50%)
HSLA	색상,채도,명도,투명도	hsla(120,100%, 50%, .3)

*RGBA(Red, Green, Blue, Alpha channel) *HSLA(Hue, Saturation, Lightness, Alpha Channel)

실무에서는 Hex 색상코드,RGB,RGBA를 굉장히 많이 사용

 

 

 

text-align : 문자 정렬 방식 지정

 

속성 값	의미	기본값
left	왼쪽 정렬
right	오른쪽 정렬
center	가운데 정렬
justify	양쪽 맞춤(2줄 이상에서 동작)

left가 기본값, direction 속성으로 기본값 변경가능

 

 

 

text-decoration : 문자의 장식(선) 설정

 

속성 값	의미	기본값
none	선 없음	none
underline	밑줄을 지정
overline	윗줄을 지정
line-through	중앙 선(가로지르는)을 지정

 

 

text-indent : (첫번째 줄)의 들여쓰기를 지정

음수 값 사용하면 첫번째 줄이 내어쓰기 됨

 

속성 값	의미	기본값
none	선 없음	none
underline	밑줄을 지정
overline	윗줄을 지정
line-through	중앙 선(가로지르는)을 지정

 

 

문자를 화면 밖으로 밀어내는 역할도 함

 

 

 

letter-spacing : 문자의 자간(글자 사이 간격) 지정

음수 값 사용 가능

 

속성 값	의미	기본값
normal	단어 사이의 일반 간격	normal (거의 0)
단위	px,em,cm

 

word-spacing : 단어 사이(띠워쓰기)의 간격 지정

기본적인 띄워쓰기 + 값 설정. 띄워쓰기 없애기 불가능

 

속성 값	의미	기본값
normal	단어 사이의 일반 간격	normal
단위	px,em,cm