8-1-3.정렬
문단의 글자는 페이지의 왼쪽 끝에서 시작해서 오른쪽으로 흐르며 페이지의 끝을 만나면 자동으로 개행된다. align 속성은 글자의 정렬 방식을 지정한다. 대부분의 HTML 태그에 지정할 수 있되 글자에 대해 적용되는 속성이므로 주로 문단을 표현하는 <p> 태그에 가장 흔하게 사용된다. 가능한 정렬 방법은
다음과 같다.
|
속성 |
설명 |
|
left |
왼쪽으로 정렬한다. 이 방식이 디폴트이다. |
|
right |
오른쪽으로 정렬한다. |
|
center |
가운데 정렬한다. |
|
justify |
양쪽 정렬한다. 오른쪽 끝이 가지런하게 맞추어진다. |
워드 프로세서의 정렬 옵션과 거의 비슷해서 이해하기 쉽다. 좌, 우, 중앙 정렬에 따라 글자의 시작 위치가 달라지며 양쪽 정렬은
배분 방식이 다르다.
align.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>align</title>
</head>
<body>
<p>왼쪽 정렬</p>
<p align="center">가운데 정렬</p>
<p align="right">오른쪽 정렬</p>
<p align="left">왼쪽 정렬 : 문단이 오른쪽 끝에 닿으면 자동 개행(Word Wrap)하되
오른쪽 끝을 맞추는 방법과 단어 사이의 공백 배분 방식이
다르다. </p>
<p align="justify">양쪽
정렬 : 문단이 오른쪽 끝에 닿으면 자동 개행(Word Wrap)하되
오른쪽 끝을 맞추는 방법과 단어 사이의 공백 배분 방식이 다르다. </p>
</body>
</html>
양쪽 정렬은 글자의 시작 위치가 왼쪽 정렬과 같지만 단어 사이의 공백을 조정하여 문단의 오른쪽 끝을 가지런히
맞춘다는 점이 다르다. 창의 폭을 바꿔 가면서 두 정렬 방식의 차이점을 관찰해 보자.
왼쪽 정렬은 페이지의 오른쪽 끝을 만났을 때 별다른 조치 없이 무조건 개행해 버려 오른쪽 끝이 들쭉 날쭉하다. 이에 비해 양쪽 정렬은 공백의 폭을 조정하여 오른쪽 끝을 가지런히 맞춤으로써 문단 모양이 똑바른 직사각형이다. 영문은 왼쪽 정렬이 어울리고 한글은 양쪽 정렬이 보기 좋다.
웹 페이지에서 시선이 제일 먼저 가는 곳은 가운데이다. 그래서 중앙
정렬이 자주 사용되며 중앙 정렬에 대해서는 별도의 <center> 태그가 제공된다. 아주 긴 문단 집합이나 이미지까지 전부 중앙에 배치할 때는 일일이 문단에
align 속성을 지정하는 대신 <center>와 </center> 사이에 태그를 배치한다.
center.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>center</title>
</head>
<body>
<center>
<h1>중앙 정렬 페이지</h1>
<img src="cosmos.jpg">
<p>center 태그 안의 모든 내용이 중앙 정렬된다.</p>
</center>
</body>
</html>
제목, 이미지, 문단 등을 <center> 태그 안에 배치하여 페이지 중앙에 출력했다. 모든
객체가 가운데 몰려 있어 보기 편하고 안정감도 있어 보인다.
<center> 태그에 속한 모든 태그에 대해 align="center" 속성을 준 것과 같으므로 개별 태그에는 align 속성을 지정하지 않아도 상관없다. 물론 <center> 태그 안에 있는 문단이라도 개별적으로 align 속성을
다르게 지정할 수는 있다.
<center> 태그를 사용하는 대신 <body> 태그에 align="center" 속성을
주어도 페이지 전체가 중앙 정렬되므로 효과는 같다. 다만
<body>는 문서 전체를 중앙 정렬하는데 비해 <center>는
이 태그로 둘러 싸인 부분만 중앙 정렬한다는 점이 다르다.