마크업 실습 예제) 참고사이트 주소 : http://www.wah.or.kr/
코드가 원래 사이트와 같지 않아도 됩니다. 구조를 얼마나 잘 해석하느냐가 중요합니다.
EXAM)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-ｅquiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> 웹 접근성 연구소 </title>
<meta name="Keywords" content="" />
<meta name="Description" content="" />
</head>
<body>
<div id="wrap">
<ul>
<li><a href="#container">본문바로가기</a></li>
</ul>
<hr />
<div id="header">
<h1>웹 접근성 연구소</h1>
<ul>
<li>로그인</li>
<li>회원가입</li>
<li>사이트맵</li>
</ul>
<h2>메인메뉴</h2>
<ul>
<li>웹 접근성의 이해
<ul>
<li>웹 접근성의 정의</li>
<li>우리나라의 현황</li>
<li>법·제도</li>
<li>장애인의 웹 사이트 이용 이해</li>
<li>관련 사이트</li>
<li>홍보 동영상</li>
</ul>
</li>
<li>품질마크</li>
<li>교육/세미나</li>
<li>개발자 아카이브</li>
<li>자문서비스</li>
<li>자료실</li>
</ul>
</div><!--header end-->
<hr />
<div id="visual">
<dl>
<dt>이전으로</dt>
<dt>다음으로</dt>
<dd>
<h3>웹 접근성 전문가 상담</h3>
<p>웹 접근성 관련 궁금증에 대해 전문가들의 속시원한 자문을 제공</p>
</dd>
<dd>
<h3>홍보 동영상</h3>
<p>웹 접근성 홍보 및 시각장애인의 컴퓨터 활용 안내 동영상</p>
</dd>
<dd>
<h3>품질마크</h3>
<p>웹 접근성 표준지침을 준수한 우수 사이트에 부여하는 마크</p>
</dd>
<dd>
<h3>웹 접근성 제작기법</h3>
<p>웹 접근성을 고려한 콘텐츠 제작기법에 대한 방법과 실사례를 제공</p>
</dd>
</dl>
<p>함께만들어가는 누구나 자유로운 웹세상</p>
</div><!--visual end-->
<hr />
<div id="container">
<div id="contentsLeft">
<h3>자료실,전문가칼럼 목록</h3>
<dl>
<dt>자료실</dt>
<dd>
<ul>
<li>웹 접근성 국제 세미나 발표자료(8)..2010-10-08</li>
<li>웹 접근성 국제 세미나 발표자료(7)..2010-10-08</li>
<li>웹 접근성 국제 세미나 발표자료(6)..2010-10-08</li>
</ul>
<p>더보기</p>
</dd>
<dt>전문가칼럼</dt>
<dd>
<ul>
<li>후지쯔의 유니버설 디자인 2009-06-16</li>
<li>유니버셜 디자인과 웹 2007-11-19</li>
<li>유니버설 디자인 프로세스(The Pr... 2007-07-20</li>
</ul>
<p>더보기</p>
</dd>
</dl>
<div class="news">
<h3>공지사항</h3>
<ul>
<li>'11년 웹 접근성 품질마크 ... 2010-12-30</li>
<li>제11회 웹 접근성 품질마크 인증 사... 2010-12-30</li>
<li>제11회 웹 접근성 품질마크 사용자심... 2010-12-22</li>
<li>제11회 웹 접근성 품질마크 심사 일... 2010-11-23</li>
</ul>
<p>더보기</p>
</div>
</div><!--contentsLeft end-->
<hr />
<div id="contentsCenter">
<div class="kwah">
<h3>K-WAH 3.0</h3>
<p>한국정보화진흥원에서 제작한 웹 접근성 자동평가도구입니다.</p>
</div>
<div class="guide">
<h3>웹 접근성 콘텐츠 개발 가이드 라인</h3>
<ul>
<li>fieldset을 사용하여 유사 컨트롤을 ..</li>
<li>PDF 문서에 삽입된 이미지에 대체 텍스트..</li>
<li>제품 번호 입력시 테이블을 잘못 사용한 예</li>
<li>회원가입 필수 입력 사항을 색상만으로 구분..</li>
</ul>
<p>더보기</p>
</div>
</div><!--contentsCenter end-->
<hr />
<div id="contentsRight">
<h3>개발자 아카이브</h3>
<ul>
<li>인터넷 웹 콘텐츠 접근성 지침(2005.12)</li>
<li>웹 접근성 콘텐츠 제작기법</li>
<li>웹 접근성 향상을 위한 국가표준 기술 가이드라인(2009.3.17)</li>
</ul>
<h3>웹 접근성 연구소 사이트 제작일기</h3>
<div class="link">
<h3>관련기관</h3>
<ul>
<li>행정안전부</li>
<li>한국정보화진흥원</li>
</ul>
</div>
</div><!--contentsRight end-->
</div><!--container end-->
<hr />
<div id="footer">
<ul>
<li>한국정보화진흥원 소개</li>
<li>웹 접근성 정책</li>
<li>개인정보취급방침</li>
<li>이메일무단수집거부</li>
<li>찾아오시는 길</li>
<li>뷰어내려받기</li>
</ul>
<address>
<p>서울시 강서구 공항로 188 한국정보화진흥원 3층 정보접근지원부 ☎ 02-3660-2573</p>
<p>Copyright©2009 National Information Society Agency</p>
<p>이메일: dezaki@nia.or.kr</p>
</address>
</div><!--footer end-->
</div><!--wrap end-->
</body>
</html>
'html' 카테고리의 다른 글
| 온라인 서식예제 만들기 (0) | 2011.01.16 |
|---|---|
| 온라인 서식 예제 미리보기 (0) | 2011.01.16 |
| 예제) 그림의 페이지 마크업 해보기 (0) | 2011.01.16 |
| 그룹화, 문자삽입 (0) | 2011.01.16 |
| 텍스트를 표현하기 위한 인라인 요소들... (0) | 2011.01.16 |