링크를 만드는 태그
<a> 태그 (MDN)
:: 다른 문서 혹은 문서 내의 다른 부분 혹은 그 외의 주소(URL)로 이동하는 연결점을 만드는 태그.
:: <a href="주소">텍스트</a> 혹은 <a href="주소"><img src="이미지 경로"></a> 의 두가지 형태로 사용된다.
:: 방문 주소를 나타내는 href 속성은 필수로 있어야 한다.
:: 링크가 걸린 텍스트는 밑줄이 쳐진 색있는 텍스트로 표현된다.
:: 링크를 방문하기 전에는 파란색, 클릭 중이면 빨간색, 방문 후에는 빨간색으로 표시된다.
<a>태그와 관련된 주요 속성
:::: href 속성
-- 이동할 주소(URL)를 나타내는 속성.
-- 값으로는 HTTP 기반 URL이 가장 많이 사용되지만, 브라우저가 지원하는 모든 URL 스킴을 사용할 수 있다.
---- URL 스킴이란 FTP, mailto, rtsp 등 URL의 맨 앞에서 URL의 종류를 나타내는 단어이다.
:::: hreflang 속성
-- 이동할 페이지가 어떤 언어를 사용하는지에 대한 힌트를 제공하는 속성
-- 전역 속성인 lang에 사용가능한 값들을 사용할 수 있다.
-- 특별한 내장 기능은 없다.
:::: target 속성
-- 링크한 페이지를 표시할 위치를 나타내는 속성.
-- 특정 키워드 혹은 <iframe>태그의 name 속성 값을 사용한다.
---- '_self' : 기본값, 현재 브라우저에 표시한다.
---- '_blank' : 새로운 브라우저 맥락에 표시한다. 보통 새 탭이지만 사용자 브라우저 설정에 따라 달라질 수 있다.
---- '_parent' : URL을 현재 브라우징 맥락의 부모에 표시한다. 부모 브라우저가 없으면 self와 동일하게 행동한다.
---- '_top' : URL을 최상단 브라우징 맥락에 표시한다. 부모 브라우저가 없으면 self와 동일하게 행동한다.
:::: rel
-- 현재 문서와 링크될 문서의 관계를 나타내는 속성.
-- 여러개의 값을 가질 수 있으며 띄어쓰기로 구분한다.
---- 'alternate' : 링크된 문서가 해당 문서의 대체 버전임을 나타냄. (영문 페이지 등)
---- 'author' : 링크된 문서가 해당 문서의 저자에 대한 정보 페이지임을 나타냄.
---- 'help' : 링크된 문서가 해당 문서에 대한 도움말 페이지임을 나타냄.
---- 'license' : 링크된 문서가 해당 문서의 저작권 정보 페이지임을 나타냄.
---- 'bookmark' : 링크된 주소가 해당 문서의 즐겨찾기용 고유 주소임을 나타냄.
---- 'search' : 링크된 문서가 해당 문서를 위한 검색 도구임을 나타냄.
---- 'tag' : 링크된 문서가 해당 문서를 위한 키워드임을 나타냄.
---- 'external' : 링크된 문서가 해당 문서와 같은 사이트 내에 있지 않음을 나타냄.
---- 'next' : 링크된 문서가 해당 문서와 연관된 문서들의 모음 중 다음 문서임을 나타냄.
---- 'prev' : 링크된 문서가 해당 문서와 연관된 문서들의 모음 중 이전 문서임을 나타냄.
---- 'nofollow' : 검색엔진이나 봇등이 추적해서는 안됨을 나타냄.
---- 'noreferrer' : 사용자가 링크를 클릭할 때 브라우저가 HTTP 리퍼러 헤더를 전송해서는 안됨을 나타냄.
---- 'noopener' : 링크를 따라 연결되는 어떠한 브라우징 컨텍스트도 오프너여서는 안됨을 나타냄.
:::: download
-- 링크로 이동하는 대신 링크의 리소스를 다운로드할지 물어본다.
-- 지정한 속성 값은 파일명으로 추천된다.
-- 값을 지정하지 않으면 브라우저가 자동으로 추천한다.
-- 동일 출처 URL이나 blob:: 혹은 data:: 스킴에서만 작동한다.
<a> 태그와 관련된 예제
See the Pen a tag sample by lypi (@Lypi) on CodePen.
썸네일용