Study/Etc

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

posey 2023. 5. 4. 13:29

 

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



Review
 
 

 
 

 

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

 

 

 

1. layout02_01 - float  방식 레이아웃

 

 

- HTML

 

  <div id="wrap">
    <div id="header"></div>
    <div id="nav"></div>
    <div id="aside"></div>
    <div id="section"></div>
    <div id="footer"></div>
  </div>

 

 

- CSS

 

    * {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #e8f5e9;
    }
    #wrap {
      width: 1200px;
      margin: 0 auto;
    }
    #header {
      width: 1200px;
      height: 100px;
      background-color: #c8e6c9;
    }
    #nav {
      width: 1200px;
      height: 100px;
      background-color: #a5d6a7;
    }
    #main {
      width: 1200px;
      overflow: hidden;
    }
    #aside {
      float: left;
      width: 300px;
      height: 780px;
      background-color: #81c784;
    }
    #section {
      float: left;
      width: 600px;
      height: 780px;
      background-color: #66bb6a;
    }
    #article {
      float: left;
      width: 300px;
      height: 780px;
      background-color: #4caf50;
    }
    #footer {
      width: 1200px;
      height: 100px;
      background-color: #43a047;
    }

 

여기서 float: left;를 적용하면 footer의 height 값이 사라지는데, 그걸 방지하기 위해 부모 요소에

overflow: hidden;을 적용했다. 이것은 2차 메뉴, 3차 메뉴를 만들 때는 좋은 방법이 아니기 때문

에 다른 방법을 사용하는 것이 좋다.

 

 

실행 결과

 

 

 

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

 

 

- HTML

 

  <div id="wrap">
    <div id="header"></div>
    <div id="nav"></div>
    <div id="aside"></div>
    <div id="section"></div>
    <div id="footer"></div>
  </div>

 

 

- CSS

 

    * {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #e8f5e9;
    }
    #wrap {
      width: 1200px;
      margin: 0 auto;
    }
    #header {
      width: 100%;
      height: 100px;
      background-color: #c8e6c9;
    }
    #nav {
      width: 100%;
      height: 100px;
      background-color: #a5d6a7;
    }
    #main {
      width: 100%;
      overflow: hidden;
    }
    #aside {
      float: left;
      width: 30%;
      height: 780px;
      background-color: #81c784;
    }
    #section {
      float: left;
      width: 40%;
      height: 780px;
      background-color: #66bb6a;
    }
    #article {
      float: left;
      width: 30%;
      height: 780px;
      background-color: #4caf50;
    }
    #footer {
      width: 100%;
      height: 100px;
      background-color: #43a047;
    }

    /* 미디어쿼리 */
    @media (max-width: 1300px) {
      #wrap {
        width: 96%;
      }
    }
    @media (max-width: 768px) {
      #wrap {
        width: 100%;
      }
      #aside {
        width: 30%;
        height: 630px;
      }
      #section {
        width: 70%;
        height: 630px;
      }
      #article {
        width: 100%;
        height: 150px;
      }
    }
    @media (max-width: 480px) {
      #aside {
        width: 100%;
        height: 200px;
      }
      #section {
        width: 100%;
        height: 430px;
      }
    }

 

 

실행 결과 (width: 1920px)

 

 

실행 결과 (width: 1300px)

 

 

실행 결과 (width: 768px)

 

 

실행 결과 (width: 480px)

 

 

 

3. layout01_03 - flex  방식 레이아웃

 

 

- HTML

 

  <div id="wrap">
    <header id="header"></header>
    <nav id="nav"></nav>
    <main id="main">
      <aside id="aside"></aside>
      <section id="section"></section>
      <article id="article"></article>
    </main>
    <footer id="footer"></footer>
  </div>

 

flex 방식부터는 시멘틱 태그로 변경했다.

 

 

- CSS

 

    * {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #e8f5e9;
    }
    #wrap {
      width: 1200px;
      margin: 0 auto;
    }
    #header {
      height: 100px;
      background-color: #c8e6c9;
    }
    #nav {
      height: 100px;
      background-color: #a5d6a7;
    }
    #main {
      display: flex;
    }
    #aside {
      width: 30%;
      height: 780px;
      background-color: #81c784;
    }
    #section {
      width: 40%;
      height: 780px;
      background-color: #66bb6a;
    }
    #article {
      width: 30%;
      height: 780px;
      background-color: #4caf50;
    }
    #footer {
      height: 100px;
      background-color: #43a047;
    }

 

 

실행 결과

 

 

 

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

 

 

