포트폴리오 사이트 만들기 프로젝트 - float, flex, grid 레이아웃 유형별 연습5

ㆍStudy/Etc

 

  • 포트폴리오 사이트 만들기 프로젝트 - float, flex, grid 레이아웃 유형별 연습5



Review
 
 

 
 

 

  • 포트폴리오 사이트 만들기 프로젝트 - float, flex, grid 레이아웃 유형별 연습5

 

 

 

1. layout05_01 - float  방식 레이아웃

 

 

- HTML

 

  <div id="wrap">
    <header id="header">
      <div class="container"></div>
    </header>
    <nav id="nav">
      <div class="container"></div>
    </nav>
    <main id="main">
      <div class="contents container clearfix">
        <div class="cont1"></div>
        <div class="cont2"></div>
        <div class="cont3"></div>
        <div class="cont4"></div>
      </div>
    </main>
    <footer id="footer">
      <div class="container"></div>
    </footer>
  </div>

 

 

- CSS

 

    * {
      margin: 0;
      padding: 0;
    }
    #wrap {
      width: 100%;
    }
    #header {
      height: 100px;
      background-color: #eeebe9;
    }
    #nav {
      height: 100px;
      background-color: #b9aaa5;
    }
    #main {
      height: 780px;
      background-color: #886f65;
    }
    #footer {
      height: 100px;
      background-color: #4e342e;
    }
    .container {
      width: 1200px;
      height: inherit;
      background-color: rgba(0,0,0,0.1);
      margin: 0 auto;
    }
    .contents {

    }
    .contents .cont1 {
      width: 100%;
      height: 100px;
      background-color: #74574a;
    }
    .contents .cont2 {
      width: 100%;
      height: 200px;
      background-color: #684d43;
    }
    .contents .cont3 {
      float: left;
      width: 50%;
      height: 480px;
      background-color: #594139;
    }
    .contents .cont4 {
      float: left;
      width: 50%;
      height: 480px;
      background-color: #4a352f;
    }

    /* clearfix */
    .clearfix::before, .clearfix::after {
      content: '';
      display: block;
      line-height: 0;
    }
    .clearfix::after {
      clear: both;
    }

 

여기서 float: left;를 적용하면 footer의 height 값이 사라지는데, 이를 방지하기 위해 앞의 유형들과

마찬가지로 clearfix 방식을 활용했다. 

 

 

실행 결과

 

 

 

2. layout05_02 - float  방식 반응형 레이아웃

 

 

- HTML

 

  <div id="wrap">
    <header id="header">
      <div class="container"></div>
    </header>
    <nav id="nav">
      <div class="container"></div>
    </nav>
    <main id="main">
      <div class="contents container clearfix">
        <div class="cont1"></div>
        <div class="cont2"></div>
        <div class="cont3"></div>
        <div class="cont4"></div>
      </div>
    </main>
    <footer id="footer">
      <div class="container"></div>
    </footer>
  </div>

 

 

