HTML Academy · 강의

오른쪽에서 왼쪽 텍스트를 위한 dir=rtl

아랍어, 히브리어 및 기타 RTL 언어의 레이아웃 활성화하기

오른쪽에서 왼쪽 텍스트를 위한 dir=rtl은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

dir 특성이 하는 일

dir 특성은 요소의 기본 텍스트 방향을 선언합니다. dir="ltr"은 왼쪽에서 오른쪽으로 흐르는 방향이며 대부분 언어의 기본값이고, dir="rtl"은 오른쪽에서 왼쪽으로 흐르는 방향으로 아랍어, 히브리어, 페르시아어, 우르두어에 사용됩니다.

사이트 전체 RTL을 위해 html에 설정하기

아랍어, 히브리어, 페르시아어, 우르두어 사이트에서는 루트 요소에 dir="rtl"을 설정하십시오. 이렇게 하면 모든 블록의 기본 흐름이 뒤집힙니다. 텍스트가 오른쪽에 정렬되고, 목록 들여쓰기가 오른쪽에 적용되며, 스크롤 막대가 왼쪽으로 이동하고, 최신 CSS에서는 레이아웃이 자동으로 반전됩니다.

<html lang="ar" dir="rtl">
<head>...</head>
<body>...</body>
</html>

양방향 텍스트

영어 브랜드 이름이 포함된 아랍어처럼 방향이 섞인 텍스트에는 유니코드 양방향 알고리즘이 자동으로 적용됩니다. dir에서 정해지는 기본 방향은 줄 수준에서 단방향 구간을 배열하는 방식을 제어하고, 개별 문자 구간은 각 스크립트의 자연스러운 방향으로 흐릅니다.

CSS 논리적 속성

최신 CSS는 방향에 맞게 조정되는 논리적 속성을 사용합니다. margin-inline-start는 LTR에서 왼쪽, RTL에서 오른쪽을 의미하고, padding-inline-end와 border-inline-start도 같은 방식으로 방향에 따라 적용됩니다. 왼쪽/오른쪽을 시작/끝으로 바꾸면 하나의 스타일시트로 두 방향을 모두 지원할 수 있습니다.

/* Works in both directions */
.card {
  padding-inline-start: 16px;
  margin-block-end: 12px;
  border-inline-end: 1px solid #ccc;
}

Flexbox와 Grid는 자동으로 조정됩니다

Flexbox의 행 방향은 dir을 따릅니다. RTL에서는 항목이 오른쪽에서 왼쪽으로 흐릅니다. Grid 템플릿 열도 반대 방향으로 바뀝니다. 따라서 Flexbox나 Grid로 작성한 대부분의 레이아웃은 방향별 CSS 없이도 RTL에서 작동합니다. 최신 레이아웃은 방향에 종속되지 않습니다.

뒤집어야 하는 아이콘

방향을 나타내는 아이콘(뒤로 가기 화살표, 다음 화살표, 실행 취소/다시 실행)은 RTL에서 뒤집어야 합니다. [dir="rtl"] 안에서 CSS transform: scaleX(-1)을 사용하거나 RTL용 SVG 변형을 별도로 제공하십시오. 검색, 설정, 기어처럼 방향과 무관한 아이콘은 그대로 둡니다.

[dir="rtl"] .icon-back {
  transform: scaleX(-1);
}

텍스트 정렬

text-align: left보다 text-align: start를 우선 사용하십시오. start는 LTR에서 왼쪽, RTL에서 오른쪽으로 해석됩니다. end도 같은 방식으로 작동합니다. 방향을 인식하는 정렬을 사용하면 RTL 지원을 추가할 때 발생하는 한 종류의 오류를 없앨 수 있습니다.

요소별 dir 재정의

요소에 dir="auto"를 설정하면 브라우저가 처음으로 나타나는 강한 방향성을 가진 문자를 기준으로 방향을 감지합니다. <p dir="auto">{user.name}</p>처럼 작성하면 아랍어, 영어 또는 혼합된 언어일 수 있는 사용자가 제출한 이름을 별도로 처리하지 않아도 됩니다.

Bidi 삽입

bdi(양방향 격리) 요소와 bdo(양방향 재정의) 요소는 bidi 알고리즘이 특정 텍스트를 처리하는 방식을 세밀하게 제어합니다. 사용자의 입력을 그대로 재현하거나 흐르는 텍스트 안의 코드 조각에 특정 방향을 강제할 때 유용합니다.

양식 필드

입력 요소는 부모 요소에서 dir을 상속합니다. 방향이 달라질 수 있는 사용자가 제공한 텍스트(다국어 사용자가 있는 채팅 앱 등)에는 개별 입력 요소에 dir="auto"를 설정하십시오. 그러면 각 입력 요소가 콘텐츠에 맞는 방향으로 표시됩니다.

RTL 레이아웃 테스트하기

브라우저에서는 DevTools 콘솔에서 document.documentElement.dir = "rtl"을 임시로 설정해 RTL을 미리 볼 수 있습니다. 아이콘 방향, 안쪽 여백/바깥 여백, 스크롤 막대 위치를 확인하고, 시작/끝을 사용해야 하는 곳에 왼쪽/오른쪽을 하드코딩한 요소가 없는지 살펴보십시오.

CSS 방향과 레이아웃 방향의 차이

CSS의 direction 속성과 HTML의 dir 특성은 대부분의 레이아웃에서 같은 효과를 냅니다. 보조 기술, 메일 발송 시스템 및 다른 소비자도 HTML 특성을 읽지만 CSS 속성은 브라우저의 렌더링에만 영향을 주므로 HTML 특성을 우선 사용하십시오.

지식 확인

RTL 언어를 지원할 때 margin-left보다 margin-inline-start 같은 CSS 논리적 속성을 선호하는 이유는 무엇인가요?

요약

<html>에 dir="rtl"을 설정하면 아랍어/히브리어/페르시아어/우르두어 사이트의 기본 방향이 뒤집힙니다. CSS 논리적 속성(margin-inline-start, padding-block-end)은 자동으로 방향에 맞게 조정됩니다. Flexbox와 Grid 레이아웃은 변경 없이 반전됩니다. 방향을 나타내는 아이콘은 뒤집고, text-align에는 start/end를 사용하며, 방향을 알 수 없는 사용자 콘텐츠에는 dir="auto"를 사용하십시오.

자주 묻는 질문

“오른쪽에서 왼쪽 텍스트를 위한 dir=rtl” 강의는 무료인가요?

네 — “오른쪽에서 왼쪽 텍스트를 위한 dir=rtl” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“오른쪽에서 왼쪽 텍스트를 위한 dir=rtl”에서 뭘 배우나요?

아랍어, 히브리어 및 기타 RTL 언어의 레이아웃 활성화하기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“오른쪽에서 왼쪽 텍스트를 위한 dir=rtl” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← HTML Academy(으)로 돌아가기