HTML DOM Style textAlign 속성 – 텍스트 정렬 완벽 가이드

DOM의 style textAlign 속성은 HTML 문서에서 블록 레벨(block-level) 요소 내 텍스트의 가로 정렬 상태를 반환하고 수정하는 데 사용됩니다. 이 속성을 활용하면 자바스크립트만으로 문단이나 제목 등의 텍스트를 왼쪽, 오른쪽, 가운데 또는 양쪽 정렬로 동적으로 변경할 수 있습니다.

문법(Syntax)

textAlign 속성의 기본 문법은 다음과 같습니다.

1. textAlign 값 가져오기

object.style.textAlign

2. textAlign 값 설정하기

object.style.textAlign = "value"

설정 가능한 대표적인 값으로는 left(왼쪽 정렬), right(오른쪽 정렬), center(가운데 정렬), justify(양쪽 정렬) 등이 있습니다.

예제(Example)

다음은 style textAlign 속성을 활용한 실제 예제입니다. 버튼을 클릭하면 첫 번째 문단 요소의 텍스트가 가운데 정렬로 변경됩니다.

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        background: lightblue;
        height: 100vh;
    }
    p {
        border: 2px solid #fff;
        margin: 1.5rem auto;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
    }
</style>
</head>
<body>
<h1>DOM Style textAlign Property Example</h1>
<p>This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.</p>
<button onclick="add()" class="btn">Set textAlign</button>
<script>
    function add() {
        document.querySelector('p').style.textAlign = "center";
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM Style textAlign 속성 – 텍스트 정렬 완벽 가이드

화면에 있는 “Set textAlign” 버튼을 클릭해 보세요. 그러면 문단(p) 요소 내부의 텍스트가 즉시 가운데 정렬로 바뀌는 것을 확인할 수 있습니다.

HTML DOM Style textAlign 속성 – 텍스트 정렬 완벽 가이드

정리

textAlign 속성은 CSS의 text-align 스타일을 자바스크립트로 제어할 수 있게 해주는 강력한 도구입니다. 사용자 인터랙션에 따라 텍스트 정렬을 실시간으로 변경해야 하는 경우, 위 예제처럼 querySelector()로 요소를 선택한 뒤 style.textAlign 값을 지정하는 방식을 활용하면 됩니다.