[HTML 태그들] #3 링크 걸기 a태그/download/target

우리는 웹사이트를 이용할 때 다른 페이지로 넘어가기 위해서 글자나 이미지를 클릭을 합니다.

이 때 사용하는 태그가 바로 a 태그 입니다.

웹사이트를 구성하는 가장 중요한 태그를 a태그라 해도 과언이 아닐 것입니다.

오늘은 우리 주변에서 가장 밀접한 태그, a에 대해 알아보겠습니다.

 

1. 다른 페이지로 이동

다른 페이지로 이동할 때는 href 속성을 이용합니다.

 

<a href="이동할 페이지">컨텐츠</a>

 

href 뒤에 = 을 쓴 다음 ""를 붙이는 것을 잊지 마세요. 

 

<a href="https://www.google.com/">구글로 이동</a>

구글로 이동

 

**방문하지 않았던 링크는 밑줄과 파란색**

**방문했던 링크는 밑줄과 자주색**

 

 

2. 링크 클릭 시 파일 다운로드하기

링크를 클릭했을 때 특정 경로의 파일을 다운로드하고 싶다면 href="" 뒤에 download 를 덧붙이면 됩니다.

 

<href a="/path/test.png" download>이미지 다운로드</a>

 

// 현재 이 download 속성은 동일한 사이트의 이미지만 다운로드가 가능합니다. 따라서 a태그 download 속성을 이용하여 자신의 사이트에서 다른 사이트의 파일을 다운로드할 수 없습니다. 이 속성을 지원하지 않는 브라우저도 있으니 주의하시기 바랍니다. 

 

 

download 속성 뒤에 ="이름" 을 붙여 다운로드 한 파일의 새로운 이름을 지정할 수 있습니다.

 

<href a="/path/test.png" download="hello">이미지 다운로드</a>

 

위와 같은 경우 원래 test.png 였던 파일이 hello.png로 다운받아질 겁니다.

 

3. target속성

 

target속성은 하이퍼링크를 클릭했을 때 어떤 방식으로 페이지를 보여줄지를 정한다고 보시면 됩니다.

target속성의 blank, self, parent에 대해서 알아보겠습니다.

 

_blank	새로운 창에서 새 페이지를 엽니다.
_self	현재 위치한 창에서 새 페이지를 엽니다.
_parent	부모 페이지에서 새 페이지를 엽니다.

 

<a href="www.google.com" target="_blank"> 새 창으로 구글 열기</a>

새 창으로 구글 열기