[CSS] div 균등 분할 / 가운데 정렬 (display : table)

html의 공간에서 layout 잡는 방법은 정말 다양하다. 

flexbox를 사용해서 layout을 잡고 정렬을 하기도 하고  
극단적으로는 table로 잡기도한다. 

오늘은 html 페이지에서 가로 영역을 균등하게 

나누는  간단한 방법을 알아보자

 

다음과 같이 body 내에 존재하는 div박스 3개를

CSS를 이용하여 가로로 균등하게 채울 것이다. 

 

No.1

No.2

No.3

body

 

위의 3개의 박스를 가로로 채우기 위해서는 

다음과 같이 영역별로 sytle의 display 속성 값을 지정해주어야 한다.

 

최상위에 table

    그 하위에 table-row

        그 하위에 table-cell

 

이렇게 하면 cell은 상위의 row 영역을 cell 개수만큼 나눠 가진다.

 

 

 

 

 

 

적용 코드

 

 

 

코드는 다음과 같다.

 

<div style=“display:table;”> 최상위 div <!-- 테이블 영역 -->
    <div style=“display:table-row;”> <!-- 한 줄 영역 -->
        <div style=“display:table-cell;”> cell-1 <!-- 한 칸 영역 -->
            <div> No.1 </div>
        </div>
        <div style=“display:table-cell;”> cell-2 <!-- 한 칸 영역 -->
            <div> No.2 </div>
        </div>
        <div style=“display:table-cell;”> cell-3 <!-- 한 칸 영역 -->
            <div> No.3 </div>
        </div>
    </div>
<div>

 

기본적으로 table-cell안의 내용은 가운데 정렬이 된다. (table 태그의 상태와 유사하다.) 

 

 

div의 내용이 영역을 넘어가면 div의 width는 자동으로 늘어나는데

이를 막기 위해서는 table-cell의 style에

table-layout : fixed; 를 추가해주면 된다.

 

 

이렇게 하면 layout 은 고정되는데 내용은

자동 줄 바꿈이 되지 않아서 내용이 layout을 넘어간다.

 

자동 줄 바꿈을 설정해주어야 하는데 

table-cell의 style에 

word-break: break-all; 을 추가해주면 된다.

 

 

실제 코드

위의 이미지로 보여진 예제의

실제 코드는 다음과 같다.

 

참고하면 좋을 것 같다.

 

<!-- 테이블 방식으로 가운데 정렬하는 방법 -->
<div class="test_body" style ="width:230px; height:180px;background:skyblue;">
<div class="test_content" style="width:50px; height:50px; background:green;" >No.1</div>
<div class="test_content" style="width:50px; height:50px; background:red;" >No.2</div>
<div class="test_content" style="width:50px; height:50px; background:yellow;" >No.3</div>
body
</div>
<br>
<br>
<br>
<div class="test_body" style ="display:table;table-layout:fixed; word-break:break-all; width:230px; height:180px;background:skyblue">
  <div style="display:table-row; ">
    <div align=center style="display:table-cell; background:violet;" >
      <div class="test_content" style="width:50px; height:50px; background:green" >No.1</div>
      cell-1
    </div>
    <div align=center style="display:table-cell; background:orange;" >
      <div class="test_content" style=" width:50px; height:50px; background:red" >No.2</div>
      cell-2
    </div>
    <div align=center style="display:table-cell; background:pink;" >
      <div class="test_content" style="width:50px; height:50px; background:yellow" >No.3</div>
      cell-3
    </div>
  </div>
body
</div>