레이아웃 배치하기 04

레이아웃04

이번 레이아웃은 단순한 구조로 float을 이용한 레이아웃 배치만 해보겠습니다.

float을 이용한 레이아웃

float 속성은 특히 국내 실무 내에서 레이아웃 설계하는 과정에서 많이 사용하는 속성입니다.
복잡한 형태의 레이아웃을 구성하는데 필요한 핵심 속성으로 특정 요소를 떠있게, 흐르도록, 부유하게 하도록 하는 속성입니다.
다시 말해, float 속성을 사용해 박스를 왼쪽(left) 또는 오른쪽(right)으로 "부유"시키는 레이아웃 기법입니다.
여기서 '부유하다' 라는 의미는 요소가 기본적인 문서 배치의 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽으로 이동하는 것을 말합니다.
이 플로팅 모델을 이용하면 문서의 흐름과 관계없이 화면 배치를 유연하게 할 수 있습니다.

---

<style>
    *{
        margin: 0;
        padding: 0;
    }
    #wrap{
        width: 100%;
    }
    #header{
        width: 100%;
        height: 100px;
        background-color: #E0F2F1;
    }
    #header .h1{
        height: 100px;
        background-color: #B2DFDB;
    }
    #nav{
        width: 100%;
        height: 300px;
        background-color: #80CBC4;
    }
    #nav .n1{
        height: 300px;
        background-color: #4DB6AC;
    }
    #section{
        width: 100%;
        height: 580px;
        background-color: #26A69A;
    }
    #section .s1{
        height: 580px;
        background-color: #009688;
    }
    #footer{
        width: 100%;
        height: 100px;
        background-color: #00897B;
    }
    #footer .f1{
        height: 100px;
        background-color: #00796B;
    }
    /*  아이디/클래스
        #/.
        한번/여러번(중복)
        전체적인 틀, 스크립트 -->id
        세부적인 영억, 반복 -->class */

    .container{
        width: 1200px;
        height: inherit;
        margin: 0 auto;
        background-color: rgba(0, 0, 0, 0.3)
    }
    @media (max-width: 1220px){
        .container {
            width: 96%;
        }
    }
    @media(max-width: 768px){
        .container{
            width: 100%;
        }
    }
    @media(max-width: 480px){

    }
<style>

결과