Layout5 유형 05 레이아웃05 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. 조금 복잡해진 유형입니다. Float을 이용한 레이아웃 float 방식 레이아웃은 구버전 익스플로어 등과의 호환을 위해 사용한다. float는 속성이 상속되어 float 속성을 사용한 요소의 다음 요소에게 영향을 미치며, 이전 요소를 밀고 올라오게 되는데 clear: both로 해결 가능하지만, 복잡한 구조의 경우 한계가 있기 때문에 더 나은 방법으로 부모 요소에 overflow :hidden을 주는 방법이 있다. 그러나 overflow도 한계가 있는데 이를 위해 나온 방법이 clearfix값을 클래스로 지정하여 뿌려주는것이다. 귀찮다는 점을 빼면 딱히 .. 2022. 8. 4. 유형 04 레이아웃04 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. Float방식 레이아웃 Float 방식 레이아웃은 구버전 익스플로어 등과의 호환을 위해 사용합니다. { *{ margin: 0; padding: 0; } #header{ height: 100px; background-color: #B2DFDB; } #nav{ background-color: #4DB6AC; height: 300px; } #section{ background-color: #009688; height: 580px; } #footer{ background-color: #00796B; height: 100px; } /* 아이디/클래스 #/. 한번.. 2022. 8. 4. 유형 03 레이아웃03 이전 유형보다 조금 복잡해졌지만 여전히 단순한 구조입니다. Float방식 레이아웃 float 방식 레이아웃은 구버전 익스플로어 등과의 호환을 위해 사용한다. float는 속성이 상속되어 float 속성을 사용한 요소의 다음 요소에게 영향을 미치며, 이전 요소를 밀고 올라오게 되는데 clear: both로 해결 가능하지만, 복잡한 구조의 경우 한계가 있기 때문에 더 나은 방법으로 부모 요소에 overflow :hidden을 주는 방법이 있다. 그러나 overflow도 한계가 있는데 이를 위해 나온 방법이 clearfix값을 클래스로 지정하여 뿌려주는것이다. 귀찮다는 점을 빼면 딱히 단점이 없기때문에 많이 쓰이고 있다. { *{ margin: 0; padding: 0; } #wrap{ width.. 2022. 8. 4. 유형 02 레이아웃02 두번째 유형으로 이번에도 단순한 구조입니다. Float방식 레이아웃 float 방식 레이아웃은 구버전 익스플로어 등과의 호환을 위해 사용한다. float는 속성이 상속되어 float 속성을 사용한 요소의 다음 요소에게 영향을 미치며, 이전 요소를 밀고 올라오게 되는데 clear: both로 해결 가능하지만, 복잡한 구조의 경우 한계가 있기 때문에 더 나은 방법으로 부모 요소에 overflow :hidden을 주는 방법이 있다. { * { margin: 0; padding: 0; } body { background-color: #E8F5E9 ; } /* 블록구조를 가운데정렬 할때 width값과 같이 margin 0 auto 주면됨. */ #wrap { width: 1200px; margin: .. 2022. 8. 4. 유형 01 레이아웃01 첫번째 유형 가장 단순한 구조입니다. Float방식 레이아웃 float 방식 레이아웃은 구버전 익스플로어 등과의 호환을 위해 사용한다. float는 속성이 상속되어 float 속성을 사용한 요소의 다음 요소에게 영향을 미치며, 이전 요소를 밀고 올라오게 되는데 clear: both를 주면 이러한 현상을 막을 수 있습니다. *{ margin: 0; padding: 0; } body{ background-color: #fff3e0; } #wrap{ width: 1200px; margin: 0 auto; } #header{ width: 100%; height: 100px; background-color: #ffe082; } #nav{ width: 100%; height: 100px; backgro.. 2022. 8. 1. 이전 1 다음
