홈페이지

삼전·2023년 5월 22일
0

CSS

목록 보기
4/14

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>

결과

profile
풀스택eDot

0개의 댓글