named anchor 사용하기.

dev | 2004-02-21

링크를 걸때 uri 뒤에 #name 을 붙이면...예를 들어...

/category1/section1.html#subtitle2

이런 식으로요...그러면 해당 문서의 <a name="subtitle2"></a> 이 있는 부분으로 가지요?

그런데 이것보다 더 좋은 방법을 발견했습니다.

id 속성을 많이 사용하지는 않는데 이 id 속성의 기능중의 하나가 named anchor 기능입니다.

id 는 보통 CSS # selector 나 DOM 의 getElementById 에서 썼는데... 위와 같이 사용하지 않고..

<table id="subtitle2">

와 같이 사용을해도

<a name="subtitle2"></a>

를 사용한 것과 같은 효과를 볼 수 있습니다.

어차피 id 라는 것이 화면상의 한 object 를 지칭하는 것이니까 named anchor 를 사용 할때에는 <a></a> 라는 것을 하나 더 추가 하는 것 보다도 table 이나 div 에 id 를 주는 것이 좋을 것 같습니다. 이렇게 하면 CSS 나 jScript 에서도 참조 할 수 있고...

참 좋은 것 같습니다. ^^

단 화면에 겹치는 id 가 있으면 안되겠지요...

추가로...CSS3 스펙에 :target 기능이 추가 됐는데 이것은 위와 같은 named anchor 를 사용할때 나타나는 슈도엘리먼드입니다. named anchor 를 사용해도 문서의 마지막 부분을 가리키고 있으면 아래에 내용이 없기 때문에 화면 중간에 걸치게 되는데 :target 을 사용하면 이 부분을 다른 디자인으로 변경 할 수 있습니다. 단, 아직 IE6 에서는 지원이 되지 않고요. Mozilla 나 FireFox 를 사용하면 테스트 해 볼 수 있습니다.

CSS 는 정말 대단한거 같아요....^^

Comments

Post a comment

:

: 공개 되지 않습니다. Gravatar를 표시 합니다.

:

: HTML 태그를 사용할 수 없습니다.