구조(HTML) 변경 없이 순서 바꾸는 방법(order css)

HTML 구조 변경 없이 순서변경하는 방법

<div>
  <div class='first'>1</div>
  <div class='second'>2</div>
  <div class='third'>3</div>
</div>

현재 div태그에 3개의 자식요소가 있다
css를 이용해 2와 3의 위치를 변경해보자

div{
  width:50%;
  height:100px;
  border:1px solid black;
  display:flex;
}

div .first{
  background-color:red;
}

div .second{
  background-color:yellow;
  order:1;
}

div .third{
  background-color:green;
}

• 가장 먼저 부모요소가 display:flex속성을 가지고 있어야 한다
• 그럼 아래 자식요소는 flex item이 되고, order속성을 이용해 위치를 변경해주면 된다.

• 기본값은 0이고, 작은 값이 있는 요소부터 출력하게 된다. 값이 같다면 입력한 순서대로 출력한다.