flex order — HTML 순서 무시하고 시각 순서만 바꾸기 완전 정리

 

 

Web Development · Flexbox

flex order — 시각 순서만 변경, HTML은 그대로

자식별 order 값 · 작은 숫자가 먼저 · 0이 기본 · 음수도 가능

시작 오늘 분석할 코드

HTML에는 box1, box2, box3 순으로 적혀 있는데, 화면에는 box3 → box1 → box2 순으로 보인다. 비밀은 각 자식에 order 값을 줘서 시각 순서를 재정렬한 것.

#box1 { order: 2; } #box2 { order: 3; } #box3 { order: 1; } /* 작은 숫자가 먼저 → 화면 순서: box3(1) → box1(2) → box2(3) */

실제 출력 미리보기 — HTML은 1, 2, 3 순서

box1 (order:2)

box2 (order:3)

box3 (order:1)

용어 용어 정리

orderflex 자식의 시각 순서

기본값 0order를 명시 안 하면 0

작은 수가 먼저order 1 → 2 → 3 순서

음수 가능order: -1 → 맨 앞으로

같은 orderDOM 순서대로 정렬

DOM 순서HTML 작성 순서 (그대로 유지)

시각 순서화면에 보이는 순서 (재정렬)

접근성 위험스크린 리더는 DOM 순서대로

---

1 order 값 정렬 규칙

모든 flex 자식은 order 값을 정수로 갖는다(기본 0). 브라우저는 order 값을 오름차순으로 정렬해 그 순서대로 화면에 그린다. 같은 order 값끼리는 DOM 순서를 따른다.

[order: 2, 3, 1 → 화면 순서] 1. order:1 인 box3 부터 그림 ← 첫 번째 2. order:2 인 box1 3. order:3 인 box2 ← 마지막 [음수도 가능] #important { order: -1; } ← 항상 맨 앞으로

---

2 반응형에서 order의 진가

order의 진짜 강력함은 미디어쿼리와 결합할 때다. HTML은 한 벌 그대로 두고, 모바일과 데스크톱에서 콘텐츠 순서만 다르게 보여줄 수 있다.

/* 모바일: 본문이 위, 사이드바는 아래 */ .main { order: 1; } .sidebar { order: 2; } /* 데스크톱: 사이드바가 왼쪽 → 본문 오른쪽 */ @media (min-width: 1024px) { .sidebar { order: 1; } .main { order: 2; } }

※ HTML 작성 원칙

• 모바일에서 사용자가 가장 먼저 봐야 할 콘텐츠를 HTML 위에
• 나머지는 데스크톱에서 order로 재배치
• 스크린 리더는 모바일 의도와 일치하므로 접근성 안전

---

3 order의 함정 — 접근성과 키보드 탭

※ order는 시각 순서만 바꾼다. 스크린 리더, 키보드 탭(Tab/Shift+Tab), Ctrl+F 검색 등은 DOM 순서를 그대로 따른다. 화면에서는 box3가 맨 앞에 있는데 Tab을 누르면 box1로 가는 식이다.

해결책: 시각 순서가 의미상 더 자연스럽다면 HTML 자체를 그 순서로 작성하는 게 가장 안전하다. order는 정말 어쩔 수 없을 때만 (반응형에서 데스크톱·모바일 모두 자연스러운 순서가 다를 때).

---

 

반응형

 

4 자주 하는 실수

실수	증상	해결
order로 단순 재정렬	접근성·SEO 손해	HTML 순서 자체를 변경
같은 order 값 중복	DOM 순서가 두 번째 결정 기준 — 의도와 다를 수 있음	모든 자식에 다른 order 부여
order 음수와 0 혼용	예측 어려움	0 또는 양수만 사용 권장
flex가 아닌 부모에서 order	적용 안 됨	부모에 display:flex 또는 grid
탭 순서가 맞지 않음	키보드 사용자 혼란	tabindex로 보정 또는 DOM 변경

---

핵심 한 줄 요약

orderflex 자식의 시각 순서 정수

기본 0명시 안 하면 0

작은 수가 먼저오름차순 정렬

음수 가능맨 앞으로 보내기

반응형 강점미디어쿼리로 화면별 다른 순서

DOM과 시각 분리접근성·키보드 탭은 DOM 따름

권장HTML 자체가 의미 순서, order는 보완용

Tags

#flexbox #order #자식순서 #시각순서 #DOM순서 #음수order #미디어쿼리 #반응형 #접근성 #키보드탭 #CSS #HTML #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

flexbox, order, 자식순서, 시각순서, DOM순서, 음수order, 미디어쿼리, 반응형, 접근성, 키보드탭, CSS, HTML, 웹개발, 티스토리