dir 속성의 정의 및 사용법

dir 속성은
텍스트의 읽고 쓰는 방향(direction)을 지정합니다.

이 속성을 사용하면 요소 내 텍스트를 언어의 특성에 맞게 왼쪽에서 오른쪽으로 또는 오른쪽에서 왼쪽으로 읽고 쓸 수 있습니다.

많은 언어에서 텍스트는 일반적으로 왼쪽에서 배치되어 오른쪽으로 읽고 쓰지만,
일부 언어(예: 아랍어, 히브리어 등)의 경우에는 반대로 오른쪽에 배치되어 왼쪽으로 읽고 씁니다.

데모

HTML 
<!-- 왼쪽에서 배치되어 오른쪽으로 읽고 쓰기 -->
<p dir="ltr">이것은 왼쪽에서 오른쪽으로 쓰는 텍스트입니다.</p>
<p dir="ltr" lang="en">This is a left-to-right text.</p>

<!-- 오른쪽에서 배치되어 왼쪽으로 읽고 쓰기 -->
<p lang="ar" dir="rtl">هذا نص من اليمين إلى اليسا</p> <!-- 아랍어 -->
<p lang="he" dir="rtl">זהו טקסט שנכתב מימין לשמאל.</p> <!-- 히브리어 -->

코드 부연설명
lang 속성은 요소 콘텐츠와 텍스트가 포함된 모든 요소 속성에 대한 기본 언어(language)를 지정합니다. 웹 접근성을 위한 스크린 리더나, 검색 엔진, 브라우저의 자동 번역 등에서 언어의 종류를 인식하는 정보를 제공합니다.

실제 적용된 모습

값

이 속성은 텍스트의 방향을 지정하는 세 가지 키워드 값이 있습니다.

dir 속성의 값
ltr 왼쪽에서 오른쪽(left-to-right)으로 읽고 쓰게 지정합니다.
한국어, 영어를 포함한 대부분의 언어에서 사용합니다.
rtl 오른쪽에서 왼쪽(right-to-left)으로 읽고 쓰게 지정합니다.
아랍어, 히브리어 등의 언어에서 사용합니다.
auto 브라우저가 콘텐츠를 분석하여 적절한 방향을 자동으로 설정합니다.

dir 속성을 지정하지 않거나, 유효하지 않은 값이 있을 경우에는 다음의 규칙을 따릅니다.

  • <input type="tel"> - ltr 값으로 작동합니다.
  • <bdi> - auto 값으로 작동합니다.
  • 그 밖의 요소 - 부모 요소의 텍스트 방향을 상속(inherit)받습니다. 부모 요소에서도 dir가 설정되어 있지 않다면, 다시 그 부모의 부모로부터 값을 상속받는 식입니다. 만약, 루트 요소인 <html>까지 dir가 설정되어 있지 않다면 ltr 값으로 작동합니다.

알아두세요!
<bdo> 태그에서 dir 속성은 HTML의 의미론적 측면에서 특별한 의미를 가집니다.
dir 속성을 지정해야 하며, 주변 텍스트의 방향의 값이 ltr이면 rtl로 재정의해야 하고, 반대로 rtl이면 ltr로 재정의해야 합니다.
auto 값은 지정하면 안 됩니다.

문서 수준에서 텍스트의 읽고 쓰는 방향 설정

텍스트의 읽고 쓰는 방향을 지정하는 것은 근본적으로 중요합니다.
그래야 텍스트가 표시되거나 읽을 때 적절하게 배치될 수 있기 때문입니다.

텍스트의 기본 방향

문서 수준에서 dir 속성을 지정하지 않으면 ltr로 설정되기 때문에 텍스트가 왼쪽에서 오른쪽 방향으로 읽고 쓰는 언어에서는 필요가 없습니다.

알아두세요!
문서 수준에서 주 언어가 동적으로 바뀌는 다국어 언어 페이지에서는 dir 속성의 값을 CSS와 자바스크립트가 선택자로 사용하게끔 명시적으로 지정하는 경우도 있습니다.

오른쪽에서 왼쪽으로 페이지 설정하기

여기에서는 문서 수준에서 오른쪽에서 왼쪽으로 텍스트의 읽고 쓰는 방향을 지정하는 방법에 대해 알아보겠습니다.

전체 문서 방향이 오른쪽에서 왼쪽(rtl)일 때에는 다음과 같이 루트 요소인 <html>에 dir="rtl"을 추가합니다.

