LAYOUT5 [LAYOUT]레이아웃 유형05 레이아웃05 이번 레이아웃 역시 가운데 영역이 들어간 구조입니다. float을 이용한 레이아웃 'float'은 원래 '뜨다'라는 의미이며, 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다. div태그로 틀을 잡는데, div 태그는 block 특성을 가지고 있어 세로로 표시됩니다. 이것을 가로로 정렬시켜주는 것이 float입니다. 이 속성을 쓰면 요소가 보이지 않는 버그가 생기는데, 여기서는 clearfix;를 사용하였습니다.. * { margin: 0 auto; padding: 0; } #wrap { width: 100%; margin: 0 auto; } #header { width: 100%; height: 100px; background-color: #EEEBE9; .. 2022. 7. 29. [LAYOUT]레이아웃 유형04 레이아웃04 이번 레이아웃은 실제 사이트에서 많이 사용하는 전체 영역이 들어간 구조입니다. 컨테이너를 만들어 영역을 설정합니다. 컨테이너 구조 이번 레이아웃은 전체 영역이 들어간 구조입니다. 복잡하지 않기 때문에, float이나 flex, grid를 사용하지 않고 레이아웃을 만들 수 있습니다. * { 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: #.. 2022. 7. 29. [LAYOUT]레이아웃 유형03 레이아웃03 이번 레이아웃은 가운데 영역이 다소 복잡해진 구조입니다. float을 이용한 레이아웃 'float'은 원래 '뜨다'라는 의미이며, 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다. div태그로 틀을 잡는데, div 태그는 block 특성을 가지고 있어 세로로 표시됩니다. 이것을 가로로 정렬시켜주는 것이 float입니다. 이 속성을 쓰면 요소가 보이지 않는 버그가 생기는데, clearfix 또한 사용 가능합니다. * { margin: 0; } body { background-color: #e1f5fe; } #wrap { width: 1200px; margin: 0 auto; } #header { height: 100px; background-color: #b3.. 2022. 7. 29. [LAYOUT]레이아웃 유형02 레이아웃02 이번 레이아웃은 가운데 영역이 하나 더 추가된 구조입니다. float을 이용한 레이아웃 'float'은 원래 '뜨다'라는 의미이며, 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다. div태그로 틀을 잡는데, div 태그는 block 특성을 가지고 있어 세로로 표시됩니다. 이것을 가로로 정렬시켜주는 것이 float입니다. 이 속성을 쓰면 요소가 보이지 않는 버그가 생기는데, overflow: hidden;도 사용 가능합니다. * { margin: 0; } body { background-color: #e8f4f5; } #wrap { width: 1200px; margin: 0 auto; } #header { width: 100%; height: 100px; .. 2022. 7. 29. [LAYOUT]레이아웃 유형01 레이아웃01 이번 레이아웃은 제일 기본적인 구조입니다. 단순한 구조이기 때문에 간편하게 만들 수 있습니다. float을 이용한 레이아웃 'float'은 원래 '뜨다'라는 의미이며, 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다. div태그로 틀을 잡는데, div 태그는 block 특성을 가지고 있어 세로로 표시됩니다. 이것을 가로로 정렬시켜주는 것이 float입니다. 이 속성을 쓰면 요소가 보이지 않는 버그가 생기는데, clear:both;를 사용하면 요소를 다시 볼 수 있습니다. * { margin: 0; } body { background-color: #fff3e0; } #wrap { width: 1200px; margin: 0 auto; } #header { wi.. 2022. 7. 29. 이전 1 다음 728x90
