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

Study/Etc

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

posey 2023. 5. 8. 18:41

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

Review

이번 레이아웃 유형은 실무에서 가장 많이 쓰이는 유형이다.

이전의 유형보다 단순해졌지만, 이번 것은 전체 영역이 들어가는 레이아웃이다. 이 유형은 float을 쓰든

flex를 쓰든 크게 의미가 없다.

사실 flex, grid는 최근에 나온 방법이라 기존의 사이트에서는 아직까지 float 방식을 많이 사용하고 있다.

그래서 모두 알고 있어야 코드를 읽는 데 있어서 문제가 없을 것이라 생각해서 다양하게 공부해보고

있다. flex 방식은 학원에서 페이지를 만들 때 많이 활용했었는데, 공부하다보니 flex 방식도 여러 문제가

있다는 생각이 든다. 복잡한 구성일 때는 grid 방식이 가장 간편할 것 같다.

아주 기본 중의 기본적인 공부이지만 레이아웃 짜는 방법을 공부하다보니 또 다시 코딩에 재미가 붙는다.

파이팅 !

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

1. layout04_01 - container class로 통일하여 효율적인 코드 짜기

- HTML

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

- CSS

    * {
      margin: 0;
      padding: 0;
    }
    #wrap {
      width: 100%;
    }
    #header {
      width: 100%;
      height: 100px;
      background-color: #e0f2f1;
    }
    #nav {
      width: 100%;
      height: 300px;
      background-color: #80cbc4;
    }
    #section {
      width: 100%;
      height: 580px;
      background-color: #2ba69a;
    }
    #footer {
      width: 100%;
      height: 100px;
      background-color: #00897b;
    }
    .container {
      width: 1200px;
      height: inherit;
      background-color: rgba(0,0,0,0.1);
      margin: 0 auto;
    }

여기서 float: left;를 적용하면 footer의 height 값이 사라지는데, 이번에는 이를 방지하기 위해 clearfix

방식을 활용했다. CSS에 clearfix class를 만들고 나서 HTML에 적용시키면 된다.

2. layout04_02 - 반응형 레이아웃

- HTML

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

- CSS

    * {
      margin: 0;
      padding: 0;
    }
    #header {
      height: 100px;
      background-color: #e0f2f1;
    }
    #nav {
      height: 300px;
      background-color: #80cbc4;
    }
    #section {
      height: 580px;
      background-color: #2ba69a;
    }
    #footer {
      height: 100px;
      background-color: #00897b;
    }
    .container {
      width: 1200px;
      height: inherit;
      background-color: rgba(0,0,0,0.1);
      margin: 0 auto;
    }

    /* 미디어쿼리 */
    @media (max-width: 1300px) {
      .container {
        width: 96%;
      }
    }
    @media (max-width: 768px) {
      .container {
        width: 100%;
      }
    }