menu.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
body, ul{margin:0; padding:0;}
#logo{
height:100px;
line-height: 100px;
text-align:center;
font-size: 3em;
font-weight: bold;
background:#ddd;
}
/*
> :자손
공백: 후손
*/
#logo>a:link, #logo>a:visited{
text-decoration:none; color:green;
}
#menu{
width:1100px;
margin: 0 auto;
/*정렬시 공간을 빠져나오는 것을 내용만큼 공간을 확보하도록 설정*/
overflow:auto;
background:hotpink;
}
#menu>li{
list-style-type:none;
float:left;
width:20%;
line-height:40px;
text-align:center;
}
#menu a:link, #menu a:visited {
text-decoration: none;
color:black;
}
#menu a:hover{
text-decoration:none;
color: yellow;
}
/*컨텐츠 영역*/
#content{
width: 1100px;
background: #ddd;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="logo">
<a href="#">더인에듀</a>
</div>
<div class="navi">
<ul id="menu">
<li ><a href="#">홈</a></li>
<li><a href="#">공지사항</a></li>
<li><a href="#">커뮤니티</a></li>
<li><a href="#">고객센터</a></li>
<li><a href="#">마이페이지</a></li>
</ul>
</div>
<div id="content">
<img src="../img/swisda.jpg" width="500" height="200" />
컨텐츠 내용
</div>
<div style="background:grey; color:white; text-align:center;">
footer
</div>
</body>
</html>