Layout01

레이아웃1

이번 레이아웃은 가장 기본적인 형태입니다. 우선 칸을 분리시켜 header, nav, aside, section footer로 나눠서 작업하겠습니다.

float을 이용한 레이아웃

aside와 section영역을 한줄로 배치하기 위해서 float속성을 사용해서 작업했습니다.
하지만 오류로 인해서 footer부분이 없어지기 때문에 clear:both를 사용해서 버그를 수정했습니다.

*{
    margin: 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: 1220px){     /* 노트북 화면*/
    #wrap {
        width: 96%;             /*양쪽 여백을 생기게 함*/
        height: 100%;
    }
}
@media(max-width: 768px){       /*태블릿 화면*/
    #wrap {
        width: 100%;            /*여백 제거*/
        height: 100%;
    }
}
@media(max-width: 480px){      /*모바일 화면*/
    #aside {
        width: 100%;
        height: 300px;
    }
    #section {
        width: 100%;
        height: 480px;
    }
}

결과

flex을 이용한 레이아웃

flex는 제가 지정한 모든 태그들의 부모태그인 wrap태그에 display: flex를 지정 후
모든 태그들이 잘 배치 될 수 있도록 flex-wrap:wrap; 을 사용해서 배치합니다.

* {
    margin: 0;
}
body {
    background-color: #FFF3E0;
}
#wrap{
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}
#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: 1220px){
    #wrap {
        width: 96%;
        height: 100%;
    }

}
@media(max-width: 768px){
    #wrap {
        width: 100%;
        height: 100%;
    }
}
@media(max-width: 480px){
    #aside {
        width: 100%;
        height: 300px;
    }
    #section {
        width: 100%;
        height: 480px;
    }
}

결과

grid을 이용한 레이아웃

grid를 이용한 레이아웃 배치 입니다.
grid는 부모태그에서 지정한 모든 태그들을 컨트롤하는 것입니다.
부모태그에서 grid-template-areas를 지정 후 grid-template-columns, grid-template-rows를 사용해서 지정한 영역의 행 높이& 열 넓이를 지정합니다.
또한 grid-template-areas로 지정한 모든 자식태그에서 grid-area로 정의해 주어야합니다.

* {
  margin: 0;
}

body {
  background-color: #FFF3E0;
}

#wrap {
  width: 1200px;
  margin: 0 auto;
  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;
}

#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 : 1220px) { /* 노트북 화면 */
  #wrap {
    width: 96%; /* 양쪽 여백 */
  }
}

@media(max-width : 768px) { /* 태블릿 화면 */
  #wrap {
    width: 100%; /* 여백 없음 */
  }
}

@media(max-width : 480px) { /* 모바일 화면 */
  #wrap {
    width: 100%;
    display: grid;
    grid-template-areas: /* 한줄로 배치하기위한 레이아웃 재정의 */
      "header header"
      "nav nav"
      "aside aside"
      "section section"
      "footer footer"
      ;
    grid-template-columns: auto;
    grid-template-rows: 100px 100px 380px 400px 100px;
  }
}

결과