order
order CSS 속성은 플렉스 또는 그리드 컨테이너 안에서 현재 요소의 배치 순서를 지정합니다. 컨테이너 아이템의 정렬 순서는 오름차순 order 값이고, 같은 값일 경우 소스 코드의 순서대로 정렬됩니다.
시도해보기
구문
/* <integer> 값 */
order: 5;
order: -5;
/* 전역 값 */
order: inherit;
order: initial;
order: unset;
참고: order 속성은 논리적인 순서나 탭 순서와는 전혀 상관 없이 화면에 보이는 순서에만 영향을 줍니다. 따라서 비시각적 매체에 적용해선 안됩니다.
값
<integer>-
아이템의 순서.
형식 구문
order =
<integer>
예제
<header>...</header>
<main>
<article>Article</article>
<nav>Nav</nav>
<aside>Aside</aside>
</main>
<footer>...</footer>
위와 같은 기본적인 HTML에서, 다음 CSS 코드는 콘텐츠 블록을 감싸는, 고전적인 양쪽 사이드바 레이아웃을 만듭니다. Flexible Box Layout 모듈이 자동으로 모든 블록의 높이를 동일하게 하며 가능한 가로축 공간을 모두 분배합니다.
main { display: flex; text-align:center; }
main > article { flex:1; order: 2; }
main > nav { width: 200px; order: 1; }
main > aside { width: 200px; order: 3; }
결과
접근성 고려사항
order 속성을 사용하면 실제 DOM 순서와 화면에 보여지는 콘텐츠의 순서가 서로 연결되지 않습니다. 이는 낮은 시각으로 스크린 리더 등 보조 기술을 사용해 이동하는 사용자의 경험에 부정적인 영향을 줄 수 있습니다. 시각적 순서(CSS)가 중요하더라도 스크린 리더 사용자는 제대로 된 읽기 순서를 알 수 없습니다.
명세
| Specification |
|---|
| CSS Display Module Level 3 # order-property |
브라우저 호환성
BCD tables only load in the browser
같이 보기
- CSS 플렉스박스 안내서: 플렉스박스의 기본 개념
- CSS 플렉스박스 안내서: 플렉스 아이템의 순서 정하기 (en-US)
- CSS 그리드 안내서: CSS 그리드 레이아웃과 접근성 (en-US)