CSS 태그 요소 순서 변경! order 사용 방법

만약 ul 태그 안에 5개의 li 태그가 있다고 가정해 봅시다. 이 태그의 순서를 HTML 수정 없이 사용자가 원하는대로 변경할 수 있다는 것을 알고 계십니까? 단지 CSS 조작 만으로 말입니다. 상당히 간단합니다. 우선 아래에 있는 예시를 살펴보시기 바랍니다.

 

미리보기

See the Pen CSS - order by rgy0409 (@rgy0409) on CodePen.

 

HTML 태그 구조를 보시면 아시겠지만 분명 li 요소 안에 1번부터 5번까지 차례대로 마크업 되어있습니다. 그렇다면 1,2,3,4,5 순으로 세로 배치가 되어야 하는데 숫자가 좀 이상하죠? 3,5,1,2,4 라고 순서가 뭔가 뒤죽박죽이 되었습니다. 그 이유는 바로 li 태그에 적용되어있는 order 라는 CSS 속성 때문입니다.

 

order 속성

li 태그에 적용된 order를 유심히 살펴보시면 아시겠지만 숫자가 작을수록 가장 우선순위가 높습니다. 즉 order: 1; 이 녀석이 가장 1등인 것입니다. order는 주문이라는 뜻입니다. 즉 첫번째 주문이라고 생각하시면 좀 더 기억하시는데 도움이 될 것 같군요.

 

이제 order라는 녀석을 알았으니 바로 여러분들도 테스트를 해보고 계실지도 모르겠군요. 그런데 희한하게 order를 사용했는데 왜인지 적용이 안 되고 있을 것입니다. 그렇습니다. order는 단독으로 사용할 수 없습니다. 반드시 적용시키고자 하는 부모 요소에 display: flex 또는 display: grid 속성이 적용되어 있어야만 합니다. 이건 필수입니다. 그렇기에 위의 예시에서도 ul에 display: flex가 적용되어 있는 것입니다. 혹시 flex 속성에 대해 궁금하시면 아래의 글을 정독해 주시기 바랍니다.

 

CSS3: 플렉시블 박스 레이아웃 (div flex 정렬) 사용법

CSS3: 플렉시블 박스 레이아웃 (div flex 정렬) 사용법

flex 속성은 요 근래에 레이아웃을 구성할 때 많이 쓰이는 정렬 방법 중 하나입니다. 굉장히 유용하고 편리하기 때문에 웹퍼블리싱을 하시는 분들이라면 반드시 알아두시는게 좋습니다.

 

order 캔슬

order 속성을 제거하기 위해서는 당연히 order 자체를 삭제하거나 주석처리 하는것이 당연히 최고지만 때로는 order 상태를 유지해야 하는 경우가 있을 수 있잖아요? 예를 들자면 미디어쿼리를 사용해서 특정 해상도에서는 order가 적용되어 있다가 다른 해상도에서는 해제해야 하는 그런 경우요. 그럴때는 order : none; 을 사용하면 됩니다. order: 0; 은 없는 속성입니다. 끝.