HTML에서 align 속성으로 정렬 설정하기
HTML에서 텍스트나 요소의 정렬을 지정하려면 align 속성을 사용할 수 있습니다. 이 속성은 left(왼쪽), right(오른쪽), center(가운데), justify(양쪽 맞춤) 등의 값을 가지며, 주변 요소나 부모 컨테이너를 기준으로 내용이 어떻게 배치될지 결정합니다.
아래 예제 코드를 실행하면 align 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다.
참고: align 속성은 HTML5에서 더 이상 지원되지 않는(deprecated) 속성입니다. 최신 웹 표준에서는 반드시 CSS를 사용하여 정렬을 구현해야 합니다.
예제 코드
<!DOCTYPE html> <html> <body> <p align="right">오른쪽으로 정렬된 단락입니다.</p> <p><b>참고:</b> align 속성은 HTML5에서 지원되지 않습니다. 대신 CSS를 사용하세요.</p> </body> </html>
CSS를 활용한 현대적인 정렬 방법
HTML5 환경에서는 align 속성 대신 CSS의 text-align 속성을 사용하는 것이 좋습니다. 아래는 동일한 결과를 CSS로 구현한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.right-align {
text-align: right;
}
</style>
</head>
<body>
<p class="right-align">CSS로 오른쪽 정렬한 단락입니다.</p>
</body>
</html>
블록 요소 자체를 가운데 정렬하려면 margin: 0 auto;를, 유연한 레이아웃 정렬에는 flexbox나 grid를 활용하는 것이 권장됩니다. CSS 기반 정렬은 유지보수가 쉽고 반응형 디자인에도 훨씬 유리합니다.