HTML에서 텍스트 가운데 정렬하는 방법
프로그래밍을 배울 때 가장 먼저 익히게 되는 것 중 하나가 바로 텍스트 블록의 정렬입니다. 이 글에서는 HTML의 style 속성과 align 속성을 사용하여 컨테이너 안에서 텍스트를 가운데로 정렬하는 방법을 코드 예제와 함께 자세히 살펴보겠습니다.
style 속성으로 텍스트 가운데 정렬하기
HTML에서 <div> 요소를 다룰 때는 style 속성을 사용해 인라인 스타일을 직접 적용할 수 있습니다. CSS의 text-align 속성값을 center로 지정하면 <div> 안의 텍스트를 간단하게 가운데 정렬할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center with Style Attribute</title>
</head>
<body>
<div class="container" style="text-align:center;">
<p>Text to center</p>
</div>
</body>
</html>위 예제처럼 text-align:center;를 style 속성에 추가하면 해당 div 내부의 모든 인라인 콘텐츠가 가운데로 정렬됩니다. 별도의 CSS 파일 없이 즉시 적용할 수 있어 간단한 작업에 유용합니다.
align 속성으로 텍스트 가운데 정렬하기
align 속성은 주로 HTML에서 테이블을 다룰 때 사용됩니다. 단, 이 속성은 모든 요소에 적용되는 것이 아니라 <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr> 등 테이블 관련 요소에만 동작합니다.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Center with Align Attribute</title>
</head>
<body>
<table border=1 width="800" align="center">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr align="center">
<td>January</td>
<td>$100</td>
</tr>
<tr align="center">
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>참고로 align 속성은 HTML5에서 공식적으로 지원 중단(deprecated)된 속성입니다. 따라서 실무에서는 CSS의 text-align이나 margin: 0 auto; 같은 스타일 속성을 사용하는 것이 좋습니다. 다만 기존 코드를 유지보수할 때는 여전히 마주칠 수 있으므로 개념을 알아두면 도움이 됩니다.
정렬 시 꼭 기억해야 할 핵심 포인트
텍스트 가운데 정렬을 학습할 때 가장 중요한 것은 정렬이 항상 해당 텍스트가 속한 컨테이너를 기준으로 이루어진다는 점입니다. 예를 들어 컨테이너가 페이지의 절반 너비만 차지하고 있다면, 텍스트는 페이지 전체가 아닌 그 컨테이너 범위 안에서만 가운데 정렬됩니다.
지금까지 <div> 요소와 <table> 요소에서 텍스트를 가운데 정렬하는 두 가지 방법을 알아보았습니다. 생각보다 어렵지 않으니 위 예제 코드를 직접 실행해 보면서 감각을 익혀보세요!