Layout

레이아웃5 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float을 이용한 레이아웃 /* 1. 꺠지는 영역에 clear:both를 설정한다. 2. 부모 박스 영역에 overflow: hidden을 설정한다. 3. clearfix를 설정한다. (.clearfix::before) */ 1번 방법은 깨진 영역이 눈에 보여야 적용할 수 있습니다. 2번 방법은 육안상 잘 정리 되어있는 것처럼 보이지만 외부의 애니메이션 같은 효과가 제대로 표시되지 않을 수 있습니다. 3번 방법이 가장 좋은방법으로 clearfix클래스를 적용해서 가상요소 앞뒤로 설정 해주고 float를 적용한 요소의 부모박스에 claerfix 클래스를 적..

레이아웃4 레이아웃은 웹사이트의 기초공사입니다. 정확히 알맞게 배치해야 완성도가 높은 웹사이트를 만들 수 있습니다. 레이아웃을 만들자 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. *{ 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; } /* ..

레이아웃3 이번 레이아웃은 가장 기본적인 형태입니다. 우선 칸을 분리시켜 header, nav, (aside, article1, article2, article3), footer로 나눠서 작업하겠습니다. float을 이용한 레이아웃 이번 레이아웃은 기본적인 형태로 칸을 분리시키고 aside와 article1, article2, article3를 각각 같은 영역에서 배치해주기 위해 float속성을 사용해서 배치하겠습니다. 그리고 오류로 인해서 footer이 나타나지 않아서 clear:both를 사용해서 수정해주겠습니다. * { margin: 0; padding: 0; } body { background-color: #FFFFFF; } #wrap { width: 1200px; margin: 0 auto;; ..

레이아웃2 이번 레이아웃은 한단계 더 높은 수준의 영역으로 한줄에 세가지의 영역을 나열합니다. 이번 영역은 header, nav, (aside, section, footer), article로 영역을 나누었습니다. float을 이용한 레이아웃 aside와 section,footer영역을 한줄로 배치하기 위해서 float속성을 사용해서 작업했습니다. 하지만 오류로 인해서 article부분이 없어지기 때문에 clear:both를 사용해서 버그를 수정했습니다.. * { margin: 0; } body{ background-color: #E8F5E9; } #wrap { width: 1200px; margin: 0 auto;; } #header { width: 1200px; height: 100px; backgr..

레이아웃1 이번 레이아웃은 가장 기본적인 형태입니다. 우선 칸을 분리시켜 header, nav, aside, section footer로 나눠서 작업하겠습니다. float을 이용한 레이아웃 aside와 section영역을 한줄로 배치하기 위해서 float속성을 사용해서 작업했습니다. 하지만 오류로 인해서 footer부분이 없어지기 때문에 clear:both를 사용해서 버그를 수정했습니다. *{ margin: 0; } #body { background-color: #FFF3E0; } #wrap { width: 1200px; margin: 0 auto; } #header { width: 100%; height: 100px; background-color: #FFE0B2; } #nav { width: 100%..