HTML 7장 레이아웃

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <style> 
        * { 
            padding:0; 
            margin:0; 
            list-style: none; 
            text-decoration: none; 
        } 
        body { 
            min-width: 720px; 
        } 
        #header { 
            height:60px; 
            line-height:60px; 
            padding-left:10px; 
            background-color:darkblue; 
            color:white; 
        } 
        #headerNav { 
            background-color: darkgray; 
            overflow:hidden; 
        } 
        #headerNav li { 
            float:left; 
        } 
        #headerNav a{ 
            padding:10px 20px; 
            display:block; 
            color:white; 
        } 
        #navLeft { 
            float:left; 
            overflow: hidden; 
        } 
        #navRight { 
            float:right; 
            overflow: hidden; 
        } 
        #headerNav a:hover { 
            color:red; 
        } 
 
        #headerNav a:hover ~ div { 
            display:block; 
            backgrond-color:gray; 
            color:white; 
            padding:0 20px; 
        } 
        #headerNav a ~ div { 
            display:none; 
        } 
 
    </style> 
    <style> 
        #wrap { 
            overflow: hidden; 
            background-color:skyblue; 
        } 
        #aside { 
            float:left; 
            width:200px; 
        } 
        aside a { 
            padding:10px; 
            color:white; 
            display:block; 
            height:10px; 
            line-height:10px; 
        } 
        #aside2 { 
            float:right; 
            overflow: hidden; 
            width:200px; 
        } 
        #mainContent { 
            background-color:white; 
            margin-left:200px; 
            margin-right:200px; 
        } 
        #content article { 
            padding:10px; 
        } 
    </style> 
    <style> 
        #footer { 
            text-align: center; 
            vertical-align: middle; 
            border-top:4px solid black; 
        } 
    </style> 
</head> 
<body> 
<header id = "header"> 
    <h1>LOGO!</h1> 
</header> 
<nav id = "headerNav"> 
    <ul id = "navLeft"> 
        <li><a href="#">Button</a> 
            <div>111</div> 
        </li> 
        <li><a href="#">Button</a> 
            <div>222</div> 
        </li> 
        <li><a href="#">Button</a> 
            <div>333</div> 
        </li> 
        <li><a href="#">Button</a> 
            <div>444 </div> 
        </li> 
    </ul> 
    <ul id = "navRight"> 
        <li><a href="#">Button</a> 
            <div>555</div> 
        </li> 
        <li><a href="#">Button</a> 
            <div>666</div> 
        </li> 
    </ul> 
</nav> 
<div id = "wrap"> 
    <aside id = "aside"> 
        <ul> 
            <li><a href="#">Button</a></li> 
            <li><a href="#">Button</a></li> 
            <li><a href="#">Button</a></li> 
            <li><a href="#">Button</a></li> 
        </ul> 
    </aside> 
    <aside id = "aside2"> 
        <ul> 
            <li><a href="#">Button</a></li> 
            <li><a href="#">Button</a></li> 
            <li><a href="#">Button</a></li> 
            <li><a href="#">Button</a></li> 
        </ul> 
    </aside> 
    <section id = "mainContent"> 
        <section id = "content"> 
            <article> 
                <h1>AAA</h1> 
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid consequatur dolorem dolorum ducimus, eius enim esse explicabo hic illum laudantium modi molestiae natus obcaecati officia suscipit tempora tenetur totam velit. 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda harum impedit iure modi nihil quam repellat! Consectetur consequatur deserunt impedit minima, nemo neque nesciunt perspiciatis sed tempora vel. Doloribus, vel? 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur corporis dolor earum, eius fugiat ipsa ipsum magnam molestiae necessitatibus neque nobis perspiciatis possimus quis sapiente temporibus. Delectus deleniti omnis reiciendis? 
                </p> 
            </article> 
            <article> 
                <h1>AAA</h1> 
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid consequatur dolorem dolorum ducimus, eius enim esse explicabo hic illum laudantium modi molestiae natus obcaecati officia suscipit tempora tenetur totam velit. 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda harum impedit iure modi nihil quam repellat! Consectetur consequatur deserunt impedit minima, nemo neque nesciunt perspiciatis sed tempora vel. Doloribus, vel? 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur corporis dolor earum, eius fugiat ipsa ipsum magnam molestiae necessitatibus neque nobis perspiciatis possimus quis sapiente temporibus. Delectus deleniti omnis reiciendis? 
                </p> 
            </article> 
            <article> 
                <h1>AAA</h1> 
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid consequatur dolorem dolorum ducimus, eius enim esse explicabo hic illum laudantium modi molestiae natus obcaecati officia suscipit tempora tenetur totam velit. 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda harum impedit iure modi nihil quam repellat! Consectetur consequatur deserunt impedit minima, nemo neque nesciunt perspiciatis sed tempora vel. Doloribus, vel? 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur corporis dolor earum, eius fugiat ipsa ipsum magnam molestiae necessitatibus neque nobis perspiciatis possimus quis sapiente temporibus. Delectus deleniti omnis reiciendis? 
                </p> 
            </article> 
        </section> 
    </section> 
</div> 
<footer id = "footer"> 
    <h1> 
        FOOTER! 
    </h1> 
    <address> 
        address! 
    </address> 
</footer> 
</body> 
</html>