HTML dir을 사용해 기본 텍스트 방향을 설정하고 CSS flex-direction: row-reverse를 사용해 flex 행의 흐름을 반전하세요. Mac에서 공개 페이지의 카드를 배치할 때는 먼저 텍스트 방향, 항목 순서, 정렬 중 무엇을 바꿔야 하는지 판단하세요.

이 가이드는 텍스트 편집기에서 페이지의 HTML과 CSS를 편집하고 데스크톱 브라우저에서 미리 본다고 가정합니다. 텍스트 동작과 문서 순서를 의도한 대로 유지하면서 Alpha, Beta, Gamma라는 중립적인 타일 세 개를 배치하는 작업입니다.

각 방향 설정은 실제로 무엇을 바꾸나요?

HTML의 dir 속성은 요소 텍스트의 기본 방향을 나타냅니다. 명시적인 값은 ltr와 rtl이며, auto는 브라우저가 콘텐츠를 바탕으로 방향을 판단하도록 합니다. WHATWG는 CSS 없이도 방향 정보가 유지되도록 작성자가 HTML로 텍스트 방향을 표현할 것을 권장합니다. HTML 표준: dir 속성.

CSS direction도 기본 텍스트 방향을 제어하고 레이아웃 동작에 관여합니다. 상속되므로 컨테이너에 direction: rtl을 설정하면 하위 요소에 영향을 줄 수 있습니다. MDN은 가능한 경우 HTML dir을 사용할 것을 권장합니다. CSS 방향 재정의는 상자를 옮기는 편리한 방법이 아니라, 텍스트 방향을 의도적으로 정하는 결정으로 다루세요. MDN: direction.

CSS flex-direction은 flex 컨테이너의 주축을 제어합니다. row은 현재 쓰기 모드의 인라인 축을 따르고, row-reverse는 주축의 시작과 끝 방향을 바꿉니다. 항목의 원본 순서는 유지하면서 배치되는 방향을 바꿉니다. W3C: Flex 흐름 방향.

이러한 메커니즘은 서로 영향을 줍니다. 가로 쓰기에서는 ltr flex 행이 왼쪽에서 시작하고, rtl flex 행은 오른쪽에서 시작합니다. row-reverse를 추가하면 어느 쪽이든 시작 방향이 반전됩니다. 따라서 row-reverse이 항상 첫 항목을 오른쪽에 표시한다는 뜻은 아닙니다. MDN: flex-direction.

의도한 결과에는 어떤 설정이 맞나요?

수정하기 전에 원하는 결과를 구체적으로 적어 보세요. “영어 레이블은 그대로 두고, 타일의 시각적 순서를 반전하며, 그룹은 오른쪽에 둔다.” 이 문장은 텍스트, 항목 흐름, 정렬에 관한 별도의 결정을 분명히 합니다.

의도한 결과 적절한 시작점 확인할 사항
콘텐츠의 기본 텍스트 방향 설정 HTML dir="ltr" 또는 dir="rtl" 해당 방향이 필요한 텍스트 범위에 적용합니다.
flex 행의 모든 항목 진행 방향 반전 flex-direction: row-reverse 먼저 컨테이너의 기존 방향을 확인합니다.
순서를 바꾸지 않고 행을 주축의 끝쪽으로 이동 justify-content: flex-end 정렬에 사용할 여유 공간이 있는지 확인합니다.
의미 있는 순서를 모든 곳에서 변경 소스 요소의 순서 재정렬 변경된 읽기 순서가 자연스러운지 확인합니다.
선택한 항목을 시각적으로 재배치 개별 order 값 시각적 순서와 소스 순서의 차이를 검토합니다.

반전과 정렬의 차이는 중요합니다. ltr 행에서는 justify-content: flex-end를 사용해 순서를 반전하지 않고도 Alpha, Beta, Gamma를 오른쪽에 모을 수 있습니다. 정렬은 주축의 여유 공간을 배분하며, flex-end는 flex 컨테이너의 주축 끝쪽을 가리킵니다. 유연한 항목이 그 공간을 차지하면 정렬 효과가 사라질 수 있습니다. MDN: justify-content.

독자가 특정 순서로 읽어야 하는 항목은 문서 자체에서 순서를 지정하세요. W3C는 잘못된 소스 순서를 보완하기 위해 flex 반전이나 order를 사용하지 말라고 명시적으로 주의를 줍니다. W3C: 순서와 방향.

