HTML 중급레이아웃 두번째 간략본

<!DOCTYPE html> 
<html lang="ko"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <style> 
        *{ 
            text-decoration: none; 
            margin: 0; 
            padding: 0; 
        } 
        li{ 
            list-style: none; 
        } 
    </style> <!--전체초기화--> 
 
    <style> 
        #wrap{ 
            /*border: solid black 1px;*/ 
            margin: 0 auto; 
            width: 720px; 
        } 
    </style> <!--wrap--> 
 
    <style> 
        #header { 
            overflow: hidden; 
            position:relative; 
            height: 150px; 
        } 
        #header > #logo { 
            font-size : 30px; 
            float:left; 
            position: absolute; 
            left: 0; 
            top: 45%; 
        } 
        #header > #menu1 { 
            float:right; 
            position: absolute; 
            top:10px; 
            right:0; 
 
        } 
        #header > #menu2 { 
            float:right; 
            position:absolute; 
            bottom:10px; 
            right:0; 
        } 
        #header li { 
            float:left; 
        } 
 
        #header li > a{ 
            border:1px solid grey; 
            background-color:grey; 
            padding: 10px; 
        } 
        #header li > a:hover { 
            background-color:white; 
            color:black; 
        } 
        #header li:first-of-type > a{ 
            border-radius: 10px 0 0 10px; 
        } 
        #header li:last-of-type > a { 
            border-radius: 0 10px 10px 0; 
        } 
    </style> <!--header--> 
 
    <style> 
        #content { 
            margin-top: 10px; 
            overflow: hidden; 
            position: relative; 
        } 
 
        #content > #mainArticle > article { 
            border:1px solid black; 
            margin-bottom: 10px; 
            padding: 10px; 
 
            width:450px; 
        } 
    </style><!--mainarticle--> 
 
    <style> 
        #aside { 
            position: absolute; 
            top:0; 
            right: 0; 
            border:1px solid black; 
            width: 220px; 
        } 
        #aside > #tab { 
            width:198px; 
            overflow: hidden; 
        } 
        #aside > #tab div { 
            border:1px solid black; 
            float:left; 
            height: 30px; 
            width: 97px; 
        } 
        #aside > #tab div:first-child { 
            background-color: black; 
            color:white; 
        } 
        #aside > #tab div:last-child { 
            background-color: white; 
            color:black; 
        } 
    </style><!--aside--> 
 
    <style> 
        input:first-of-type:checked ~ div:first-of-type { 
            display: block; 
        } 
        input:last-of-type:checked ~ div:last-of-type { 
            display: block; 
        } 
        input:first-of-type ~ div:first-of-type { 
            display: none; 
        } 
        input:last-of-type ~ div:last-of-type { 
            display: none; 
        } 
 
    </style> <!--tabItemCSS--> 
 
    <style> 
        #footer { 
            border:1px solid black; 
            width:720px; 
 
            text-align:center; 
        } 
    </style> <!--footer--> 
 
<!-- ***************************JAVASCRIPT 
    <script> 
        function changeTab(n) { 
            if(n==1){ 
                document.getElementById("firstTabItem").style.display = "block"; 
                document.getElementById("secondTabItem").style.display = "none"; 
 
                document.getElementById("tabOne").style.backgroundColor = "white"; 
                document.getElementById("tabOne").style.color = "black"; 
                document.getElementById("tabTwo").style.backgroundColor = "black"; 
                document.getElementById("tabTwo").style.color = "white"; 
            } 
            else { 
                document.getElementById("secondTabItem").style.display = "block"; 
                document.getElementById("firstTabItem").style.display = "none"; 
 
                document.getElementById("tabTwo").style.backgroundColor = "white"; 
                document.getElementById("tabTwo").style.color = "black"; 
                document.getElementById("tabOne").style.backgroundColor = "black"; 
                document.getElementById("tabOne").style.color = "white"; 
            } 
        } 
    </script> 
******************************************--> 
</head> 
<body> 
    <div id = "wrap"> 
        <header id = "header"> 
            <div id = "logo"> 
                HELLO 
            </div> 
            <nav id = "menu1"> 
                <ul> 
                    <li><a href  = "#">one</a></li> 
                    <li><a href = "#">two</a></li> 
                    <li><a href  = "#">three</a></li> 
                </ul> 
            </nav> 
            <nav id = "menu2"> 
                <ul> 
                    <li><a href  = "#">one</a></li> 
                    <li><a href  = "#">two</a></li> 
                    <li><a href  = "#">three</a></li> 
                </ul> 
            </nav> 
        </header> <!--header 끝--> 
        <div id = "content"> 
            <section id = "mainArticle"> 
                <article> 
                    <p> 
                        <h1>AAAA</h1> 
                        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/> 
                        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/> 
                        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
                    </p> 
                </article> 
                <article> 
                    <p> 
                        <h1>BBBB</h1> 
                        bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br/> 
                        bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br/> 
                        bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb 
                    </p> 
                </article> 
                <article> 
                    <p> 
                        <h1>CCCC</h1> 
                        ccccccccccccccccccccccccccccccccc<br/> 
                        ccccccccccccccccccccccccccccccccc<br/> 
                        ccccccccccccccccccccccccccccccccc 
                    </p> 
                </article> 
            </section> 
            <!--*******************************JAVASCRIPT 
            <aside id = "aside"> 
                <div id = "tab"> 
                    <div onclick="changeTab(1);" id = "tabOne"> 
                        ONE 
                    </div> 
                    <div onclick="changeTab(2);" id = "tabTwo"> 
                        TWO 
                    </div> 
                </div> 
                <div id = "firstTabItem" style="display:block;"> 
                    <ul> 
                        <li><a href="#">ONEONEONEONE</a></li> 
                        <li><a href="#">ONEONEONEONE</a></li> 
                    </ul> 
                </div> 
                <div id = "secondTabItem" style="display: none;"> 
                    <ul> 
                        <li><a href="#">TWOTWOTWOTWO</a></li> 
                        <li><a href="#">TWOTWOTWOTWO</a></li> 
                    </ul> 
                </div> 
            </aside>***************************************--> 
            <aside id = "aside"> 
                <input type="radio" name = "tab" id = "tabone" checked = "checked"> 
                <label for="tabone">one</label> 
                <input type="radio" name = "tab" id = "tabtwo"> 
                <label for="tabtwo">two</label> 
 
                <div id = "firstTabItem"> 
                    <ul> 
                        <li><a href="#">ONEONEONEONE</a></li> 
                        <li><a href="#">ONEONEONEONE</a></li> 
                    </ul> 
                </div> 
                <div id = "secondTabItem"> 
                    <ul> 
                        <li><a href="#">TWOTWOTWOTWO</a></li> 
                        <li><a href="#">TWOTWOTWOTWO</a></li> 
                    </ul> 
                </div> 
            </aside> 
        </div> <!--content 끝--> 
        <footer id = "footer"> 
            <h3>FOOTER</h3> 
            <address>footer영역</address> 
        </footer> <!--footer 끝--> 
    </div> 
</body> 
</html>

 
확인하기