layout 2

output7 2022. 1. 5. 15:51
반응형을 만들 때는 모바일 버전을 먼저 확인하고 만드는 것이 좋음
order로 순서 제어하면 편함
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>