짬짬이기록하기

table layout case 본문

Web Development/CSS

table layout case

짬짬이기록하기 2022. 7. 21. 09:58
반응형

 

first content : 전체 wrap의 사이즈가 고정된 채로 첫번째 블록의 상단 비주얼영역을 100%로 나타낼 수 있다. 
관건은 display:table
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>table layout case</title>
</head>
<body>
  <style>
    * {margin:0;padding:0;}

    .cont {
      display:table;
      width:100%;
    }

    .cont:before, .cont:after {
      content:'';
      display:table;
    }

    .inner_cont {
      width:500px;
      display:table-cell;
    }

    .wrap_bg {
      height:200px;
      border:1px solid red;
    }

    .bg {
      position:absolute;
      width:100%;
      height:200px;
      left:0;
      right:0;
      color:#fff;
      background:url('https://cdn.pixabay.com/photo/2022/07/10/06/51/flowers-7312298_960_720.jpg') no-repeat 0 0;
      background-size:cover;
      text-align:center;
    }
  </style>

  <div class="cont">
    <div class="inner_cont">
      <div class="wrap_bg">
        <div class="bg">
          first content
        </div>
      </div>

      <div style="border:1px solid green;height:200px;">
        second content
      </div>

      <div style="border:1px solid blue;height:100px;">
        third content
      </div>
    </div>
  </div>
</body>
</html>

table layout

반응형

'Web Development > CSS' 카테고리의 다른 글

flex box 아리송한 것 정리  (0) 2023.05.24
em rem 적절한 사용  (0) 2023.02.22
행 열 쉽게 외우기  (0) 2020.06.23
flexbox를 이용한 수직 중앙 정렬  (0) 2020.06.17
input radio checked를 이용한 tab 메뉴 만들기  (0) 2020.06.16
'Web Development/CSS' Related Articles more