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 2 ๋ณธ๋ฌธ

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

layout 2

output7 2022. 1. 5. 15:51
  1. ๋ฐ˜์‘ํ˜•์„ ๋งŒ๋“ค ๋•Œ๋Š” ๋ชจ๋ฐ”์ผ ๋ฒ„์ „์„ ๋จผ์ € ํ™•์ธํ•˜๊ณ  ๋งŒ๋“œ๋Š” ๊ฒƒ์ด ์ข‹์Œ
  2. order๋กœ ์ˆœ์„œ ์ œ์–ดํ•˜๋ฉด ํŽธํ•จ
  3. float์œผ๋กœ ๋งŒ๋“ค์—ˆ์Œ (flex ์‚ฌ์šฉํ•˜๋ฉด ํ›จ์”ฌ ํŽธํ•จ)

 

 

 

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

 

์ฝ”๋“œ

 

<!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>
      /* COMMON */
      .clearfix::after {
        content: '';
        clear: both;
        display: block;
      }
      .float--left {
        float: left;
      }
      .float--right {
        float: right;
      }
      .inner {
        width: 1200px;
        margin: auto;
      }
      /* BOX */
      .box {
        width: 100%;
        height: 150px;
        margin-top: 20px;
        display: flex;
        align-items: center;
      }
      .changeOrder {
        width: calc(100% - 58%);
        height: 100%;
      }
      .image {
        width: calc(100% - 84%);
        height: 100%;
        order: 1;
        position: relative;
      }
      .image img {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        position: absolute;
      }
      .text {
        width: calc(100% - 58%);
        height: 100%;
        box-sizing: border-box;
        text-align: right;
        position: relative;
      }
      .text p {
        margin-top: 50px;
        padding-left: 20px;
      }
      .two .text p {
        padding-left: 0;
        padding-right: 20px;
      }
      /* ORDER */
      .two .changeOrder {
        order: 0;
      }
      .two .text {
        order: 2;
      }
      .one .changeOrder,
      .three .changeOrder {
        order: 2;
      }
      .one .text,
      .three .text {
        order: 0;
      }
      @media screen and (max-width: 720px) {
        .inner {
          width: 100%;
        }
        .image {
          width: calc(100% - 80%);
        }
        .image img {
          width: 100%;
        }
        .text {
          margin-left: 20px;
          width: calc(100% - 20%);
        }
        .one .changeOrder,
        .two .changeOrder,
        .three .changeOrder {
          display: none;
        }
        .one .text,
        .two .text,
        .three .text {
          order: 2;
          text-align: left;
        }
        .one .text p,
        .three .text p {
          padding-left: 0;
        }
        .two .text p {
          padding-right: 0;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="inner">
        <div class="box-wrapper">
          <div class="box one clearfix">
            <div class="changeOrder float--left"></div>
            <div class="image float--left">
              <img src="./images/author1.png" alt="author" />
            </div>
            <div class="text float--left">
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa veritatis fugit, culpa
                quae incidunt laudantium quo dolor ratione
              </p>
            </div>
          </div>
          <div class="box two clearfix">
            <div class="changeOrder float--left"></div>
            <div class="image float--left">
              <img src="./images/author2.png" alt="author" />
            </div>
            <div class="text float--left">
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa veritatis fugit, culpa
                quae incidunt laudantium quo dolor ratione
              </p>
            </div>
          </div>
          <div class="box three clearfix">
            <div class="changeOrder float--left"></div>
            <div class="image float--left">
              <img src="./images/author3.png" alt="author" />
            </div>
            <div class="text float--left">
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa veritatis fugit, culpa
                quae incidunt laudantium quo dolor ratione
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

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

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