text-align: left | right | center | justify | initial | inherit ;
기본 값은 left이지만 경우에 따라 다릅니다.
문서의 방향이 LTR(Left To Right) 왼쪽에서 오른쪽 방향인 언어일 경우 left가 기본값이고,
RTL(Right To Left) 로 오른쪽에서 왼쪽으로 읽힐 경우 right가 기본값이 됩니다.
<속성 값 >
left
텍스트를 왼쪽으로 정렬
right
텍스트를 오른쪽으로 정렬
center
텍스트를 중앙으로 정렬
justify
텍스트를 라인 양쪽 끝으로 붙여서 정렬. (마지막 라인은 정렬 하지 않음)
text-align과 display의 관계
- text-align은 inline-level에 적용
- text-align은 block-level에 적용할 수 없음
그렇다면 block 요소를 가운데 정렬 하고자 한다면 어떻게 해야 할까요?
박스모델 챕터에서 다룬 margin의 auto 값을 이용해서 하시면 됩니다.
가운데 정렬인라인 요소 : text-align (center) 블럭 요소 : margin (auto)
요소의 레벨에 따라 정렬하는 방식의 차이를 바로 알고 있으시기 바랍니다.
코드실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>text-align</title>
<style>
p {
max-width: 630px;
border: 1px solid #888;
padding: 10px;
}
</style>
</head>
<body>
<h1>text-align</h1>
<h2>left</h2>
<p style="text-align: left;">이 안내서를 시작하기 전에, 사용법에 익숙한 텍스트 파일을 편잡할 수 있는 편집 툴이 필요하며 최신 브라우저도 필요하다. 파일을 편집하고 싶지 않다면 그냥 안내서를 읽고 해당 예시 그림을 보라. 그러나 배우는데는 더딜 것이다.</p>
<h2>right</h2>
<p style="text-align: right;">이 안내서를 시작하기 전에, 사용법에 익숙한 텍스트 파일을 편잡할 수 있는 편집 툴이 필요하며 최신 브라우저도 필요하다. 파일을 편집하고 싶지 않다면 그냥 안내서를 읽고 해당 예시 그림을 보라. 그러나 배우는데는 더딜 것이다.</p>
<h2>center</h2>
<p style="text-align: center;">이 안내서를 시작하기 전에, 사용법에 익숙한 텍스트 파일을 편잡할 수 있는 편집 툴이 필요하며 최신 브라우저도 필요하다. 파일을 편집하고 싶지 않다면 그냥 안내서를 읽고 해당 예시 그림을 보라. 그러나 배우는데는 더딜 것이다.</p>
<h2>justify</h2>
<p style="text-align: justify;">이 안내서를 시작하기 전에, 사용법에 익숙한 텍스트 파일을 편잡할 수 있는 편집 툴이 필요하며 최신 브라우저도 필요하다. 파일을 편집하고 싶지 않다면 그냥 안내서를 읽고 해당 예시 그림을 보라. 그러나 배우는데는 더딜 것이다.</p>
</body>
</html>
The text-align CSS property specifies the horizontal alignment of an inline or table-cell box.This means it works like vertical-align but in the horizontal direction.
text-indent 속성
텍스트의 들여쓰기를 지정하는 속성입니다.
기본 값 : 0
text-indent: length | initial | inherit;
<속성 값 >
length
px, em 등 고정 수치로 지정. 음수 허용
%
부모 요소의 width를 기준으로 퍼센트로 지정
length문단의 첫 줄에 대한 들여쓰기를 수행합니다. 음수 값을 사용할 수 있으며, 음수 값 사용 시 왼쪽으로 이동합니다.
percent ( % )텍스트를 포함하는 컨테이너 블록의 width(부모의 width)를 기준으로 변환된 백분율 값으로 들여쓰기합니다.
The text-indent CSS property specifies the amount of indentation (empty space) that is put before lines of text in a block. By default, this controls the indentation of only the first formatted line of the block, but the hanging and each-line keywords can be used to change this behavior.
text-decoration 속성
텍스트의 장식을 지정하는 속성입니다. 아래 속성들의 단축 속성으로, 기본 값은 차례대로 아래 3가지 속성의 값입니다.
The text-decoration CSS property specifies the appearance of decorative lines used on text. It is a shorthand for setting one or more individual text-decoration values in a single declaration, which include text-decoration-line, text-decoration-color, and text-decoration-style
white-space 속성
요소 안에 공백을 어떻게 처리할지 지정하는 속성입니다.
기본 값: normal
white-space: normal | nowrap | pre | pre-line | pre-wrap | initial | inherit;
<속성 값 >
normal
공백과 개행을 무시하고, 필요한 경우에 자동 줄바꿈 발생. 기본 값
nowrap
공백과 개행을 무시하고, 자동 줄바꿈이 일어나지 않음.
pre
공백과 개행을 표현하고, 자동 줄바꿈이 일어나지 않음.
pre-line
공백은 무시하고, 개행만 표현. 필요한 경우에 자동 줄바꿈 발생.
pre-wrap
개행은 무시하고, 공백만 표현. 필요한 경우 자동 줄바꿈 발생.
letter-spacing 속성
자간을 지정하는 속성입니다.
기본 값 : normal
letter-spacing: normal | length | initial | inherit;
<속성 값 >
normal
기본 값
length
길이만큼 자간을 지정. 음수 허용
word-spacing 속성
단어 사이의 간격을 지정하는 속성입니다.
기본 값 : normal
word-spacing: normal|length|initial|inherit;
<속성 값 >
normal
기본 값
length
길이만큼 단어 사이의 간격을 지정. 음수 허용
word-break 속성
단어가 라인 끝에 나올 경우 어떻게 처리할지(중단점) 지정하는 속성입니다.
기본 값 : normal
word-break: normal | break-all | keep-all | initial | inherit;
<속성 값 >
normal
기본 값. 중단점은 공백이나 하이픈(-)(CJK는 음절)
break-all
중단점은 음절. 모든 글자가 요소를 벗어나지 않고 개행
keep-all
중단점은 공백이나 하이픈(-)(CJK는 그 외 기호도 포함)
word-wrap 속성
요소를 벗어난 단어의 줄바꿈을 지정하는 속성입니다.
기본 값 : normal
word-wrap: normal|break-word|initial|inherit;
<속성 값 >
normal
기본 값. 중단점에서 개행
break-word
모든 글자가 요소를 벗어나지 않고 강제로 개행
생각해보기
word-break와 word-wrap은 언어의 종류에 따라 다르게 동작합니다. 언어의 종류는 CJK(중국, 일본어, 한국어)의 아시아권 언어와 그 외의 언어를 말합니다. 종류에 따라 어떤 차이를 가지고 동작하는지 확인해보시기 바랍니다.
CSS Text is a module of CSS that defines how to perform text manipulation, like line breaking, justification and alignment, white space handling, and text transformation.
