레이아웃 04번

728x90

레이아웃04

이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다.

container를 이용한 레이아웃

이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. container는 내용을 포함하고 채우거나, 중앙 정렬하는 데에 사용합니다. 컨테이너는 중첩될 수 있지만 보통은 중첩이 필요하지 않습니다.
컨테이너만 설정했기에 float, flex, grid가 딱히 지정되어 있지 않았으며 반응형으로는 그저 미디어 쿼리에, 컨테이너에서 %를 설정해주면 됩니다.

    * {
    margin: 0;
    padding: 0;
    }
    #header {
        height: 100px;
        background-color: #E0F2F1;
    }
    #nav {
        height: 300px;
        background-color: #80CBC4;
    }
    #section {
        height: 580px;
        background-color: #26A69A;
    }
    #footer {
        height: 100px;
        background-color: #00897B;
    }
    /* 
        아이디 / 클래스 
            #  / .
            한번 / 두개 이상(중복)
        전체적인 틀 , 스크립트 --> id
        세부적인 영역 , 반복 --> class
    */
    .container{
        width: 1200px;
        height: inherit; 
        margin: 0 auto;
        background-color: rgba(0,0,0,0.3);
    }
    @media (max-width : 1200px){
        .container{
            width: 96%;
        }
    }
    @media (max-width : 768px){
        .container{
            width: 100%;
        }
    }