CSS의 direction 속성은 요소 안에서 텍스트가 흐르는 방향을 지정하는 데 사용됩니다. 이 속성은 ltr(왼쪽에서 오른쪽) 또는 rtl(오른쪽에서 왼쪽) 두 가지 값을 가질 수 있습니다.
direction 속성의 값
- ltr (left-to-right): 텍스트가 왼쪽에서 오른쪽으로 렌더링됩니다. 기본값이며, 한국어·영어 등 대부분의 언어에서 사용됩니다.
- rtl (right-to-left): 텍스트가 오른쪽에서 왼쪽으로 렌더링됩니다. 아랍어, 히브리어처럼 오른쪽에서 왼쪽으로 읽는 언어(RTL 언어)를 지원할 때 활용됩니다.
예제
다음 코드를 실행하면 CSS로 텍스트 방향을 설정할 수 있습니다.
<html> <head> </head> <body> <p style = "direction:rtl;"> This text will be rendered from right to left </p> </body> </html>
위 예제에서는 <p> 요소에 direction: rtl; 스타일이 인라인으로 적용되었기 때문에, 해당 문단의 텍스트가 화면 오른쪽에서 왼쪽 방향으로 정렬되어 렌더링됩니다.
참고 사항
direction 속성은 다국어 웹 사이트를 개발할 때 특히 유용합니다. 아랍어나 히브리어 같은 RTL 언어 콘텐츠를 올바르게 표시하려면 반드시 방향을 지정해야 합니다. 참고로 CSS 대신 HTML의 dir 속성(예: <p dir="rtl">)을 사용해도 동일한 결과를 얻을 수 있으며, 필요에 따라 unicode-bidi 속성과 함께 사용하면 더욱 정교하게 텍스트 방향을 제어할 수 있습니다.