본문 바로가기

Web standard

링크

반응형
링크(a 요소)
a요소는 인라인 요소이며 a요소를 제외한 인라인 요소와 텍스트를 포함한다.
문서의 특정한 부분을 도달점으로 하고자 하는 경우는 name속성, 또는 id속성을 이용하여 그곳에 이름을 지정한다. id로 이름이 붙는 요소는 a요소 이외에도 링크의 도달점이 될 수 있지만 지원하지 않는 브라우저도 많이 있다. XHTML1.0에서 도달점의 이름을 붙이는 경우에는 id속성을 사용해야만 한다. XHTML1.0과 예전 브라우저 모두 문제없는 도달점을 표현하기 위해서는 id속성과 name속성을 모두 지정해 둔다.
 
예제)
링크설정 : <a href="./test.html">링크설정</a>
문서 내의 특정한 위치지정 :
<h2><a name="contents" id="contents">링크설정방법</a></h2>
<p>위 <a href="./test.html#contents">링크설정방법</a> 참조</p>
※ xhtml1.0에서는 목표지점에 a요소를 지정할 필요가 없으며 <h2 id="contents">링크설정방법</h2>로 지정하면 된다.
 
tabindex속성과 accesskey속성을 지정하여 키조작에 의한 포커스 이동방식을 사용자에게 제공할 수 있다. tabindex는 키보드의 tab키를 눌렀을때 포커스 이동 순서를 지정하는 것이고 accesskey는 윈도우의 'alt' 매킨토시의 'cmd'와 지정키를 누르면 포커스가 지정되는 방식이다. 그러나 access지정키는 브라우저의 기본 속성값과 충돌하기도 한다.
 
예제)
<ul>
 <li><a href="http://naver.com" tabindex="1">네이버</a></li>
 <li><a href="http://daum.net" tabindex="2">다음</a></li>
 <li><a href="http://empas.com" tabindex="3">엠파스</a></li>
 <li><a href="http://paran.com" tabindex="4">파란</a></li>
</ul>
<ul>
 <li><a href="http://naver.com" accesskey="n">네이버</a></li>
 <li><a href="http://daum.net" accesskey="d">다음</a></li>
 <li><a href="http://empas.com" accesskey="e">엠파스</a></li>
 <li><a href="http://paran.com" accesskey="p">파란</a></li>
</ul>
 
각종 속성들
href="URI" : 링크되는 곳의 URI
charset="문자세트" : 링크될 곳의 문자세트 
hreflang="언어코드" : 링크될 곳의기본이 되는 언어코드
type="MIME타입" : 링크될 곳의 MIME타입
name="" : 링크의 도달점으로 지정하기 위한 이름 지정
rel="링크타입" : href속성으로 지정되는 링크될 곳과의 관계를 지정
rev="링크타입" : href속성으로 지정되는 링크될 곳에서 본 이 문서와의 관계를 지정
shape="영역의 모양" : 사용자의 조작에 반응할 영역의 모양을 지정 rect, circle, ppoly, default
coords="영역의 좌표" : shape속성으로 지정한 각 좌표를 '.'으로 구분하여 지정
tabindex="Tab이동순서" : 탭키를 눌러 항목 사이를 이동시킬 순서를 지정 0~32767사이의 숫자로 작은값부터 지정
accesskey="단축키" : 'alt'키와같이 누르면 포커싱되게 지정
target="프레임이름" : 링크할 곳의 문서를 표시하는 프레임이름, 혹은 윈도우 이름 지정
반응형