JavaScript에서 텍스트의 표시 방향을 변경하려면 direction 속성을 사용하면 됩니다. 이 속성은 CSS의 direction 스타일 속성과 동일하게 작동하며, 값으로 rtl(오른쪽에서 왼쪽) 또는 ltr(왼쪽에서 오른쪽)을 지정할 수 있습니다.
direction 속성의 주요 값
- rtl (right-to-left): 아랍어, 히브리어처럼 오른쪽에서 왼쪽으로 읽는 언어에 적합합니다.
- ltr (left-to-right): 한글, 영어 등 대부분의 언어에서 사용되는 기본값입니다.
예제 코드
아래 예제는 버튼을 클릭하면 제목(h1) 요소의 텍스트 방향이 오른쪽에서 왼쪽(rtl)으로 변경되도록 JavaScript로 구현한 코드입니다.
<!DOCTYPE html>
<html>
<body>
<h1 id="myID">Heading 1</h1>
<p>아래 버튼을 클릭하면 제목의 방향이 오른쪽에서 왼쪽(rtl)으로 변경됩니다.</p>
<button type="button" onclick="display()">방향 변경하기</button>
<script>
function display() {
document.getElementById("myID").style.direction = "rtl";
}
</script>
</body>
</html>코드 설명
버튼이 클릭되면 display() 함수가 실행됩니다. 이 함수 내부에서 document.getElementById("myID")를 통해 id가 "myID"인 h1 요소에 접근한 뒤, style.direction = "rtl"을 설정하여 해당 요소의 텍스트 흐름을 오른쪽에서 왼쪽으로 바꿉니다.
다시 왼쪽에서 오른쪽 방향으로 되돌리려면 값을 "ltr"로 지정하면 됩니다. 이 기법은 다국어 웹사이트에서 언어별로 텍스트 정렬 방향을 동적으로 전환해야 할 때 특히 유용합니다.