order 속성과 시각적 순서 변경

order 속성은 DOM 구조를 변경하지 않고 플렉스 항목과 그리드 항목의 시각적 순서를 변경합니다. 기본값은 0이며, 값이 클수록 뒤에 표시되고 음수 값은 앞에 표시됩니다.

항목은 order 값이 낮은 것부터 높은 순서로 표시됩니다. order 값이 같은 항목은 DOM 순서로 표시됩니다.

음수 값을 사용하면 항목을 모든 기본값(order:0) 항목보다 앞으로 이동할 수 있습니다:

HTML을 변경하지 않고 다양한 중단점에서 시각적 순서를 변경합니다:

order는 시각적 순서만 변경합니다. 화면 읽기 프로그램과 키보드 탐색은 시각적 순서가 아니라 DOM 순서를 따릅니다. DOM을 논리적인 읽기 순서로 유지하면서 시각적 순서를 재배치하는 것은 접근성에 매우 중요합니다.

order로 항목을 시각적으로 재정렬하면 키보드 Tab 포커스는 DOM 순서를 따르므로 시각적 순서와 다를 수 있습니다. 이로 인해 키보드 사용자의 탐색이 혼란스러워집니다. 논리적인 순서를 깨뜨리지 않는 경우에만 시각적 재정렬을 사용하십시오.

다음과 같은 경우에는 시각적 재정렬을 사용해도 됩니다:

• 항목이 탐색 가능한 순서의 일부가 아닌 경우(장식 목적의 순서)
• 코드 구성을 위해 소스 순서와 달라졌지만 시각적 순서가 자연스러운 읽기 흐름과 일치하는 경우

order 속성은 플렉스박스와 CSS 그리드에서 동일하게 작동합니다. DOM이 아니라 레이아웃 알고리즘 내의 순서를 제어합니다.

항목이 새 줄로 줄바꿈되면 order가 각 항목이 어느 줄에 표시될지와 해당 줄 안에서의 순서를 결정합니다.

모든 항목의 순서를 뒤집으려면 각 항목에 음수 order 값을 설정하는 대신 flex-direction: row-reverse 또는 column-reverse를 사용하십시오. 이 방법이 의미론적으로 더 적절하고 간단합니다.

CSS에서는 order 변경을 애니메이션으로 만들 수 없습니다. 애니메이션으로 순서를 변경해야 한다면 변환 또는 Flip.js나 GSAP의 Flip 플러그인과 같은 JavaScript 기반 애니메이션을 사용하십시오.

order는 HTML을 수정하지 않고 플렉스/그리드 항목의 시각적 위치를 변경합니다. 기본값은 0이며, 값이 낮을수록 앞에 표시되고 높을수록 뒤에 표시됩니다. DOM 구조를 변경하지 않고 반응형 순서를 변경할 때 사용하십시오. order로 순서를 변경할 때는 키보드 탐색 순서와 화면 낭독기 순서가 논리적으로 유지되는지 항상 확인하십시오.