[2021/12/23]국비지원 CSS3 5-(3) (구)우정사업본부 복지포털 소개 클론

이것도 구닥다리
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> &gt; <a href="#">우정복지증진</a> &gt; 복지포털사이트</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>
결과물
저작자표시 비영리 변경금지 (새창열림)
티스토리툴바
