Day029_HTML_CSS

float 속성을 이용하여 반응형 웹 레이아웃 구성하기

• container, aside, item1, item2, item3, footer 구성
  

• aside와 itme1, 2, 3에 float 속성 적용하기

	.aside {
            float: left;
            width: 30%;
            height: 600px;
            background-color: darkseagreen;
        }
        .item1, .item2, .item3{
            float: left;
            width: 70%;
            height: 200px;
        }

• footer에 clear 속성을 적용하여 정렬하기

	.footer {
            clear:both;
            height: 200px;
            background-color: green;
        }

• 미디어(media) 쿼리를 사용하여 화면의 넓이마다 레이아웃 변경하기

	@media screen and (max-width:700px) {
            .container {
                width: 100%;
            }
        }
        @media screen and (max-width:550px) {
            .aside {
                height: 200px;
                width: 100%;
            }
            .item1, .item2 {
                width: 33.3%;
            }
            .item3 {
                width: 33.4%;
            }
        }
        @media screen and (max-width:400px) {
            .item1, .item2, .item3 {
                width: 100%;
            }
        }

float 속성으로 구성한 레이아웃의 마지막 부분에 clear 속성을 적용하여 그 이후에 요소가 추가되었을 때 적용될 수 있도록 한다.

	.container::after {
            content: '';
            display: block;
            clear: both;
        }