dir

dir 전역 특성은 요소의 쓰기 방향을 나타내는 열거형 특성입니다.

가능한 값은 다음과 같습니다.

  • ltr은 왼쪽에서 오른쪽을 뜻하며, 좌횡서 언어인 한국어나 영어에 사용합니다.
  • rtl은 오른쪽에서 왼쪽을 뜻하며, 우횡서 언어인 아랍어 등을 사용합니다.
  • auto는 사용자 에이전트가 결정합니다. 사용자 에이전트는 기본적인 알고리즘을 사용해 요소 내부의 문자를 분석한 후, 명확한 방향성을 가진 문자가 존재하는 경우 전체 요소에 해당 방향성을 적용합니다.

참고: dir 특성은<bdo> 요소에 필수로 지정해야 하며, 다른 뜻을 가집니다.

  • <bdi> 요소는 dir 특성을 상속하지 않으며, 지정하지 않은 경우 auto를 기본값으로 사용합니다.

  • direction과 unicode-bidi를 지원하며 CSS를 활성화한 경우, 특성 값은 무시하고 CSS 값을 대신 사용합니다.

  • 글자의 쓰기 방향은 외형이 아니라 그 의미에 관여하므로, 웹 개발자로서 되도록 CSS 속성 대신 dir 특성을 사용하세요. 관련 속성을 지원하지 않거나, CSS를 비활성화한 브라우저에서도 텍스트가 올바른 방향으로 나타납니다.

  • 데이터베이스에 저장된 사용자 입력 값처럼 방향성을 알 수 없는 데이터에는 auto 값을 사용해야 합니다.

명세

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>.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
dirChrome Full support YesEdge Full support 79Firefox 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

같이 보기

관련 주제
  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>
    101. <rp>
    102. <rt>
    103. <rtc>
    104. <ruby>
    105. <s>
    106. <samp>
    107. <script>
    108. <section>
    109. <select>
    110. <shadow>
    111. <slot>
    112. <small>
    113. <source>
    114. <spacer> [Translate]
    115. <span>
    116. <strike> [Translate]
    117. <strong>
    118. <style>
    119. <sub>
    120. <summary>
    121. <sup>
    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>
    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
    13. is
    14. itemid
    15. itemprop
    16. itemref
    17. itemscope
    18. itemtype [Translate]
    19. lang [Translate]
    20. part
    21. slot
    22. spellcheck
    23. style
    24. tabindex
    25. title
    26. translate
    27. x-ms-acceleratorkey [Translate]
    28. 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">
    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