text-align
text-align 속성은 문단의 텍스으 정렬 방식을 정합니다. 속성 값으로 워드나 한글 문서에서 흔히 사용하던 '왼쪽 정렬', '오른쪽 정렬', '양쪽 정렬', '가운데 정렬' 등을 지정할 수 있습니다.
기본형
text-align : left | right | center | justify
- left : 왼쪽 정렬입니다.
- right : 오른쪽 정렬입니다.
- center : 가운데 정렬입니다.
- justify : 양쪽 정렬입니다.
참고:
속성 값이 'justify' 일 경우 양쪽 끝에 맞추기 때문에 글자와
단어 사이 간격이 어색하게 벌어질 수 있습니다. 이때
text-justify 속성으로 간격을 어떻게 조절해 정렬할
것인지 지정합니다.
예제
- 첫 번째 문단은 왼쪽 정렬입니다.
- 두 번째 문단은 오른쪽 정렬입니다.
- 세 번째 문단은 가운데 정렬입니다.
- 네 번째 문단은 양쪽 정렬입니다.
<p class="a" style="text-align: left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum. <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum.</span></p>
<p class="b" style="text-align: right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum. <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum.</span></p>
<p class="c" style="text-align: center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum. <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum.</span></p>
<p class="d" style="text-align: justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum. <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum.</span></p>
.a {
text-align: left;
}
.b {
text-align: right;
}
.c {
text-align: center;
}
.d {
text-align: justify;
}
참고:
양쪽 정렬의 경우, 양쪽 모두를 가지런하게 맞추기 위해서 띄어쓰기 간격이 조금씩
달라집니다. 특히 영어의 경우 단어가 길면 간격이 많이 이상할 수 있는데,
word-break
속성으로 조절할 수 있습니다.
text-justify
바로 앞에서 다룬 text-align 속성이 'justify' 일 경우 양쪽 끝에 맞추어 단어
사이에 공백이 생깁니다. 이 공백의 간격을 text-justify 속성으로
어떻게 정렬할 것인지 지정합니다.
기본형
text-justify: auto | none | inter-word | inter-character
- auto : 웹 브라우저에서 자동으로 지정합니다.
- none : 정렬하지 않습니다.
- inter-word : 단어 사이의 공백을 조절해 정렬합니다(word-spacing).
- inter-character : 인접한 글자 사이의 공백을 똑같이 맞추어 정렬합니다(letter-spacing).