HTML에서 앵커를 만들려면 <a> 태그를 사용합니다. <a> 태그는 다른 문서로 연결되는 하이퍼링크를 생성하거나, 현재 문서 내의 특정 위치로 이동하는 링크를 만들 때 사용됩니다.
<a> 태그의 주요 속성
앵커 태그에서 활용할 수 있는 주요 속성은 다음과 같습니다.
| 속성 | 값 | 설명 |
|---|---|---|
| charset | character_encoding | 연결된 문서의 문자 인코딩을 정의합니다. |
| coords | shape = "rect"이면 coords = "left, top, right, bottom" shape = "circ"이면 coords = "centerx, centery, radius" shape = "poly"이면 coords = "x1, y1, x2, y2, ..., xn, yn" | 이미지 맵(image map)에서 shape 속성에 맞는 좌표를 지정하여 이미지의 특정 영역을 정의합니다. |
| download | 파일명 | 사용자가 하이퍼링크를 클릭하면 대상 파일을 다운로드합니다. |
| href | URL | 링크가 이동할 페이지의 URL 또는 앵커 이름을 지정합니다. |
| hreflang | language_code | 대상 URL의 언어 코드를 지정합니다. |
| media | media_query | 연결된 문서가 최적화된 미디어 유형을 지정합니다. |
| name | 섹션 이름 | 링크가 이동할 수 있는 페이지 내의 특정 영역을 표시합니다. |
| rel | alternate, designates, stylesheet, start, next, prev, contents, index, glossary, copyright, chapter, section, subsection, appendix, help, bookmark | 현재 문서와 대상 URI 간의 관계를 설명합니다. |
| rev | alternate, designates, stylesheet, start, next, prev, contents, index, glossary, copyright, chapter, section, subsection, appendix, help, bookmark | 대상 URL과 현재 문서 간의 관계를 지정합니다. |
| shape | rect(사각형) circ(원형) poly(다각형) | 이미지 맵의 모양을 지정합니다. |
| target | _blank _parent _self _top | 대상 URL을 어디에서 열지 지정합니다. _blank - 새 창에서 대상 URL을 엽니다. _self - 클릭된 것과 동일한 프레임에서 대상 URL을 엽니다. _parent - 부모 프레임셋에서 대상 URL을 엽니다. _top - 창 전체 본문에서 대상 URL을 엽니다. |
| type | mime_type | 대상 URL의 MIME(Multipurpose Internet Mail Extensions) 유형을 지정합니다. |
예제
다음 코드를 실행하면 HTML에서 앵커를 포함하는 방법을 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML a Tag</title> </head> <body> <p>Welcome to <a href = "https://www.qries.com">Qries</a></p> </body> </html>
참고 사항
위 예제에서 <a href="https://www.qries.com">Qries</a>처럼 href 속성에 이동할 URL을 지정하면, 화면에는 'Qries'라는 클릭 가능한 링크 텍스트가 표시됩니다. 또한 같은 페이지 내 특정 위치로 이동하려면 id 속성을 가진 요소를 만들고, href="#아이디값" 형태로 링크를 걸면 됩니다.