CSS3 - display:box 에 대해 공부해 보자.

안녕하세요. 키다리디자이너입니다.

 

오늘은 CSS의 display 속성 중 box라는 속성에 대해 알아보겠습니다.

 

코딩을 나름 오래하신 분들조차 의외로 이 속성은 잘 모르고 안쓰시는데 그럴 법도 한 게 예전에는 이 속성을 제대로 지원한 브라우저가 많이 없었기도 했고 굳이 이것을 사용하지 않아도 코딩하는데 어려움을 느끼지 않았기 때문입니다.

그러나 이제는 많은 브라우저들이 이 속성을 지원하고 있고...(IE는 아직도 완벽히 지원하진 않네요) 반응형웹을 위한 구성에는 단순히 float를 사용하는 것보다 많은 장점들이 있기 때문에 다시 주목받고 있는 속성입니다.

특히 iOS나 안드로이드 같은 모바일 환경에서 지원되고 있기 때문에 모바일웹사이트를 제작할 때 유용합니다.

 

 

display:box;

 

이 속성은 블록에 float 대신 사용할 수 있습니다. 또한 블록을 수직, 수평으로 배치하거나 역순으로 배열하거나 임의로 배치 순서를 바꿔줄 수도 있습니다.

 

vendor prefix를 위한 제가 쓰고 있는 각 브라우저별 태그 지정 방법은 아래와 같습니다.

/* Internet Explorer 10 */

display:-ms-flexbox;

/* Firefox */

display:-moz-box;
/* Safari, Chrome, and Opera */

display:-webkit-box;
/* W3C */

display:box;

 

여기까지 기본 지정방법을 알아보았고 이제 display:box;와 관련해 자주 사용하는 속성들에 대해 설명해 드리겠습니다.

 

- box-orient

박스의 흐름의 방향을 지정합니다.

box-orient : vertical 은 박스를 수직방향으로 배치하고 box-orient : horizontal 은 박스를 수평방향으로 배치합니다.

아무런 속성을 입력하지 않는다면 box-orient : horizontal이 기본 적용됩니다.

box-orient : inherit 을 이용하면 body가 갖는 기본 속성을 상속받습니다.

 

예제)

----헤더-----

<style type="text/css">

<!--
#vertical_box {
    display:box;
    -webkit-box-orient:vertical;
    -moz-box-orient:vertical;
}
#horizontal_box {
    display:box;
    -webkit-box-orient:horizontal;
    -moz-box-orient:horizontal;
}
-->
</style>

----헤더-----

<div id="vertical_box">

...

</div>

<div id="horizontal_box ">

...

</div>

 

- box-pack

박스가 정렬되는 방향을 지정합니다.

쉽게 float:left,right와 함께 center도 지정할 수 있다고 생각하시면 됩니다.

영역에 맞게 알아서 간격을 벌리고 출력되는 justify속성도 있습니다.

box-pack : start 는 기본 정렬방법인 좌측/상단부터 정렬됩니다.

box-pack : end 는 반대방향인 우측/하단부터 정렬됩니다.

box-pack : center 는 가운데로 정렬됩니다.

 

각 브라우저별 지원은 아래처럼 작성하고 있습니다.

box-pack:reverse;
-webkit-box-pack:reverse;
-moz-box-pack:reverse;

 

 

 

- box-direction

박스가 정렬되는 순서를 지정합니다.

box-pack : nomal 은 기본 값으로써 HTML문서에 작성된 순서대로 배치됩니다.
box-pack : reverse 은 HTML문서에 작성된 반대순으로 배치됩니다.

각 브라우저별 지원은 아래처럼 작성하고 있습니다.

 

box-direction:reverse;
-webkit-box-direction:reverse;
-moz-box-direction:reverse;

 

- box-ordinal-group

박스가 배치된 순서를 바꿔줍니다.

박스들을 감싸고 있는 부모블럭이 아닌 각 자식블럭에게 직접 순서를 지정해서 바꾸면 됩니다.

 

예제)

----헤더-----

<style type="text/css">

<!--
#box {
    display:box;
}
#box1 {
    box-ordinal-group:2;
    -webkit-box-ordinal-group:2;
    -moz-box-ordinal-group:2;
}

#box2 {
    box-ordinal-group:1;
    -webkit-box-ordinal-group:1;
    -moz-box-ordinal-group:1;
}

#box3 {
    box-ordinal-group:3;
    -webkit-box-ordinal-group:3;
    -moz-box-ordinal-group:3;
}
-->
</style>

----헤더-----

<div id="box1">

...

</div>

<div id="box2">

...

</div>

<div id="box3">

...

</div>

위 예제에서의 박스는 box2, box1, box3의 순으로 배치됩니다.

 

- box-flex

박스 크기에 대한 비율을 지정합니다.

박스들을 감싸고 있는 부모블럭이 아닌 각 자식블럭에게 직접 순서를 지정합니다.

box-flex : 0 은 기본값으로써 아무 변화가 없습니다.

box-flex : 1 으로 지정한 블럭은 감싸고 있는 부모블럭의 남은 공간을 채우게 됩니다.

 

또한 각 블럭의 비율을 직접 지정할 수 있습니다.

예)

#box1 {
    box-flex:1;
    -webkit-box-flex:1;
    -moz-box-flex:1;
}

#box2 {
    box-flex:1;
    -webkit-box-flex:1;
    -moz-box-flex:1;
}

#box3 {
    box-flex:2;
    -webkit-box-flex:2;
    -moz-box-flex:2;
}

 

 

위 예에서 box3의 box-flex는 2이기 때문에 다른 박스보다 두배 더 크게 늘어납니다.

모두 1로 지정하면 동일한 크기를 갖게 되지만 이 경우 box1과 box2는 box3이 늘어난 만큼 줄어들게 됩니다.

 

여기까지 display:box에 대해서 알아보았습니다.

제가 말씀드린 속성들 외에도  box-flex-group, box-lines 등 몇가지 속성이 더 있으니 더 깊이 공부하실 분들은 전문 서적이나 w3c등의 사이트를 참고하시기 바라며 내용중 틀린 부분이 있다면 언제든 지적 바랍니다.