[2021/12/23]국비지원 CSS3 5-(2) (구)우체국 사이트맵

구 우체국 사이트맵 ( 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,ul,li{padding:0;margin:0;}
        ul,li{list-style: none; font-weight: bold; }
        body{font-size: 11px;font-family: Dotum,"돋움",sans-serif;}
        img{border: none;}
        a{text-decoration: none;color: #666;}
        a:hover{color: red;}
        .sitemap{width:540px;margin:20px auto;border:1px solid red;}
        .title{width:540px;border-bottom: 1px solid gray;padding-bottom:10px;}
        ::after{content:"";display:block;clear:both;}
        .title>h2{margin-bottom:5px;}
        .title>p.img{float:left;}
        .title>p.path{float:right;}
        .title>p.path>a{float:left;}
        div.site_tree{width:540px;padding-top: 20px;}
        ::after{content:"";display:block;clear:both;}
        div.site_tree li{background:url(images/site_blet.gif) no-repeat 10px 50%; line-height: 1.5;
                        padding: 5px;text-indent: 25px;border-bottom:1px solid gray;}
        div.board_customer{width:173px;float:left;margin-right:10px;}
        div.board_free{width:173px;float:left;}
        div.board_notice{width:173px;float:right;}
    </style>
</head>
<body>
    <div class="sitemap">
        <div class="title">
            <h2><img src="images/site_title.gif" alt="사이트맵"></h2>
            <p><img src="images/site_p.gif" alt="우편물류의 지속성장을 선도하는 녹색물류 대표기관이 되겠습니다."></p>
            <p class="path"><a href="#" title="홈페이지 바로가기">Home &gt;&nbsp;</a><a href="#">기타 &gt;&nbsp;</a><strong>사이트맵</strong></p>
        </div>
        <div class="site_tree">
            <div class="board_customer">
                <h3><img src="images/site_1.gif" alt="고객만족"></h3>
                <ul>
                    <li><a href="#">고객서비스현장</a></li>
                    <li><a href="#">고객만족도조사결과</a></li>
                    <li><a href="#">서비스이행표준</a></li>
                    <li><a href="#">CS스탠다드메뉴얼</a></li>
                    <li><a href="#">CS리더 및 활동</a></li>
                    <li><a href="#">칭찬합시다</a></li>
                    <li><a href="#">CS동영상</a></li>
                </ul>
            </div>
            <div class="board_free">
                <h3><img src="images/site_2.gif" alt="신문고"></h3>
                <ul>
                    <li><a href="#">고객불만</a></li>
                    <li><a href="#">설문조아</a></li>
                    <li><a href="#">CEO핫라인</a></li>
                    <li><a href="#">행동강령신고</a></li>
                    <li><a href="#">성희롱/성폭력신고</a></li>
                    <li><a href="#">Q&ampA</a></li>
                    <li><a href="#">제안해주세요</a></li>
                    <li><a href="#">예산낭비신고센터</a></li>
                </ul>
            </div>
            <div class="board_notice">
                <h3><img src="images/site_3.gif" alt="알림마당"></h3>
                <ul>
                    <li><a href="#">공지사항</a></li>
                    <li><a href="#">입찰정보</a></li>
                    <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>

결과물 ( border red는 넣으라고 해서 넣은 거 )

~~이 쯤 되면 디테일귀신~~

업로드 하면서 점점 드는 생각인데

국비지원 종특인거야
강사 특징인거야..?

연습은 구닥다리로 시키고
결과물은 현대판으로 만들어내야되고..?

저작자표시 비영리 변경금지 (새창열림)

티스토리툴바