COMPUTER/CSS

display 속성의 table계열 속성 값 -막간학습-

star story 2016. 12. 4. 10:01

 

display 속성의 table계열 속성 값 -막간학습-

 

display 속성 값으로 table계열의 속성 값을 사용하면 요소를 표(table)처럼 표현할 수 있고 table에서 쓰이는 style를 적용 시킬 수 있다.

 

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> 요소처럼 표시됨.


예 study2-1

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       div {
  5.         border: 1px solid #bcbcbc;
  6.       }
  7.       .table1 {
  8.         display: table;
  9.         width: 100%;
  10.       }
  11.       .table-row1 {
  12.         display: table-row;
  13.       }
  14.       .table-cell1 {
  15.         display: table-cell;
  16.         padding: 0 10px;
  17.         height: 100px;
  18.       }
  19.       .v-top {
  20.         vertical-align: top;
  21.       }
  22.       .v-middle {
  23.         vertical-align: middle;
  24.       }
  25.       .v-bottom {
  26.         vertical-align: bottom;
  27.       }
  28.       .h-center {
  29.         text-align: center;
  30.       }
  31.       .h-right {
  32.         text-align: right;
  33.       }
  34.     </style>
  35.   </head>
  36.   <body>
  37.     <div class="table1">
  38.       <div class="table-row1">
  39.         <div class="table-cell1">
  40.           <p>과일</p>
  41.         </div>
  42.         <div class="table-cell1 h-center">
  43.           <p>동물</p>
  44.         </div>
  45.         <div class="table-cell1  h-right">
  46.           <p>나라</p>
  47.         </div>
  48.       </div>
  49.       <div class="table-row1 h-center">
  50.         <div class="table-cell1 v-top">
  51.           <p>사과</p>
  52.         </div>
  53.         <div class="table-cell1 v-middle">
  54.           <p>강아지</p>
  55.         </div>
  56.         <div class="table-cell1 v-bottom">
  57.           <p>미국</p>
  58.         </div>
  59.       </div>
  60.     </div>
  61.   </body>
  62. </html>

 

주의할 점 : IE8 이상에서만 지원됨.

 

저작자표시 비영리 변경금지 (새창열림)