AAtomic CSS

direction

텍스트 방향을 설정합니다. drl은 왼쪽에서 오른쪽(기본값), drr은 오른쪽에서 왼쪽으로 텍스트를 배치하며, 아랍어나 히브리어 콘텐츠에 사용합니다.

클래스 목록

클래스CSS설명
drldirection: ltr왼쪽에서 오른쪽 (기본값)
drrdirection: rtl오른쪽에서 왼쪽 (아랍어, 히브리어)

시각적 비교

텍스트와 레이아웃 요소의 방향이 어떻게 달라지는지 비교합니다.

LTR (기본값) — drl

Hello World - 텍스트 방향 테스트

1st2nd3rd

텍스트와 요소가 왼쪽에서 오른쪽으로 배치

RTL — drr

Hello World - 텍스트 방향 테스트

1st2nd3rd

텍스트와 요소가 오른쪽에서 왼쪽으로 배치

클래스별 상세

drldirection: ltr

왼쪽에서 오른쪽(Left-to-Right) 방향으로 텍스트를 배치합니다. 한국어, 영어, 중국어 등 대부분의 언어에서 사용하는 기본값입니다.

<!-- 기본 LTR (대부분의 언어) -->
<div class="drl">
  왼쪽에서 오른쪽으로 읽는 텍스트입니다.
</div>

<!-- RTL 영역 안에서 LTR 복원 -->
<div class="drr">
  <p>محتوى عربي</p>
  <div class="drl">이 부분은 LTR로 복원됩니다</div>
</div>

drrdirection: rtl

오른쪽에서 왼쪽(Right-to-Left) 방향으로 텍스트를 배치합니다. 아랍어, 히브리어 콘텐츠에 사용하며, 텍스트 정렬과 flex/grid 배치 순서에도 영향을 줍니다.

<!-- RTL 텍스트 영역 -->
<div class="drr p2rem bg18181B br8px">
  <p>مرحبا بالعالم - أهلا وسهلا</p>
</div>

<!-- RTL 네비게이션 -->
<nav class="drr df gap2rem p16px">
  <a href="#">الرئيسية</a>
  <a href="#">حول</a>
  <a href="#">اتصل</a>
</nav>

레이아웃에 미치는 영향

drr은 텍스트뿐만 아니라 flex 아이템 순서, 스크롤 방향, margin/padding의 방향에도 영향을 줍니다. RTL 전체 레이아웃이 필요하면 <html dir="rtl">을 사용하세요.

팁 & 주의사항

HTML dir 속성 우선

전체 페이지의 방향을 변경할 때는 CSS보다 HTML의 dir="rtl" 속성을 사용하는 것이 권장됩니다. CSS는 부분적인 방향 전환에 사용하세요.

양방향 텍스트(Bidi)

한 페이지에 LTR과 RTL 텍스트가 혼재할 때는 각 섹션에 drl 또는 drr을 개별 적용하세요.

writing-modetext-align