Text 속성

text-align 속성

text-align 속성은 텍스트의 수평 방향 정렬을 설정합니다.
text-align 속성으로 설정된 정렬 방향은 direction 속성과는 상관없이 우선적으로 적용됩니다.

							p {
								text-align: left | right | center | justify | inherit;
							}

left : 박스의 왼쪽 정렬입니다.
right : 박스의 오른쪽 정렬입니다.
center : 박스의 중앙 정렬입니다.
justify : 텍스트는 마지막 줄을 제외하고 양쪽 정렬합니다. (자동 줄바꿈 시 오른쪽 경계선 부분 정리)

vertical-align 속성

HTML 요소 내의 인라인(inline) 요소와 인라인 블록(inline-block) 요소의 수직 방향 정렬을 설정합니다.
요소 자체만을 정렬하고 내용에는 영향을 미치지 않지만, 테이블 셀에 적용할 때는 내용에 영향을 미칩니다.
vertical-align은 정렬하려는 요소를 다른 인라인 요소에 상대적으로 정렬하며, 같은 줄에서 인라인 요소의 크기나 line-height 설정에 따라 높낮이가 달라질 수 있습니다.
대부분 부모 요소에 상대적으로 정렬합니다.

							<style>
								p {
									vertical-align: baseline | length | % | sub | super | top | text-top | middle | bottom | text-bottom | initial | inherit;
								}
							</style>

부모 기준 값 : 이 값은 요소를 부모 요소를 기준으로 세로로 정렬합니다.

baseline : 기본값으로 부모 요소의 기준 선(baseline)에 맞춥니다.
middle : 부모 요소 중앙에 위치합니다. 인라인 요소를 줄에서 가장 큰 요소의 중간에 정렬하지 않고 가장 작은 소문자 x 높이의 중앙에 정렬합니다.
sub : 부모의 아래첨자 기준선에 맞춥니다.
super : 부모의 위첨자 기준선에 맞춥니다.
text-top : 요소의 맨 위를 부모 font의 맨 위에 맞춥니다.
text-bottom : 요소의 맨 아래를 부모 font의 맨 아래에 맞춥니다.
길이값(px, cm 등) : 0px는 baseline과 같은 값입니다.
%(백분율) : line-height(줄간격)의 백분율이며, 0%는 baseline과 같은 값입니다.

라인 기준 값 : 전체 라인을 기준으로 요소를 세로로 정렬합니다. 기준선이없는 요소의 경우 아래쪽 여백 가장자리가 대신 사용됩니다.

top : 요소의 상단과 하위 항목을 전체 줄의 상단(가장 큰 요소의 맨 위)과 정렬합니다.
bottom : 요소의 아래쪽과 그 하위 항목을 전체 줄의 아래쪽(가장 낮은 요소)에 맞춥니다.

테이블 셀의 값

baseline(그리고 sub, super, text-top, text-bottom, length, %) : 셀의 기준선을 기준선이 정렬된 행에 있는 다른 모든 셀의 기준선과 정렬합니다.
top : 셀의 위쪽 패딩 가장자리를 행의 위쪽에 맞춥니다.
middle : 행 내에서 셀의 패딩 상자를 가운데에 맞춥니다.
bottom : 셀의 아래쪽 패딩 모서리를 행의 아래쪽에 맞춥니다.

letter-spacing 속성

letter-spacing 속성은 텍스트 내에서 글자 사이의 간격(자간)을 설정합니다.

							p {
								letter-spacing: normal | length | inherit;
							}

normal : 현재 글꼴의 일반적인 문자 간격입니다.
length : 문자 사이의 기본 공백 외에 추가 문자 간 공백을 지정합니다. 값은 음수일 수 있지만 구현별 제한이 있을 수 있습니다. 사용자 에이전트는 텍스트를 정당화하기 위해 문자 간 공간을 더 늘리거나 줄일 수 없습니다.

word-spacing 속성

word-spacing 속성은 텍스트 내에서 단어 사이의 간격을 설정합니다.
letter-spacing 속성과는 달리 문자 간의 간격이 아닌 단어 간의 간격을 기준으로 설정합니다.
참고로 일부 스크린리더기에서는 양수 또는 음수 word-spacing 값이 크면 스타일링이 적용된 문장을 읽을 수 없게 됩니다.

							p {
								word-spacing: normal | length | inherit;
							}

normal : 현재 글꼴 또는 브라우저에 의해 정의된 일반적인 단어 간격입니다.
length : 글꼴로 정의된 고유한 단어 간 간격 외에 추가 간격을 지정합니다.

word-break 속성

