CSS만으로 div 순서를 바꿀 수 있나요?⋆ Our Small Joy

>> CSS 목차 보기 <<

HTML에서 정해진 순서의 HTML요소들을(예: div) CSS만 사용해서 바꿀려고 한다. 이런 작업은 자바스크립트만 할 수 있다고 생각하기 쉽지만, 이제는 CSS도 가능하다. 일단 왜 이런 작업이 필요한지 궁금하실텐데, 다른 사람들이 제공하는 HTML 웹페이지를 자신 마음대로 수정할 수 있기 때문이다. 대표적인 예로, 크롬 확장앱인 stylebot 을 들 수 있다. 가끔 어떤 웹사이트들은 내용은 좋지만 가독성이 너무 안 좋은 경우가 있다. 글자체가 마음에 안 들수도 있고, 광고가 너무 지저분하게 떠다닐 수 있다. 또는 레이아웃(layout) 순서를 내 맘대로 바꾸고 싶을 수도 있다. 이럴 때 사용하는 앱이 stylebot인데, CSS를 이용하여 내 마음대로 홈페지를 뜯어 고칠 수가 있는 것이다. 물론 광고를 차단할 수도 있다. CSS를 공부하는 사람에겐 이만한 장난감이 없을 것이다.

그럼 이번 포스트에서 다루고자 하는 내용은, CSS만으로 정해진 요소들의 순서를 바꾸는 방법이다. 예를 들어 사진 – 제목 – 본문 순서를 제목 – 본문 – 사진 순으로 바꾸고자 하는 것이다.

위의 내용을 구현하기 위해 기본 골격을 만들어 보자. div 박스를 2개를 차례로 배열하자 (line 10, 11). 그리고 레드박스 CSS인 .box에 기본적인 색깔/글자정렬의 내용을 넣는다 (line2 – 7).

첫번째 DIV 입니다.

두번째 DIV 입니다.

코드:

1
2
3
4
5
6
7
8
9
10
11
12
<style>
  .box {
    background-color: rgb(200, 0, 0);
    border: 0.5px solid black;
    width: 200px;
    color: white; text-align: center;
  }
</style>
<div id=“content”>
  <div id=“first” class=“box”>첫번째 DIV 입니다.</div>
  <div id=“second” class=“box”>두번째 DIV 입니다.</div>
</div>
Colored by Color Scripter
cs

1. flex로 순서 바꾸기

정렬의 끝판왕 flex로 해결할 수 있다. 부모 요소 #content에 display: flex를 설정하고 방향을 column으로 설정한다 (line 8 – 11). 그리고 자식 요소들의 순서를 order: 번호로 설정(line 12 – 17)하면 끝!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
  .box {
    background-color: rgb(200, 0, 0);
    border: 0.5px solid black;
    width: 200px;
    color: white; text-align: center;
  }
  #content {
    display: flex;
    flex-direction: column;
  }
  #first {
    order: 2;
  }
  #second {
    order: 1;
  }
</style>
<div id=“content”>
  <div id=“first” class=“box”>첫번째 DIV 입니다.</div>
  <div id=“second” class=“box”>두번째 DIV 입니다.</div>
</div>
Colored by Color Scripter
cs

결과:

첫번째 DIV 입니다.

두번째 DIV 입니다.

2. CSS table로 순서 바꾸기

CSS table로 해결할 수 있는데, 참고로 table에는 HTML table과 CSS table이 있다. 부모 요소 #content에 display: table를 설정해준다 (line 8 – 10). 그리고 자식 요소 중에서 위에 위치하고 싶은 요소에 display: table-header-group으로 설정(line 12)하고, 밑으로 두고 싶은 요소에 display: table-footer-group으로 설정(line 15)해주면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
  .box {
    background-color: rgb(200, 0, 0);
    border: 0.5px solid black;
    width: 200px;
    color: white; text-align: center;
  }
  #content {
    display: table;
  }
  #first {
    display: table-footer-group;
  }
  #second {
    display: table-header-group;
  }
</style>
<div id=“content”>
  <div id=“first” class=“box”>첫번째 DIV 입니다.</div>
  <div id=“second” class=“box”>두번째 DIV 입니다.</div>
</div>
Colored by Color Scripter
cs