coding for _

레이아웃04 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. 미디어쿼리를 이용한 반응형 클래스 container로 간략하게 코딩할 수 있다. * { margin: 0; padding: 0; } #header { height: 100px; background-color: #E0F2F1; } #nav { height: 300px; background-color: #80CBC4; } #section { height: 500px; background-color: #26A69A; } #footer { height: 100px; background-color: #00897B; } /* id/class #/. 한번만 쓸 수 있..

레이아웃02 float, flex, grid를 통해 표현한 레이아웃 float 원하는 곳에 float: left, right, none 등 을 준다. float을 줄 땐 버그 방지를 위한 방법이 3가지 있다. 1. claer: both; 2. overflow: hidden; 3. .clearfix::before, .clearfix::after {content: '' " ; display: block; line-height: 0;} .clearfix::after {clear: both;} See the Pen 레이2float by kimm99604 (@kimm99604) on CodePen. float - 반응형 미디어쿼리를 통해 float 반응형을 만들 수 있다. @media(max-width:1300p..