dir

dir 전용 속성은 열거형 속성으로 요소의 텍스트에 대한 방향성을 나타냅니다. 이 속성은 다음과 같은 값을 가질 수 있습니다:

  • ltr, 왼쪽에서 오른쪽 방향을 의미하며, 영어와 같이 왼쪽에서 오른쪽으로 기술되는 언어에 사용됩니다;
  • rtl, 오른쪽에서 왼쪽 방향을 의미하며, 아랍어와 같이 오른쪽에서 왼쪽으로 기술되는 언어에 사용됩니다;
  • auto, 사용자 에이전트가 결정하도록 합니다. 이 방식은 요소의 내부에 있는 문자를 강한 방향성(strong directionality)을 갖는 문자를 찾을 때까지 파싱을 계속해 나가며, 찾은 방향성을 요소 전체에 적용하는 기본적인 알고리즘을 사용합니다.

Usage notes

이 속성은 의미적으로 다른 뜻을 가지는 <bdo> 요소에 필수 속성입니다.

  • 이 속성은 <bdi> 요소의 속성을 상속하지 않습니다. 따로 설정되지 않으면 그 값은 auto입니다.

  • CSS 페이지가 활성화되고 해당 요소가 CSS 속성인 direction와 unicode-bidi을 지원하는 경우, 이들 속성에 의해 오버라이드될 수 있습니다.

  • 텍스트의 방향은 내용과 의미적으로 관련되고 표시 방식과는 관련이 없으므로 웹 개발자는 가능한 관련 CSS속성 대신 이 속성을 사용하는 것이 좋습니다. 이렇게 하면 CSS를 지원하지 않거나 CSS가 비활성화된 브라우저에서도 텍스트가 올바르게 표시됩니다.

  • auto 값은 사용자 입력 데이터와 같이 데이터의 방향성을 모르며 최종적으로 데이터베이스에 저장되는 데이터일 경우에만 사용되어야 합니다.

Specifications

Specification Status Comment
HTML Living Standard
The definition of 'dir' in that specification.		 Living Standard No change from latest snapshot, HTML 5.1
HTML 5.1
The definition of 'dir' in that specification.		 Recommendation Snapshot of HTML Living Standard, no change from HTML5
HTML5
The definition of 'dir' in that specification.		 Recommendation Snapshot of HTML Living Standard, from HTML 4.01 Specification it added the auto value, and is now a true global attribute.
HTML 4.01 Specification
The definition of 'dir' in that specification.		 Recommendation Supported on all elements but <applet>, <base>, <basefont>, <bdo>, <br>, <frame>, <frameset>, <iframe>, <param>, and <script>.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
dirChrome Full support YesEdge No support NoFirefox Full support YesIE No support NoOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support

See also

