반응형
앵커 태그는 다른 문서로 이동하거나, 같은 문서의 특정 위치로 이동하거나 혹은 다른 문서의 특정 위치로 이동하는데 사용됩니다.
[ 문법 ]
1. 다른 문서로 이동하려는 경우, href 속성에 이동하려는 문서의 경로 혹은 URL을 넣고 “링크 텍스트”를 클릭하면 해당 문서로 이동하게 됩니다.
01 <a href="url">링크 텍스트</a>
02 <!-- 예 -->
03 <a href="https://google.com">구글로 이동</a>
04 <a href="../test.html">test 문서 열기</a>
2. 같은 문서의 특정 위치로 이동하려는 경우(내부 링크), href에 #를 이용해서 id값을 지정하고 이동하고자 하는 태그에 같은 id값을 써주면 된다.
여기서 “Section 1로 이동”을 클릭하면 화면이 스크롤 하면서 해당 위치로 이동하게 됩니다.
01 <a href="#section1">Section 1로 이동</a>
02 ...
03 ...
04 ...
05 <h1 id="section1">Section 1</h1>
3. 다른 문서의 특정 위치로 이동하려는 경우 위의 1, 2번에서 설명한 것을 모두 사용하면 됩니다.
즉 href의 url끝에 id를 추가해주면 url의 문서로 이동한 후 id값이 있는 곳을 스크롤 됩니다.
01 <!-- test1. html -->
02 <a href="https://test.com/test2.html#Section1">test2.html로 이동</a>
01 <!-- test2. html -->
02 ...
03 ...
04 ...
05 <h2 id=”Section1” >test.html에서 이동해 오는 곳</h2>
앵커 태그는 인터넷이 지금처럼 발전할 수 있도록 하는데 기반을 만들어 준 태그입니다.
초창기 인터넷은 문서의 특정 단어나 문장을 클릭하면 링크된 문서로 이동하는 기능을 이용해서 학자들 간 논문이나 문서를 효과적으로 사용하기 위해 개발되었습니다.
그것이 발전을 거듭해 지금의 거대한 인터넷이 된 것이지요. 만일 앵커 태그가 없었다면 불가능한 일이었을 겁니다.
반응형
'HTML5' 카테고리의 다른 글
| [ HTML Tag - A 그룹 ] <!DOCTYPE> 태그는 무엇인가? (0) | 2023.07.20 |
|---|---|
| [ HTML Tag - A 그룹 ] <!-- 주석 --> 사용법 (0) | 2023.07.18 |
| [HTML5] 미디어의 크기에 따라 다른 이미지를 보여주는 <picture> 태그 (0) | 2019.11.16 |
| [HTML5] <dl> tag - definition list (정의 목록) (0) | 2019.11.13 |
| [HTML5] block과 inline level 요소들 (0) | 2019.11.01 |
| [HTML5] meta tag 총정리 (0) | 2019.10.31 |
| [HTML5] <article>과 <section> 및 <div> 의 적절한 사용에 관한 고찰 (0) | 2019.10.23 |
DeveloperN
개발자 n의 개발 이야기(draft)