- HTML

 

  <div id="wrap">
    <header id="header"></header>
    <nav id="nav"></nav>
    <main id="main">
      <aside id="aside"></aside>
      <section id="section"></section>
      <article id="article"></article>
    </main>
    <footer id="footer"></footer>
  </div>

 

 

 

- CSS

 

    * {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #e8f5e9;
    }
    #wrap {
      width: 1200px;
      margin: 0 auto;
    }
    #header {
      height: 100px;
      background-color: #c8e6c9;
    }
    #nav {
      height: 100px;
      background-color: #a5d6a7;
    }
    #main {
      display: flex;
    }
    #aside {
      width: 30%;
      height: 780px;
      background-color: #81c784;
    }
    #section {
      width: 40%;
      height: 780px;
      background-color: #66bb6a;
    }
    #article {
      width: 30%;
      height: 780px;
      background-color: #4caf50;
    }
    #footer {
      height: 100px;
      background-color: #43a047;
    }

    /* 미디어쿼리 */
    @media (max-width: 1300px) {
      #wrap {
        width: 96%;
      }
    }
    @media (max-width: 768px) {
      #wrap {
        width: 100%;
      }
      #main {
        flex-wrap: wrap;
      }
      #aside {
        width: 30%;
        height: 630px;
      }
      #section {
        width: 70%;
        height: 630px;
      }
      #article {
        width: 100%;
        height: 150px;
      }
    }
    @media (max-width: 480px) {
      #aside {
        width: 100%;
        height: 200px;
      }
      #section {
        width: 100%;
        height: 430px;
      }
    }

 

 

실행 결과 (width: 1920px)

 

 

실행 결과 (width: 1300px)

 

 

실행 결과 (width: 768px)

 

 

실행 결과 (width: 480px)

 

 

 

5. layout02_05 - grid 방식 레이아웃

 

 

- HTML

 

  <div id="wrap">
    <header id="header"></header>
    <nav id="nav"></nav>
    <main id="main">
      <aside id="aside"></aside>
      <section id="section"></section>
      <article id="article"></article>
    </main>
    <footer id="footer"></footer>
  </div>

 

 

- CSS

 

    * {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #e8f5e9;
    }
    #wrap {
      width: 1200px;
      margin: 0 auto;
    }
    #header {
      height: 100px;
      background-color: #c8e6c9;
    }
    #nav {
      height: 100px;
      background-color: #a5d6a7;
    }
    #main {
      display: grid;
      grid-template-columns: 30% 40% 30%;
      grid-template-rows: 780px;
    }
    #aside {
      background-color: #81c784;
    }
    #section {
      background-color: #66bb6a;
    }
    #article {
      background-color: #4caf50;
    }
    #footer {
      height: 100px;
      background-color: #43a047;
    }

 

 

실행 결과

 

 

 

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

 

 

- HTML

 

  <div id="wrap">
    <header id="header"></header>
    <nav id="nav"></nav>
    <main id="main">
      <aside id="aside"></aside>
      <section id="section"></section>
      <article id="article"></article>
    </main>
    <footer id="footer"></footer>
  </div>

 

 

- CSS

 

    * {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #e8f5e9;
    }
    #wrap {
      width: 1200px;
      margin: 0 auto;
    }
    #header {
      height: 100px;
      background-color: #c8e6c9;
    }
    #nav {
      height: 100px;
      background-color: #a5d6a7;
    }
    #main {
      display: grid;
      grid-template-columns: 30% 40% 30%;
      grid-template-rows: 780px;
    }
    #aside {
      background-color: #81c784;
    }
    #section {
      background-color: #66bb6a;
    }
    #article {
      background-color: #4caf50;
    }
    #footer {
      height: 100px;
      background-color: #43a047;
    }

    /* 미디어쿼리 */
    @media (max-width: 1300px) {
      #wrap {
        width: 96%;
      }
    }
    @media (max-width: 768px) {
      #wrap {
        width: 100%;
      }
      #main {
        grid-template-areas: 
          "aside section"
          "article article";
        grid-template-columns: 30% 70%;
        grid-template-rows: 630px 150px;
      }
      #aside {
        grid-area: aside;
      }
      #section {
        grid-area: section;
      }
      #article {
        grid-area: article;
      }
    }
    @media (max-width: 480px) {
      #main {
        grid-template-areas: 
          "aside"
          "section"
          "article";
        grid-template-columns: 100%;
        grid-template-rows: 200px 430px 150px;
      }
    }

 

 

실행 결과 (width: 1920px)

 

 

실행 결과 (width: 1300px)

 

 

실행 결과 (width: 768px)

 

 

실행 결과 (width: 480px)

 

반응형