HTML 쉽게 배우기 | 링크 <a>

안녕하세요.

오늘은 링크에 대해서 알아볼게요.

 

링크란 단어가 생소하신 분들을 위해서 간단하게 설명하자면, 웹사이트에서 클릭했을 때 다른 페이지로 간다거나, 파일이 다운로드됀다거나 할 때 있죠?

이런 걸 링크라고 부릅니다.

 

링크 태그는 <a> 와 </a>로 만들 수 있습니다.

열림 태그와 닫힘 태그 사이에 링크에 대한 글을 작성하면 됩니다.

(p 태그 사용 안 합니다)

 

이 링크 태그에는 하나의 필수 속성이 있고, 몇 가지의 추가할 수 있는 속성들이 있습니다.

필수 속성과 두 가지의 추가 속성을 살펴볼게요.

(네, 이 3개 이외의 다른 건 사용해본 적이 없습니다 😓)

 

 

필수 속성: href

href 는 링크의 목적지 주소를 제공하는 속성입니다.

예를 들어서

<a href="https://www.google.com">Google</a>

이렇게 링크를 만들면 클릭했을 때 구글로 이동합니다.

 

여기서 href 에 주소가 https:// 으로 시작하죠?

간단하게 http 와 https 가 있습니다.

이게 뭐냐면, HTML 같은 하이퍼미디어 문서 전송 방식입니다.

쉽게 말해서 웹사이트와 그 사이트의 내용/데이터가 사용자한테 전송되는 방식입니다.

 

HTTP: HyperText Transfer Protocol (하이퍼텍스트 트랜스퍼 프로토콜)
HTTPS: HyerText Transfer Procotol Secure (하이퍼텍스트 트랜스퍼 프로토콜 시큐어)

예전에는 http 가 보편적으로 많이 사용됐는데, 많은 전문가들이 이 방식이 보안에 취약하다는 걸 알고 더 안전한 방식인 https 를 만들었습니다.

웹사이트 주소 왼쪽에 자물쇠가 잠겨있으면 그 사이트는 https 를 사용하는 사이트입니다.

웹사이트 주소 왼쪽에 자물쇠 아이콘

 

링크가 다른 사이트로 가는 경우 http 또는 https 가 포함된 웹사이트의 전체 주소를 사용합니다.

예: <a href="https://www.google.ca">구글</a>

 

 

링크가 내 웹사이트의 다른 페이지로 가는 경우, 이미지에서 처럼, 그 페이지까지의 경로를 사용합니다.

예: <a href="./about.html">About</a>

 

 

이미지를 링크하면 클릭했을 때 그 이미지가 브라우저에서 열립니다.

다른 페이지로 가는 링크를 만들 때처럼 이미지까지의 경로를 href 에 넣으면 됩니다.

예:<a href="./img1.jpg>이미지</a>

 

 

추가 속성: target

target 은 주로 링크가 다른 페이지 또는 다른 사이트로 갈 때 사용합니다.

이 속성을 사용 안 하면 링크에는 targtet="_self" 가 적용됩니다.

 

target="_self" 는 지금 사용하고 있는 창에서 그 링크를 연다는 뜻입니다.

밑에 구글로 가기 링크를 클릭해보세요.

(그리고 다시 돌아와야 돼요... 안 그럼 나 심심해....😭😭)

구글로 가기 (<a href="https://www.google.ca" target="_self">구글로 가기</a>)

 

target="_blank" 는 링크를 새 탭에서 연다는 뜻입니다.

밑에 네이버로 가기 링크를 클릭해보세요.

네이버로 가기 (<a href="https://www.naver.com" target="_blank">네이버로 가기</a>)

 

 

 

추가 속성: download

download는 파일을 다운로드할 수 있습니다.

다른 페이지로 가는 링크를 만들 때처럼 그 파일까지의 경로를 href 에 넣어주면 됩니다.

예: <a href="./text.txt" download="true">파일 다운</a>

여기서 download="true" 를 쓰던, 그냥 download 만 쓰던 똑같이 파일을 다운로드합니다.

 

 

 

추가 속성: title

title 은 우리가 링크에 마우스를 올렸을 때 뜨는 작은 말풍선입니다.

이 속성은 스크린 리더가 사용합니다.

만약 링크의 글이 정확하지 않을 때, 또는 링크에 글이 아닌 이미지를 사용해야 할 때 title 을 사용해서 링크의 정확한 목적을 사용자한테 알려줄 수 있습니다.

예: <a title="!@# 실행파일 다운로드" href="./some/folder/!@#.exe">!@#.exe</a>

 

 

 

 

이미지 링크 만들기

아마존 같은 온라인 쇼핑몰 웹사이트를 보면 이미지에 링크가 걸려있죠.

방법은 링크 태그 안에 이미지 태그를 사용하면 됩니다.

 

<a title="view the image" href="./img1.jpg">

    <img src="./img1.jpg" alt="fall tree leaves on branches" width="120">

</a>

 

 

 

오늘도 수고하셨습니다.

 

 

끝!