반응형 CSS/Layout5 Layout5 레이아웃05 이번 레이아웃은 반응형 적용을 위해 메인-좌,우 영역이 나누어진 레이아웃입니다. float : clearfix를 이용한 레이아웃 부모 요소가 다시 자식 요소를 감쌀 수 있게 float을 초기화(clear)하여 버그를 고쳐주는(fix) 코드입니다. * { margin: 0; } #wrap {} #header { height: 100px; background-color: #EEEBE9; } #nav { height: 100px; background-color: #B9AAA5; } #main { height: 780px; background-color: #886F65; } #footer { height: 100px; background-color: #4E342E; } .container { wid.. 2022. 8. 4. Layout4 레이아웃04 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. container를 이용한 레이아웃 * { 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; } /* id | class 차이점 # | . 한번 | 두개이상 전체적인 틀, 스크립트 -->.. 2022. 7. 29. Layout3 레이아웃03 이번 레이아웃은 사이드 1영역과 그 옆으로 3개의 영역이 나누어진 레이아웃입니다. float : clearfix를 이용한 레이아웃 부모 요소가 다시 자식 요소를 감쌀 수 있게 float을 초기화(clear)하여 버그를 고쳐주는(fix) 코드입니다. * { margin: 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; .. 2022. 7. 29. Layout2 레이아웃02 이번 레이아웃은 메인태그가 3영역으로 분할되어있습니다. float : overflow를 이용한 레이아웃 overflow 속성은 요소의 박스에 내용이 더 길 때 어떻게 보일지 선택하는 속성입니다. * { margin: 0; } body { background-color: #E8F5E9; } #wrap { width: 1200px; height: 100px; margin: 0 auto; } #header { width: 1200px; height: 100px; background-color: #C8E6C9; } #nav { width: 1200px; height: 100px; background-color: #A5D6A7; } #main { width: 1200px; overflow: hidde.. 2022. 7. 29. Layout1 레이아웃01 이번 레이아웃은 기초적인 구조로, 총 5영역으로 나누어집니다. float을 이용한 레이아웃 float은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. * { margin: 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; .. 2022. 7. 29. 이전 1 다음 반응형
