[수업-CSS] 02.텍스트 스타일

1. 글꼴 속성

종류		설명	예시
font-family		폰트의 글꼴 설정 * 시스템 내 저장된 글꼴 이름 입력	선택자{font-family: 글꼴;}
font-size		글자의 크기 조절	선택자{font-size: 10px;}
font-weight	normal	기본	선택자{font-wight: bold;}
	bold	굵게
	bolder	기본보다 더 굵게
	lighter	기본보다 더 가늘게
	100~900	400이 normal / 700이 bold
font-variant		영어 모두 작은 대문자로	선택자{font-variant: normal} / 선택자{font-variant:small-caps;}
font-size	italic	처음부터 기울어진 글자	선택자{font-style: ltalic;}
	oblique	기본 글자를 기울여서 표시	선택자{font-style: oblique;}
font		글꼴 속성을 모아서 표현 할 수 있는 스타일 속성	선택자{font: italic bold 20px;}

 

2. 텍스트 속성

종류		설명	예시
color		글자 색 정하기 * 색 지정 방법 : rgb(000, 000, 000) / red / #ff0000	선택자{color : 색상;}
text-decoration	none	밑줄 삭제	선택자{text-decoration : none;}
	underline	밑줄 표시
	overline	윗줄 표시
	line-through	취소선 표시
text-transform	none	변환 없이 표시	#tt1{text-transform : none;}
	capitalize	시작하는 첫 번째 글자를 대문자로 변환	#tt2{text-transform : capitalize;}
	uppercase	모든 글자 대문자로 변환	#tt3{text-transform : uppercase;}
	lowercase	모든 글자 소문자로 변환	#tt4{text-transform : lowercase;}
text-shadow		텍스트에 그림자 효과를 주는 속성	선택자{text-shadow: none or 가로 세로 번짐 색상;}
white-space	normal	여러 개의 공백 하나로 표시	선택자{white-space: normal or nowrap or pre or pre-line or pre-wrap}
	nowrap	여러 개의 공백 하나로 표시 , 줄바꿈X
	pre	여러 개의 공백을 그대로 표시
	pre-line	여러 개의 공백을 하나로 표시, 자동 줄바꿈
	pre-wrap	여러 개의 공백을 그대로 표시, 자동 줄바꿈
letter-spacing		낱개 글자의 간격을 조정	선택자{letter-spacing: 숫자(단위);}
word-spacing		단어와 단어 사이의 간격을 조정	선택자{word-spacing: 숫자(단위);}

 

3. 문단 스타일

종류		설명	예시
direction	ltr	왼쪽에서 오른쪽으로 텍스트 표시	선택자{direction: ltr or rtl;}
	rtl	오른쪽에서 왼쪽으로 텍스트 표시
text-aligh	left	왼쪽 정렬	선택자{text-align: left or right or center or justify;}
	right	오른쪽 정렬
	center	가운데 정렬
	justify	양쪽 정렬
text-indent		문장 들여쓰기	선택자{text-indent: 숫자(단위);}
line-height		문장끼리의 줄 간격 조정	선택자{line-height: normal or 숫자(단위);}
text-overflow	clip	영역을 넘어가는 텍스트 자름	선택자{text-overflow: clip or ellipsis;}
	ellipsis	말 줄임으로 잘린 텍스트 표현

 

4. 목록 스타일

종류		설명	예시
list-style-type	ul	인덱스가 없는 목록	선택자{list-style-type: disc;}
	ol	인덱스가 있는 목록	선택자{list-style-type: disc;}
list-style-image		기호 대신 이미지 삽입	선택자{list-style-image: url(이미지 경로);}
list-style-position	inside	블릿이나 숫자를 안쪽으로 들여쓰기	선택자{list-style-position: inside or outside;}
	outside	default, 블릿이나 숫자를 밖으로 내어쓰기
list-style		목록스타일 한 번에 지정	선택자{list-style: type값 position값 image값;}

 

번외 ) 목록 기호 스타일 지정하기

ul	disc	흑색 원형 기호
	circle	흰색 원형 기호
	square	흑색 사각형
	none	기호 표시 안함
ol	decimal	1로 시작하는 십진수
	decimal-leading-zero	0으로 시작하는 십진수
	lower-roman / upper-roman	로마자(소문자 / 대문자)
	lower-alpha / lower-latin	소문자 알파벳
	upper-alpha / upper-latin	대문자 알파벳