레이아웃02

 

레이아웃02

사이드가 2개인 웹사이트 구조

float을 이용한 레이아웃 + 반응형

float은 본래 레이아웃의 용도가 아니었으나 마땅한 속성이 없어 사용하게되었다. 둥둥 뜨는 형태로 float 속성이 적용이 안된 blockbox는 float된 box 밑으로 들어가게 된다.
때문에 배치이동이 필요한 요소에 float을 이용하면 세로로만 배치되던 요소를 가로로 나란히 배치해줄 수 있다.

주 사용 속성
float: left; - 요소를 위로 뜨게 하여 왼쪽으로 배치해주는 속성으로 자신이 갈 수 있는 가장 첫번째 왼쪽에 배치가 된다.
clear: both; - float을 한 요소아래로 다른 요소가 숨어버리는 버그를 잡아주는 역할의 속성 보통 footer와 같은 하단 요소에 스타일을 적용한다.

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: bisque;
}
#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%;
}
#aside {
    width: 25%;
    height: 780px;
    background-color: #81C784;
    float: left;
}
#section {
    width: 50%;
    height: 780px;
    background-color: #66BB6A;
    float: left;
}
#article {
    width: 25%;
    height: 780px;
    background-color: #4CAF50;
    float: left;
}
#footer {
    width: 100%;
    height: 100px;
    background-color: #43A047;
    clear: both;
}

/* 미디어쿼리 */
@media (max-width: 1220px){
    #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){
    #wrap{
        width: 100%;
    }
    #aside {
        width: 100%;
        height: 200px;
    }
    #section {
        width: 100%;
        height: 430px;
    }
}

flex을 이용한 레이아웃 + 반응형

레이아웃의 배치를 위해 나오게 된 속성으로 배치하는 데 있어 간편하다.
float과 달리 배치가 필요한 각 요소에 적용하는 것이 아니라 그 요소들을 품고 있는 부모 요소에게 스타일을 선언해주어야 한다.
때문에 각 섹션과 구조를 잘 파악하여 부모 자식 관계에 대한 마크업을 잘 해주는 것이 중요하다.

주 사용 속성
display: flex; - display는 웹페이지에서 레이아웃 및 요소가 어떻게 보이는가를 선언해주는 속성으로 즉 해당 요소를 flex 스타일로 보이게 하는 속성
flex-wrap: wrap; - flex속성을 통해 배치한 요소가 잘 적용되도록 해주는 속성으로 적용하지 않을 경우 배치 적용이 되지 않는다.

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: bisque;
}
#wrap {
    width: 1200px;
    margin: 0 auto; 
}
#header {
    /* width 100%는 기본값이기 때문에 지워도 무방! */
    height: 100px;
    background-color: #C8E6C9;
}
#nav {
    height: 100px;
    background-color: #A5D6A7;
}
#main {
    display: flex;
    flex-wrap: wrap;
}
#aside {
    width: 25%;
    height: 780px;
    background-color: #81C784;
}
#section {
    width: 50%;
    height: 780px;
    background-color: #66BB6A;
}
#article {
    width: 25%;
    height: 780px;
    background-color: #4CAF50;
}
#footer {
    height: 100px;
    background-color: #43A047;
}

/* 미디어쿼리 */
@media (max-width: 1220px){
    #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;
    }
}

grid을 이용한 레이아웃 + 반응형

flex와 마찬가지로 부모 컨테이너에게 속성을 부여해준다.
하지만 grid는 flex와 다르게 2개 축을 모두 활용하여 격자(#) 위에 아이템을 배치하는 레이아웃 방식이다.
복잡한 구조의 웹을 구성하려면 grid 레이아웃 방법을 사용하는 것이 효율적이다.

주 사용 속성
display: gird; - 레이아웃 및 요소를 grid 스타일로 보이게 하는 속성
grid-template-areas - 레이아웃을 #과 같은 격자로 나누어서 구조를 나누어 주는 역할
grid-template-columns: ; - 격자로 나눈 요소의 가로 값을 정해주는 속성
grid-template-rows: ; - 격자로 나눈 요소의 세로 값을 정해주는 속성
grid-area: ; - 자식 컨테이너에게 부모에게 넣은 스타일이 적용될 수 있도록 이름을 부여해주는 속성

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: bisque;
}
#wrap {
    width: 1200px;
    margin: 0 auto; 
}
#header {
    height: 100px;
    background-color: #C8E6C9;
}
#nav {
    height: 100px;
    background-color: #A5D6A7;
}
#main {
    /* 나눠지는 태그의 부모 태그가 main이기 때문에 그리드 속성을 여기에 주는 것! */
    display: grid;
    grid-template-areas: 
    "aside section article"
    ;
    grid-template-columns: 25% 50% 25%;
    grid-template-rows: 780px;
}
#aside {
    background-color: #81C784;
    grid-area: aside;
}
#section {
    background-color: #66BB6A;
    grid-area: section;
}
#article {
    background-color: #4CAF50;
    grid-area: article;
}
#footer {
    height: 100px;
    background-color: #43A047;
}

/* 미디어쿼리 */
@media (max-width: 1220px){
    #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: 780px 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; 
    }
    #aside {
        width: 100%;
        height: 200px;
    }
    #section {
        width: 100%;
        height: 430px;
    }
}