[2021/12/22]국비지원 CSS3 4-(7) 과제2: 웹접근성 공지사항 클론

수업 중 과제 2

구닥다리 웹접근성 메인노출 공지사항 이미지 보고 클론코딩
화면으로 봐서 이미지 X

~~(폴더 날짜를 보니 2016년도 편집본이다... 몇 년 전이니..? )~~

<!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,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{text-decoration: none;color: gray;}
        a:hover{text-decoration: underline;color: red;}
        li{background: url(images/blet_dot.gif) no-repeat 0 50%;
            text-indent: 10px;line-height: 20px;}
        .board_view{width:550px;margin:20px;}
        .notice{width:550px;background: aqua;margin-bottom:20px;}
        ::after{content:"";display:block;clear:both;}
        .notice>h3{float:left;width:144px;margin: 0;}
        .notice>ul{float:right;width:350px;}
        /* 꼭 사이즈를 넣어야 하는지는 개인의문.. */
        .broadcast{width: 530px;background: orange;padding:10px;}
        ::after{content:"";display:block;clear:both;}
        .broadcast h3{border-bottom:1px solid #ddd;padding-bottom:10px;margin:0;}
        .broadcast ul{padding-top:10px;padding-right:10px;}
        .broadcast .more{position:absolute;right:0;top:0;}
        .report{border: 1px solid red;position:relative;float:left;}
        .explain{border: 1px solid red;padding:0;position:relative;float:right;}
        /*클래스 일 경우 자식 지정할 것 없이 그냥 .클래스명 하면 알아서 눈치 깜*/
        /* 공통사항은 상위클래스로 묶어주기 */
        /* 내 경우는 ,를 넣고 ::after 해야 애가 인식됨. 업데이트 버전이라 그런가*/
</style>
</head>
<body>
    <div class="board_view">
        <div class="notice">
            <h3><img src="images/notice.gif" alt="공지사항"></h3>
            <ul>
                <li><a href="#">[안내] 장애인 도서관 서비스 통신요금 바우처제도 참여...</a></li>
                <li><a href="#">[안내] '제5회 부산 장애인 미디어 축제' 화면해설...</a></li>
                <li><a href="#">[안내] 2020년 보조기기 시연회 안내</a></li>
                <li><a href="#">[안내] 제3회 전국 시각장애인 어울림 걷기대회...</a></li>
                <li><a href="#">[안내] 2020년 장애인 정보통신 보조기기 신청...</a></li>           
            </ul>
        </div>
        <div class="broadcast">
            <div class="report">
                <h3><img src="images/title_1.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>               
                </ul>    
                <p class="more"><a href="#"><img src="images/all.gif" alt="보도자료및성명서 전체보기"></a></p>
            </div>
            <div class="explain">
                <h3><img src="images/title_2.gif" alt="화면해설방송"></h3>
                <ul>
                    <li><a href="#">[편성표] 6월 5주 화면해설방송 안...</a></li>
                    <li><a href="#">[편성표] 6월 4주 화면해설방송 안...</a></li>
                    <li><a href="#">[편성표] 화면해설방송 안내 6월 14...</a></li>        
                    <li><a href="#">[편성표] 6월 2주 화면해설방송 안...</a></li>
                    <li><a href="#">[편성표] 6월 1주 화면해설방송 안...</a></li> 
                </ul>
                <p class="more"><a href="#"><img src="images/all.gif" alt="보도자료및성명서 전체보기"></a></p>
            </div>
        </div>
    </div>    
</body>
</html>

결과물

글 제한이 15개..
1월 3일까지 진도 빠진 거 명절 동안에 다 올리자면 1일 15개 넘어야 하는데ㅋㅋㅋ
다 비공개 처리 해놨다가 매일 매일 15개씩 수작업으로 공개 걸어야겠네

그지그튼 거
제한 때문에 부계 만드는 건 싫다

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

티스토리툴바