AAtomic CSS

order

플렉스/그리드 아이템의 시각적 순서를 DOM 순서와 다르게 변경합니다. HTML 구조를 바꾸지 않고도 요소의 배치 순서를 제어할 수 있습니다.

클래스 목록

클래스CSS설명
order1order: 1기본 순서(0)보다 뒤로 배치
order2order: 2order1보다 뒤에 배치
order3order: 3order2보다 뒤에 배치
neg-order1order: -1기본 순서보다 앞으로 배치

시각적 비교

order 값에 따라 아이템의 시각적 배치가 어떻게 변하는지 비교합니다.

기본 순서 (order 없음) — DOM 순서대로 배치

Item A (DOM 1)Item B (DOM 2)Item C (DOM 3)

모든 아이템의 기본 order는 0이므로 DOM 순서대로 표시됩니다

order 값으로 순서 변경 — A를 마지막으로

Item A (order3)Item B (order1)Item C (order2)

시각적 순서: B → C → A. DOM 순서는 변하지 않음

neg-order1로 맨 앞으로 이동

Item AItem BItem C (neg-order1)

Item C가 order: -1로 다른 아이템(order: 0)보다 앞에 배치됩니다

접근성 주의사항

시각적 순서 ≠ DOM 순서 ≠ 탭 순서

order는 시각적 배치만 변경합니다. 키보드 탭 순서와 스크린리더 읽기 순서는 여전히 DOM 순서를 따릅니다.

시각적 순서와 탭 순서가 다르면 키보드 사용자에게 혼란을 줄 수 있습니다. 가능하면 DOM 순서 자체를 변경하는 것이 좋습니다.

구분순서 기준order 영향
시각적 배치order 값영향 받음
키보드 탭 순서DOM 순서영향 없음
스크린리더 읽기 순서DOM 순서영향 없음
JavaScript DOM APIDOM 순서영향 없음

클래스별 상세

order1order: 1

기본 order(0)보다 뒤로 배치됩니다. 특정 아이템을 뒤로 밀 때 사용합니다.

<!-- 특정 아이템을 뒤로 -->
<div class="df gap8px">
  <span class="order1">Item A (뒤로)</span>
  <span>Item B (기본 order: 0)</span>
  <span>Item C (기본 order: 0)</span>
</div>
<!-- 결과: B → C → A -->

order2order: 2

order1보다 더 뒤에 배치됩니다. 여러 단계의 순서 제어가 필요할 때 사용합니다.

<!-- 다단계 순서 제어 -->
<div class="df gap8px">
  <span class="order2">Item A (2순위)</span>
  <span class="order1">Item B (1순위)</span>
  <span>Item C (기본 0)</span>
</div>
<!-- 결과: C → B → A -->

order3order: 3

3단계 뒤로 배치됩니다. 복잡한 순서 재배치가 필요할 때 사용합니다.

<!-- 3단계 순서 -->
<div class="df gap8px">
  <span class="order3">Item A (3순위)</span>
  <span class="order1">Item B (1순위)</span>
  <span class="order2">Item C (2순위)</span>
</div>
<!-- 결과: B → C → A (원래 순서가 역전됨) -->

neg-order1order: -1

다른 모든 아이템(기본 order: 0)보다 앞에 배치됩니다. 특정 아이템을 맨 앞으로 끌어올릴 때 가장 유용합니다.

<!-- 맨 앞으로 끌어올리기 -->
<div class="df gap8px">
  <span>Item A</span>
  <span>Item B</span>
  <span class="neg-order1">Item C (맨 앞으로!)</span>
</div>
<!-- 결과: C → A → B -->

<!-- 반응형: 모바일에서 메인 콘텐츠 먼저 -->
<div class="df fdc">
  <aside>사이드바</aside>
  <main class="sm-neg-order1">메인 (모바일에서 먼저)</main>
</div>

반응형 순서 변경

미디어 쿼리 프리픽스와 조합하면 화면 크기에 따라 순서를 변경할 수 있습니다.

<!-- 데스크탑: A-B-C / 모바일: C-A-B -->
<div class="df fdc sm-fdc gap16px">
  <div>Item A</div>
  <div>Item B</div>
  <div class="sm-neg-order1">Item C (모바일에서 맨 위)</div>
</div>

<!-- 사이드바: 데스크탑은 왼쪽, 모바일은 아래 -->
<div class="df sm-fdc gap2rem">
  <aside class="fs0 w25rem sm-order1">사이드바</aside>
  <main class="fg1">메인 콘텐츠</main>
</div>
클래스 조합동작
sm-order1768px 이하에서 뒤로 배치
sm-neg-order1768px 이하에서 맨 앞으로
md-order21024px 이하에서 두 번째 뒤로
order1 sm-order3기본 1순위 → 모바일에서 3순위

팁 & 주의사항

꼭 필요할 때만 사용하세요

order를 남용하면 시각적 순서와 DOM 순서의 불일치로 접근성 문제가 생깁니다. 가능하면 HTML 자체의 순서를 변경하는 것이 우선입니다.

neg-order1은 "맨 앞으로" 패턴

neg-order1은 order: -1로, 기본값(0)인 다른 아이템들보다 항상 앞에 옵니다. 반응형에서 특정 요소를 모바일에서 먼저 보여줄 때 유용합니다.

flex와 grid 모두에서 동작

order는 df(flex)와 dg(grid) 컨테이너 안에서 모두 동작합니다. 일반 블록 요소에는 효과가 없습니다.

반응형 레이아웃 재배치에 적합

데스크탑에서는 사이드바가 왼쪽, 모바일에서는 메인 콘텐츠가 먼저 오도록 sm-neg-order1 등으로 순서를 바꿀 수 있습니다.

flex-directiondisplayz-indexflex-growflex-shrink