[모듈]퍼블리셔라면 필수로 알아야하는 display: table 속성, 무한 메뉴 리스트 만들기

 

 

 

 

1. display: table 이용한 리스트 메뉴/아이콘 만들기

 

 

 

 

 

 

오늘은 display: table 속성에 대해 알아보자고 한다.

위에 이미지에 표시 된 분홍색 사각형 박스처럼 동일한 넓이와 간격을 가지고 있는

컨텐츠를 작업할때 사용할 수 있는 display: table 속성!

 

예전에는 float을 사용해서 width 값을 통해 간격을 맞추면서 작업을하거나

display: inline-block을 이용해서 가로 정렬로 작업을 해왔다.

 

 

 

 

 

그런데 컨텐츠의 갯수라는것이 고정적으로 정해질수도 있지만, 유동적으로 변할 수 있기때문에

갯수에 맞추느라 width 값 조절하다보면 CSS 코드는 길고 지저분하게 될 수 있다.

이럴때 고민을 없애 버릴 수 있는 방법이 바로 display: table / display: table-cell 이다.

 

부모태그에 display: table 선언하고 

자식태그에 display: table-cell 선언하면

 

컨텐츠의 갯수가 몇개가 되든 동일한 간격으로 컨텐츠 영역을 가지게 된다.

 

 

 

 

예시) HTML

<ul class="container">
  <li>
    <span><img src="http://via.placeholder.com/40x40" alt="샘플이미지"></span>
    <strong class="title">여기는 제목영역이지</strong>
    <p>여기는 설명이야.<br>기왕이면 두줄 이상으로 나오려면 글을 많이 쓸거야!</p>
  </li>
  <li>
    <span><img src="http://via.placeholder.com/40x40" alt="샘플이미지"></span>
    <strong class="title">여기 제목은 혼자 길도록 만들어서 보여주려고 열심히 지어내고 있지</strong>
    <p>여기는 설명이야.<br>기왕이면 두줄 이상으로 나오게 하기위해 글을 많이 쓸거야!</p>
  </li>
    <li>
    <span><img src="http://via.placeholder.com/40x40" alt="샘플이미지"></span>
    <strong class="title">여기는 제목영역이지</strong>
    <p>안녕 나는 설명이야. 여기는 한줄로 써볼까나</p>
  </li>
</ul>

CSS

* {margin: 0;padding: 0;font-size: 14px;}
ul.container {display:table; width: 100%; height: 250px; text-align: center; list-style: none; background-color: #f3f3f3;}
li {display:table-cell; padding:50px 0; vertical-align: middle;}
li + li {border-left: 1px solid #ccc;}
ul li span{ display:inline-block; width: 40px; height:40px;}
ul li .title{ display:inline-block; padding-top:10px;max-width: 280px; font-size: 16px;font-weight:bold; vertical-align:top;}
ul li p{margin-top: 10px;font-size:13px; line-height: 1.5;}

 

 

보기)

 

 

 

동일한 간격의 컨텐츠를 만드는 법이라고 했지만 <보기>의 width 값이 다 다르게 나온다.

그것은 부모 태그에 table-layout: fixed 를 선언해주면

 

 

 

CSS

* {margin: 0;padding: 0;font-size: 14px;}
ul.container {display:table; table-layout: fixed; /* table-layout 추가됨 */ width: 100%; text-align: center; list-style: none; background-color: #f3f3f3;}
li {display:table-cell; padding:50px 0; vertical-align: middle;}
li + li {border-left: 1px solid #ccc;}
ul li span{ display:inline-block; width: 40px; height:40px;}
ul li .title{ display:inline-block; padding-top:10px; max-width: 280px; font-size: 16px; font-weight:bold; vertical-align:top;}
ul li p{margin-top: 10px;font-size:13px; line-height: 1.5;}

 

 

위에 예시 이지미처럼  width 값으로 자동으로 동일하게 나눠져 정리되어

나타나는 컨탠츠가 자동으로 제작된다.

 

 

 

 

 

 

---

 

 

2. display: table 이용한 가로/세로 가운데 정렬

 

 

HTML

<div class="display_tb">
    <div class="middle">가운데 정렬</div>
</div>

CSS

.display_tb {margin:0 auto; display:table; width:200px; height:200px; border:2px solid #82ca9c;}
.middle { display:table-cell; text-align:center; vertical-align:middle; }

 

text-align: left - 글자가 왼쪽 / text-align: right - 글자가 오른쪽