[HTML] 링크 태그 - <a>와 href 속성

1. <a> 태그

<a> 태그는 anchor(닻)의 약어로, 하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 정의할 때 사용합니다. 따라서 <a> 태그에서 링크(link)의 목적지를 가리키는 href 속성이 반드시 필요합니다. href 속성이 없다면 다른 속성들도 사용할 수 없습니다. (target, download 등)

 

2. href 속성

href는 앞서 말한 것처럼 링크의 목적지이기 때문에 속성 값으로 경로가 들어갈 수 있습니다.

<a href="https://hyun0907.tistory.com/"> hyun0907's Blog 바로가기 </a>

+ 속성이란

태그에 대해 추가적인 정보를 제공할 때 사용하는 것입니다. 

<img src="~" alt="~">처럼 img 태그에 src, alt 2개의 속성을 가진 것을 볼 수 있습니다. 보통 속성="속성 값"으로 표기합니다. 하나의 태그 안에 속성이 여러 개일 경우 각 속성은 공백 한 칸으로 구분합니다.

 

3. 내부 링크 거는 법

html 문서의 특정 위치로 이동하는 법입니다. 목차를 클릭해 해당 영역으로 바로 이동해야 할 때 사용합니다.

예제에서는 id 선택자를 사용하여 바로 확인해보겠습니다.

+ 선택자란

CSS에서는 스타일을 적용할 대상을 선택하기 위해 선택자(selector)를 사용합니다.

 

선택자에는 전체 선택자, HTML 요소 선택자, 아이디(id)선택자, 클래스(class)선택자, 그룹(group)선택자 등이 있습니다. 선택자에 대해 자세한 내용은 나중에 다른 글로 다루도록 하겠습니다.

 

예제에서 사용할 id 선택자는 특정 요소를 선택할 때 사용합니다. 웹 페이지에 포함된 여러 요소 중 특정 아이디 이름을 가지는 요소만 선택해줍니다. 한 페이지에 단 한 번의 정의로 고유한 하나의 태그만 사용할 수 있습니다. 동일한 것이 없기 때문에 고유 식별자라고 표현할 수 있습니다.

 

샵(#)을 이용해 정의하며 아이디 이름은 영문으로 시작해야 합니다.

예제

 

결과

 

각 텍스트 클릭 시 이동하는 화면

 

<style> 태그로 p태그 전체에 top 마진을 줬기 때문에, '첫번째', '두번째', '세번째'라는 단락이 스크롤을 내려야 보이는 상태입니다. 클릭 시, 해당 단어가 있는 위치로 연결됩니다.

 

4. 외부 링크 거는법

href 속성 값으로 URL이 들어갈 수 있습니다. URL은 Uniform Resource Locator의 약자로, 인터넷에서 HTML 페이지, CSS 문서, 이미지 등의 자원의 위치를 나타낼 때 사용합니다. URL은 절대 URL과 상대 URL로 구분할 수 있습니다.

 

절대 URL은 접근하는 최초 시작점부터 경유한 경로를 모두 기록해 자원의 위치를 나타냅니다.

상대 URL은 기준점을 기준으로 상대적인 경로를 기록하여 자원의 위치를 나타냅니다.

 

5. target 속성과 속성 값

<a> 태그 속성 중 target 속성이 있습니다. 이 속성은 링크를 오픈할 때 어디에서 오픈할지 정의하는 속성입니다. 링크된 페이지는 보통 브라우저의 현재 윈도우에 표시됩니다. 이를 target 속성으로 변경할 수 있습니다.

 

대표적인 속성 값으로는 _self, _blank가 있다.

• "_self"     현재 창에서 링크 오픈
• "_blank"     새 창(또는 새 탭)에서 링크 오픈
• "_parent"     부모 페이지(현재 페이지를 오픈한 페이지)에서 URL을 이동 / 부모가 존재하지 않으면 _self와 같음
• "_top"     URL을 최상단 브라우징 맥락(현재 맥락의 부모이며 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시 / 부모가 존재하지 않으면 _self와 같음

 

사용 예시

 

결과

 

 

6. 링크의 기본 스타일 값

링크는 모든 브라우저에서 다음과 같은 기본 스타일을 가집니다.

 

 

• 아직 방문하지 않은 링크(unvisited link)
  밑줄, 파란색
• 활성화된(현재 클릭하고 있는) 링크(active link)
  밑줄, 빨간색
• 방문했던 링크(visited link): 밑줄, 보라색
  밑줄, 보라색

7. 특정 연결

download
href에 지정된 파일을 다운로드해주는 기능

사용법: <a href="filepath" download>

 

예제

 

    <a href="img.jpg" download>이미지 다운로드</a>

    <a href="img.jpg" download="filename">이미지 다운로드</a>

 

download="filename"을 입력함으로 실제 파일과 다른 이름으로 다운로드 제공도 가능합니다.

이 경우 img.jpg가 아닌 filename.jpg로 다운로드됩니다.

 

mailto
이메일 주소

<a href="mailto:abc123@naver.com">클릭시 이메일</a>

 

tel
전화번호

<a href="tel:010-1111-2222">클릭시 전화</a>

 

sms
문자 메시지

<a href="sms:010-1111-2222">클릭시 문자</a>