<!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>
확인하기