![[2021/12/23] 국비지원 CSS3 5-(1) 강원도청 2013년도 메인 공지 클론](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Ftr8JS%2Fbtrr3jeCTIQ%2FAAAAAAAAAAAAAAAAAAAAANweHnGiGhC8upKTpJFjpeq_1eQPplaaQklpHFQEIGUc%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3D56m7JKjDNk2h87laha9rEtxQHhk%253D)
강원도청 메인 일부, 2013년도 구닥다리 클론하기
원본
작업내용
<!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 type="text/css">
body,div,h3,p,ul,li{padding: 0;margin: 0;}
ul,li{list-style: none;}
body{font-size: 12px;font-family: Dotum,"돋움",sans-serif;}
img{border:none;}
li{background: url(images/blet_dot.gif) no-repeat 0 50%;padding-left: 5px;line-height: 1.5;}
a{text-decoration: none;color: gray;}
a:hover{text-decoration: none;color: red;}
.board_view{width: 430px;color: gray;padding: 0px;margin: 20px auto;}
::after{content:"";display:block;clear:both;}
.title{float:left;}
.subs{float:right;}
div.news{clear:both;padding:6px 0;width:430px;}
div.news>p{float:left;width:87px;}
div.news>ul{float:right;width:315px;}
div.menu_list ul{padding-left:10px;}
div.economy{float:left; margin-right: 9.5px;}
div.culture{float:left;}
div.welfare{float:right;}
</style>
</head>
<body>
<div class="board_view">
<h3 class="title"><img src="images/txt_together.gif" alt="함께해요! 강원도 세상"></h3>
<p class="subs"><img src="images/btn_together.gif" alt="강원도 세상 구독하기"></p>
<div class="news">
<p>
<img src="images/thumimage.jpg" alt="도지사 얼굴">
<span>"강원도의 운명을 바꿉시다"...</span>
</p>
<ul>
<li><a href="#">POST-희망근로.하반기에 공동체 사업으로...</a></li>
<li><a href="#">중국 대규모 수학여행단 도내 방문시작</a></li>
<li><a href="#">제35대 이광재 강원도지사 취임사</a></li>
<li><a href="#">방방곡곡 강원 콘테스트 UCC부문 우수상</a></li>
</ul>
</div>
<div class="menu_list">
<div class="economy">
<h3><img src="images/list1.jpg" alt="산업 경제"></h3>
<ul>
<li><a href="#">강원마트</a></li>
<li><a href="#">중소기업지원</a></li>
<li><a href="#">구인/구직</a></li>
<li><a href="#">소비자정보/상담</a></li>
</ul>
</div>
<div class="culture">
<h3><img src="images/list2.jpg" alt="문화 관광 환경"></h3>
<ul>
<li><a href="#">동트는 강원</a></li>
<li><a href="#">그린투어리즘</a></li>
<li><a href="#">축제/행사</a></li>
<li><a href="#">강원관광모바일존</a></li>
</ul>
</div>
<div class="welfare">
<h3><img src="images/list3.jpg" alt="보건 복지 여성"></h3>
<ul>
<li><a href="#">여성정보센터</a></li>
<li><a href="#">반비다복카드</a></li>
<li><a href="#">사회복지시설</a></li>
<li><a href="#">자원봉사</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
결과물
