<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
ul{
border : 10px inset red;
border-left : none;
border-right : none;
list-style-type : none;
height : 50px;
width : 70%;
margin : 10px auto; /* 가운데 정렬 */
}
ul li{
width : 200px;
float : left;
margin : 5px;
/* border : 1px solid blue; */
padding-left : 8%;
}
ul li a{
font-size : 1.5em;
text-transform : uppercase;
text-decoration : none;
letter-spacing : 5px;
/* border : 1px solid green;*/
}
ul li a:hover{
text-decoration : underline;
}
</style>
</head>
<body>
<ul>
<li><a href="#">home</a></li> <!-- 옆으로 display : inline float : left -->
<li><a href="#">project</a></li>
<li><a href="#">notice</a></li>
<li><a href="#">qna</a></li>
</ul>
</body>
</html>
😀 참고자료
😀 실행
