babydevelopbabydevelop

이번예제도 display: flex로 만든 예제입니다. 더욱 더 다양하게 나눠봤습니다!

DOCTYPE html> layout02_1 * { margin: 0; padding: 0; } #wrap { width: 1200px; margin: 0 auto; background-color: #E8F5E9; } #header { width: 1200px; height: 100px; background-color: #CEE5CB; } #nav { width: 1200px; display: flex; } #nav .nav1 { width: 400px; height: 100px; background-color: #AFD5AB; } #nav .nav2 { width: 400px; height: 100px; background-color: #90c08b; } #nav .nav3 { width: 400px;..

DOCTYPE html> layout2 *{ margin: 0; padding: 0; } #wrap { width: 1200px; margin: 0 auto; background-color: #E8F5E9; } #header { width: 1200px; height: 100px; background-color: #CEE5CB; } #nav { width: 1200px; height: 100px; background-color: #AFD5AB; } #contents { width: 1200px; display: flex; } #contents .aside1 { width: 300px; height: 780px; background-color: #91C58A; } #contents .aside2 { wid..

DOCTYPE html> Layout1 * { margin: 0; padding: 0; } body { background-color: #FFF3E0; } #container { width: 1200px; height: 1080px; margin-left: auto; margin-right: auto; } #header{ width: 1200px; height: 100px; background-color: #FAE1B7; } #nav { width: 1200px; height: 100px; background-color: #F7ce8b; } #aside { width: 400px; height: 780px; background-color: #f4ba61; float: left; } #contents { ..