레이아웃01

레이아웃01

웹사이트에 대한 가장 기본적인 형식의 레이아웃

레이아웃을 마크업할 때 주이할 점 :
레이아웃을 처음부터 세부적으로 뜯기보단 전체적인 것부터 먼저 선언해나가는 것이 효율적이다. 만약 부모 → 자식 → 자식1 = 자식2 라면 먼저 부모 마크업 뒤 스타일 속성을 선언하고 그다음 자식 그다음 자식1과2 이런 순서로 진행하면 된다.

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

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

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

* {
    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%;
    }
}
@media(max-width: 768px){
    #wrap {
        width: 100%;
    }
}
@media(max-width: 480px){
    #aside {
        width: 100%;
        height: 300px;
    }
    #section {
        width: 100%;
        height: 480px;
    }
}

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

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

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

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #FFF3E0;
}
#wrap {
    width: 1200px;
    margin: 0 auto;
    /* 부모요소인 wrap에 속성을 선언한다. */
    display: flex;
    flex-wrap: wrap; 
    /* 익스플로우에서는 felx를 지원하지 않는다. */
}
#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;
}

/* 미디어쿼리 - 반응형(모바일)설정 */
/* 반응형 1220 ~ 480 */
@media(max-width: 1220px){
    #wrap {
        width: 96%;
    }
}
@media(max-width: 768px){
    #wrap {
        width: 100%;
    }
}
@media(max-width: 480px){
    #aside {
        width: 100%;
        height: 300px;
    }
    #section {
        width: 100%;
        height: 480px;
    }
    
}

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

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

주 사용 속성
display: gird; - 레이아웃 및 요소를 grid 스타일로 보이게 하는 속성
grid-template-areas - 레이아웃을 #과 같은 격자로 나누어서 구조를 나누어 주는 역할
grid-template-columns: ; - 격자로 나눈 요소의 가로 값을 정해주는 속성
grid-template-rows: ; - 격자로 나눈 요소의 세로 값을 정해주는 속성
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 {
    grid-area: header;
    background-color: #FFE0B2;

}
#nav {
    grid-area: nav;
    background-color: #FFCC80;

}
#aside {
    grid-area: aside;
    background-color: #FFB74D;

}
#section {
    grid-area: section;
    background-color: #FFA726;
}

#footer {
    grid-area: footer;
    background-color: #FF9800;
}

/* 미디어쿼리 -반응형 설정- */

/* 데스크탑 및 태블릿 화면 */
@media(max-width: 1220px){
    #wrap {
        width: 96%;
    }
}
@media(max-width: 768px){
    #wrap {
        width: 100%;
    }
}
/* 모바일화면 */
@media(max-width: 480px){
    #wrap {
        grid-template-areas: 
        "header"
        "nav"
        "aside"
        "section"
        "footer"
        ;
        grid-template-columns: 100% ;
        grid-template-rows: 100px 100px 300px 400px 100px ;
        /* 모바일은 레이아웃이 1단으로 바뀌기 때문에 따로 부모 속성을 넣어주어야 한다. */
    }
}