[CSS] 텍스트 관련 스타일

1. 글꼴 관련 스타일

font-family 속성 - 글꼴 지정하기

 font-famliy:<글꼴 이름>[ , <글꼴 이름>, <글꼴 이름>] 

 

font-size 속성 - 글자 크기 조절하기

 font-size: <절대 크기> | <상대 크기> | <크기> | <백분율> 

속성 값	설명
<절대 크기>	브라우저에서 지정한 글자 크기 xx-samll | x-small | small | medium | large | x-large | xx-large
<상대 크기>	부모 요소의 글자 크기(font-size)를 기준으로 더 크게 표시하거나 더 작게 표시, 사용할 수 있는 값 larger | smaller
<크기>	브라우저와 상관없이 글자 크기를 직접 지정
<백분율>	부모 요소의 글자 크기를 기준으로 해당하는 %를 계싼해 표시

단위	설명
em	해당 글꼴의 대문자 M의 너비를 기준으로 크기를 조절
ex	x-height(엑스 하이트). 해당 글꼴의 소문자 x의 높이를 기준으로 크기를 조절
px	픽셀, 모니터에 따라 상대적인 크기
pt	포인트, 일반 문서에서 많이 사용하는 단위

font-weight 속성 - 글자 굵기 조절하기

 font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 

속성 값	설명
normal	일반적인 형태로 기본 값
bold | lighter | bolder	굵게 | 원래 굵기보다 더 가늘게 | 원래 굵기보다 더 굵게 나타냄
100~900 사이의 수치	400은 normal, 700은 bold에 해당하며 숫자 값을 조절해 좀 더 세밀히 글꼴 두께를 조절

font-variant 속성 - 작은 대문자로 표시하기

 font-variant: normal | small-caps 

속성 값	설명
normal	일반적인 형태로 표시
small-caps	작은 대문자로 표시

font-style 속성 - 글자 스타일 지정하기

 font-style: normal | italic | oblique 

속성 값	설명
normal	일반적인 형태로 표시
italic	이탤릭체로 표시
oblique	이텔릭체로 표시

font 속성 - 글꼴 속성을 한꺼번에 묶어 표현하기

 font: <font-style><font-variant><font-weight><font-size/font-line><font-family> | caption | icon | menu | message-box | small-caption | status-bar 

속성 값	설명
font-*	font-로 시작하는 글꼴 관련 속성을 한꺼번에 나열
caption	캡션에 어울리는 글꼴 스타일로 표시
icon	아이콘에 어울리는 글꼴 스타일로 표시
menu	드롭다운 메뉴에 어울리는 글꼴 스타일로 표시
message-box	대화상자에 어울리는 글꼴 스타일로 표시
small-caption	작은 캡션에 어울리는 글꼴 스타일로 표시
status-bar	상태 표시줄에 어울리는 글꼴 스타일로 표시

 

2. 텍스트 스타일

color 속성 - 글자 색 지정하기

 color : <색상> 

 

text-decoration 속성 - 텍스트에 줄 표시하기/없애기

 text-decoration : none | underline | overline | line-through 

속성 값	설명
none	밑줄을 표시하지 않음
underline	밑줄을 표시
overline	영역 위로 선을 그림
line-through	영역을 가로지르는 선(취소 선)을 그림

text-transform 속성 - 텍스트 대·소문자 변환하기

 text-transform : none | cpaitalize | uppercase | lowercase | full-width 

속성 값	설명
none	변환하지 않음
capitalize	시작하는 첫 번째 글자를 대문자로 변환
uppercase	모든 글자를 대문자로 변환
lowercase	모든 글자를 소문자로 변환
full-width	가능한 모든 문자를 전각 문자로 변환

text-shadow 속성 - 텍스트 그림자 효과 추가하기

 text-shadow : none | <가로 거리> <세로 거리> <번짐 정도> <색상> 

속성 값	설명
<가로 거리>	텍스트부터 그림자까지의 가로 거리 입력 양수 값은 글자 오른쪽, 음수 값은 글자 왼쪽에 그림자 만듦
<세로 거리>	텍스트부터 그림자까지의 세로 거리를 입력 양수 값은 글자 아래쪽, 음수 값은 글자 위쪽에 그림자 만듦
<번짐 정도>	그림자가 번지는 정도 나타냄 양수 값을 사용하면 그림자가 모든 방향으로 퍼져 나가기 때문에 그림자가 크게 표시됨 음수 값은 그림자가 모든 방향으로 축소되어 보임
<색상>	그림자 색상 지정, 한 가지만 지정할 수도 있고 공백으로 구분해 여러 색상 지정 가능

