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

ㆍStudy/Etc

 

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



Review
 

 요즘 기본기를 다지기 위해 레이아웃 짜는 연습을 많이 하고 있는데, 점점 공부를 할수록 느끼는 것은

기본이 가장 중요하다는 것이다. 반응형을 만들 때마다 미디어쿼리가 헷갈려서 mdn에 들어가서

사용법을 다시 읽고 또 다시 연습했다.   
강의를 들으면서 만들면 잘하는데 혼자할 때는 또 헷갈리기 시작한다.

그래서 강의를 들으면서 한 번 만들어보고 후에 혼자 만드는 시간을 가지고 있다.

 

파이팅 - !

 

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

1. layout01_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: #fff3e0;
    }
    #wrap {
      width: 1200px;     
      height: 100px;
      margin: 0 auto;
    }
    #header {
      width: 1200px;
      height: 100px;
      background-color: #ffe0b2;
    }
    #nav {
      width: 1200px;
      height: 100px;
      background-color: #ffcc80;
    }
    #aside {
      width: 400px;
      height: 780px;
      background-color: #ffb74d;
      float: left;
    }
    #section {
      width: 800px;
      height: 780px;
      background-color: #ffa726;
      float: left;
    }
    #footer {
      width: 1200px;
      height: 100px;
      background-color: #ff9800;
      clear: both;
    }

 

 

실행 결과

 

 

 

2. layout01_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: #fff3e0;
    }
    #wrap {
      width: 1200px;     
      margin: 0 auto;
    }
    #header {
      width: 100%;
      height: 100px;
      background-color: #ffe0b2;
    }
    #nav {
      width: 100%;
      height: 100px;
      background-color: #ffcc80;
    }
    #aside {
      width: 30%;
      height: 780px;
      background-color: #ffb74d;
      float: left;
    }
    #section {
      width: 70%;
      height: 780px;
      background-color: #ffa726;
      float: left;
    }
    #footer {
      width: 100%;
      height: 100px;
      background-color: #ff9800;
      clear: both;
    }

    /* 미디어쿼리 */
    @media (max-width: 1300px) {
      #wrap {
      	width: 96%; /* 양쪽에 2%씩 여백 줌 */ 
      }
    }
    @media (max-width: 768px) {
      #wrap {
      	width: 100%;
      }
    }
    @media (max-width: 480px) {
      #aside {
        width: 100%;
        height: 300px;
      }
      #section {
        width: 100%;
        height: 480px;
      }
    }

 

위와 달라진 점은 반응형이기 때문에 width 값을 px에서 %로 바꿨다. 화면을 줄였을 때 스크롤이 생기지

않도록 만들어야 하기 때문이다.

 

 

실행 결과 (width: 1920px)

 

 

실행 결과 (width: 1300px)

 

 

실행 결과 (width: 768px)

 

 

실행 결과 (width: 480px)

 

 

 

3. layout01_03 - flex  방식 레이아웃

 

 

- HTML

 

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

 

여기서는 시맨틱 마크업을 활용했다.

 

 

- CSS

 

    * {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #fff3e0;
    }
    #wrap {
      display: flex;
      flex-wrap: wrap;  /* 익스플로러 지원X */
      width: 1200px;     
      margin: 0 auto;
    }
    #header {
      width: 100%;
      height: 100px;
      background-color: #ffe0b2;
    }
    #nav {
      width: 100%;
      height: 100px;
      background-color: #ffcc80;
    }
    #aside {
      width: 30%;
      height: 780px;
      background-color: #ffb74d;
    }
    #section {
      width: 70%;
      height: 780px;
      background-color: #ffa726;
    }
    #footer {
      width: 100%;
      height: 100px;
      background-color: #ff9800;
    }

 

 

실행 결과

 

 

 

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

 

 

- HTML

 

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

 

 

 

- CSS

 

    * {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #fff3e0;
    }
    #wrap {
      display: flex;
      flex-wrap: wrap;  /* 익스플로러 지원X */
      width: 1200px;     
      margin: 0 auto;
    }
    #header {
      width: 100%;
      height: 100px;
      background-color: #ffe0b2;
    }
    #nav {
      width: 100%;
      height: 100px;
      background-color: #ffcc80;
    }
    #aside {
      width: 30%;
      height: 780px;
      background-color: #ffb74d;
    }
    #section {
      width: 70%;
      height: 780px;
      background-color: #ffa726;
    }
    #footer {
      width: 100%;
      height: 100px;
      background-color: #ff9800;
    }

    /* 미디어쿼리 */
    @media (max-width: 1300px) {
      #wrap {
        width: 96%;
      }
    }
    @media (max-width: 768px) {
      #wrap {
        width: 100%;
      }
    }
    @media (max-width: 480px) {
      #aside {
      width: 100%;
      height: 300px;
      }
      #section {
        width: 100%;
        height: 480px;
      }
    }

 

 

