2017. 12. 25. 23:41ㆍ웹 표준 퍼블리싱 바이블
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 문서 상의 서식을 이루는 요소들
'웹 표준 퍼블리싱 바이블' 카테고리의 다른 글
3-12. 아이프레임(<iframe>)의 다양한 속성 알아보기 (0) | 2017.12.26 |
---|---|
3-11. 이미지와 관련된 요소들 (0) | 2017.12.26 |
3-9. 표를 만드는 테이블 요소 (0) | 2017.12.15 |
3-8. 각종 목록을 표현하는 요소 (0) | 2017.10.12 |
3-7. 인용문, 정형화된 텍스트 알아보기 (0) | 2017.10.11 |