단어의 분리(줄바꿈)를 어떻게 할 것인지 결정하는 속성입니다.
줄바꿈을 할 때 단어 기준으로 할지 글자 기준으로 할지 정하는 속성이며, 반응형 웹디자인의 경우 가로 크기가 작을 때를 대비해서 word-break의 속성값을 break-all로 정하는 것이 좋습니다.
참고로 중국어/일본어/한글의 경우 W3C 문서에서 CJK(Chinese, Japanese, Korean의 약자)로 사용하고 있습니다.

줄바꿈은 허용된 중단점에서 수행(soft wrap opportunity)되는 것이며, 모든 속성이 기본값이라는 전제하에 줄바꿈은 대부분의 non-CJK(CJK 이외의 문자)의 경우 '공백(띄어쓰기)'에서, CJK의 경우 '음절'에서 수행됩니다.
값은 normal(기본값), break-all, keep-all이 있습니다.
(keep-all의 경우 IE에서는 계속 지원하였으나 webkit에서는 15년 6월부터 지원하였습니다.)

							<style>
								p {
									word-break: normal | keep-all | break-all | break-word;
								}
							</style>

normal : 기본값으로 CJK 문자는 글자(음절) 기준으로, CJK 이외의 문자는 단어 또는 공백(띄어쓰기, 하이픈 -) 기준으로 줄바꿈합니다.
keep-all : 공백(띄어쓰기, 하이픈 -, 그 외 기호) 기준으로 줄바꿈합니다. (CJK에만 적용됨)
break-all : 글자(음절) 기준으로 줄바꿈합니다.
break-word : 단어 기준으로 줄바꿈합니다. (IE에서는 지원 안 함)

요약 설명
W3C에서 모든 어휘 자원(w3의 모든 [UAX14] 유니코드 내용)을 제공하는 것이 아니기 때문에 CSS는 줄바꿈이 허용되는 곳을 완전히 정의하지 않으며 예외 사항이 존재할 수 있습니다. 태국어, 라오어 및 크메르어와 같은 언어는 단어를 구분하는데 공백이나 구두점을 사용하지 않습니다. (음절 사이사이를 기반으로 한다는 정의도 없습니다.) 결과적으로 그러한 텍스트의 중단점 수행 기회를 식별하기 위해서는 어휘 자원이 필요합니다.

word-wrap 속성

박스의 가로 영역을 넘친 단어 내에서 임의의 분리 여부를 결정합니다.
넘친 단어를 줄바꿈하고 싶다면 word-wrap 속성의 값을 바꾸면 됩니다.
이때 넘친 단어의 임의의 분리는 음절에서 발생하며 white-space 속성이 기본값(normal)일 때만 적용됩니다.
word-wrap 속성의 값은 normal(기본값), break-word가 있습니다.
줄바꿈을 할 때 word-break 속성과 word-wrap 속성을 같이 사용하면 좀 더 원하는 결과를 얻을 수 있습니다.

예) 줄바꿈을 글자 단위로 하면 word-wrap: break-word; word-break: break-all;
예) 줄바꿈을 단어 단위로 하면 word-wrap: break-word; word-break: keep-all;

							p {
								word-wrap: normal | break-word | inherit;
							}

normal : 기본값으로 글자가 길어도 끊어지지 않고 한 줄에 계속 표시합니다.
break-word : 강제로 끊어서 줄바꿈합니다.

white-space 속성

white-space 속성은 HTML 요소 내의 여백을 설정합니다.

							p {
								white-space: normal | pre | nowrap | pre-wrap | pre-line | inherit;
							}

normal : 기본값으로 공백을 여러 개 넣어도 공백 1개만 표시하고, 글이 길어지면 텍스트가 자동 줄바꿈됩니다(wrap).
nowrap : 공백을 여러 개 넣어도 1개만 표시하고, 텍스트가 길어도 줄바꿈되지 않고 같은 줄에 계속 표시합니다.
pre : 공백을 코드에 있는 그대로 표시합니다. <pre> 요소처럼 행동하며, 코드에 줄바꿈이 없다면 줄바꿈이 되지 않습니다.
pre-wrap : 공백을 코드에 있는 그대로 표시합니다. 코드에 줄바꿈이 없어도 자동 줄바꿈이 되며, IE8+부터 지원합니다.
pre-line : 공백을 여러 개 넣어도 1개만 표시합니다. 코드에 줄바꿈이 없어도 자동 줄바꿈이 되며, 코드에 줄바꿈이 있을 때도 그대로 표시합니다. IE8+부터 지원합니다.

text-indent 속성

text-indent 속성은 단락의 첫 줄에 들여쓰기할지 안 할지를 설정합니다.
웹 페이지에서 단락은 기본적으로 들여쓰기가 설정되어 있지 않습니다.

							p {
								text-indent: normal | length | percentage | inherit;
							}

