Layout4 LayOuy 구조 5 레이아웃05 float, flex, grid 를이용하여 구조화를 할수있습니다. flex 같은경우는 컨텐츠를 묶어서 구조화 합니다. float를 이용한 레이아웃 CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. float으로 인해 영역깨짐 방지법 1. 깨지는 영역에 clear:both를 설정합니다. 2. 부모 박스 영역에 overflow: hidden을 설정합니다. 3. clearfix를 설정합니다. *{ box-sizing: 0; padding: 0; margin: 0; } #header { height: 100px; ba.. 2022. 7. 27. LayOut 구조 4 레이아웃04 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. CSS구성 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. *{ box-sizing: 0; padding: 0; margin: 0; } #header { height: 100px; background-color: #E0F2F1; } #nav { height: 300px; background-color: #80CBC4; } #section { height: 580px; background-color: #26A69A; } #footer { height: 100px; b.. 2022. 7. 27. LayOut 구조 2 레이아웃02 이번 레이아웃은 사이드메뉴가 두개 컨텐츠가 한개 들어간 구조입니다. float, flex, grid 를이용하여 구조화를 할수있습니다. float를 이용한 레이아웃 CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. * { box-sizing: border-box; padding: 0; margin: 0; } body { background-color: #E8F5E9; } #wrap { width: 1200px; margin: 0 auto; } #header { width: 100%; height: 100px; b.. 2022. 7. 27. LayOut 구조 1 레이아웃01 이번 레이아웃은 사이드메뉴가 하나 컨텐츠가 하나 들어간 구조입니다. float, flex, grid 를이용하여 구조화를 할수있습니다. float를 이용한 레이아웃 CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. * { padding: 0; margin: 0; } body { background-color: #FFF3E0; } #wrap{ width: 1200px; margin: 0 auto; } #header{ width: 100%; height: 100px; background-color: #FFE0B2; .. 2022. 7. 25. 이전 1 다음 728x90 반응형
