2023-10-05<">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>08-05_ex-position</title>
<style type="text/css">
* { margin: 0; padding: 0; }
body {
font-family: "돋움", sans-serif;
}
li {
list-style: none;
}
h1 {
margin: 20px;
}
a:link, a:visited {
text-decoration: none;
}
a:hover, a:active, a:focus {
text-decoration: underline;
}
/* 공지사항 */
.tab {
border: 1px solid red;
width: 400px;
margin-left: 20px;
position: relative;
}
.tab h3 {
background: url('../../image/position_image/tab_bg.gif') no-repeat 0 0;
background-size: 400px 50px;
height: 50px;
padding: 14px 0 0 20px;
font-size: 20px;
}
.tab li {
background: url('../../image/position_image/news_list.gif') no-repeat 10px 50%;
padding-left: 20px;
line-height: 24px;
}
.tab li span {
position: absolute;
right: 4px;
}
.more {
position: absolute;
top: 13px;
right: 10px;
}
</style>
</head>
<body>
<h1>ex position</h1>
<br>
<div class="tab">
<h3>공지사항</h3>
<ul>
<li><a href="#">웹 접근성 품질마크...</a><span>2023-10-05</span></li>
<li><a href="#">웹 접근성 품질마크...</a><span>2023-10-05</span></li>
<li><a href="#">웹 접근성 품질마크...</a><span>2023-10-05</span></li>
<li><a href="#">웹 접근성 품질마크...</a><span>2023-10-05</span></li>
</ul>
<p class="more">
<a href="#"><img src="../../image/position_image/more.gif"/></a>
</p>
</div>
</body>
</html>