div 영역에 Width:100%; height:100%; 적용해 보기 - display:table

위와 같은 모양의 div 영역을 만들때 생각보다 width:100%; height:100%; 지정하기가 쉽지를 않다.

<style>
 .etc { width:100%; height:100%; color:#000; background:#bbb; margin:5px; padding:5px 10px; border:1px solid #000; }
 .etc .left { float:left; }
 .etc .right { float:right; }
</style>

<div class="etc">
    <div class="left">
        < Left
    </div>
    <div class="right" >
        Right >
    </div>
</div>

일반적으로 위와 같이 코드를 작성하면 아래와 같이 height가 글꼴에 맞춰 높이가 맞쳐 지지를 않습니다. 

그래서 적당한 height:20px; 값을 주어서 맞춥니다.

그런데 그렇게 하면 글꼴의 크기가 변하거나 다른 요인이 발생하면 height값을 일일이 수정을 해야 합니다.

그럴때 적용할 수 있는 코드가 display:table 입니다.

.etc { display:table; width:100%; height:100%; color:#fff; background:#bbb; margin:5px; padding:5px 10px; border:1px solid #000; }

위와 같이 display:table; 하나만 넣어주면 최상단과 같이 넓이, 높이가 글꼴에 맞추어 배열됩니다.

참고로 height 값을 임의로 지정하고 글의 상하 위치를 잡고 싶으면 아래 코드와 같이 작성하고 vertical-align 속성을 top, middle, bottom 중 선택하면 됩니다.

<style>
 .etc { display:table; width:100%; color:#fff; background:#bbb; margin:5px; padding:5px 10px; border:1px solid #000; }
 .etc .left { float:left; }
 .etc .right { float:right; }
 .etc span { display:table-cell; height:150px; vertical-align:middle; }
</style>

<div class="etc">
    <div class="left">
        <span>< Left</span>
    </div>
    <div class="right" >
        <span> Right ></span>
    </div>
</div>

[display 속성값 중 표와 관련된 값들]
display 속성값으로 table, table-row, table-cell 등을 사용해서 요소를 표(table)처럼 표현할 수 있습니다. 표처럼 보이기 위해 사용할 수 있는 속성값들은 다음과 같습니다.

table : <table> 요소처럼 표현합니다.
table-caption : <caption> 요소처럼 표현합니다.
table-column-group : <colgroup> 요소처럼 표현합니다.
table-header-group : <thead> 요소처럼 표현합니다.
table-footer-group : <tfoot> 요소처럼 표현합니다.
table-row-group : <tbody> 요소처럼 표현합니다.
table-cell : <td> 요소처럼 표현합니다.
table-column : <col> 요소처럼 표현합니다.
table-row : <tr> 요소처럼 표현합니다.

위의 속성값으로 표처럼 표현되도록 만든 후에는, 표를 꾸미는 것과 같은 방법으로 해당 요소를 꾸밀 수 있습니다. 주의할 점은, IE의 경우 8 이상에서 지원한다는 것입니다.