<a> 태그란?
HTML에서 링크를 생성하기 위해 사용하는 태그는 <a> 태그입니다. <a> 태그는 "anchor"의 약자로, 텍스트나 이미지 등을 클릭하면 다른 웹 페이지나 같은 페이지 내의 특정 위치로 이동하도록 링크를 생성합니다.
<a> 태그에서 사용할 수 있는 속성
href
href 속성은 HTML <a> (anchor) 태그에서 가장 중요한 속성 중 하나입니다. href는 Hyper Reference(하이퍼 링크)를 지정하며, 링크를 클릭할 때 이동할 URL을 지정합니다. 이 속성을 사용하여 다른 웹 페이지, 문서, 파일 등을 연결할 수 있습니다.
href 속성의 값으로는 절대 URL, 상대 URL, 앵커(URL 내에서의 특정 위치) 등이 올 수 있습니다.
절대 URL
<a href="https://meta-board.net/">메타보드 사이트로 이동하기</a>절대 URL을 사용하면 인터넷상의 다른 웹 페이지로 이동할 수 있습니다. 위 코드는 "메타보드 사이트로 이동하기"라는 링크를 생성하고, 클릭하면 href 속성에 지정된 주소 "https://meta-board.net/"로 이동하게 됩니다.
상대 URL
<a href="/guestbook">방명록 바로가기</a>상대 URL을 사용하면 같은 도메인 내의 다른 페이지로 이동할 수 있습니다.
앵커
앵커를 사용하면 같은 페이지 내에서 특정 위치로 이동할 수 있습니다. 이때 앵커는 대상 요소의 id 속성 값으로 지정합니다. 이 페이지에도 목차 메뉴에 이러한 기능이 포함되어 있습니다.
<a href="#title-1">HTML 링크에서 사용할 수 있는 속성</a>
<h2 id="title-1">HTML 링크에서 사용할 수 있는 속성</h2>
<p>HTML 링크에서 사용할 수 있는 속성에는...</p>위 코드는 "HTML 링크에서 사용할 수 있는 속성"이라는 링크를 생성하고, 클릭하면 같은 페이지 내에서 href 속성에 지정된 ID값이 "title-1"인 위치로 이동하게 됩니다.
target
target 속성은 HTML <a> (anchor) 태그에서 링크를 클릭할 때 새 창이나 현재 창에서 링크를 열지를 지정하는 속성입니다. target 속성의 값으로는 _blank, _self, _parent, _top 등이 올 수 있습니다.
- _blank: 링크를 클릭하면 새 창에서 링크를 엽니다.
- _self: 링크를 클릭하면 현재 창에서 링크를 엽니다. 이 값은 기본값입니다.
- _parent: 링크를 클릭하면 현재 창의 부모 창에서 링크를 엽니다.
- _top: 링크를 클릭하면 모든 프레임을 제거하고 브라우저의 전체 창에서 링크를 엽니다.
예를 들어, 새 창에서 링크를 열 경우 아래와 같이 작성할 수 있습니다.
<a href="https://meta-board.net/" target="_blank">새 창에서 메타보드 열기</a>위 코드의 결과물은 아래와 같습니다.
download
download 속성은 파일 다운로드 링크를 만들 때 사용하는 속성입니다. download 속성을 사용하면 링크를 클릭할 때, 브라우저가 해당 파일을 다운로드하게 됩니다.
download 속성의 값으로는 다운로드 받을 파일의 이름을 지정할 수 있습니다. 이 때, 파일 이름은 확장자를 포함한 전체 파일 이름이어야 합니다. 만약 파일 이름에 공백이 들어가야 하는 경우, %20을 사용하여 공백을 표시해야 합니다.
예를 들어, 다음과 같은 코드를 작성하면, example.pdf 파일을 다운로드 받을 수 있는 링크가 생성됩니다.
<a href="https://www.example.com/example.pdf" download="example.pdf">파일 다운로드</a>rel
rel 속성은 HTML 문서에 링크된 문서와 현재 문서와의 관계를 지정하는 속성입니다. rel은 relationship(관계)의 약자입니다.
rel 속성의 값으로는 링크된 문서와 현재 문서와의 관계를 나타내는 키워드가 사용됩니다. 이 키워드는 주로 문서 간의 관계, 문서의 유형, 문서의 소유자 등을 나타내기 위해 사용됩니다.
- nofollow: 링크를 클릭해도 검색 엔진이 해당 링크를 따라가지 않도록 합니다. 스팸성 링크나 광고성 링크 등에 사용됩니다.
- noreferrer: 링크를 클릭해도 HTTP 리퍼러 헤더를 전송하지 않도록 합니다. 즉, 현재 문서의 URL이 링크된 문서의 서버에 전송되지 않도록 합니다.
- noopener: 링크를 클릭해도 새 창이나 탭에서 열린 문서에서 window.opener 속성을 사용하지 못하도록 합니다. 이를 통해 보안 상의 취약점을 방지할 수 있습니다.
- noreferrer noopener: 위의 noreferrer와 noopener 속성을 모두 적용합니다.
- alternate: 링크된 문서가 현재 문서와 대체 문서 관계에 있다는 것을 명시합니다. 예를 들어, 다국어 웹 페이지에서 한 페이지의 대체 언어 버전을 링크할 때 사용됩니다.
- author: 링크된 문서의 저자가 현재 문서의 저자와 같다는 것을 명시합니다.
- bookmark: 링크가 책갈피 역할을 한다는 것을 명시합니다.
- external: 링크된 문서가 현재 문서와 외부 문서 관계에 있다는 것을 명시합니다.
- help: 링크가 도움말 역할을 한다는 것을 명시합니다.
- license: 링크된 문서의 라이선스 정보를 명시합니다.
- next: 링크된 문서가 현재 문서의 다음 페이지라는 것을 명시합니다.
- noopolicy: 링크를 클릭해도 Content Security Policy(CSP)의 policy 적용 범위를 따르지 않도록 합니다.
- prev: 링크된 문서가 현재 문서의 이전 페이지라는 것을 명시합니다.
- search: 링크가 검색 페이지로 이동한다는 것을 명시합니다.
- tag: 링크가 태그 페이지로 이동한다는 것을 명시합니다.
또한, rel 속성은 다른 문서와의 관계를 나타내는 값으로도 사용됩니다. 예를 들어, 현재 문서와 링크된 문서가 다른 언어로 작성되었을 경우 hreflang 값을 사용하여 언어를 지정할 수 있습니다.
<a href="https://www.example.com" rel="alternate" hreflang="en">영어 홈페이지</a>
<a href="https://www.example.com/ko" rel="alternate" hreflang="ko">한국어 홈페이지</a><a> 태그란?
HTML에서 링크를 생성하기 위해 사용하는 태그는 <a> 태그입니다. <a> 태그는 "anchor"의 약자로, 텍스트나 이미지 등을 클릭하면 다른 웹 페이지나 같은 페이지 내의 특정 위치로 이동하도록 링크를 생성합니다.
<a> 태그에서 사용할 수 있는 속성
href
href 속성은 HTML <a> (anchor) 태그에서 가장 중요한 속성 중 하나입니다. href는 Hyper Reference(하이퍼 링크)를 지정하며, 링크를 클릭할 때 이동할 URL을 지정합니다. 이 속성을 사용하여 다른 웹 페이지, 문서, 파일 등을 연결할 수 있습니다.
href 속성의 값으로는 절대 URL, 상대 URL, 앵커(URL 내에서의 특정 위치) 등이 올 수 있습니다.
절대 URL
<a href="https://meta-board.net/">메타보드 사이트로 이동하기</a>절대 URL을 사용하면 인터넷상의 다른 웹 페이지로 이동할 수 있습니다. 위 코드는 "메타보드 사이트로 이동하기"라는 링크를 생성하고, 클릭하면 href 속성에 지정된 주소 "https://meta-board.net/"로 이동하게 됩니다.
상대 URL
<a href="/guestbook">방명록 바로가기</a>상대 URL을 사용하면 같은 도메인 내의 다른 페이지로 이동할 수 있습니다.
앵커
앵커를 사용하면 같은 페이지 내에서 특정 위치로 이동할 수 있습니다. 이때 앵커는 대상 요소의 id 속성 값으로 지정합니다. 이 페이지에도 목차 메뉴에 이러한 기능이 포함되어 있습니다.
<a href="#title-1">HTML 링크에서 사용할 수 있는 속성</a>
<h2 id="title-1">HTML 링크에서 사용할 수 있는 속성</h2>
<p>HTML 링크에서 사용할 수 있는 속성에는...</p>위 코드는 "HTML 링크에서 사용할 수 있는 속성"이라는 링크를 생성하고, 클릭하면 같은 페이지 내에서 href 속성에 지정된 ID값이 "title-1"인 위치로 이동하게 됩니다.
target
target 속성은 HTML <a> (anchor) 태그에서 링크를 클릭할 때 새 창이나 현재 창에서 링크를 열지를 지정하는 속성입니다. target 속성의 값으로는 _blank, _self, _parent, _top 등이 올 수 있습니다.
- _blank: 링크를 클릭하면 새 창에서 링크를 엽니다.
- _self: 링크를 클릭하면 현재 창에서 링크를 엽니다. 이 값은 기본값입니다.
- _parent: 링크를 클릭하면 현재 창의 부모 창에서 링크를 엽니다.
- _top: 링크를 클릭하면 모든 프레임을 제거하고 브라우저의 전체 창에서 링크를 엽니다.
예를 들어, 새 창에서 링크를 열 경우 아래와 같이 작성할 수 있습니다.
<a href="https://meta-board.net/" target="_blank">새 창에서 메타보드 열기</a>위 코드의 결과물은 아래와 같습니다.
download
download 속성은 파일 다운로드 링크를 만들 때 사용하는 속성입니다. download 속성을 사용하면 링크를 클릭할 때, 브라우저가 해당 파일을 다운로드하게 됩니다.
download 속성의 값으로는 다운로드 받을 파일의 이름을 지정할 수 있습니다. 이 때, 파일 이름은 확장자를 포함한 전체 파일 이름이어야 합니다. 만약 파일 이름에 공백이 들어가야 하는 경우, %20을 사용하여 공백을 표시해야 합니다.
예를 들어, 다음과 같은 코드를 작성하면, example.pdf 파일을 다운로드 받을 수 있는 링크가 생성됩니다.
<a href="https://www.example.com/example.pdf" download="example.pdf">파일 다운로드</a>rel
rel 속성은 HTML 문서에 링크된 문서와 현재 문서와의 관계를 지정하는 속성입니다. rel은 relationship(관계)의 약자입니다.
rel 속성의 값으로는 링크된 문서와 현재 문서와의 관계를 나타내는 키워드가 사용됩니다. 이 키워드는 주로 문서 간의 관계, 문서의 유형, 문서의 소유자 등을 나타내기 위해 사용됩니다.
- nofollow: 링크를 클릭해도 검색 엔진이 해당 링크를 따라가지 않도록 합니다. 스팸성 링크나 광고성 링크 등에 사용됩니다.
- noreferrer: 링크를 클릭해도 HTTP 리퍼러 헤더를 전송하지 않도록 합니다. 즉, 현재 문서의 URL이 링크된 문서의 서버에 전송되지 않도록 합니다.
- noopener: 링크를 클릭해도 새 창이나 탭에서 열린 문서에서 window.opener 속성을 사용하지 못하도록 합니다. 이를 통해 보안 상의 취약점을 방지할 수 있습니다.
- noreferrer noopener: 위의 noreferrer와 noopener 속성을 모두 적용합니다.
- alternate: 링크된 문서가 현재 문서와 대체 문서 관계에 있다는 것을 명시합니다. 예를 들어, 다국어 웹 페이지에서 한 페이지의 대체 언어 버전을 링크할 때 사용됩니다.
- author: 링크된 문서의 저자가 현재 문서의 저자와 같다는 것을 명시합니다.
- bookmark: 링크가 책갈피 역할을 한다는 것을 명시합니다.
- external: 링크된 문서가 현재 문서와 외부 문서 관계에 있다는 것을 명시합니다.
- help: 링크가 도움말 역할을 한다는 것을 명시합니다.
- license: 링크된 문서의 라이선스 정보를 명시합니다.
- next: 링크된 문서가 현재 문서의 다음 페이지라는 것을 명시합니다.
- noopolicy: 링크를 클릭해도 Content Security Policy(CSP)의 policy 적용 범위를 따르지 않도록 합니다.
- prev: 링크된 문서가 현재 문서의 이전 페이지라는 것을 명시합니다.
- search: 링크가 검색 페이지로 이동한다는 것을 명시합니다.
- tag: 링크가 태그 페이지로 이동한다는 것을 명시합니다.
또한, rel 속성은 다른 문서와의 관계를 나타내는 값으로도 사용됩니다. 예를 들어, 현재 문서와 링크된 문서가 다른 언어로 작성되었을 경우 hreflang 값을 사용하여 언어를 지정할 수 있습니다.
<a href="https://www.example.com" rel="alternate" hreflang="en">영어 홈페이지</a>
<a href="https://www.example.com/ko" rel="alternate" hreflang="ko">한국어 홈페이지</a>