관련 주제
  1. HTML
  2. Tutorials:
  3. HTML basics
  4. Introduction to HTML
    1. Introduction to HTML overview
    2. Getting started with HTML
    3. What's in the head? Metadata in HTML
    4. HTML text fundamentals
    5. Creating hyperlinks
    6. Advanced text formatting
    7. Document and website structure
    8. Debugging HTML
    9. Assessment: Marking up a letter
    10. Assessment: Structuring a page of content
  5. Multimedia and embedding
    1. Multimedia and embedding overview
    2. Images in HTML
    3. Video and audio content
    4. From object to iframe — other embedding technologies
    5. Adding vector graphics to the Web
    6. Responsive images
    7. Assessment: Mozilla splash page
  6. References:
  7. HTML elements
    1. <a>
    2. <abbr>
    3. <acronym> [Translate]
    4. <address>
    5. <applet>
    6. <area>
    7. <article>
    8. <aside>
    9. <audio>
    10. <b>
    11. <base>
    12. <basefont> [Translate]
    13. <bdi>
    14. <bdo>
    15. <bgsound> [Translate]
    16. <big> [Translate]
    17. <blink>
    18. <blockquote>
    19. <body>
    20. <br>
    21. <button>
    22. <canvas>
    23. <caption>
    24. <center>
    25. <cite>
    26. <code>
    27. <col>
    28. <colgroup>
    29. <command>
    30. <content>
    31. <data>
    32. <datalist>
    33. <dd>
    34. <del>
    35. <details>
    36. <dfn>
    37. <dialog>
    38. <dir> [Translate]
    39. <div>
    40. <dl>
    41. <dt>
    42. <element>
    43. <em>
    44. <embed>
    45. <fieldset>
    46. <figcaption>
    47. <figure>
    48. <font>
    49. <footer>
    50. <form>
    51. <frame>
    52. <frameset>
    53. <h1>
    54. <head>
    55. <header>
    56. <hgroup>
    57. <hr>
    58. <html>
    59. <i>
    60. <iframe>
    61. <image> [Translate]
    62. <img>
    63. <input>
    64. <ins>
    65. <isindex> [Translate]
    66. <kbd>
    67. <keygen>
    68. <label>
    69. <legend>
    70. <li>
    71. <link>
    72. <listing> [Translate]
    73. <main>
    74. <map>
    75. <mark>
    76. <marquee> [Translate]
    77. <menu>
    78. <menuitem> [Translate]
    79. <meta>
    80. <meter>
    81. <multicol> [Translate]
    82. <nav>
    83. <nextid> [Translate]
    84. <nobr> [Translate]
    85. <noembed> [Translate]
    86. <noframes> [Translate]
    87. <noscript>
    88. <object>
    89. <ol>
    90. <optgroup>
    91. <option>
    92. <output>
    93. <p>
    94. <param>
    95. <picture> [Translate]
    96. <plaintext> [Translate]
    97. <pre>
    98. <progress>
    99. <q>
    100. <rb> [Translate]
    101. <rp>
    102. <rt>
    103. <rtc> [Translate]
    104. <ruby>
    105. <s> [Translate]
    106. <samp> [Translate]
    107. <script>
    108. <section>
    109. <select>
    110. <shadow>
    111. <slot> [Translate]
    112. <small> [Translate]
    113. <source>
    114. <spacer> [Translate]
    115. <span>
    116. <strike> [Translate]
    117. <strong>
    118. <style>
    119. <sub>
    120. <summary>
    121. <sup> [Translate]
    122. <table>
    123. <tbody>
    124. <td>
    125. <template>
    126. <textarea>
    127. <tfoot> [Translate]
    128. <th>
    129. <thead>
    130. <time>
    131. <title>
    132. <tr>
    133. <track>
    134. <tt> [Translate]
    135. <u>
    136. <ul>
    137. <var>
    138. <video>
    139. <wbr> [Translate]
    140. <xmp> [Translate]
  8. Global attributes
    1. accesskey
    2. autocapitalize
    3. class
    4. contenteditable
    5. contextmenu
    6. data-*
    7. dir
    8. draggable
    9. dropzone
    10. hidden
    11. id
    12. inputmode [Translate]
    13. is
    14. itemid
    15. itemprop
    16. itemref
    17. itemscope
    18. itemtype [Translate]
    19. lang [Translate]
    20. slot [Translate]
    21. spellcheck [Translate]
    22. style
    23. tabindex
    24. title [Translate]
    25. translate [Translate]
    26. x-ms-acceleratorkey [Translate]
    27. x-ms-format-detection [Translate]
  9. <input> types
    1. <input type="button">
    2. <input type="checkbox"> [Translate]
    3. <input type="color"> [Translate]
    4. <input type="date"> [Translate]
    5. <input type="datetime"> [Translate]
    6. <input type="datetime-local"> [Translate]
    7. <input type="email"> [Translate]
    8. <input type="file">
    9. <input type="hidden"> [Translate]
    10. <input type="image"> [Translate]
    11. <input type="month"> [Translate]
    12. <input type="number"> [Translate]
    13. <input type="password"> [Translate]
    14. <input type="radio"> [Translate]
    15. <input type="range"> [Translate]
    16. <input type="reset"> [Translate]
    17. <input type="search"> [Translate]
    18. <input type="submit"> [Translate]
    19. <input type="tel"> [Translate]
    20. <input type="text"> [Translate]
    21. <input type="time"> [Translate]
    22. <input type="url"> [Translate]
    23. <input type="week"> [Translate]
  10. Documentation:
  11. Useful lists
  12. All pages index
  13. Pages tagged "HTML"
  14. Contribute
    1. HTML doc status
    2. The MDN project