HTML5 - [6] 텍스트 조작 및 장식

HTML5 - [6] 텍스트 조작 및 장식

(1) 쓰기 모드 관련 속성

쓰기 모드 관련 속성

속성	설명
direction	텍스트의 가로 쓰기의 방향 지정
unicode-bidi	동일 문서에서 여러 언어를 지원하기 위해 텍스트의 본래 방향성을 재정의
writing-mode	블록의 진행 방향과 텍스트의 진행 방향이 가로인지 세로인지를 지정
text-orientation	라인의 텍스트 방향 지정(세로 방향 쓰기 모드에서만 적용 가능)
text-combine-upright	단일 문자 공간에서 여러 문자들의 결합을 지정(세로 쓰기 모드에서만 적용 가능)

(2) 텍스트 조작 관련 속성

텍스트 조작 관련 속성

속성	설명
text-transform	영어 알파벳 표기 방식 지정
white-space	요소 내의 공백 문자의 처리 방법 지정
tab-size	탭 크기 지정
line-break	줄바꿈 규칙 지정
word-break	단어의 줄바꿈 규칙 지정
hyphens	단어가 줄바꿈으로 인해 분리될 때 하이픈 삽입 여부 지정
overflow-wrap word-wrap	긴 단어가 요소의 폭을 넘을 경우 어떻게 단어를 분리할 지를 지정
text-align	텍스트의 수평 정렬 방식 지정
text-align-last	“text-align: justify”일 때 텍스트의 마지막 줄의 정렬 방식 지정
text-justify	“text-align: justify”일 때 텍스트 양쪽 맞춤의 처리 방법 지정
letter-spacing	글자 간격 지정
word-spacing	단어 간격 지정
text-indent	텍스트 들여쓰기 간격 지정
hanging-punctuation	문장부호(구두점)의 위치 조정
line-height	줄 간격 지정

(3) 텍스트 장식 관련 속성

텍스트 장식 관련 속성

구분	속성	설명
라인 장식	text-decoration-line	텍스트 장식(밑줄, 윗줄, 취소선) 지정
	text-decoration-color	텍스트 장식의 색상 지정
	text-decoration-style	텍스트 장식의 스타일(단일선, 이중선 등) 지정
	text-decoration-skip	텍스트 장식을 받지 않아야 하는 부분 지정
	text-decoration	텍스트 장식의 일괄 지정
	text-underline-position	텍스트의 밑줄의 위치 지정
강조 표시	text-emphasis-style	지정된 텍스트에 강조 표시의 스타일 지정
	text-emphasis-color	텍스트에 지정한 강조 표시의 색상 지정
	text-emphasis-position	텍스트에 지정한 강조 표시의 위치 지정
	text-emphasis	텍스트의 강조 표시의 일괄 지정
그림자 효과	text-shadow	텍스트에 그림자 효과 지정