Layout5 레이아웃 05 레이아웃05 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정후에, float flex grid 방법중 하나를 선택해 구역을 나누어줍니다. float을 이용한 레이아웃 float으로 인한 영역깨짐 방지법에는 세가지방법이있는데 그중 가상요소 clearfix 방법을 사용해 만들어보았다. 1. 깨지는 영역에 clear: both를 설정한다. 깨지는부분이 눈에보이지 않으므로 좋지않은방법 2. 부모 박스 영역에 overflow: hidden을 설정한다. 3. clearfix를 설정한다. (가상요소) * { margin: 0; padding: 0; } #wrap { width: 100%; } #header { width: 100%; .. 2022. 7. 29. 레이아웃 04 레이아웃04 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. 코드 * { 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; } .container { width: 1200px; height: inherit; margin: 0 auto; backgr.. 2022. 7. 29. 레이아웃 03 레이아웃03 이번 레이아웃은 기본형틀에 가운데가 좌측 한칸 우측 세칸으로 나뉜 구조입니다. float을 이용한 레이아웃 이번 레이아웃은 float으로 컨텐츠를 띄울 시 다음 내용을 빈자리가 채우러 올라오게 브라우저에서 오류가 생길수 있어서 clearfix를 선언해 버그를 해결하는 방법이다. * { margin: 0; } body { background-color: #E1F5FE; } #wrap { width: 1200px; margin: 0 auto; } #header { height: 100px; background-color: #B3E5FC; } #nav { height: 100px; background-color: #81D4FA; } #main { } #aside { width: 30%; heigh.. 2022. 7. 29. 레이아웃 02 레이아웃02 이번 레이아웃은 기본형틀에 가운데가 세칸으로 나뉜 구조입니다. float을 이용한 레이아웃 구역을 div태그로 정한뒤 float : left;를 사용해 왼쪽으로 순차적으로 밀어넣은 모습을 볼수있습니다. 밀려져서 보이지않는 구역은 clear: both;를 이용해 제작하였습니다. 또한 부모 main태그에 overflow: hidden;을 작성해 넘친 컨텐츠는 잘려지고 보여지지 않게 설정하였습니다. * { margin: 0; } body { background-color: #E8F5E9; } #wrap { width: 1200px; margin: 0 auto; } #header { width: 100%; height: 100px; background-color: #C8E6C9; } #nav { w.. 2022. 7. 29. 레이아웃 01 레이아웃01 이번 레이아웃은 기본형틀에 가운데가 두칸으로 나뉜 구조입니다. float을 이용한 레이아웃 구역을 div태그로 정한뒤 float : left;를 사용해 왼쪽으로 순차적으로 밀어넣은 모습을 볼수있습니다. 밀려져서 보이지않는 구역은 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%; height: 100px; background-color: #FFCC80; } #aside { wi.. 2022. 7. 29. 이전 1 다음
