HTML 정렬하기 : 왼쪽 오른쪽 가운데 양쪽 정렬 - text-align: left right center justify

블로그나 웹페이지에서 특정 영역의 내용을 왼쪽 오른쪽 가운데 또는 양쪽 정렬을 할 필요가 있을 때는 다음과 같이 태그 속성을 주면 된다.

text-align: left;       왼쪽 정렬
text-align: right;    오른쪽 정렬
text-align: center;  가운데 정렬
text-align: justify;   양쪽 정렬

아래는 DIV 영역에 정렬 속성 (text-align)을 준 실제 모습들을 비교한 것이다.
얼핏보면 별 차이가 없어 보일 수 있지만, 왼쪽과 오른쪽 끝 선을 보면 차이가 있다.



실제 적용한 모습 : 왼쪽 정렬 text-align: left;

서울특별시 부산광역시 대구광역시 인천광역시 광주광역시 대전광역시 울산광역시 세종특별자치시 경기도 강원도 충청북도 충청남도 전라북도 전라남도 경상북도 경상남도 제주특별자치도

우리는 이에 우리 조선이 독립한 나라임과 조선 사람이 자주적인 민족임을 선언한다. 이로써 세계 만국에 알리어 인류 평등의 큰 도의를 분명 히 하는 바이며, 이로써 자손만대에 깨우쳐 일러 민족의 독자적 생존의 정당한 권리를 영원히 누려 가지게 하는 바이다. 吾等은 玆에 我 朝鮮의 獨立國임과 朝鮮人의 自主民임을 宣言하노라. 此로써 世界萬邦에 告하야 人類平等의 大義를 克明하며, 此로써 子孫萬代에 誥하야 民族自存의 正權을 永有케 하노라.

실제 적용한 모습 : 오른쪽 정렬 text-align: right;

서울특별시 부산광역시 대구광역시 인천광역시 광주광역시 대전광역시 울산광역시 세종특별자치시 경기도 강원도 충청북도 충청남도 전라북도 전라남도 경상북도 경상남도 제주특별자치도

우리는 이에 우리 조선이 독립한 나라임과 조선 사람이 자주적인 민족임을 선언한다. 이로써 세계 만국에 알리어 인류 평등의 큰 도의를 분명 히 하는 바이며, 이로써 자손만대에 깨우쳐 일러 민족의 독자적 생존의 정당한 권리를 영원히 누려 가지게 하는 바이다. 吾等은 玆에 我 朝鮮의 獨立國임과 朝鮮人의 自主民임을 宣言하노라. 此로써 世界萬邦에 告하야 人類平等의 大義를 克明하며, 此로써 子孫萬代에 誥하야 民族自存의 正權을 永有케 하노라.

실제 적용한 모습 : 가운데 정렬 text-align: center;

서울특별시 부산광역시 대구광역시 인천광역시 광주광역시 대전광역시 울산광역시 세종특별자치시 경기도 강원도 충청북도 충청남도 전라북도 전라남도 경상북도 경상남도 제주특별자치도

우리는 이에 우리 조선이 독립한 나라임과 조선 사람이 자주적인 민족임을 선언한다. 이로써 세계 만국에 알리어 인류 평등의 큰 도의를 분명 히 하는 바이며, 이로써 자손만대에 깨우쳐 일러 민족의 독자적 생존의 정당한 권리를 영원히 누려 가지게 하는 바이다. 吾等은 玆에 我 朝鮮의 獨立國임과 朝鮮人의 自主民임을 宣言하노라. 此로써 世界萬邦에 告하야 人類平等의 大義를 克明하며, 此로써 子孫萬代에 誥하야 民族自存의 正權을 永有케 하노라.

실제 적용한 모습 : 양쪽 정렬 text-align:justify;

서울특별시 부산광역시 대구광역시 인천광역시 광주광역시 대전광역시 울산광역시 세종특별자치시 경기도 강원도 충청북도 충청남도 전라북도 전라남도 경상북도 경상남도 제주특별자치도

우리는 이에 우리 조선이 독립한 나라임과 조선 사람이 자주적인 민족임을 선언한다. 이로써 세계 만국에 알리어 인류 평등의 큰 도의를 분명 히 하는 바이며, 이로써 자손만대에 깨우쳐 일러 민족의 독자적 생존의 정당한 권리를 영원히 누려 가지게 하는 바이다. 吾等은 玆에 我 朝鮮의 獨立國임과 朝鮮人의 自主民임을 宣言하노라. 此로써 世界萬邦에 告하야 人類平等의 大義를 克明하며, 此로써 子孫萬代에 誥하야 民族自存의 正權을 永有케 하노라.

왼쪽 오른쪽 가운데 정렬은 대부분 익숙한 것 같고 양쪽 정렬 (justify)는 흔히 쓰이지는 않는 것 같다.

양쪽 정렬은 폭이 좁은 일정한 박스 영역 안에 메뉴 링크 등을 넣을 때 사용하면 좋은 것 같다. 폭이 좁은 영역에서는 오른쪽 끝 선이 들쭉 날쭉 하여 어지러워 보이는 경우가 많으므로 그럴 때 양쪽 정렬을 하면, 왼쪽과 오른쪽 끝 선이 가지런하여 깔끔해 보인다.
>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...