그럼에도 불구하고

👨‍💻

[Responsive web] 반응형 페이지 layout 만들기 Ver_5 본문

HTML, CSS/Responsive web

[Responsive web] 반응형 페이지 layout 만들기 Ver_5

zenghyun 2023. 1. 19. 16:39

layout 만들기 Ver_5

 

 

 

소스코드

더보기 
<!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>Layout5</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      background-color: #fffde7;
    }

    #wrap {
      width: 1200px;
      margin: 0 auto;
    }

    header {
      width: 100%;
      height: 100px;
      background-color: #b0b0ea;
    }

    .top-article {
      width: 100%;
      height: 300px;
      background-color: #9090ed;
    }

    aside {
      float: left;
      width: 33.333333%;
      height: 350px;
      background-color: #6f6fbc;
    }

    .middle-article {
      float: left;
      width: 66.666666%;
      height: 175px;
    }

    .middle-article1 {
      background-color: #6464be;
    }

    .middle-article2 {
      background-color: #4a4a8f;
    }

    .bottom-article {
      float: left;
      width: 33.333333%;
      height: 200px;
    }

    .bottom-article1 {
      background-color: #9c9cea;
    }

    .bottom-article2 {
      background-color: #8383eb;
    }

    .bottom-article3 {
      background-color: #4f4fea;
    }

    section {
      clear: both;
      width: 100%;
      height: 200px;
      background-color: #bebee8;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

    section>div {
      width: 15%;
      margin: 5%;
      height: 80%;
      background-color: #9090ed;
      border-radius: 20px;
    }

    footer {
      width: 100%;
      height: 100px;
      background-color: #8383eb;
    }

    /* 화면 너비 0 ~ 1200px */
    @media (max-width: 1220px) {
      #wrap {
        width: 100%;
      }

      .bottom-article {
        width: 50%;
      }

      .bottom-article2 {
        display: none;
      }

      section>div {
        width: 21.333333%;
      }

      section>div:nth-child(4) {
        display: none;
      }

    }

    /* 화면 너비 0 ~ 768x */
    @media (max-width: 768px) {
      section {
        height: 150px;
      }
    }

    /* 화면 너비 0 ~ 480x */
    @media (max-width: 480px) {
      section {
        height: 100px;
      }

      .bottom-article {
        width: 100%;
      }
    }

    /* 화면 너비 0 ~ 320x */
    @media (max-width: 320px) {
      section {
        height: 360px;
        display: block;
        padding: 10px 0;
      }

      section>div {
        width: 90%;
        height: 100px;
      }
    }
  </style>
</head>

<body>
  <div id="wrap">
    <header></header>
    <article class="top-article"></article>
    <aside></aside>
    <article class="middle-article middle-article1"></article>
    <article class="middle-article middle-article2"></article>
    <article class="bottom-article bottom-article1 "></article>
    <article class="bottom-article bottom-article2 "></article>
    <article class="bottom-article bottom-article3 "></article>
    <section>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </section>
    <footer></footer>
  </div>
</body>

</html>

 

화면 너비 1220px 초과

 

section {
      clear: both;
      width: 100%;
      height: 200px;
      background-color: #bebee8;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

    section>div {
      width: 15%;
      margin: 5%;
      height: 80%;
      background-color: #9090ed;
      border-radius: 20px;
    }

 

 

 

 

화면 너비 1220px 이하

 

 /* 화면 너비 0 ~ 1200px */
    @media (max-width: 1220px) {
      #wrap { width: 100%; }

      .bottom-article { width: 50%; }

      .bottom-article2 {display: none; }

      section>div {width: 21.333333%;}

      section>div:nth-child(4) {display: none;}
 }

 

1. 기존 bottom-article 3개에서 bottom-article2를 display:none;

남은 bottom-article의 width : 33.333333%에서 50%로 변경

 

2. 기존 section안 div 4개에서 section > div:nth:child(4)의 display를 none으로 변경

남은 div의 너비를 15%에서 21.333333%로 변경

 

 

 

 

화면 너비 768px 이하 

 

/* 화면 너비 0 ~ 768x */
    @media (max-width: 768px) {
      section { height: 150px; }

      section>div {width: 21.333333%; }
 }

 

section 높이 200px에서 150px로 변경

 

 

 

 

화면 너비 480px 이하

 

   /* 화면 너비 0 ~ 480x */
    @media (max-width: 480px) {
      section { height: 100px; }

      .bottom-article { width: 100%; }
  }

 

1. section 높이 150px에서 100px로 변경

2. bottom-article의 너비를 50%에서 100%로 변경 

 

 

 

화면 너비 320px 이하

 

 /* 화면 너비 0 ~ 320x */
    @media (max-width: 320px) {
      section {
        height: 360px;
        display: block;
        padding: 10px 0;
      }

      section>div {
        width: 90%;
        height: 100px;
      }
    }

 

1. section의 높이 100px에서 300px로 변경 

2. section display:flex를 block으로 변경 ( 가로 정렬 )

3. section안의 div의 너비를 90%로 변경 

 

 

저작자표시 비영리

'HTML, CSS > Responsive web' 카테고리의 다른 글

[Responsive web] max-(width/height)과 min-(width/height) 그리고 반응형 웹  (0) 2023.02.02
[Responsive web] 반응형 페이지 layout 만들기 Ver_4  (0) 2023.01.19
[Responsive web] cloneCoding Elarm Artists  (0) 2023.01.19
[Responsive web] 반응형 페이지 layout 만들기 Ver_3  (0) 2023.01.18
[Responsive web] 반응형 페이지 layout 만들기 Ver_2  (0) 2023.01.18
'HTML, CSS/Responsive web' Related Articles more
Comments