white-space 속성 - 공백 처리하기

 white-space : normal | nowrap | pre | pre-line | pre-wrap 

속성 값	설명
normal	여러 개의 공백을 하나로 표시, 기본 값
nowrap	여러 개의 공백을 하나로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꾸지 않고 계속 한 줄로 표시
pre	여러 개의 공백을 그대로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꾸지 않고 계속 한 줄로 표시
pre-line	여러 개의 공백을 하나로 표시하고 영역 너비를 넘어가는 내용을 자동으로 줄을 바꿔 표시
pre-wrap	여러 개의 공백을 그대로 표시하고 영역 너비를 넘어가는 내용은 자동으로 줄을 바꿔 표시

letter-spacing과 word-spacing 속성 - 텍스트 간격 조절하기

 letter-spacing : normal | <크기> 

 word-spacing : normal | <크기> 

 

 

3. 문단 스타일

direction 속성 - 글자 쓰기 방향 지정하기

 direction : ltr | rtl 

속성 값	설명
ltr	왼쪽에서 오른쪽으로(right-to-left) 텍스트를 표시, 기본 값
rtl	오른쪽에서 왼쪽으로(left-to-right) 텍스트를 표시

text-align 속성 - 텍스트 정렬하기

 text-align : start | end | left | right | center | justify | match-parent 

속성 값	설명
start	현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬 left-to-right 언어라면 왼쪽으로, right-to-left 언어라면 오른쪽으로 맞추어 정렬
end	현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬 left-to-right 언어라면 오른쪽으로, right-to-left 언어라면 왼쪽으로 맞추어 정렬
left	왼쪽에 맞추어 문단 정렬
right	오른쪽에 맞추어 문단 정렬
center	가운데에 맞추어 문단 정렬
justify	양쪽에 맞추어 문단 정렬
match-parent	부모 요소를 따라 문단 정렬 부모 요소의 속성 값이 start나 end일 경우, 부모 요소가 ltr인지, rtl인지에 따라 left나 right 값으로 계산해 적용

text-justify 속성 - 정렬 시 공백 조절하기

 text-justify : auto | none | inter-word | distribute 

속성 값	설명
auto	웹 브라우저에서 자동으로 지정
none	정렬하지 않음
inter-word	단어 사이의 공백을 조절해 정렬
distribute	인접한 글자 사이의 공백을 똑같이 맞추어 정렬

text-indent 속성 - 텍스트 들여 쓰기

 text-indent : <크기> | <백분율> 

속성 값	설명
<크기>	단위와 함께 들여 쓸 크기를 지정 음수 값도 사용 가능
<백분율>	부모 요소의 너비를 기준으로 상대적 크기를 지정

line-height 속성 - 줄 간격 조절하기

 line-height : normal | <숫자> | <크기> | <백분율> | inherit 

 

text-overflow 속성 - 넘치는 텍스트 표기하기

 text-overflow : clip | ellipsis 

속성 값	설명
clip	넘치는 텍스트 자름
ellipsis	말 줄임표(...)로 잘린 텍스트가 있다고 표시

list-style-type 속성 - 목록의 불릿과 번호 스타일 지정하기

 list-style-type : none | <순서 없는 목록의 불릿> | <순서 목록의 번호> 

속성 값	설명	예시
demical	1로 시작하는 십진수	1, 2, 3, ..., 10, 11
demical-leading-zero	앞에 0이 붙는 십진수	01, 02, 03, ..., 10, 11
lower-roman	소문자 로마 숫자	i, ii, iii, iv
upper-roman	대문자 로마 숫자	I, II, III, IV
lower-alpha 또는 lower-latin	소문자 알파벳	a, b, c, d, e
upper-alpha 또는 upper-latin	대문자 알파벳	A, B, C, D, E

list-style-image 속성 - 불릿 대신 이미지 넣기

 list-style-image : <이미지> | none 

 <이미지> = url(이미지 파일 경로) 

속성 값	설명
none	이미지를 사용하지 않고 list-style-type 속성에서 지정한 형태로 표시
<이미지>	url("image.jpg") 처럼 url() 키워드 안에 이미지 파일 경로를 지정

list-style-position 속성 - 목록에 들여 쓰는 효과 내기

 list-style-position : inside | outside; 

속성 값	설명
inside	불릿이나 숫자를 안쪽으로 들여 씀
outside	기본 값으로 불릿이나 숫자를 밖으로 내어 씀