HTML에서 dir 속성을 사용하면 단락(문단)의 텍스트 방향을 간단하게 지정할 수 있습니다. 아랍어나 히브리어처럼 오른쪽에서 왼쪽으로 읽는 언어를 웹 페이지에 표시할 때 특히 유용합니다.
dir 속성으로 RTL 방향 설정하기
단락을 오른쪽에서 왼쪽(right-to-left) 방향으로 배치하려면 해당 요소에 dir 속성을 추가하고 값으로 rtl을 지정하면 됩니다. 이렇게 하면 텍스트가 자동으로 오른쪽에서 왼쪽으로 정렬되어 화면에 표시됩니다.
예제
아래 코드를 직접 실행하면 dir 속성이 실제로 어떻게 작동하는지 확인할 수 있습니다.
<!DOCTYPE html> <html> <body> <p dir="rtl">This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph.</p> </body> </html>
참고 사항
dir 속성에는 세 가지 값을 사용할 수 있습니다. 기본값인 ltr(왼쪽에서 오른쪽), 오른쪽에서 왼쪽 방향인 rtl, 그리고 브라우저가 내용을 분석해 방향을 자동으로 판단하는 auto입니다. 또한 CSS의 direction: rtl; 속성을 사용해도 동일한 결과를 얻을 수 있으므로, 상황에 맞게 선택하여 활용하시기 바랍니다.