- CSS

 

    * {
      margin: 0;
      padding: 0;
    }
    #header {
      height: 100px;
      background-color: #eeebe9;
    }
    #nav {
      height: 100px;
      background-color: #b9aaa5;
    }
    #main {
      height: 780px;
      background-color: #886f65;
    }
    #footer {
      height: 100px;
      background-color: #4e342e;
    }
    .container {
      width: 1200px;
      height: inherit;
      background-color: rgba(0,0,0,0.1);
      margin: 0 auto;
    }
    .contents {

    }
    .contents .cont1 {
      height: 100px;
      background-color: #74574a;
    }
    .contents .cont2 {
      height: 200px;
      background-color: #684d43;
    }
    .contents .cont3 {
      float: left;
      width: 50%;
      height: 480px;
      background-color: #594139;
    }
    .contents .cont4 {
      float: left;
      width: 50%;
      height: 480px;
      background-color: #4a352f;
    }

    /* clearfix */
    .clearfix::before, .clearfix::after {
      content: '';
      display: block;
      line-height: 0;
    }
    .clearfix::after {
      clear: both;
    }

    /* 미디어쿼리 */
    @media (max-width: 1220px) {
      .container {
        width: 96%;
      }
      .contents .cont1 {
        float: left;
        width: 30%;
        height: 780px;
      }
      .contents .cont2 {
        float: left;
        width: 70%;
        height: 390px;
      }
      .contents .cont3 {
        width: 35%;
        height: 390px;
      }
      .contents .cont4 {
        width: 35%;
        height: 390px;
      }
    }
    @media (max-width: 768px) {
      .container {
        width: 100%;
      }
      .contents .cont2 {
        width: 70%;
        height: 260px;
      }
      .contents .cont3 {
        width: 70%;
        height: 260px;
      }
      .contents .cont4 {
        width: 70%;
        height: 260px;
      }
    }
    @media (max-width: 480px) {
      .contents .cont1 {
        width: 100%;
        height: 150px;
      }
      .contents .cont2 {
        width: 100%;
        height: 210px;
      }
      .contents .cont3 {
        width: 100%;
        height: 210px;
      }
      .contents .cont4 {
        width: 100%;
        height: 210px;
      }
    }

 

 

실행 결과 (width: 1920px)

 

 

실행 결과 (width: 1220px)

 

 

실행 결과 (width: 768px)

 

 

실행 결과 (width: 480px)

 

 

 

3. layout05_03 - flex  방식 레이아웃

 

 

- HTML

 

  <div id="wrap">
    <header id="header">
      <div class="container"></div>
    </header>
    <nav id="nav">
      <div class="container"></div>
    </nav>
    <main id="main">
      <div class="contents container">
        <div class="cont1"></div>
        <div class="cont2"></div>
        <div class="cont3"></div>
        <div class="cont4"></div>
      </div>
    </main>
    <footer id="footer">
      <div class="container"></div>
    </footer>
  </div>

 

 

- CSS

 

    * {
      margin: 0;
      padding: 0;
    }
    #header {
      height: 100px;
      background-color: #eeebe9;
    }
    #nav {
      height: 100px;
      background-color: #b9aaa5;
    }
    #main {
      height: 780px;
      background-color: #886f65;
    }
    #footer {
      height: 100px;
      background-color: #4e342e;
    }
    .container {
      width: 1200px;
      height: inherit;
      background-color: rgba(0,0,0,0.1);
      margin: 0 auto;
    }
    .contents {
      display: flex;
      flex-wrap: wrap;
    }
    .contents .cont1 {
      width: 100%;
      height: 100px;
      background-color: #74574a;
    }
    .contents .cont2 {
      width: 100%;
      height: 200px;
      background-color: #684d43;
    }
    .contents .cont3 {
      width: 50%;
      height: 480px;
      background-color: #594139;
    }
    .contents .cont4 {
      width: 50%;
      height: 480px;
      background-color: #4a352f;
    }

 

 

실행 결과

 

 

 

4. layout05_04 - flex  방식 반응형 레이아웃

 

 

- HTML

 

  <div id="wrap">
    <header id="header">
      <div class="container"></div>
    </header>
    <nav id="nav">
      <div class="container"></div>
    </nav>
    <main id="main">
      <div class="contents container">
        <div class="left">
          <div class="cont1"></div>
        </div>
        <div class="right">
          <div class="cont2"></div>
          <div class="cont3"></div>
          <div class="cont4"></div>
        </div>
      </div>
    </main>
    <footer id="footer">
      <div class="container"></div>
    </footer>
  </div>

 

flex 반응형을 만들려니 문제가 발생해서 결국 left, right로 나누어 레이아웃을 다시 짰다.

이런 구조형에서는 flex보다는 grid 방식이 더 낫다.

 

 

