![[2021/12/24]국비지원 CSS3 6-(1) wah.or.kr sub](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FdtsIdD%2FbtrscNTf0P4%2FAAAAAAAAAAAAAAAAAAAAABR5K9kQlzBx0_9SkEDIIIGvm6tI8I67c7CfhWEDn_ms%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DOi4hvFc56b16vwoGbhC8beEd0JU%253D)
원본
작업내용 ( html )
<!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>
<link rel="stylesheet" type="text/css" href="css/sub.css">
</head>
<body>
<!-- 본문 바로가기 -->
<div id="skipNavi"><a href="#container">본문 바로가기</a></div>
<!-- //본문 바로가기 -->
<hr>
<div id="wrap">
<!-- header -->
<div id="header">
<h1 class="logo"><a href="#"><img src="images/logo.gif" alt="웹 접근성 품질마크
WEB ACCESSIBILITY"></a></h1>
<dl class="topMenu">
<dt class="blind">탑메뉴</dt>
<dd><a href="#" title="홈페이지로 바로가기">홈</a> | </dd>
<dd><a href="#">로그인</a> | </dd>
<dd><a href="#">회원가입</a> | </dd>
<dd><a href="#">위치안내</a> | </dd>
<dd><a href="#">사이트맵</a></dd>
</dl>
<h2 class="blind">주메뉴</h2>
<ul class="gnb">
<li><a href="#">웹 접근성의 이해</a>
<ul>
<li><a href="#">웹의 역사</a></li>
<li><a href="#">웹 접근성의 개념</a></li>
<li><a href="#">웹 접근성과 장애인</a></li>
<li><a href="#">웹 접근성과 비장애인</a></li>
</ul>
</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>
<!-- //header -->
<hr>
<!-- container -->
<div id="container">
<!-- snb -->
<div class="snb">
<h2><img src="images/side_navi.gif" alt="웹 접근성의 이해 Web Accessibility"></h2>
<ul class="nav">
<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>
<!-- //snb -->
<hr>
<!-- content -->
<div id="content">
<p class="path">
<a href="#" title="홈페이지로 바로가기">홈</a> >
<a href="#">웹 접근성의 이해</a> >
<strong>웹 접근성의 정의</strong>
</p>
<h2><img src="images/contents.gif" alt="웹 접근성의 정의. 웹의 힘은 그것의 보편성에 있다. 장애에 구애없이
모든 사람이 접근할 수 있는 것이 필수적인 요소이다."></h2>
<h3><img src="images/icon1.gif" alt="웹 접근성이란?"></h3>
<div class="txt">
<p>
월드 와이드 웹(World Wide Web)을 창시한 팀 버너스 리(Tim Berners-Lee)는 웹이란
<q><strong>장애에 구해 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간</strong></q>이 라고 정의하였으며,
웹 콘텐츠를 제작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야
한다고 하였다. 이렇듯 웹 창시자가 웹의 기본적 철학에서 웹 접근성 부문을 강조함에도
불고하고, 웹접근성을 바라보는 입장에 따라 다르게 정의하고 있다.
</p>
<p>
하지만, 접근에 대한 개념의 다양성으로 인한 인식의 부족보다는 접근성에 대한 개념을 잘못이해하고 있는 것이 더욱 문제이다.
즉, 접근성을 단지 장애인에서 국한된 문제라고 잘목 이해 하고 있는 경우가 대부분이라는 것이다.
비록 접근성 준수가 장애인에게 가장 혜택이 많이 돌아가는 것이 사실이지만,
<strong>접근성이란 장애인뿐만 아니라 모든 사람이 정보통신 기기나 서비스를 손쉽게 활용할 수 있도록 만드는 것을 말하는</strong> 것이 다.
예를 들자면 장애인과 노인들을 위해 개발된 리모콘, 전화, 자동문 등의 제품들이 널리 보급되면서 궁극적으로는 모든 사람들이
편리하게 활용하게 된 것을 들 수 있다. 이러한 접근성 개념은 정보통신 분야에서 다양한 제품 및 서비스 간의 호환성 문제,
이동 정보통신 기기 등으로 그 필요성 및 중요성이 더욱 증대되고 있다.
</p>
</div>
<h3><img src="images/icon2.gif" alt="인증사이트 통계"></h3>
<table class="siteTable">
<caption class="blind">인증사이트 통계</caption>
<thead>
<tr class="line">
<th scope="col">연도</th>
<th scope="col">신청 사이트 수</th>
<th scope="col">인증 사이트 수</th>
<th scope="col">합격률</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">합계</th>
<td>793</td>
<td>153</td>
<td>19.29%</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">2017년</th>
<td>40</td>
<td>15</td>
<td>37.5%</td>
</tr>
<tr>
<th scope="row">2018년</th>
<td>40</td>
<td>15</td>
<td>37.5%</td>
</tr>
<tr>
<th scope="row">2019년</th>
<td>40</td>
<td>15</td>
<td>37.5%</td>
</tr>
<tr>
<th scope="row">2020년</th>
<td>40</td>
<td>15</td>
<td>37.5%</td>
</tr>
</tbody>
</table>
<h3><img src="images/icon3.gif" alt="웹 접근성 품질마크 신청 진행절차"></h3>
<ol class="apply">
<li>
<a href="#"><img src="images/receive.gif" alt="1단계 접수신청. 온라인 접수신청을
완료하고 사전심사결과를 기다리는 단계"></a>
</li>
<li>
<a href="#"><img src="images/screen.gif" alt="2단계 접수완료 및 신사중. 접수완료
후 품질마크 심사(전문가,사용자)가 진행되는 단계"></a>
</li>
<li>
<a href="#"><img src="images/complete.gif" alt="3단계 심사완료. 최종적으로
인증위원회 승인이 결정된 단계"></a>
</li>
</ol>
</div>
<!-- //content -->
</div>
<!-- //container -->
<hr>
<!-- footer -->
<div id="footer">
<h3 class="blind">하단메뉴</h3>
<ul class="etc">
<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>
<address>서울시 강서구 공항로188 한국정보화진흥원 3층 정보접근지원부</address>
<p>Copyright©National information Society Agency</p>
</div>
<!-- //footer -->
</div>
</body>
</html>
작업내용 ( sub.css )
@import url(reset.css);
/* sub.css */
/* common */
body{font-size: 12px;font-family: Dotum,"돋움",sans-serif;color:#666;
background:#e4e4e4 url(../images/bgbg.gif) repeat-x 0 78px;}
a:link,a:visited{text-decoration:none;color:#666;}
a:hover,a:active,a:focus{text-decoration: underline;color:#000;}
strong, th{font-weight:bold;}
/* layout */
#wrap{width: 950px;border:1px solid red;margin:0 auto;padding:10px 10px 50px;}
#header{width: 950px;border:1px solid blue;}
#container{width:950px;margin:10px 0;border: 1px solid green;padding:95px 0}
#container::after{content:"";display: block;clear:both;}
.snb{float:left;width:206px;border:1px solid red;}
#content{float:right;width:700px;border:1px solid red;}
#footer{width:700px;height:70px;border:1px solid blue;padding:15px 0px 15px 250px;
background:#fff;}
/* header */
/* 로고 */
h1.logo{float:left; margin-bottom: 30px;}
/* 탑메뉴 */
dl.topMenu{float:right;}
.topMenu dd{display: inline;}
/* 주메뉴 */
ul.gnb{clear:both;position:relative;}
.gnb::after{content:"";display: block;clear:both;}
.gnb>li{display:inline;}
.gnb>li>a{color:#fff;padding:0 30px;}
.gnb>li>ul{position: absolute;left:30px;top:33px;}
.gnb>li>ul>li{display:inline;padding-right:30px;}
/* container */
/* snb */
.snb>ul.nav>li{background: url(../images/submenu_line.gif) no-repeat 0 100%; line-height: 30px;}
.snb>ul.nav a{background:url(../images/icon4.gif) no-repeat 10px 50%; padding-left: 20px;}
/* content */
p.path{text-align: right;}
h2.img{margin-bottom:30px;}
h3{margin:20px 0}
/* txt */
div.txt {background: url(../images/contents_bg.gif) no-repeat 0 0;}
.txt>p{padding-left:220px;line-height: 150%;text-align:justify;padding-bottom:15px;}
.txt>p q{quotes:"'" "'";}
.txt>p q::before{content:open-quote;}
.txt>p q::after{content:close-quote;}
/* 테이블 */
.siteTable{width:100%;}
.siteTable th,.siteTable td{text-align:center;border-bottom:1px solid #666;padding:5px 0;}
.line>th{border-top:3px solid #666;border-bottom:2px solid #666;}
/* 절차 */
.apply{width:100%;overflow:auto;}
.apply>li{float:left;}
/* footer */
.etc>li{display:inline;}
더보기
더보기
reset.css
@charset "UTF-8";
/* reset.css */
html,body{width:100%;height:100%}
body,div,dl,dt,dd,ul,li,ol,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,table{margin:0;padding:0;}
table{border-collapse:0;}
img,fieldset{border:none;}
address,caption,cite,code,em,strong,th{font-style: normal;font-weight:normal;}
ol,ul{list-style: none;}
caption,th{text-align: left;}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%;}
q::after,q::before{content:"";}
abbr,acronym{border:none;}
img,input{vertical-align:middle;}
hr{display: none;}
#skipNavi,.blind{position:absolute;left:0;top:0;width:0;height:0;font-size:0;line-height:0;
visibility:hidden;text-indent: -9999px;overflow: hidden;}
결과물
