CSS - 속성: 글꼴, 문자

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

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

font: 기우릭 두께 크기 / 줄높이 글꼴;

단축 속성을 사용하려면 font-size와 font-family를 필수로 입력해야한다.

 

font-style

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

font-weight

값	의미	기본값
normal	기본 글자 두께, 400과 동일	normal(400)
bold	글자 두껍게, 700과 동일
bolder	부모(상위) 요소보다 더 두껍게(bold보다 두껍다는 개념이 아님)
lighter	부모(상위) 요소보다 더 얇게
숫자	100부터 900까지의 100단위의 숫자 9개, normal과 bold 이외의 두께를 제공하는 글꼴(서체)을 위한 설정

값	일반적인 두께 이름
100	Thin(Hairline)
200	Extra Light(Ultra Light)
300	Light
400	Normal
500	Medium
600	Semi Bold(Demi Bold)
700	Bold
800	Extra Bold(Ultra Bold)
900	Black(Heavy)

font-size

단위, px, em, cm 등 단위로 지정, 기본값: 16px

% 부모(상위) 요소의 비율에 맞게 

 

line-height(행간)

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

보통 1.4~1.7 정도로 설정

 

font-family

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

글꼴 계열은 필수로 입력해야 한다.

계열	의미
serif	바탕체 계열
sans-serif	고딕체 계열
monospace	고정너비(가로폭이 동등한) 글꼴 계열
cursive	필기체 계열
fantasy	장식(재미 있는 문자를 표현하는) 글꼴 계열

 

color: 문자의 색상을 지정

표현	의미	예시
색상이름	브라우저에서 제공하는 색상의 이름	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)

 

 text-align

justify: 양쪽 맞춤(2줄 이상시 사용 가능) 

 

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

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

 

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

음수 값 사용 가능

text-indent:-9999px; => 명시적으로 text 안보이게 함(특정 영억으로 밀어냄)

 

letter-spacing

문자의 자간(글자 사이 간격)을 설정

 

word-spacing

단어 사이(띄어쓰기)의 간격을 설정

 

 

출처. heropy.blog/