CSS의 order 속성은 플렉스 컨테이너(display: flex) 안에서 각 플렉스 아이템이 배치되는 순서를 지정하는 데 사용됩니다. HTML 구조를 변경하지 않고도 화면에 표시되는 요소들의 순서를 자유롭게 조정할 수 있어 반응형 레이아웃 작업 시 매우 유용합니다.
order 속성의 기본 개념
order 속성은 정수 값을 받으며, 값이 작을수록 앞쪽에 배치됩니다. 기본값은 0이며, 음수 값도 사용할 수 있습니다. 여러 아이템이 같은 order 값을 가지면 HTML 문서에 작성된 순서대로 배치됩니다.
- 기본값: 0
- 적용 대상: 플렉스 컨테이너의 자식 요소(플렉스 아이템)
- 정렬 규칙: 오름차순으로 정렬 (작은 값 → 큰 값)
CSS order 속성 예제 코드
아래 예제에서는 8개의 퀴즈 항목(Q1~Q8)에 서로 다른 order 값을 부여하여, HTML 순서와 무관하게 화면에는 order 값 기준으로 재배치되도록 구현했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: orange;
align-content: space-between;
height: 150px;
width: 600px;
flex-wrap: wrap;
}
.mycontainer > div {
background-color: white;
text-align: center;
line-height: 40px;
font-size: 25px;
width: 100px;
margin: 5px;
}
</style>
</head>
<body>
<h1>Quiz</h1>
<div class = "mycontainer">
<div style = "order: 8">Q1</div>
<div style = "order: 6">Q2</div>
<div style = "order: 2">Q3</div>
<div style = "order: 1">Q4</div>
<div style = "order: 7">Q5</div>
<div style = "order: 4">Q6</div>
<div style = "order: 3">Q7</div>
<div style = "order: 5">Q8</div>
</div>
</body>
</html>
실행 결과 해석
위 코드를 실행하면 HTML에서 Q1이 가장 먼저 작성되었음에도 불구하고, order 값이 1로 가장 작은 Q4가 첫 번째로 표시됩니다. 이후 order 값이 2인 Q3, 3인 Q7 순으로 화면에 나타나며, 마지막에는 order 값이 8로 가장 큰 Q1이 배치됩니다.
즉, 실제 화면 출력 순서는 다음과 같습니다.
- Q4 (order: 1)
- Q3 (order: 2)
- Q7 (order: 3)
- Q6 (order: 4)
- Q8 (order: 5)
- Q2 (order: 6)
- Q5 (order: 7)
- Q1 (order: 8)
order 속성 활용 팁
- 반응형 레이아웃: 미디어 쿼리와 함께 사용하면 모바일과 데스크톱에서 요소 표시 순서를 다르게 설정할 수 있습니다.
- 접근성 주의: order는 시각적인 순서만 변경하므로, 스크린 리더나 키보드 탐색은 여전히 HTML 문서 순서를 따릅니다. 중요한 콘텐츠의 논리적 순서가 깨지지 않도록 주의해야 합니다.
- 음수 값 활용: 특정 아이템을 맨 앞으로 보내고 싶다면 order: -1처럼 음수 값을 사용하면 편리합니다.
이처럼 order 속성을 활용하면 HTML 마크업을 수정하지 않고도 플렉스 아이템의 배치 순서를 손쉽게 제어할 수 있습니다. 위 예제 코드를 직접 실행하며 다양한 order 값을 실험해 보세요.