현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.
개요
HTML <bdi> 요소 (or Bi-Directional Isolation Element) 는 바깥 텍스트의 방향과 다르게 포맷될수 있는 일정 범위의 텍스트를 분리시킵니다.
이 요소는 포함된 텍스트의 방향을 알수 없을떄 내부의 텍스트의 방향이 고정되도록 하는데에 유용합니다.
CSS 규칙(unicode-bidi: isolate를 <span>이나 다른 텍스트 포맷 요소에 사용)을 사용해서 같은 시각적 효과를 이룰수도 있지만, 시멘틱 의미는 <bdi> 요소를 통해서만 전달됩니다. 특히, 브라우저가 CSS 스타일링을 무시할수도 있습니다. 이러한 경우, CSS 스타일링을 통해 시멘틱을 전달하는것은 쓸모없게 되고, HTML 요소를 사용하는것이 옳게 됩니다.
- 컨텐츠 범주 플로우 컨텐츠, 구문 컨텐츠, palpable 컨텐츠.
- 허용된 컨텐츠구문 컨텐츠..
- 태그 생략 None, both the starting and ending tag are mandatory.
- 허용된 부모 요소구문 컨텐츠를 허용하는 모든 요소.
- DOM 인터페이스
HTMLElement
속성
다른 모든 HTML 요소들처럼 이 요소도 전역 속성을 포함하지만, 약간의 시멘틱 차이가 있습니다: dir 속성은 상속받지 않습니다. 이 속성이 설정되어있지 않으면, 기본값은 auto이며, 요소의 내용에 기반하여 브라우저가 방향을 결정합니다.
예제
<p dir="ltr">This arabic word <bdi>ARABIC_PLACEHOLDER</bdi> is automatically displayed right-to-left.</p>
결과
This arabic word REDLOHECALP_CIBARA is automatically displayed right-to-left.
사양
| 사양 | 상태 | 주석 |
|---|---|---|
| WHATWG HTML Living Standard The definition of '<bdi>' in that specification. |
Living Standard | |
| HTML5 The definition of '<bdi>' in that specification. |
Recommendation |
브라우저 호환성
| 기능 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 16 | 10.0 (10.0) | Not supported | Not supported | Not supported |
| 기능 | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | Not supported | 10.0 (10.0) | Not supported | Not supported | Not supported |
같이 보기
- 관련된 HTML 요소:
<bdo> - 관련된 HTML 속성:
direction,unicode-bidi