HTML 중급 레이아웃 경량화

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <style> 
        *{ 
            margin:0; 
            padding: 0; 
            text-decoration: none; 
            list-style: none; 
        } 
        header { 
            width:720px; 
            height: 200px; 
            position:relative; 
            overflow: hidden; 
            margin: 0 auto; 
        } 
        header > #logo { 
            position: absolute; 
            left:10px; 
            top:45%; 
        } 
        header > #topMenu { 
            position: absolute; 
            right:0; 
            top:10px; 
        } 
        header > #topMenu a{ 
            padding: 10px; 
        } 
        header > #bottomMenu { 
            position: absolute; 
            right:0; 
            bottom: 10px; 
        } 
        header > #bottomMenu a { 
             padding:5px; 
        } 
        header a { 
            border: 1px solid grey; 
        } 
        header li:first-of-type a{ 
            border-radius: 5px 0 0 5px; 
        } 
        header li:last-of-type a { 
            border-radius: 0 5px 5px 0; 
        } 
        header a:hover { 
            background-color:black; 
            color:white; 
        } 
        header li { 
            float:left; 
        } 
    </style> 
 
    <style> 
        section { 
            width:720px; 
            position: relative; 
            overflow: hidden; 
            margin: 0 auto; 
        } 
        article { 
            width:500px; 
            margin-bottom: 10px; 
            border:1px solid black; 
        } 
    </style> 
 
    <style> 
        body { 
            position: relative; 
        } 
 
        aside { 
            width:200px; 
            position: absolute; 
            right:0; 
            top:0; 
            border: 1px solid black; 
        } 
 
        aside > input:first-of-type:checked ~ div:first-of-type { 
            display:block; 
        } 
        aside > input:last-of-type:checked ~ div:last-of-type { 
            display:block; 
        } 
 
        aside > div { 
            display:none; 
        } 
 
        footer { 
            border: 1px solid black; 
            width:720px; 
            margin: 0 auto; 
            text-align: center; 
        } 
    </style> 
</head> 
<body> 
<header> 
    <div id ="logo"> 
        <h1>LOGO!!</h1> 
    </div> 
    <div id = "topMenu"> 
        <ul> 
            <li><a href="#">ONE</a></li> 
            <li><a href="#">TWO</a></li> 
            <li><a href="#">THREE</a></li> 
            <li><a href="#">FOUR</a></li> 
        </ul> 
    </div> 
    <div id = "bottomMenu"> 
        <ul> 
            <li><a href="#">ONE</a></li> 
            <li><a href="#">TWO</a></li> 
            <li><a href="#">THREE</a></li> 
            <li><a href="#">FOUR</a></li> 
        </ul> 
    </div> 
</header> 
<section> 
    <article> 
        <p> 
        <h1>AAAA</h1> 
        AAAAAAAAAAAAAAAAAAAAAAAAAA <br> 
        AAAAAAAAAAAAAAAAAAAAAAAAAA <br> 
        AAAAAAAAAAAAAAAAAAAAAAAAAA 
        </p> 
    </article> 
    <article> 
        <p> 
        <h1>BBBB</h1> 
        BBBBBBBBBBBBBBBBBBBBBBBBBB <br> 
        BBBBBBBBBBBBBBBBBBBBBBBBBB <br> 
        BBBBBBBBBBBBBBBBBBBBBBBBBB 
        </p> 
    </article> 
    <article> 
        <p> 
        <h1>CCCC</h1> 
        CCCCCCCCCCCCCCCCCCCCCCCCCC <br> 
        CCCCCCCCCCCCCCCCCCCCCCCCCC <br> 
        CCCCCCCCCCCCCCCCCCCCCCCCCC 
        </p> 
    </article> 
    <aside> 
        <input type="radio" name = "radiobtn" id = "radioone" checked="checked"> 
        <label for="radioone">ONE</label> 
        <input type="radio" name = "radiobtn" id = "radiotwo"> 
        <label for="radiotwo">TWO</label> 
        <div id = "displayOne"> 
            <ul> 
                <li><a href="#">ONEONEONEONEONEONE</a></li> 
                <li><a href="#">ONEONEONEONEONEONE</a></li> 
            </ul> 
        </div> 
        <div id = "displayTwo"> 
            <ul> 
                <li><a href="#">TWOTWOTWOTWOTWOTWO</a></li> 
                <li><a href="#">TWOTWOTWOTWOTWOTWO</a></li> 
            </ul> 
        </div> 
    </aside> 
</section> 
<footer> 
    FOOTER 
</footer> 
</body> 
</html>

 
확인하기