01
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS ์ ํ์</title>
<style>
img.top-img:hover {
border: 5px solid black;
}
</style>
</head>
<body>
<p>์ด๋ฏธ์ง ์๋ก ๋ง์ฐ์ค ํฌ์ธํฐ๋ฅผ ์ฌ๋ ค๋ณด์ธ์</p>
<img src="images/tangerines.jpg" class="top-img">
</body>
</html>
02
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS ์ ํ์</title>
<style>
.main-menu {
margin:50px auto;
height:60px;
border:3px solid black;
width: 400px;
}
.main-menu ul {
margin:0;
list-style:none;
}
.main-menu ul li{
display:inline-block;
padding:10px 30px;
line-height:40px;
}
.main-menu a:link {
color: black;
text-decoration: none;
}
.main-menu a:visited {
color: black;
}
.main-menu a:active {
color: blue;
}
</style>
</head>
<body>
<nav class="main-menu">
<ul>
<li><a href="#">๋ฉ๋ด1</a></li>
<li><a href="#">๋ฉ๋ด2</a></li>
<li><a href="#">๋ฉ๋ด3</a></li>
</ul>
</nav>
</body>
</html>
< ์ฐธ๊ณ >
Do it! HTML5+CSS3 ์น ํ์ค์ ์ ์
โป ํด๋น ๊ธ์ ์ต๋ ๋ชฉ์ ์ผ๋ก ์์ฑ๋ ๊ธ์ ๋๋ค โป
๋ฐ์ํ
๋๊ธ