MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

<bdi>

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

개요

HTML <bdi> 요소 (or Bi-Directional Isolation Element) 는 바깥 텍스트의 방향과 다르게 포맷될수 있는 일정 범위의 텍스트를 분리시킵니다.

이 요소는 포함된 텍스트의 방향을 알수 없을떄 내부의 텍스트의 방향이 고정되도록 하는데에 유용합니다.

CSS 규칙(unicode-bidi: isolate를 <span>이나 다른 텍스트 포맷 요소에 사용)을 사용해서 같은 시각적 효과를 이룰수도 있지만, 시멘틱 의미는 <bdi> 요소를 통해서만 전달됩니다. 특히, 브라우저가 CSS 스타일링을 무시할수도 있습니다. 이러한 경우, CSS 스타일링을 통해 시멘틱을 전달하는것은 쓸모없게 되고, HTML 요소를 사용하는것이 옳게 됩니다.

속성

다른 모든 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

같이 보기

문서 태그 및 공헌자

 이 페이지의 공헌자: azunyan3
 최종 변경: azunyan3,