HTML DOM의 Style order 속성은 HTML 문서에서 동일한 컨테이너 안에 있는 다른 플렉스 아이템들과 비교하여, 특정 플렉스 아이템의 표시 순서를 조회하거나 수정하는 데 사용됩니다.
이 속성을 활용하면 HTML 마크업 구조를 변경하지 않고도 자바스크립트만으로 화면에 나타나는 요소들의 배치 순서를 동적으로 제어할 수 있습니다.
문법(Syntax)
order 속성의 기본 문법은 다음과 같습니다.
1. order 값 조회하기
object.order
2. order 값 설정하기
object.order = "value"
사용 가능한 값
value 자리에는 아래 표에 정리된 값들을 사용할 수 있습니다.
| 값 | 설명 |
|---|---|
| initial | 해당 속성 값을 기본값(default)으로 되돌립니다. |
| inherit | 부모 요소로부터 이 속성 값을 상속받습니다. |
| number | 플렉스 아이템의 표시 순서를 지정하는 숫자입니다. 값이 작을수록 앞쪽에 배치됩니다. |
예제(Example)
다음 예제는 버튼을 클릭하면 흰색 테두리가 있는 플렉스 컨테이너 안의 박스 3개의 순서를 변경하는 코드입니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.container {
border: 3px solid #fff;
margin: 1rem auto;
display: flex;
padding: 2rem;
}
.box {
width: 100px;
height: 100px;
}
</style>
<body>
<h1 style="text-align:center">DOM Style order Property Demo</h1>
<div class="container">
<div class="box" id="b1" style="background-color:#7F055F;"></div>
<div class="box" id="b2" style="background-color:#3A015C;"></div>
<div class="box" id="b3" style="background-color:#177E89;"></div>
</div>
<button onclick="set()" class="btn">Change order</button>
<script>
function set() {
document.querySelector('#b1').style.order = "3";
document.querySelector('#b2').style.order = "2";
document.querySelector('#b3').style.order = "1";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 보라색, 진보라색, 청록색 박스 3개가 순서대로 배치된 것을 확인할 수 있습니다. 이제 “Change order” 버튼을 클릭해 보세요.
버튼을 클릭하면 자바스크립트의 set() 함수가 실행되어 각 박스의 style.order 값이 b1 → 3, b2 → 2, b3 → 1로 변경됩니다. 그 결과 흰색 테두리 컨테이너 안에서 박스들이 역순으로 재배치되는 것을 확인할 수 있습니다.
정리
HTML DOM Style order 속성은 CSS Flexbox 레이아웃에서 요소의 시각적 순서를 자바스크립트로 제어할 수 있는 강력한 도구입니다. 반응형 웹이나 동적인 UI를 구현할 때 DOM 구조를 건드리지 않고도 아이템 배치 순서를 유연하게 바꿀 수 있다는 점에서 매우 유용합니다.