Notice
Recent Posts
Recent Comments
Link
ยซ   2025/05   ยป
์ผ ์›” ํ™” ์ˆ˜ ๋ชฉ ๊ธˆ ํ† 
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Tags more
Archives
Today
Total
๊ด€๋ฆฌ ๋ฉ”๋‰ด

Outputor

layout 1 ๋ณธ๋ฌธ

๐Ÿฆ‰ ํ”„๋กœ์ ํŠธ ๐Ÿ”ป/๐Ÿž ํ”„๋กœ์ ํŠธ

layout 1

output7 2022. 1. 5. 12:04
  1. ์—ฌ๋Ÿฌ๊ฐœ์˜ box๋ฅผ ๊ฐ€์šด๋ฐ ์ •๋ ฌํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ํƒœ๊ทธ๋กœ ๊ฐ์‹ธ์ค€๋‹ค์Œ ํ•˜๋Š”๊ฒŒ ์ข‹์Œ
  2. ๋„“์ด๋ฅผ ๊ณ„์‚ฐํ•˜๊ธฐ ์–ด๋ ค์šด ๊ฒฝ์šฐ calc๋ฅผ ์ด์šฉํ•˜๋ฉด ํŽธํ•จ

max-width:992px

 

max-width:720px

 

๋”๋ณด๊ธฐ
๋”๋ณด๊ธฐ

 

์ฝ”๋“œ

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin:0;
    }
    .clearfix::after {
      content:'';
      clear:both;
      display: block;
    }
    .float--left {
      float: left;
    }
    .inner {
      max-width: 1200px;
      position: relative;
      margin:auto;
    }
    .box-wrapper {
      position: absolute;
      margin-top: 100px;
    }
    .box {
      width: calc((100% - 30px) / 4 );
      border: 1px solid #eee;
      margin: auto;
      box-sizing: border-box;
      border-radius: 8px;
      margin-right: 10px;
    }
    .box:last-child {
      margin-right: 0;
    }
    .box img {
      width: 100%;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
    }
    .text {
      padding: 10px;
      text-align-last: left;
    }
    .text p {
      padding-left: 0;
    }
    @media screen and (max-width:992px) {
      .box-wrapper {
        margin-top: 0;
      }
      .box {
        width: calc((100% - 10px) / 2);
      }
      .box:nth-child(2) {
        margin-right: 0;
      }
    }
    @media screen and (max-width:720px) {
      .box-wrapper {
        margin-top: 0;
      }
      .box {
        float: none;
        width: 100%;
        margin-right: 0;
      }
    }
  </style>
<body>
  <div class="body-container">
    <div class="inner">
      <div class="box-wrapper clearfix">
        <div class="box float--left">
          <img src="./images/bg.jpg" alt="background">
          <div class="text">
            <h3>Card Title</h3>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
            </p>
          </div>
        </div>
        <div class="box float--left">
          <img src="./images/bg.jpg" alt="background">
          <div class="text">
            <h3>Card Title</h3>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
            </p>
          </div>
        </div>
        <div class="box float--left">
          <img src="./images/bg.jpg" alt="background">
          <div class="text">
            <h3>Card Title</h3>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
            </p>
          </div>
        </div>
        <div class="box float--left">
          <img src="./images/bg.jpg" alt="background">
          <div class="text">
            <h3>Card Title</h3>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
            </p>
          </div>
        </div>
    </div>
    </div>
  </div>
</body>
</html>

'๐Ÿฆ‰ ํ”„๋กœ์ ํŠธ ๐Ÿ”ป > ๐Ÿž ํ”„๋กœ์ ํŠธ' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

layout 3  (0) 2022.01.13
Shadow DOM  (0) 2022.01.06
layout 2  (0) 2022.01.05
Landing ํŽ˜์ด์ง€2  (0) 2022.01.04
Landing ํŽ˜์ด์ง€ 1  (0) 2022.01.04
'๐Ÿฆ‰ ํ”„๋กœ์ ํŠธ ๐Ÿ”ป/๐Ÿž ํ”„๋กœ์ ํŠธ' Related Articles more