HTML dir 속성이란?
HTML의 dir 속성은 요소 내부 콘텐츠의 텍스트 방향(direction)을 지정하는 전역 속성입니다. 아랍어나 히브리어처럼 오른쪽에서 왼쪽으로 읽는 언어(RTL 언어)를 웹 페이지에 표시할 때 특히 유용하게 사용됩니다.
dir 속성에 사용할 수 있는 값은 다음과 같습니다.
- ltr – 왼쪽에서 오른쪽(left to right)으로 텍스트를 표시합니다. 대부분의 언어에서 사용되는 기본값입니다.
- rtl – 오른쪽에서 왼쪽(right to left)으로 텍스트를 표시합니다.
- auto – 브라우저가 콘텐츠를 분석하여 텍스트 방향을 자동으로 판단합니다.
dir 속성 사용 예제
다음은 HTML에서 dir 속성을 실제로 적용한 예제입니다.
<!DOCTYPE html>
<html>
<body>
<h2>Demo Heading</h2>
<p>This is normal text.</p>
<p dir="rtl">This text will be displayed from right to left.</p>
</body>
</html>
실행 결과
일반 문단은 기본 방향인 왼쪽에서 오른쪽으로 표시되고, dir="rtl"이 적용된 문단은 오른쪽에서 왼쪽으로 정렬되어 나타납니다.
예제 코드 살펴보기
먼저 dir 속성 없이 작성한 일반 텍스트 단락입니다.
<p>This is normal text.</p>
이어서 dir 속성을 사용해 텍스트 방향을 오른쪽에서 왼쪽(rtl)으로 지정한 단락입니다.
<p dir="rtl">This text will be displayed from right to left.</p>
마무리
dir 속성은 다국어 웹 사이트를 제작할 때 반드시 알아두어야 할 속성입니다. ltr, rtl, auto 값을 상황에 맞게 활용하면 서로 다른 언어의 텍스트도 자연스럽게 표시할 수 있습니다.