페이지를 바꾸기 전에 네 가지 조합을 예측하세요

다음 비교는 문서화된 축 규칙에서 도출한 것입니다. writing-mode: horizontal-tb, 한 줄의 flex 레이아웃, 동일한 order 값, 그리고 소스 순서 Alpha, Beta, Gamma를 가정합니다. “왼쪽에서 오른쪽으로 보이는 순서”는 화면에서 타일이 물리적으로 배치되는 위치를 설명합니다.

컨테이너 방향 Flex 방향 첫 타일이 시작하는 위치 왼쪽에서 오른쪽으로 보이는 순서
ltr row 왼쪽 Alpha, Beta, Gamma
ltr row-reverse 오른쪽 Gamma, Beta, Alpha
rtl row 오른쪽 Gamma, Beta, Alpha
rtl row-reverse 왼쪽 Alpha, Beta, Gamma

두 번째와 세 번째 행은 콘텐츠가 단순한 직사각형일 때 비슷해 보일 수 있습니다. 하지만 텍스트 방향 설정은 서로 다릅니다. 네 번째 조합은 흔히 생기는 의문을 설명합니다. rtl과 row-reverse를 함께 적용하면 항목이 왼쪽에서 오른쪽으로 진행합니다. MDN은 방향에 따라 달라지는 이 동작을 설명합니다. MDN: flex-direction.

기본 텍스트 방향은 문장 부호와 방향이 있는 텍스트 구간의 순서에도 영향을 줍니다. rtl을 설정해도 영어 단어의 모든 글자가 단순히 뒤집히지는 않습니다. 레이블 자체는 알아볼 수 있어도 문장 부호가 예상치 못한 위치에 나타날 수 있습니다. 따라서 일반적인 타일은 상자 배치를 살펴보는 데는 유용하지만 텍스트 동작을 평가하기에는 충분하지 않습니다. MDN: dir 사용 참고 사항.

Mac에서 완전한 비교 페이지를 사용해 보세요

다음 완전한 문서를 일반 텍스트 편집기에서 direction-demo.html로 저장한 뒤 브라우저에서 파일을 여세요. 외부 의존성 없이 임의의 레이블과 CSS 직사각형을 사용합니다. 예상 결과는 문서화된 규칙에 따른 것이며, 브라우저에서 테스트한 결과로 제시하는 것은 아닙니다.

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Direction and flex comparison</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      margin: 24px;
      color: #202020;
      background: #fff;
    }
    .row {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      writing-mode: horizontal-tb;
      justify-content: flex-start;
      gap: 12px;
      max-width: 448px;
      padding: 12px;
      border: 1px solid #777;
      margin-bottom: 20px;
    }
    .reverse { flex-direction: row-reverse; }
    .tile {
      flex: 0 0 64px;
      padding: 16px 0;
      text-align: center;
      background: #e2ecf4;
    }
  </style>
</head>
<body>
  <h1>Direction and flex comparison</h1>
  <p>LTR with row</p>
  <div class="row" dir="ltr">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
  <p>LTR with row-reverse</p>
  <div class="row reverse" dir="ltr">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
  <p>RTL with row</p>
  <div class="row" dir="rtl">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
  <p>RTL with row-reverse</p>
  <div class="row reverse" dir="rtl">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
</body>
</html>

네 행을 예측 표와 비교하세요. 네 행 모두 소스 순서는 같습니다. 컨테이너 방향과 반전 클래스만 다릅니다. 명시적인 가로 쓰기 모드를 지정해 일반적인 데스크톱 가로 레이아웃에 초점을 맞춥니다.

다음으로 justify-content: flex-start만 justify-content: flex-end로 바꾸고 저장한 다음 새로고침하세요. 각 행의 항목 진행 방향은 유지한 채 그룹이 반대쪽 주축 끝으로 이동해야 합니다. 텍스트 방향 설정을 추가하지 않고 배치와 반전을 분리해 확인할 수 있습니다. MDN: justify-content.

마지막으로 정렬 설정을 원래대로 되돌리고 각 행의 Alpha 뒤에 마침표를 추가하세요. 타일 위치뿐 아니라 문장 부호도 비교합니다. 이는 텍스트 방향을 살펴보는 예시이지, 일반적인 영어 레이블에 rtl을 지정하라는 권고가 아닙니다. MDN의 기본 방향 설명은 경계에 놓인 문장 부호를 별도로 확인해야 하는 이유를 설명합니다. MDN: dir.

