Layout5 레이아웃 - 05 레이아웃05 float을 이용한 레이아웃 float을 사용한 후 영역이 깨지는 것을 방지하기 위해서는 세 가지의 방법이 있습니다. 첫번째는 깨지는 영역에 clear:both를 설정합니다. 하지만, 구조가 복잡해지면 쓰기 힘들어 지는 단점이 있습니다. 두번짼는 부모 박스 영역에 overflow:hidden을 설정합니다. 그러나, 이 경우에는 애니메이션 등이 보이지 않는 경우가 생기기도 합니다. 마지막 방법으로는 clearfix를 설정하는 것 입니다. /* clearfix */ .clearfix::before, .clearfix::after { content: ''; display: block; line-height: 0; } .clearfix::after { clear: both; } * { margin:.. 2022. 8. 4. 레이아웃 - 04 레이아웃04 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float을 이용한 레이아웃 container영역을 만들어 레이아웃을 설정합니다. id는 하나의 이름만 사용가능하나 class는 중복하여 사용이 가능합니다. 따라서 전체적인 틀은 id로 만들고, 세부적이거나 반복적으로 나오는 영역에는 class를 지정 하도록 합니다. * { margin: 0; padding: 0; } #header { height: 100px; background-color: #E0F2F1; } #nav { height: 300px; background-color: #80CBC4; } #section { height: 580px; bac.. 2022. 8. 4. 레이아웃 - 03 레이아웃03 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float을 이용한 레이아웃 float 속성을 설정한 뒤 overflow: hidden; 를 설정하면 벗아나는 부분이 보이지 않는 단점이 있으므로 부모 영역을 설정한 후, 그 곳에다가 'clearfix'를 설정해 줄 수 있습니다. before와 after를 설정 해준 뒤 content: ''; 설정으로 가상의 요소를 줍니다. display: block; 으로 블럭화를 시킨 후, line-height: 0;을 설정(공간을 차지하기 때문에 설정 해 줍니다.) 해줍니다. 마지막으로 after의 부분에 clear: both;를 설정해주면 됩니다. * { marg.. 2022. 8. 4. 레이아웃 - 02 레이아웃02 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float을 이용한 레이아웃 float에서 clear : both; 대신 구조를 묶어서 부모 속성에게 overflow: hidden; 속성을 줄 수 있습니다. * { 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-c.. 2022. 7. 29. 레이아웃 - 01 레이아웃01 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float을 이용한 레이아웃 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float는 사용시 clear속성을 이용하여 이후의 요소들이 더이상 float의 속성에 영향을 받지 않도록 합니다. * { margin: 0; padding: 0; } body { background-color: #FFF3E0; } #wrap { width: 1200px; margin: 0 auto; } #header { width: 1200px; height: 100px; backgrou.. 2022. 7. 29. 이전 1 다음