- CSS

 

    * {
      margin: 0;
      padding: 0;
    }
    #header {
      height: 100px;
      background-color: #eeebe9;
    }
    #nav {
      height: 100px;
      background-color: #b9aaa5;
    }
    #main {
      height: 780px;
      background-color: #886f65;
    }
    #footer {
      height: 100px;
      background-color: #4e342e;
    }
    .container {
      width: 1200px;
      height: inherit;
      background-color: rgba(0,0,0,0.1);
      margin: 0 auto;
    }
    .contents {
      display: flex;
      flex-wrap: wrap;
    }
    .contents .left {
      width: 100%;
    }
    .contents .cont1 {
      width: 100%;
      height: 100px;
      background-color: #74574a;
    }
    .contents .right {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
    }
    .contents .cont2 {
      width: 100%;
      height: 200px;
      background-color: #684d43;
    }
    .contents .cont3 {
      width: 50%;
      height: 480px;
      background-color: #594139;
    }
    .contents .cont4 {
      width: 50%;
      height: 480px;
      background-color: #4a352f;
    }

    /* 미디어쿼리 */
    @media (max-width: 1220px) {
      .container {
        width: 96%;
      }
      .contents .left {
        width: 30%;
      }
      .contents .cont1 {
        width: 100%;
        height: 780px;
      }
      .contents .right {
        display: flex;
        flex-wrap: wrap;
        width: 70%;
      }
      .contents .cont2 {
        width: 100%;
        height: 390px;
      }
      .contents .cont3 {
        width: 50%;
        height: 390px;
      }
      .contents .cont4 {
        width: 50%;
        height: 390px;
      }
    }
    @media (max-width: 768px) {
      .container {
        width: 100%;
      }
      .contents .cont2 {
        height: 260px;
      }
      .contents .cont3 {
        width: 100%;
        height: 260px;
      }
      .contents .cont4 {
        width: 100%;
        height: 260px;
      }
    }
    @media (max-width: 480px) {
      .contents .left {
        width: 100%;
        height: 150px;
      }
      .contents .cont1 {
        width: 100%;
      }
      .contents .right {
        width: 100%;
      }
      .contents .cont2 {
        height: 210px;
      }
      .contents .cont3 {
        height: 210px;
      }
      .contents .cont4 {
        height: 210px;
      }
    }

 

 

실행 결과 (width: 1920px)

 

실행 결과 (width: 1220px)

 

 

실행 결과 (width: 768px)

 

 

실행 결과 (width: 480px)

 

 

 

5. layout05_05 - grid 방식 레이아웃

 

 

- HTML

 

  <div id="wrap">
    <header id="header"></header>
    <nav id="nav"></nav>
    <main id="main">
      <aside id="aside"></aside>
      <div id="article1"></div>
      <div id="article2"></div>
      <div id="article3"></div>
    </main>
    <footer id="footer"></footer>
  </div>Copy

 

flex 방식으로 인해 코드가 지저분해져서 HTML은 원래 것으로 다시 되돌렸다.

 

 

- CSS

 

    * {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #e1f5fe;
    }
    #wrap {
      width: 1200px;
      margin: 0 auto;
    }
    #header {
      height: 100px;
      background-color: #b3e5fc;
    }
    #nav {
      height: 100px;
      background-color: #81d4fa;
    }
    #main {
      display: grid;
      grid-template-areas: 
        "aside article1 article1"
        "aside article2 article2"
        "aside article3 article3";
      grid-template-columns: 300px 900px; /* 각 칼럼의 너비를 얼마로 할지 지정 */
      grid-template-rows: 260px 260px 260px; /* 그리드 안의 줄 간격, 높이 지정 */
    }
    #aside {
      grid-area: aside;
      background-color: #4fc3f7;
    }
    #article1 {
      grid-area: article1;
      background-color: #29b6f6;
    }
    #article2 {
      grid-area: article2;
      background-color: #03a9f4;
    }
    #article3 {
      grid-area: article3;
      background-color: #039be5;
    }
    #footer {
      height: 100px;
      background-color: #0288d1;
    }Copy

 

 

 

