![[2021/12/23]국비지원 CSS3 5-(3) (구)우정사업본부 복지포털 소개 클론](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FzsmXA%2Fbtrr11yZxJc%2FAAAAAAAAAAAAAAAAAAAAAAzaGCFEN6hYlwaHKPPxctZeB6Q9OCaP2aLKT2m3DOuu%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DPCfxXpPOWgdb09Kge9EUfnlxcNw%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,h2,p,h3,table{padding:0;margin: 0;}
body{font-size: 12px;font-family: Dotum,"돋움",sans-serif;background: url(images/bg_top.gif) no-repeat 0 0;}
a{text-decoration: none;color: #666;}
a:hover{color:red;}
#wrap{width:700px;margin:0 auto; border:1px solid red;line-height:1.5;}
#header{width:700px;height:71px;margin-bottom: 10px;}
#header>h2{width: 188px;float:left;}
#header>p.path{padding-left:10px;margin-top:45px; float:right;background: url(images/blet.gif) no-repeat 0 50%;}
#container{width:700px;clear:both;}
#container:after{content: "";display: block;clear:both;}
#container>#image>p{width: 320px;height:233px;float: left;margin-bottom:10px;}
#container>#introduce{width: 360px; padding-left:10px;padding-right:0px;float:right;}
#container:after{content: "";display: block;clear:both;}
#container>#introduce>h2{height:27px;float: right;padding-bottom:10px;}
#container>#introduce>h3{padding:10px 0;}
#container>#introduce>p{padding:0px;text-align: justify;}
#service{width:700px;clear: both;}
#service>h3{height:28px;margin: 10px 0;}
#service>table{width:100%;border-collapse: collapse;}
#service caption{position:absolute;left:0;top:0;width:0;height:0;font-size:0;line-height:0;
visibility:hidden;text-indent: -9999px;overflow: hidden;}
#service th,td{border-bottom: 1px solid #ccc;padding:3px 10px;}
#service th{border-top: 2px solid red;background: url(images/bg_table_th.gif) repeat-x 0 100%;}
#service .area{width: 70px; text-align: center;border-right:1px solid #ccc;}
/* 완전한 스킵 */
/* caption{position:absolute;left:0;top:0;width:0;height:0;font-size:0;line-height:0;
visibility:hidden;text-indent: -9999px;overflow: hidden;} */
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h2><img src="images/title_3.gif" alt="복지포털사이트"></h2>
<p class="path"><a href="#" title="복지포털 홈으로 가기">Home</a> > <a href="#">우정복지증진</a> > 복지포털사이트</p>
</div>
<div id="container">
<div id="image">
<p><img src="images/img_01.gif" alt="사이트소개그림"></p>
</div>
<div id="introduce">
<h2><img src="images/title_4.gif" alt="우정사업본부 복지포탈 사이트(www.wellife.or.kr)"></h2>
<h3><img src="images/title_5.gif" alt="복지포탈사이트 소개"></h3>
<p>
맞춤형 복지제도로 일방적으로 제공되는 기존 복지 서비스와는 달
리 우정사업본부 복지포탈 사이트를 통해 우정종사자들의 선호와
필요성에 따라 개별적으로 자신에게 적합한 혜택을 선택하여 복지
접수를 사용하는 제도에 초점을 맞춰 <strong>맞춤형복지,복지플라자, 수
련원예액,커뮤니티 활동, 복지정보 등</strong> 다양하고 알찬메뉴를 종
합적이고 체계적으로 제공하고 있습니다.앞으로도 지속적으로 우정
종사라 여러분들의 보다 풍요로운 삶의 질적 향상과 건전한 여가활동
증진을 위한 구심점 역할을 충실히 수행하도록 하겠습니다.
</p>
</div>
<div id="service">
<h3><img src="images/title_6.gif" alt="주요 서비스 안내"></h3>
<table>
<caption>주요 서비스 안내</caption>
<thead>
<tr>
<th class="area" scope="col">분야</th>
<th class="sub" scope="col">내용</th>
</tr>
</thead>
<tbody>
<tr>
<td class="area">맞춤형복지</td>
<td>나의 복지점수, 사용내역 조회 서비스 및 사용법, 복지카드에 대한 다양한 정보를 제공합니다. </td>
</tr>
<tr>
<td class="area">복지플라자</td>
<td>우정종사자들을 위한 각종 제휴서비스를 한눈에 확인 하실 수 있습니다. </td>
</tr>
<tr>
<td class="area">수련원</td>
<td>운영중인 수련원 소개 및 안내, 예약서비스, 이용자 참여 공간이 제공 됩니다. </td>
</tr>
<tr>
<td class="area">커뮤니티</td>
<td>우정종사자분들 간의 화합을 도보하고 건강한 직장문화 조성을 위해 카페 활동을 지원 합니다. </td>
</tr>
<tr>
<td class="area">복지정보</td>
<td>법률, 문화, 건강, 부동산 관련 테마별 유용한 정보를 제공합니다. </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
결과물