실제 레이아웃에서 예상치 못한 결과를 진단하세요

부모가 flex 컨테이너인지 확인하세요

타일을 포함하는 요소를 확인하세요. flex-direction는 해당 요소의 display이 flex 또는 inline-flex일 때 적용됩니다. 일반 블록 컨테이너에 선언해도 flex 레이아웃이 만들어지지 않습니다. 현재 브라우저 너비에서 나중에 선언된 규칙이 실제 값을 바꾸는지도 확인하세요. MDN: flex-direction 설명.

반전을 추가하기 전에 상속된 방향을 확인하세요

컨테이너와 상위 요소에 dir이 있는지 확인한 다음 CSS direction 선언도 살펴보세요. dir을 생략하면 일반적으로 부모의 방향이 상속됩니다. 생략한다고 자동 감지가 요청되는 것은 아닙니다. 소스 순서의 첫 항목이 예상치 못하게 오른쪽에서 시작한다면 상속된 방향이 원인일 수 있습니다. MDN: dir 상속.

레이아웃 전환 용도로 dir="auto"를 사용하지 마세요. WHATWG는 이 속성을 콘텐츠를 바탕으로 방향을 감지하는 방식으로 정의합니다. 주로 처음 나오는 강한 방향성 문자를 사용하며, 방향을 실제로 알 수 없는 텍스트에만 사용하도록 권장합니다. 레이아웃 요구 사항이 어떤 레이블이 먼저 나오는지에 좌우되어서는 안 됩니다. HTML 표준: dir 속성.

항목 반전과 행 반전을 구분하세요

창을 좁힌 뒤에만 문제가 나타난다면 줄바꿈을 확인하세요. row-reverse은 주축의 진행 방향을 바꾸고, wrap-reverse는 flex 행이 쌓이는 방향을 바꿉니다. 기본값인 nowrap은 한 줄을 유지하며 넘침을 허용할 수 있습니다. 둘은 별개의 제어이므로 처음의 데스크톱 너비와 좁은 창에서 모두 테스트하세요. MDN: flex-wrap.

개별 순서 지정 규칙을 확인하세요

타일에 order 값이 지정되어 있는지 확인하세요. Flex 레이아웃은 항목을 해당 정수에 따라 묶고, 값이 같은 그룹 안에서는 소스 순서를 유지합니다. 반전을 적용하면 이렇게 만들어진 순서가 배치되는 방향이 바뀝니다. 컨테이너 방향이 잘못됐다고 결론 내리기 전에 예상치 못한 항목별 순서 지정부터 초기화하세요. MDN: Flex 항목 순서 지정.

변경을 유지하기 전에 읽기 순서를 확인하세요

중립적인 장식용 타일이라면 시각적 반전만으로 요구 사항을 충족할 수 있습니다. 링크나 컨트롤이라면 소스의 순서를 살펴보고 키보드 포커스가 컴포넌트를 이동하는 순서를 따라가 보세요. Flex 반전 자체는 순차 탐색 순서나 음성으로 읽는 순서를 바꾸지 않습니다. 따라서 시각적으로 반전된 그룹에서도 상호작용 순서는 원래대로일 수 있습니다. W3C: Flex 흐름 방향.

이 점을 확인해 소스를 바꿔야 하는지 결정하세요. Gamma, Beta, Alpha가 의도한 의미 순서라면 요소를 그 순서로 배치하세요. Alpha, Beta, Gamma가 올바른 읽기 순서이고 표현 방식만 반전해야 한다면, 그 구분을 염두에 두고 시각적 배치를 평가하세요. MDN은 포커스 가능한 링크를 사용해 소스 순서가 유지되는 동작을 보여 줍니다. MDN: Flex 항목 순서 지정.

요구 사항에 맞는 메커니즘을 선택하세요. 기본 텍스트 방향에는 HTML dir, flex 축의 흐름에는 flex-direction, 순서를 유지한 채 위치를 조정할 때는 정렬을 사용합니다. 결과를 유지하기 전에 타일 배치, 문장 부호, 줄바꿈, 소스 순서를 각각 비교하세요. 이를 통해 단순히 반전되어 보이는 레이아웃을 일관된 방식으로 해결할 수 있습니다.

출처