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

2016. 12. 4. 10:01 from COMPUTER/CSS

 

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 이상에서만 지원됨.

 

저작자표시 비영리 변경금지

'COMPUTER > CSS' 카테고리의 다른 글

4. float 속성 -바닥부터 시작하는 CSS-  (0) 2016.12.08
CSS의 절대단위와 상대단위 -막간학습-  (0) 2016.12.07
3. display 속성 -바닥부터 시작하는 CSS-  (0) 2016.11.20
2. CSS의 속성 요약 -바닥부터 시작하는 CSS-  (0) 2016.11.19
1. 들어가기(개념, 선언 방식, 선택자) -바닥부터 시작하는 CSS-  (0) 2016.11.18
Posted by star story :

티스토리툴바

Snippet :: Code View :: "+location.href+' 
'+b+"

티스토리툴바

");top.consoleRef.document.close()}$(".snippet-container").each(function(b){$(this).find("a.snippet-text").click(function(){var d=$(this).parents(".snippet-wrap").find(".snippet-formatted");var c=$(this).parents(".snippet-wrap").find(".snippet-textonly");d.toggle();c.toggle();if(c.is(":visible")){$(this).html("html")}else{$(this).html("text")}return false});$(this).find("a.snippet-window").click(function(){var c=$(this).parents(".snippet-wrap").find(".snippet-textonly").html();a(c);$(this).blur();return false})});$(".snippet-toggle").each(function(b){$(this).click(function(){$(this).parents(".snippet-container").find(".snippet-wrap").toggle()})})});