실행 결과

 

 

 

6. layout05_06 - grid 방식 반응형 레이아웃

 

 

- HTML

 

  <div id="wrap">
    <header id="header"></header>
    <nav id="nav"></nav>
    <main id="main">
      <aside id="aside"></aside>
      <div id="article1"></div>
      <div id="article2"></div>
      <div id="article3"></div>
    </main>
    <footer id="footer"></footer>
  </div>Copy

 

 

- CSS

 

    * {
      margin: 0;
      padding: 0;
    }
    #header {
      height: 100px;
      background-color: #eeebe9;
    }
    #nav {
      height: 100px;
      background-color: #b9aaa5;
    }
    #main {
      height: 780px;
      background-color: #886f65;
    }
    #footer {
      height: 100px;
      background-color: #4e342e;
    }
    .container {
      width: 1200px;
      height: inherit;
      background-color: rgba(0,0,0,0.1);
      margin: 0 auto;
    }
    .contents {
      display: grid;
      grid-template-areas: 
        "cont1 cont1"
        "cont2 cont2"
        "cont3 cont4";
      grid-template-columns: 50% 50%;
      grid-template-rows: 100px 200px 480px 480px;
    }
    .contents .cont1 {
      grid-area: cont1;
      background-color: #74574a;
    }
    .contents .cont2 {
      grid-area: cont2;
      background-color: #684d43;
    }
    .contents .cont3 {
      grid-area: cont3;
      background-color: #594139;
    }
    .contents .cont4 {
      grid-area: cont4;
      background-color: #4a352f;
    }

    /* 미디어쿼리 */
    @media (max-width: 1220px) {
      .container {
        width: 96%;
      }
      .contents {
        grid-template-areas: 
          "cont1 cont2 cont2"
          "cont1 cont3 cont4";
        grid-template-columns: 1fr 1fr 1fr;
        /* grid-template-columns: 33.3333%; */
        /* grid-template-columns: repeat(3, 33.3333%); */
        /* grid-template-columns: repeat(3, 1fr); */
        grid-template-rows: 390px;
        /* grid-template-rows: 50%; */
        /* grid-template-rows: repeat(2, 50%) */
        /* grid-template-rows: repeat(2, 1fr); */
      }
    }
    @media (max-width: 768px) {
      .container {
        width: 100%;
      }
      .contents {
        grid-template-areas: 
          "cont1 cont2"
          "cont1 cont3"
          "cont1 cont4";
        grid-template-columns: 30% 70%;
        grid-template-rows: 260px;
        /* grid-template-rows: 33.3333%; */
        /* grid-template-rows: repeat(3, 33.3333%) */
        /* grid-template-rows: repeat(3, 1fr); */
      }
    }
    @media (max-width: 480px) {
      .contents {
        grid-template-areas: 
          "cont1"
          "cont2"
          "cont3"
          "cont4";
        grid-template-columns: 100%;
        grid-template-rows: 150px 210px;
      }
    }

 

 

 

실행 결과 (width: 1920px)

 

 

실행 결과 (width: 1220px)

 

 

실행 결과 (width: 768px)

 

 

실행 결과 (width: 480px)

 

 

반응형

'Study > Etc' 카테고리의 다른 글

포트폴리오 사이트 만들기 프로젝트 - 이미지 유형, 이미지/텍스트 유형  (0) 2023.05.11
포트폴리오 사이트 만들기 프로젝트 - 헤더 타입, 슬라이드 유형  (0) 2023.05.10
포트폴리오 사이트 만들기 프로젝트 - float, flex, grid 레이아웃 유형별 연습4  (0) 2023.05.08
포트폴리오 사이트 만들기 프로젝트 - float, flex, grid 레이아웃 유형별 연습3  (0) 2023.05.05
포트폴리오 사이트 만들기 프로젝트 - float, flex, grid 레이아웃 유형별 연습2  (0) 2023.05.04

관련글

댓글 0

티스토리툴바