3-10. 앵커(Anchor)의 표현

1. 현재 문서에서 다른 문서로 이동하기 위해서는 <a>요소가 필요합니다. <a>요소는 "href" 속성으로 이동할 경로를 지정하고 "title" 속성으로 설명을 추가할 수 있습니다. XHTML에서는 온라인 요소만 포함할 수 있었으나 HTML5에서는 인라인 요소 이외에 <h1>, <p>와 같은 블록 요소도 포함할 수 있습니다.

2. href 속성으로 연결하기

2-1. 웹 페이지 절대 경로로 연결하기

"http://도메인주소/폴더명/파일명"의 형식으로 문서를 연결합니다.

<a href="http://yuchae.tistory.com/">앙큼한유채`s 일상 스토리</a>

2-2. 웹 페이지 상대 경로로 연결하기

"폴더명/파일명"의 형식으로 문서를 연결합니다. 현재 문서의 위피를 기준으로 연결할 문서를 찾습니다.

<a href="html/yuchae.html">앙큼한유채`s 일상 스토리</a>

2-3. E-mail 계정 연결하기

메일 계정을 연결할 때에는 "mailto:" 프로토콜로 시작합니다.

<a href="mailto:yuchae@sample.com">앙큼한유채`s 일상 스토리</a>

2-4. 문서나 파일 연결하기

문서나 파일을 연결하면 실행 가능한 파일은 실행이 되고, 그렇지 않은 문서는 다운로드가 됩니다.

<a href="mailto:yuchae@sample.com">앙큼한유채`s 일상 스토리</a>

3. accesskey와 tabindex알아보기

3-1. "accesskey"로 단축키를 지정할 수 있습니다. 익스플로러의 셩우 Alt를 누른 상태에서 지정한 키 값을 누르고, Enter를 누르면 이동하게 됩니다. 파이어폭스 브라우저의 경우는 Alt+Shift를 누른 상태에서 해당 키 값을 누르면 이동합니다.

※ 단축키의 표현은 각 브라우저의 단축키와 충돌할 수 있기 때문에 꼭 필요한 경우에만 지정하도록 합니다.

<a href="http://yuchae.tistory.com/" accesskey="y">앙큼한유채`s 일상 스토리</a>

3-2. 키보드에서 tab를 누르면 문서에 포함된 <a>요소와 각종 서식 요소들의 포커스를 찾아갈 수 있습니다. 이때 포커스 되는 순서를 지정하고 싶다면 "tabindex"속성을 사용합니다. 다음과 같이 지정했을 경우 포커스의 순서는 "tabindex"가 지정될 순서를 따르고, 지정하지 않은 <a>요소와 서식 요소는 다시 문서 처음부터 지정됩니다.

<ul> <li><a href="http://www.naver.com/">네이버</a></li> <li><a href="http://www.google.com/">구글</a></li> <li><a href="http://www.daum.net/" tabindex="2">다음</a></li> <li><a href="http://yuchae.tistory.com/" tabindex="1">앙큼한유채`s 일상 스토리</a></li> </ul>

※ 서식(Form) 요소란? 버튼이나 입력창과 같이 HTML 문서 상의 서식을 이루는 요소들