HTML 
<!DOCTYPE html>
<html dir="rtl" lang="ar">
    <head>
        <meta charset="utf-8">
...

lang 속성으로 문서의 주 언어 설정

lang 속성으로 문서의 언어를 설정하는 것도 잊지 마세요. lang 속성만으로는 텍스트의 방향에 영향을 미치지는 못합니다. dir을 사용하여 텍스트의 방향을 설정해야 합니다 .

<title>

<title> 태그로 나타내는 HTML 문서의 타이틀(title, 제목이나 이름)은 화면에서 표시되지는 않지만 브라우저의 제목 표시줄이나 페이지 탭에 보이는 제목으로 사용됩니다.

문서 수준에서 오른쪽에서 왼쪽으로 텍스트 방향(rtl)이 설정되어 있으면, HTML 문서의 타이틀도 동일한 방향(rtl)으로 설정됩니다.

CSS에서 논리적 속성 사용

dir 속성이 ltr로 작동하는 한국어나 영어와 같은 언어에서는 텍스트의 정렬이 왼쪽에서 오른쪽으로 정렬합니다.

예를 들어, 텍스의 좌우 정렬을 설정하는 CSS 속성인 text-align의 경우 이 값을 지정하지 않으면 초깃값인 start가 적용되는데, 왼쪽 가장자리에 정렬됩니다. 하지만, dir 속성이 rtl로 작동할 경우에는 오른쪽 가장자리에 정렬됩니다.

만약에 dir 속성이 ltr로 작동하는 언어에 텍스트를 왼쪽 가장자리에 정렬하기 위해서 text-align: left를 지정했다고 가정해 보겠습니다. 이 지정은 dir 속성이 rtl로 작동하는 언어에서도 동일하게 정렬합니다. 하지만, text-align: start로 설정되어 있다면 자동으로 오른쪽 가장자리에 정렬합니다.

CSS에서는 dir 속성이 ltr 또는 rtl에서 그 방향에 맞춰 논리적인 방향을 자동으로 구현하는 속성들이 있는데, text-align 속성이 대표적입니다. 이러한 논리적 속성과 값을 사용하면 텍스트 언어와 무관하게 언어의 특성에 맞는 방향에 위치를 설정할 수 있습니다.

다음은 실제 사용 가능한 주요 CSS의 논리적 속성과 값입니다.

CSS 
text-align: start | end
justify-content: flex-start | flex-end ...
align-content: flex-start | flex-end ...
grid-column-start: <value>
grid-column-end: <value>
inline-size: <width>
margin-inline-start: <value>
margin-inline-end: <value>
padding-inline-start: <value>
padding-inline-end: <value>
border-inline-start-width: <value>
border-inline-end-width: <value>
border-inline-start-style: <value>
border-inline-end-style: <value>
border-inline-start-color: <value>
border-inline-start-color: <value>
...

스타일 시트에서 이러한 속성을 사용하면 dir을 원하는 방향으로 설정하면 자동으로 해당 콘텐츠의 정렬은 논리적인 위치로 설정되기 때문에 매우 효율적인 스타일을 관리하는데 도움이 됩니다.

테이블의 레이아웃

dir 속성은 테이블(table, 표)의 열(세로 방향, table columns) 흐름에 영향을 미칩니다.
ltr의 경우에는 각 셀이 왼쪽에서 오른쪽으로 정렬하고, rtl의 경우에는 반대로 오른쪽에서 왼쪽으로 정렬합니다.

HTML 
<h5>dir="ltr"</h5>
<table dir="ltr">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
</table>
<h5>dir="rtl"</h5>
<table dir="rtl">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
</table>
실제 적용된 모습

dir 속성은 단순히 텍스트의 외형적인 방향 배치뿐만 아니라 그 의미(읽는 방향)에도 영향을 줍니다.

주의할 점

CSS에서도 HTML의 dir 속성처럼 외형적인 방향 배치에 관한 direction과 unicode-bidi 속성이 있습니다. 이 두 CSS 속성은 외형적인 방향 배치는 관혀하지만 의론적 측면에서의 읽는 방향에 대해서는 영향을 주지 않기 때문에, 웹 개발자는 가능하면 CSS 속성 대신 dir 속성을 사용하는 것이 좋습니다.

브라우저 호환성

dir 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
dir 1 79 1 4

명세서

dir 속성의 명세서 사양
명세서 사양
dir HTML
#the-dir-attribute

참고문헌

같이 보기