7.4 텍스트 정렬(Alignment)과 맞추기(Justification)
CSS3에서는 텍스트에 대해서 text-align 속성과 text-align-last 속성을 이용하여 정렬할 수 있으며 text-justify 속성을 이용하여 행의 끝을 사용되는 언어에 따라서 적당하게 맞추도록 지원합니다.
7.4.1 text-align 속성을 이용한
텍스트(text) 정렬하기
만일 하나의
인라인 박스 안에 다 나타내지 못할 정도로 텍스트 내용이 많을 경우 어떻게 정렬될 것인지를 설정하는 속성입니다.
selector { text-align : 속성값 }
위의 정렬값으로는 다양한 값들이 올 수 있는데 이를 정리하여 표로 나타내면 다음과 같습니다.
|
정렬값 |
의미 |
|
left |
좌측 정렬 |
|
right |
우측 정렬 |
|
center |
가운데 정렬 |
|
justify |
text-justify 속성에 설정된 값을 따름 |
이외에도 실험적인
속성값으로 시작 가장자리에 정렬하는 start, 끝 가장자리에 정렬하는 end, 그리고 table 요소의 셀(cell)에 적용되는 정렬값으로 다른 요소에 적용할 경우에는 언어가
English, Korean처럼 대부분의 언어는 left, 우측부터 시작하는 언어인 아랍어는
“right”로 동작하는 속성값을 가질 수 있습니다. 메모장으로
“letter-spacingEx.html”을 열고 다음과 같이 코드를 수정합니다.
<style>
div {border:1px solid blue; width:400px;
height:250px}
p#p_left{ text-align:left }
p#p_right{ text-align:right }
p#p_center{ text-align:center }
p#p_justify{ text-align:justify }
</style>
</head>
<body>
<div>
<p id="p_left">Find
Good People, set them free : 훌륭한 사람을
찾아 그들을 자유롭게 하라
- 리차드 브랜슨</p>
<p id="p_right">Find
Good People, set them free : 훌륭한 사람을 찾아 그들을 자유롭게 하
라 - 리차드
브랜슨</p>
<p id="p_center">Find
Good People, set them free : 훌륭한 사람을 찾아 그들을 자유롭게 하
라 - 리차드
브랜슨</p>
<p
id="p_justify">Find Good People, set them free : 훌륭한 사람을 찾아
그들을 자유롭게 하
라 - 리차드
브랜슨</p>
</div>
</body>
</html>
위에서 div 요소의 스타일을 경계선을 1px 파란 실선으로 가로, 세로 각각 400px, 250px 크기로 나타내도록 합니다. 그리고 4개의 p 요소에
대해서 설명한 text-align 속성값으로 각각 설정합니다.
다른 이름으로 저장을 선택하여 “text-alignEx.html”으로 저장합니다. IE9을 통해 보면 다음과 같이 나타나게 됩니다.
위의 결과에서
보는 것처럼 text-align 속성값에 설정된 대로 잘 나타내는데
text-align 속성값이 left로 설정된 첫 번째와
justify로 설정된 마지막 p 요소는 동일하게 정렬되어 나타납니다.
7.4.2 text-justify 속성을 이용한 텍스트에 대한 행의 끝맞추기
text-justify 속성은 텍스트에 대해서 한 행의 끝을 텍스트의 언어에 따라서 맞추는데 사용하는 속성으로 다음과 같은 형식을 사용합니다.
selector { text-justify : 속성값 }
그리고 text-justify 속성값으로 사용할 수 있는 값들을 정리하면 다음과 같습니다.
|
속성값 |
의미 |
|
auto |
브라우저가 자동적으로 행의 끝맞춤(justification)을 결정 |
|
none |
아무런 영향이 없음 |
|
inter-word |
영어와 우리말에 적용되는 값으로 단어 구분자의 공백에 변화를 줌 |
|
inter-ideograph |
중국어 같은 표의 문자에 사용한 속성값으로 문자들과 단어 구분자들 사이의 공백 모두에 변화를 줌 |
|
inter-cluster |
태국어 같은 단어들 사이에 공백을 이용하지 않은 텍스트에 사용 |
|
distribute |
일본어 같은 언어에 적용되는 속성값으로 문자들과 단어 구분자들 사이의 공백 모두에 변화를 줌 |
|
kashida |
아랍어, 몽골어 같은 흘림체 형태의 텍스트에 적용되는 속성값 |
메모장으로 “text-alignEx.html” 파일을 열고 다음과 같이 코드를 수정해봅니다.
<style>
div {border:1px solid blue;
width:400px; height:200px}
p#p_interword{text-align:left;
text-justify:inter-word }
p#p_interideograph{ text-align:left ;
text-justify:inter-ideograph }
p#p_distribute{ text-align:left;
text-justify:distribute}
</style>
</head>
<body>
<div>
<p
id="p_interword">Find Good People, set them free : 훌륭한 사람을 찾아 그들을 자유롭게
하라 - 리차드 브랜슨</p>
<p
id="p_interideograph">學而時習之 不亦悅乎 學而時習之 不亦悅乎 學而時習之 不亦悅乎
學而時習之 不亦悅乎 - 孔子</p>
<p id="p_distribute">時(とき)は金(かね)なり. 時(とき)は金(かね)なり. 時(とき)は金(かね)な
り.</p>
</div>
</body>
</html>
다른 이름으로
저장을 선택하여 “text-justifyEx.html”으로 저장합니다.
IE9을 통해 보면 다음과 같이 나타나게 됩니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 CSS3에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 7.6 text-indent 속성을 이용한 들여쓰기 (0) | 2013.08.04 |
|---|---|
| 7.5 문장 내 간격(Spacing) 처리하기 (0) | 2013.08.04 |
| 7.3 줄 바꿈(Line Breaking)과 단어 내 줄 바꿈(Word Boundaries) (0) | 2013.08.04 |
| 7. 텍스트(Text) (0) | 2013.08.04 |
| 6.5 font-size 속성을 이용하여 글자의 크기를 설정하기 (0) | 2013.08.04 |