[2021/12/22]국비지원 CSS3 4-(2) wah.or.kr 공지사항 마크업

이 날도 수업 중 과제가 2갠가 있었던 날..

대상 사이트

웹접근성 연구소 (wah.or.kr)

대상 영역 ( 이미지로 봤던 것보다 더 현대화돼 있다..? )

index화면의 공지사항 파트

작업 내용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>공지사항<title>
    <style type="text/css">
        /* common */
        body,div,h2,ul,li,p{margin: 0;padding: 0;}
        ul,li{list-style: none;}
        body{font-size:12px;font-family: Dotum, "돋움", sans-serif;}
        img{border: none;}
        a:link, a:visited{text-decoration: none;}
        a:hover, a:active, a:focus{text-decoration: underline;}
        /* 공지사항 */
        .tab{position: relative;width: 306px;padding: 0;margin: 0 auto;
            border: 1px solid red;}
        .tab h3{width:291px; height:24px; margin:0px;
                padding-top: 7px;/* line-height 31px */
                padding-left: 15px;/* text-indent ok */
                background: url(images/tab_bg.gif) no-repeat 0 0;}
        .tab li{background: url(images/news_list.gif) no-repeat 6px 50%;
                padding-left: 15px;line-height: 1.5;}
        .tab>.more{position:absolute; right: 10px; top: 10px; margin:0;}
        .tab li span{position:absolute; right: 0;}
    </style>    
</head>
<body>
    <div class="tab">
        <h3>공지사항</h3>
    <ul>
        <li><a href="#">제21년 웹 접근성 품질마크 ...</a><span>2021-12-30</span></li>
        <li><a href="#">제21회 웹 접근성 품질마크 인증 사...</a><span>2021-12-30</span></li>
        <li><a href="#">제21회 웹 접근성 품질마크 사용자심...</a><span>2021-12-22</span></li>
        <li><a href="#">제21회 웹 접근성 품질마크 심사 일...</a><span>2021-11-23</span></li>
    </ul>
    <p class="more"><a href="#"><img src="images/more.gif" alt="공지사항 더보기"></a></p>
    </div>
</body>
</html>

결과물

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

티스토리툴바