BDI 태그를 사용한 양방향 텍스트 서식 지정 방법

소개

양방향 텍스트 (Bi-Directional Text, bidi) 는 텍스트가 왼쪽에서 오른쪽으로, 그리고 오른쪽에서 왼쪽으로 모두 쓰여지는 형식 스타일입니다. 여러 언어로 콘텐츠를 작성할 때, 그리고 사용자가 웹 페이지의 기본 언어가 아닌 다른 언어로 입력을 할 때 매우 유용합니다. 이러한 경우, <bdi> 태그를 사용하면 사용자 경험을 크게 향상시킬 수 있습니다.

이 Lab 에서는 HTML 에서 <bdi> 태그를 사용하여 양방향 텍스트를 격리하는 방법을 배우게 됩니다. 이 Lab 을 마치면 사용자 친화적이고 다국어 지원을 촉진하는 웹 콘텐츠를 만들 수 있게 됩니다.

참고: index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 을 작성하는 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

HTML 파일 구조 설정

HTML 파일의 기본 파일 구조를 설정해 보겠습니다. 선호하는 텍스트 편집기를 열고 새 파일을 생성하여 index.html 로 저장합니다.

<!doctype html>
<html>
  <head>
    <title>Bi-Directional Text Using HTML</title>
  </head>
  <body></body>
</html>

사용자 입력을 위한 폼 생성

다음으로, 모든 언어로 작성될 수 있는 사용자 피드백을 수집하기 위한 양식을 만들 것입니다. 이 양식은 이전 단계에서 생성한 body 태그에 추가됩니다. 이를 위해 다음 코드를 index.html 파일에 추가합니다.

<body>
  <h1>User Feedback Form</h1>

  <form>
    <label for="user-feedback">Enter your feedback here:</label>
    <br />
    <textarea name="user-feedback" id="user-feedback" rows="5"></textarea>
    <br />
    <button type="submit">Submit Feedback</button>
  </form>
</body>

위의 코드는 피드백 레이블, 피드백 입력 영역 및 제출 버튼을 포함하는 간단한 양식을 생성합니다.

양방향 텍스트에 태그 추가

사용자가 피드백에 입력하는 모든 양방향 언어가 웹 페이지에 올바르게 표시되도록 하려면 <bdi> 태그로 래핑해야 합니다. 아래 코드 블록은 <bdi> 태그를 사용하는 방법을 보여줍니다.

<body>
  <h1>User Feedback Form</h1>

  <form>
    <label for="user-feedback">Enter your feedback here:</label>
    <br />
    <textarea name="user-feedback" id="user-feedback" rows="5"></textarea>
    <br />
    <button type="submit">Submit Feedback</button>

    <div>
      <p>User Feedback:</p>

      <!-- Adding <bdi> Tag -->

      <p><bdi id="feedback-display"></bdi></p>
    </div>
  </form>
</body>

// Script to display user feedback
<script>
  const feedbackDisplay = document.getElementById("feedback-display");
  const feedbackInput = document.getElementById("user-feedback");

  // Handle Form Submit
  document.querySelector("form").addEventListener("submit", (event) => {
    event.preventDefault();
    feedbackDisplay.innerHTML = feedbackInput.value;
  });
</script>

위의 코드는 위에 제공된 <bdi>로 래핑된 사용자 피드백을 출력으로 표시하는 코드 블록을 포함합니다.

이제 <bdi> 태그에 의해 양방향 텍스트가 올바르게 격리되었으니 안심하십시오! 이제 양식을 테스트해 보겠습니다. 웹 브라우저에서 index.html 파일을 열고 피드백을 입력합니다. 이 피드백에는 여러 언어의 문자, 구두점 및 단어가 포함될 수 있습니다. 양식을 제출하면 피드백이 출력 영역에 표시되는 것을 확인할 수 있습니다.

ARIA 를 활용한 접근성 향상

웹 페이지의 접근성을 향상시키기 위해 ARIA 속성을 추가할 수 있습니다. ARIA 는 Accessible Rich Internet Applications 의 약자입니다. ARIA 속성은 시각 장애, 청각 장애, 이동 제한 등 다양한 장애를 가진 사용자의 접근성을 지원합니다.

<label for="user-feedback" aria-label="Enter your feedback"></label>

aria-label 속성을 사용하여 접근성을 높이기 위해 모든 HTML 요소에 텍스트 레이블을 첨부할 수 있습니다. 위의 코드 블록에서는 <label> 태그에 aria-label 을 첨부했습니다.

요약

이 랩에서는 HTML 에서 양방향 텍스트를 격리하기 위해 <bdi> 태그를 사용하는 방법을 배웠습니다. 다음은 이 랩의 주요 내용입니다.

양방향 텍스트 (bidi) 는 여러 언어로 작성된 텍스트의 서식을 지정하는 데 도움이 됩니다.
<bdi> 태그는 양방향 텍스트 서식을 위해 주변 환경에서 격리되어야 하는 텍스트 범위에 사용됩니다.
<bdi> 태그는 아랍어 및 히브리어를 포함한 다양한 언어에 유용합니다.
양방향 텍스트를 올바르게 표시하려면 먼저 <bdi> 태그로 래핑한 다음 CSS 를 사용하여 스타일을 지정합니다.
ARIA 속성을 추가하여 웹 페이지의 접근성을 향상시킬 수 있습니다.