CSS/display:table, table-cell
CSS3 display:table example
Soul-Learner
2017. 2. 13. 14:14
CSS의 속성 display:table, table-cell을 사용하는 예
아래의 그림처럼 DIV 태그나 시맨틱 태그를 이용하여 한 행에 다수개의 블럭레벨 요소를 위치시킬 때는 float :left, float : right 등의 속성을 사용할 수도 있지만 각 요소의 화면상의 높이가 다를 경우에는 정렬이 잘 안될 수도 있기 때문에 아래처럼 display : table; display : table-cell 속성을 사용하는 것이 도움이 된다
아래의 레이아웃에서 중앙에 있는 3개의 요소는 display : table-cell; 속성을 설정한 것이고, 이들 3개 요소를 포함한 컨테이너 요소에는 display : table; 속성을 설정하면 된다. display:table-cell; 속성이 설정된 요소는 블럭레벨 요소라 할지라도 한행에 위치하고 폭과 높이가 동일하게 된다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>페이지 레이아웃 샘플</title>
<style type="text/css">
html, body {height:100%;} /* 태그의 height속성에 %단위를 사용하기 위함*/
body { margin:0px; width:100%; height:100%; text-align: center;}
header { width:100%; height:20%; background-color: rgb(255,230,200);}
section { width:100%; height:70%; background-color: rgb(250,250,230);
display:table;}
nav { width:20%; height:100%;background-color: cyan; display:table-cell;}
article { width:60%; height:100%;background-color: orange; display:table-cell;}
aside { width:20%; height:100%;background-color: teal; display:table-cell;}
footer { width:100%; height:10%; background-color: gray;}
</style>
</head>
<body>
<header>
Header<p>
</header>
<!-- block 레벨 요소들이 한행에 오도록 하는 방법은 float속성을 사용할 수도 있지만
동일한 행에 있는 다수개의 요소들의 높이가 일치하도록 하려면 display 속성을 사용하면 된다
-->
<section> <!-- display:table; -->
<nav>Nav</nav> <!-- display:table-cell; -->
<article>Article</article> <!-- display:table-cell; -->
<aside>Aside</aside> <!-- display:table-cell; -->
</section>
<footer>
Footer
</footer>
</body>
</html>