사이트 만들기17 레이아웃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; backgroun.. 2022. 8. 5. 레이아웃05 레이아웃05 이번 레이아웃은 전체 영역이 들어간 구조에서 심화된 레이아웃입니다. 세분화된 블록을 설정하기 위해 컨테이너 안에 또 다시 블록을 잡아 세분화해야 합니다. float을 이용한 레이아웃 컨테이너 안에 float 방식을 쓸수록 구조가 복잡해지며 이 경우 clear을 주어야 할 블록을 알기 힘들기 때문에 clearfix 방식을 사용하는게 낫습니다. 컨텐츠 블록을 따로 만들어 해당 블록에 clearfix를 적용하면 정렬할 수 있습니다. * { padding: 0; margin: 0; } #header { width: 100%; height: 100px; background-color: #EEEBE9; } #header .h1 { width: 100%; height: 100px; background-c.. 2022. 8. 4. 레이아웃03 레이아웃03 이번 레이아웃은 심화된 레이아웃으로 article 블록이 하나 더 추가됐으며, article 블록이 aside 블록과 수직으로 나란히 붙어 있어 추가적인 블록 작업을 해주어야 합니다. float을 이용한 레이아웃 float 방식은 옮겨야 할 블록에 float:left로 정렬을 하고 clear:both를 통해 플로팅을 닫아 형태를 완성합니다. 많이 쓰이는 방식이나 복잡한 구조일수록 사용하기 힘든 단점이 있습니다. float 방식은 clear, overflow, clearfix 세가지 방식이 있습니다. 이번엔 clearfix 방식입니다. * { margin: 0; padding: 0; } body { background-color: #E1F5FE; height: 100%; } #wrap { ma.. 2022. 8. 4. 레이아웃02 레이아웃02 이번 레이아웃은 article 블록이 하나 더 추가된 형태로 반응형 시 추가된 article 블록이 레이아웃01과 조금 다르지만 비슷한 방식으로 반응형을 완성할 수 있습니다. float을 이용한 레이아웃 float 방식은 옮겨야 할 블록에 float:left로 정렬을 하고 clear:both를 통해 플로팅을 닫아 형태를 완성합니다. 많이 쓰이는 방식이나 복잡한 구조일수록 사용하기 힘든 단점이 있습니다. float 방식은 clear, overflow, clearfix 세가지 방식이 있습니다. 이번 방식은 ovrerflow 방식입니다. * { margin: 0; padding: 0; } body { background-color: #E8F5E9; height: 100%; } #wrap { wid.. 2022. 8. 4. 레이아웃01 레이아웃01 레이아웃을 만드는 방법에는 크게 3가지가 있습니다. 01. float 방식 02. flex 방식 03. grid 방식 각각의 방식에는 장단점이 있으며 상황에 따라 선택하여 사용하는게 좋습니다. 이번 레이아웃은 가장 기본적이고 심플한 레이아웃입니다. float을 이용한 레이아웃 float 방식은 옮겨야 할 블록에 float:left로 정렬을 하고 clear:both를 통해 플로팅을 닫아 형태를 완성합니다. 많이 쓰이는 방식이나 복잡한 구조일수록 사용하기 힘든 단점이 있습니다. float 방식은 clear, overflow, clearfix 세가지 방식이 있습니다. 이번 방식은 clear 방식입니다. *{ margin: 0; } body { background-color: #FFF3E0; hei.. 2022. 7. 29. 이전 1 2 다음
