LAYOUT5 Layout 05 Layout 05 기본적인 레이아웃 구성 요소 float을 이용한 레이아웃 float 요소를 이용해 세로로만 나열이 아닌 가로로도 배치하여 레이아웃을 구성 * { margin: 0; height: 0; } #wrap { width: 100%; margin: 0 auto; background-color: #000; } #header { width: 100%; height: 100px; background-color: #EEEBE9; } #nav { width: 100%; height: 100px; background-color: #B9AAA5; } #main { width: 100%; height: 780px; background-color: #886F65; } #footer { width: 100%; h.. 2022. 7. 29. Layout 04 Layout 04 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. container을 이용한 레이아웃 container 요소를 이용해 레이아웃을 구성 (반응형 포함) * { margin: 0; padding: 0; } #header { height: 100px; background-color: #e0f2f1; } #nav { height: 300px; background-color: #80cbc4; } #section { height: 580px; background-color: #26a694; } #footer { height: 100px; background-color: #00897b; } .container .. 2022. 7. 29. Layout 03 Layout 03 기본적인 레이아웃 구성 요소 float을 이용한 레이아웃 float 요소를 이용해 세로로만 나열이 아닌 가로로도 배치하여 레이아웃을 구성 * { margin: 0; padding: 0; } body { background-color: #e1f5fe; } #wrap { width: 1200px; margin: 0 auto; } #header { width: 1200px; height: 100px; background-color: #b3e5fc; } #nav { width: 1200px; height: 100px; background-color: #81d4fa; } #main { width: 1200px; } #aside { width: 300px; height: 780px; backgro.. 2022. 7. 29. Layout 02 Layout 02 기본적인 레이아웃 구성 요소 float을 이용한 레이아웃 float 요소를 이용해 세로로만 나열이 아닌 가로로도 배치하여 레이아웃을 구성 * { margin: 0; padding: 0; } body { background-color: #e8f5e9; } #wrap { width: 1200px; margin: 0 auto; } #header { width: 1200px; height: 100px; background-color: #c8e6c9; } #nav { width: 1200px; height: 100px; background-color: #a5d6a7; } #main { width: 1200px; overflow: hidden; } #aside { width: 300px; heig.. 2022. 7. 29. Layout 01 Layout 01 기본적인 레이아웃 구성 요소 float을 이용한 레이아웃 float 요소를 이용해 세로로만 나열이 아닌 가로로도 배치하여 레이아웃을 구성 * { margin: 0; padding: 0; } body { background-color: #fff3e0; } #wrap { width: 1200px; margin: 0 auto; } #header { width: 1200px; height: 100px; background-color: #ffe0b2; } #nav { width: 1200px; height: 100px; background-color: #ffcc80; } #aside { width: 400px; height: 780px; background-color: #ffb74d; float.. 2022. 7. 29. 이전 1 다음
