이미지를 불러오는 태그
인라인요소
파이어폭스에서는 절대경로 안됨
<a href=""></a>
링크
인라인요소
<a href="#"></a>
가상링크
속성
target 속성
ex><a href="#" target="_blank"></a>
<a href="mailto:cc@hanmail.net">관리자에게 메일보내기</a>
이미지맵
<img src="이미지맵/imgmap.jpg" alt="" usemap="#book" />
<map id="bookr" name="book">
<area shape="rect" coords="52,102,147,187" href="http://www.naver.com" alt="" /> 사각형
<area shape="poly" coords="394,59,439,98,416,143,371,144,345,95" href="http://www.naver.com" alt="" /> 다각형
<area shape="circle" coords="261,245,71" href="http:22.daum.net" alt="" /> 원
</map>
리스트
- 블럭요소
※ <li><li>안에 블럭요소 포함할 수 있다
ex)
맞는 표현
<ul>
<li><h1>항목</h1></li>
</ul>
틀린표현
<ul>
<p>내용</p>
<li>항목</li>
</ul>
ol(Order List)
순차적인 목록
<ol><li>항목내용</li></ol>
ex)
<ol>
<li><a href="">입사지원</a></li>
<li><a href="">서류전형</a></li>
<li><a href="">1차면접</a></li>
</ol>
ul(Unorder List)
비순차적 목록
<ul><li>항목내용</li></ul>
ex)
<ul>
<li><a href="">기업소개</a></li>
<li><a href="">사업영역</a></li>
<li><a href="">제품소개</a></li>
</ul>
----------------------------------------------------------------------------------------------------------------
아래의 메뉴를 ul을 사용해서 마크업하기
<!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" lang="ko" xml:lang="ko">
<head>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title> 웹접근성의 정의 | 웹 접근성 연구소 </title>
</head>
<body>
<h1 class="hidden">메인메뉴</h1>
<ul>
<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>
<li><a href="#">홍보 동영상</a></li>
</ul>
</li>
<li>
<a href="#">품질마크</a>
<ul>
<li><a href="#">품질마크개요</a></li>
<li><a href="#">인증사이트 현황</a></li>
<li><a href="#">인증사이트 통계</a></li>
</ul>
</li>
<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>
<li><a href="#">세미나 접수 확인</a></li>
<li><a href="#">세미나 자료실</a></li>
</ul>
</li>
<li>
<a href="#">개발자 아카이브</a>
<ul>
<li><a href="#">웹 콘텐츠 제작기법</a></li>
<li><a href="#">웹 콘텐츠 신기술 제작법</a></li>
<li><a href="#">K-WAH 4.0</a></li>
<li><a href="#">전문가 블로그</a></li>
<li><a href="#">전문가 칼럼</a></li>
<li><a href="#">W3C 접근성 문서 번역</a></li>
<li><a href="#">웹 콘텐츠 접근성 2.0</a></li>
</ul>
</li>
<li>
<a href="#">자문서비스</a>
<ul>
<li><a href="#">온라인 자문서비스</a></li>
</ul>
</li>
</li>
<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>
<li><a href="#">웹접근성 표준 개정 제안</a></li>
</ul>
</li>
</ul>
</body>
</html>조직도를 ul태그를 이용해서 만들기
dl(definition List)
정의형목록
<dl><dt>용어</dt><dd>용어정의</dd></dl>
ex)
<dl>
<dt> 웹표준 수업과목</dt>
<dd>XHTML</dd>
<dd>HTML</dd>
<dd>CSS</dd>
<dd>CSS3</dd>
<dd>Javascript</dd>
</dl>
----------------------------------------------------------------------------------------------------------------
공지사항을 dl태그를 이용해서 마크업하기
<!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" lang="ko" xml:lang="ko">
<head>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title> 공지사항 </title>
</head>
<body>
<dl>
<dt><a href="#">공지사항</a></dt>
<dd>
<ul>
<li><a href="#">[입찰공고] 2014년 웹 사이트 등</a><span>2009-6-16</span></li>
<li><a href="#">[홍보] 신정보문화헌장 실청강령 대국</a><span>2009-6-16</span></li>
<li><a href="#">2014년도 상반기 웹 접근성 순회교</a><span>2009-6-16</span></li>
<li><a href="#">"2014 웹 접근성 향상 전략 세미나</a><span>2009-6-16</span></li>
</ul>
<p><a href="#" title="공지사항 더보기">more</a></p>
</dd>
<dt><a href="#">자료실</a></dt>
<dd>
<ul>
<li><a href="#">2014 웹 접근성 향상 전략 세미나</a><span>2009-6-16</span></li>
<li><a href="#">플래시 접근성 세미나 발료자료(3)</a><span>2009-6-16</span></li>
<li><a href="#">플래시 접근성 세미나 발료자료(2)</a><span>2009-6-16</span></li>
<li><a href="#">플래시 접근성 세미나 발료자료(1)</a><span>2009-6-16</span></li>
</ul>
<p><a href="#" title="자료실 더보기">more</a></p>
</dd>
<dt><a href="#">전문가 칼럼</a></dt>
<dd>
<ul>
<li><a href="#">후지쯔의 유니버설 디자인</a><span>2009-6-16</span></li>
<li><a href="#">유니버셜 디자인과 웹</a><span>2009-6-16</span></li>
<li><a href="#">유니버설 디자인 프로세스(The pr)</a><span>2009-6-16</span></li>
<li><a href="#">유니버설 디자인 7가지 원칙</a><span>2009-6-16</span></li>
</ul>
<p><a href="#" title="전문가 칼럼 더보기">more</a></p>
</dd>
</dl>
</body>
</html>div로 코딩할 경우
<div>
<h3><a href="#">공지사항</a></h3>
<ul>
<li><a href="#">[입찰공고] 2014년 웹 사이트 등</a><span>2009-6-16</span></li>
<li><a href="#">[홍보] 신정보문화헌장 실청강령 대국</a><span>2009-6-16</span></li>
<li><a href="#">2014년도 상반기 웹 접근성 순회교</a><span>2009-6-16</span></li>
<li><a href="#">"2014 웹 접근성 향상 전략 세미나</a><span>2009-6-16</span></li>
</ul>
<p><a href="#" title="공지사항 더보기">more</a></p>
<h3><a href="#">자료실</a></h3>
<ul>
<li><a href="#">2014 웹 접근성 향상 전략 세미나</a><span>2009-6-16</span></li>
<li><a href="#">플래시 접근성 세미나 발료자료(3)</a><span>2009-6-16</span></li>
<li><a href="#">플래시 접근성 세미나 발료자료(2)</a><span>2009-6-16</span></li>
<li><a href="#">플래시 접근성 세미나 발료자료(1)</a><span>2009-6-16</span></li>
</ul>
<p><a href="#" title="자료실 더보기">more</a></p>
<h3><a href="#">전문가 칼럼</a></h3>
<ul>
<li><a href="#">후지쯔의 유니버설 디자인</a><span>2009-6-16</span></li>
<li><a href="#">유니버셜 디자인과 웹</a><span>2009-6-16</span></li>
<li><a href="#">유니버설 디자인 프로세스(The pr)</a><span>2009-6-16</span></li>
<li><a href="#">유니버설 디자인 7가지 원칙</a><span>2009-6-16</span></li>
</ul>
<p><a href="#" title="전문가 칼럼 더보기">more</a></p>
</div>※ 에디터플러스 단축키
ctrl+shift+d - 블럭 선택
ctrl+j -같은 내용 복사
댓글 쓰기 권한이 없습니다.