![[2021/12/22]국비지원 CSS3 4-(5) 정책꾸러미 클론](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FU4ks6%2FbtrsaSHlLis%2FAAAAAAAAAAAAAAAAAAAAAFIbKSnjYMOApMr2ImVhagobbIpiJHRFvsa9KZS3xR74%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DXE22OV9E%252F6a7IUwU2s8eyDt7fPU%253D)
정책꾸러미라는 메인노출 게시판 클론 코딩
( 대략 과거 어떤 정부기관의 사이트에서 퍼온 이미지가 아닌가 하는.
이 역시 원본 이미지 X )
작업내용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>정책꾸러미</title>
<style typ="text/css">
body,div,h3,p,h4,ul,li{padding:0;margin:0;}
ul,li{list-style: none;}
body{font-size: 12px;font-family: Dotum,"돋움",sans-serif;color: gray;}
a{text-decoration: none;color: gray;}
a:hover{text-decoration: underline;color:blue}
.cast{position:relative; width: 450px; height: 150px; margin: 20px auto;
border: 2px solid #ddd;padding:10px;
background: url(images/background.gif) repeat-x; }
.cast h3{padding-bottom:10px; margin-bottom: 10px;}
.cast>p.cast_img{float:left;width:138px;border:1px solid red;}
.cast>div.cast_text{float:right;width:290px;border:1px solid red;}
.cast>div.cast_text li{background: url(images/cast_list.gif) no-repeat 0 50%;
text-indent: 10px;line-height: 20px;}
.cast>p.more{position:absolute; right: 10px;top: 10px;}
/* 자식요소가 float된 경우 부모요소에 높이 지정하는 방법
1. height
2. overflow:hidden / overflow:auto
3. float
4. 공갈div 만들어서 clear:both
5. :after{content:"";diplay:block;clear:both;} >네이버 방식*/
</style>
</head>
<body>
<div class="cast">
<h3><img src="images/cast_title.gif" alt="정책꾸러미"></h3>
<p class="cast_img"><img src="images/cast_img.gif" alt="우측통행이미지"></p>
<div class="cast_text">
<h4>우측통행실시</h4>
<ul>
<li><a href="#">우측보행, 7월1일부터 본격 시행</a></li>
<li><a href="#">안전한 보행방법 우측통행 홍보 동영상</a></li>
<li><a href="#">우측보행이 교통안전, 보행효율면에..</a></li>
<li><a href="#">시범시행 주인 "우측보행 " 호응도...</a></li>
</ul>
</div>
<p class="more" title="우측통행실시 더보기"><a href="#">더보기</a></p>
</div>
</body>
</html>
결과물
