RTL 레이아웃의 논리적 속성
논리적 속성을 사용해 아랍어와 히브리어에 맞춰 자동으로 방향이 전환되는 양방향 레이아웃을 만듭니다.
RTL 레이아웃의 논리적 속성은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
HTML에서 RTL 설정하기
dir 속성과 이에 맞는 lang을 사용하여 HTML에서 RTL을 선언합니다.
<div dir="rtl" lang="ar" class="rtl-box">مرحبا بكم في تخطيط RTL</div>
CSS에서 rtl 방향 설정하기
CSS에서도 방향을 설정할 수 있으며, 테스트나 일부 RTL 영역에 유용합니다.
<div dir="rtl">هذا العنصر باتجاه RTL</div>
LTR/RTL 전환 테스트
간단한 테스트 방법은 dir="rtl"을 <html>에 추가하는 것입니다. 논리적 속성을 사용하면 레이아웃이 올바르게 좌우 반전되어야 합니다. 물리적 속성을 사용하면 수정해야 할 부분을 확인할 수 있습니다.
자동으로 적용되는 항목
dir="rtl"을 설정하면 다음 항목이 논리적 속성에 따라 자동으로 반전됩니다:
- 텍스트 정렬(start/end)
- 여백(inline-start/end)
- 테두리(inline-start/end)
- 플로트(inline-start/end)
- 위치 지정(inset-inline-start/end)
자동으로 적용되지 않는 항목
논리적 속성을 사용하더라도 RTL에서는 다음 항목을 확인해야 합니다:
- 방향성이 있는 콘텐츠가 포함된 배경 이미지
- 방향에 따라 의미가 달라지는 SVG 아이콘(화살표, 꺾쇠)
translateX()같은 변환 — 방향 플래그와 함께translateX(calc(-1 * var(--offset)))를 사용합니다- 명시적인 픽셀 값을 사용하는 절대 위치 지정
SVG 아이콘 좌우 반전
CSS는 RTL에서 방향성 아이콘을 뒤집는 깔끔한 방법을 제공합니다:
<div dir="rtl"><span class="icon-arrow"></span> Mirrored arrow in RTL</div>
방향을 인식하는 CSS 변수
방향에 따라 값을 바꾸는 CSS 변수 활용 방법입니다:
<div dir="rtl" class="drawer">Drawer</div>
실제 RTL 예제
논리적 속성을 사용하는 카드 컴포넌트입니다:
<div dir="rtl" class="card"><span class="card__icon">🔔</span><span class="card__text">تنبيه جديد</span></div>
font-size와 RTL
일부 아랍어 글꼴은 라틴 글꼴과 같은 픽셀 크기에서도 더 크게 또는 더 작게 보입니다. 필요한 경우 문자 체계별로 font-size를 정의합니다:
<p>Default text (16px)</p>
<p lang="ar">نص عربي (17px)</p>
테스트 도구
브라우저 DevTools에서는 양방향 레이아웃을 에뮬레이션할 수 있습니다. 또한 Chrome의 접근성 트리를 사용하여 스크린 리더의 읽기 순서가 시각적 순서가 아니라 논리적 순서를 따르는지 확인합니다.
실제 RTL 점검 목록
RTL 검토 목록:
- 모든 여백이 논리적 속성을 사용합니다
- 모든 테두리가 inline-start/end를 사용합니다
- 텍스트 정렬이 start/end를 사용합니다
- 방향성 아이콘을 scaleX(-1)로 뒤집습니다
- 필요한 경우 절대 위치에 inset-inline-*을 사용합니다
- 스크롤 가능한 컨테이너가 올바른 가장자리에서 스크롤됩니다
빠른 확인
RTL 레이아웃에서 방향성 SVG 화살표 아이콘을 좌우 반전하는 가장 간단한 CSS 변환은 무엇인가요?
복습
RTL 레이아웃을 위해 html 요소에 dir="rtl"을 설정합니다. 논리적 속성은 여백, 패딩, 테두리 및 정렬을 자동으로 적용합니다. 변환과 절대 위치 지정에 사용되는 물리적 픽셀 값은 여전히 RTL을 고려하여 수동으로 처리해야 합니다. 방향성 아이콘은 scaleX(-1)로 뒤집습니다. 루트 요소의 dir="rtl"을 전환하여 테스트합니다.
자주 묻는 질문
“RTL 레이아웃의 논리적 속성” 강의는 무료인가요?
네 — “RTL 레이아웃의 논리적 속성” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“RTL 레이아웃의 논리적 속성”에서 뭘 배우나요?
논리적 속성을 사용해 아랍어와 히브리어에 맞춰 자동으로 방향이 전환되는 양방향 레이아웃을 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
CSS Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“RTL 레이아웃의 논리적 속성” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 논리적 속성이 필요한 이유: 국제화
- 블록 및 인라인 방향
- 논리적 여백, 패딩 및 테두리
- RTL 레이아웃의 논리적 속성