실행 결과 (width: 1920px)

 

 

실행 결과 (width: 1300px)

 

 

실행 결과 (width: 768px)

 

 

실행 결과 (width: 480px)

 

 

 

5. layout01_05 - grid 방식 레이아웃

 

 

- HTML

 

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

 

 

- CSS

 

    * {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #fff3e0;
    }
    #wrap {
      display: grid;
      grid-template-areas: 
        "header header"
        "nav nav"
        "aside section"
        "footer footer";
      grid-template-columns: 400px 800px; /* 가로 값 설정 */
      grid-template-rows: 100px 100px 780px 100px; /* 세로 값 설정 */
      width: 1200px;     
      margin: 0 auto;
    }
    #header {
      background-color: #ffe0b2;
      grid-area: header;
    }
    #nav {
      background-color: #ffcc80;
      grid-area: nav;
    }
    #aside {
      background-color: #ffb74d;
      grid-area: aside;
    }
    #section {
      background-color: #ffa726;
      grid-area: section;
    }
    #footer {
      background-color: #ff9800;
      grid-area: footer;
    }

 

grid 방식을 사용하면 복잡한 레이아웃 구성을 쉽게 컨트롤할 수 있다는 장점이 있다.

틀을 만드는 것이 조금 어려울 수 있지만 나중에 수정을 하거나 보완을 할 때는 간편하게 할 수 있다.

 

 

실행 결과

 

 

 

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

 

 

- HTML

 

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

 

 

- CSS

 

    * {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #fff3e0;
    }
    #wrap {
      display: grid;
      grid-template-areas: 
        "header header"
        "nav nav"
        "aside section"
        "footer footer";
      grid-template-columns: 30% 70%; /* 반응형이라 %로 변경 */
      grid-template-rows: 100px 100px 780px 100px; /* 세로 값 설정 */
      width: 1200px;     
      margin: 0 auto;
    }
    #header {
      background-color: #ffe0b2;
      grid-area: header;
    }
    #nav {
      background-color: #ffcc80;
      grid-area: nav;
    }
    #aside {
      background-color: #ffb74d;
      grid-area: aside;
    }
    #section {
      background-color: #ffa726;
      grid-area: section;
    }
    #footer {
      background-color: #ff9800;
      grid-area: footer;
    }

    /* 미디어쿼리 */
    @media (max-width: 1300px) {
      #wrap {
        width: 96%;
      }
    }
    @media (max-width: 768px) {
      #wrap {
        width: 100%;
      }
    }
    @media (max-width: 480px) { 
    /* 여기서부터는 1단 구성이기 때문에 레이아웃 변경 */
      #wrap {
        grid-template-areas: 
          "header"
          "nav"
          "aside"
          "section"
          "footer";
        grid-template-columns: 100%; 
        grid-template-rows: 100px 100px 300px 480px 100px; 
      }
      #aside {
        width: 100%;
        height: 300px;
      }
      #section {
        width: 100%;
        height: 480px;
      }
    }

 

 

실행 결과 (width: 1920px)

 

 

실행 결과 (width: 1300px)

 

 

실행 결과 (width: 768px)

 

 

실행 결과 (width: 480px)

 

반응형

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

포트폴리오 사이트 만들기 프로젝트 - float, flex, grid 레이아웃 유형별 연습3  (0) 2023.05.05
포트폴리오 사이트 만들기 프로젝트 - float, flex, grid 레이아웃 유형별 연습2  (0) 2023.05.04
포트폴리오 사이트 만들기 프로젝트1 - Figma  (0) 2023.05.01
컴퓨터그래픽스운용기능사 실기 시험 공부 - 공개 문제 5번  (0) 2023.04.16
컴퓨터그래픽스운용기능사 실기 시험 공부 - 공개 문제 4번  (0) 2023.04.14

관련글

댓글 0

티스토리툴바