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