normal : 기본값으로 기본 공란을 재설정합니다. 현재 글꼴 및 브라우저에 의해 정의된 일반적인 단어 간격입니다.
length : px, em, cm 등으로 지정합니다. (음수값 허용)
percentage : 간격을 백분율(%)로 지정합니다.

text-decoration 속성

text-decoration 속성은 텍스트에 여러 가지 효과를 설정하거나 제거하는데 사용합니다.
text-decoration 속성값을 none으로 설정하여 링크(link)가 설정된 텍스트의 밑줄을 제거하는데 자주 사용합니다.
text-decoration 속성값은 CSS Text Decoration Module Level 3 해당 사양에서 'text-decoration-line'으로 새롭게 정의되었습니다.

							p {
								text-decoration: none | [ underline | overline | line-through ] | inherit;
							}

none : 기본값으로 밑줄이 없는 보통 글자입니다.
underline : 글자 아래에 밑줄입니다.
overline : 글자 위에 줄이 그어집니다.
line-through : 글자 중간에 줄이 그어집니다.

text-transform 속성

text-transform 속성은 텍스트에 포함된 영문자에 대한 대소문자를 설정합니다.
이 속성은 텍스트에 포함된 모든 영문자를 대문자나 소문자로 변경시켜 주며, 단어의 첫 문자만을 대문자로 변경시킬 수도 있습니다.
text-transform 속성은 한글에는 영향을 주지 않으며, 오직 영문자에만 적용됩니다.

							p {
								text-transform: none | capitalize | uppercase | lowercase | inherit;
							}

none : 기본값으로 텍스트를 HTML 코드에 있는 그대로 읽습니다.
capitalize : 각 단어의 첫 번째 문자를 대문자로 만듭니다. (예: Cascading Style Sheets.)
uppercase : 모든 문자를 대문자로 바꿉니다. (예: CASCADING STYLE SHEETS.)
lowercase : 모든 문자를 소문자로 바꿉니다. (예: cascading style sheets.)

text-overflow 속성

부모 영역을 벗어난 wrapping(자동줄바꿈)이 되지 않은 텍스트의 처리 방법을 정의합니다.
이 프로퍼티를 사용하기 위해서는 아래의 조건이 필요합니다.
width 프로퍼티가 지정되어 있어야 하며, 이를 위해 필요할 경우 block 레벨 요소로 변경하여야 합니다.
자동 줄바꿈을 방지하려면 white-space 프로퍼티를 nowrap으로 설정합니다.
overflow 프로퍼티에 반드시 visible 이외의 값이 지정되어 있어야 합니다.

							p {
								text-overflow: clip | ellipsis | initial | inherit;
							}

clip : 영역을 벗어난 텍스트를 표시하지 않습니다. (기본값)
ellipsis : 영역을 벗어난 텍스트를 잘라내어 보이지 않게 하고 말줄임표(…)를 표시합니다.

direction 속성

direction 속성은 텍스트가 써지는 방향을 설정합니다.
웹 페이지에서 텍스트는 기본적으로 왼쪽에서 오른쪽 방향으로 써집니다.
direction 속성이 left-to-right(ltr)일 때는 기본 설정처럼 텍스트가 왼쪽에서 오른쪽 방향으로 써집니다.
하지만 direction 속성이 right-to-left(rtl)일 때는 텍스트가 반대 방향인 오른쪽에서 왼쪽 방향으로 써집니다.
아랍어는 한글이나 영어와는 달리 오른쪽에서 왼쪽 방향으로 텍스트를 읽고 쓰는 언어입니다.
따라서 아랍어와 같이 텍스트를 반대 방향으로 쓰는 언어를 나타낼 때는 텍스트가 써지는 방향을 direction 속성을 사용하여 변경해야 합니다.

							p {
								direction: ltr | rtl;
							}

ltr : 기본값으로 왼쪽에서 오른쪽으로 이동합니다.
rtl : 오른쪽에서 왼쪽으로 이동합니다.

text-shadow 속성

text-shadow 속성은 텍스트에 그림자 효과를 설정합니다.
text-shadow 속성은 쉼표(,)로 구분하여 여러 개의 텍스트 그림자를 적용할 수 있습니다.

							p {
								text-shadow: offset-x offset-y blur-radius color | none | initial | inherit;
							}

none : 그림자 효과를 없앱니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.
offset-x : 그림자의 수평 거리를 정합니다. (필수)
offset-y : 그림자의 수직 거리를 정합니다. (필수)
blur-radius : 흐림 정도를 정합니다. (선택: 값을 정하지 않으면 0)
color : 색을 정합니다. (선택: 값을 정하지 않으면 브라우저 기본값)