메뉴 건너뛰기

HEUKMYO

web publishing

141618_목록태그

2014.06.18 10:08 read.145

<img src="" alt="" />

이미지를 불러오는 태그

인라인요소

파이어폭스에서는 절대경로 안됨


<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을 사용해서 마크업하기


ul_1.PNG

<!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태그를 이용해서 마크업하기

 

dl_1.PNG


<!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 -같은 내용 복사



위로