[CSS] CSS 속성을 이용해 Table 만들기

display을 이용한 table 레이아웃 잡기 

display 속성을 이용하여, table 태그의 tr, th, td 같은 형태의 레이아웃을 만들 수 있다. 개인적으로 실제로 display 속성으로 table을 지정할 때는 table 레이아웃을 구성하기 위해서라기보단 한 컨텐츠 내에서 중앙 정렬 처리 할때 사용한다. 

예를 들어 한 컨텐츠 내용이 1줄이 되든, 2줄이 되든 가운데 정렬이 되어야 한다고 할때 사용하면 편리하게 레이아웃을 구성할 수 있다.

  <div class="contents">
    <dl class="contents__inner">
        <dt>컨텐츠 제목</dt>
        <dd>컨텐츠 내용 1줄 처리</dd>
    </dl>
  </div>
  <div class="contents">
    <dl class="contents__inner">
        <dt>컨텐츠 제목</dt>
        <dd>컨텐츠 내용 2줄 처리<br/>컨텐츠 내용 2줄 처리</dd>
    </dl>
  </div>
 

HTML 코드는 위와 같이 작성한다. 예시를 위해 dd태그의 텍스트 내용을 br로 내렸으나, 상황에 맞게 X줄 처리를 하면 된다. 

    .contents{ 
        display:table; 
        width:300px; 
        height:300px; 
    }
    .contents__inner{ 
        display:table-cell; 
        width:100%; 
        text-align:center; 
        vertical-align:middle; 
    }

기준이 되는 섹션(contents)에 display:table 속성을 준 후, 가운데 정렬할 (contents__inner)의 속성을 display:table-cell로 주면 원하는 레이아웃으로 구성할 수 있다.