HTML에서 텍스트를 오른쪽에서 왼쪽(RTL) 방향으로 표시하려면 CSS의 direction 속성을 사용합니다. 이 속성은 style 속성과 함께 인라인 스타일 형태로 요소에 적용할 수 있습니다.
direction 속성의 주요 값
CSS direction 속성에 사용할 수 있는 값은 다음과 같습니다.
| 번호 | 값 및 설명 |
|---|---|
| 1 | ltr 왼쪽에서 오른쪽 방향으로 텍스트를 표시합니다(기본값). |
| 2 | rtl 오른쪽에서 왼쪽 방향으로 텍스트를 표시합니다. |
| 3 | initial 해당 속성을 기본값으로 초기화합니다. |
사용 시 주의 사항
텍스트를 오른쪽에서 왼쪽으로 표시하려면 style 속성에 CSS direction 속성을 지정하면 됩니다. 다만 인라인 스타일은 우선순위가 가장 높기 때문에, HTML <style> 태그나 외부 스타일시트에서 설정한 전역 스타일보다 우선 적용된다는 점을 유의해야 합니다.
예제 코드
다음 코드를 실행하면 HTML에서 텍스트가 오른쪽에서 왼쪽 방향으로 표시되는 것을 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML Text Direction</title> </head> <body> <p style = "direction: rtl;"> Displayed from right to left </p> </body> </html>
추가 팁: dir 속성 활용하기
CSS 대신 HTML 자체의 dir 속성을 사용하는 방법도 있습니다. 예를 들어 <p dir="rtl">처럼 작성하면 별도의 스타일 지정 없이도 해당 요소의 텍스트 방향이 오른쪽에서 왼쪽으로 설정됩니다. 아랍어, 히브리어 등 RTL 언어를 다룰 때는 문서 전체에 <html dir="rtl">을 적용하는 것이 좋습니다.