링크(link) 만드는 방법 - a, href
링크 만들 때 사용하는 태그
링크(link)는 <a> 태그로 만듭니다.
링크의 대상은 웹페이지, 파일, 이메일 등이 될 수 있습니다.
주요 속성
<a> 태그 안에서 사용할 수 있는 주요 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| href | 링크한 문서나 사이트의 주소를 입력합니다. |
| target | 링크한 내용이 표시될 위치(현재 창 또는 새 창)를 지정합니다. |
| download | 링크한 내용을 보여 주는 것이 아니라 다운로드 합니다. |
| rel | 현재 문서와 링크한 문서의 관계를 알려줍니다. |
| hreflang | 링크한 문서의 언어를 지정합니다. |
| type | 링크한 문서의 파일 유형을 알려줍니다. |
href
href 속성의 값에는 문서, 이미지, 동영상, 파일 등의 주소를 넣습니다.
<a href="value">Label</a>
다음과 같이 href 속성 안에 값이 없으면 현재 페이지로 이동하는 링크가
만들어집니다.
<a href="">Label</a>
target
target 속성은 링크를 어디에서 열지 정합니다.
속성값은 다음과 같습니다.
- _blank : 새 창 또는 새 탭에서 링크를 처리합니다.
- _self : 기본값으로 현재 페이지에서 링크를 처리합니다.
_parent : 프레임을 사용했을 때 링크 내용을 부모 프레임에 표시합니다.
_top : 프레임을 사용했을 때 프레임에서 벗어나 링크 내용을 전체 화면에
표시합니다.
예제
- 첫번째 이미지는 클릭하면 현재 창에서 이미지를 표시합니다.
- 두번째 이미지는 클릭하면 새 창에서 이미지 표시합니다.
data-editable="true"
data-preview="true"
data-height="540"
data-theme-id="light"
data-default-tab="html,result"
data-user="LiveBlogger"
data-slug-hash="LYRQjbZ"
style="height: 540px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
data-pen-title="HTML 이미지 삽입하는 태그 tag img 예제3"
>
HTML 이미지 삽입하는 태그 tag img 예제3 >
by LiveBlogger (@LiveBlogger)
on CodePen. >
링크한 페이지를 현재 페이지에서 열거나 새 탭으로 여는 것 이외에도 다른 방법이
있습니다. 예를 들어 현재 페이지 안에 캥거루 처럼 다른 페이지를 넣을 수
있습니다. 이때 사용하는 것이 아이프레임(iframe)입니다. 아이프레임은 프레임의
일종으로 프레임 중에서 본문에 액자처럼 삽입하는 것을 말합니다.
download
download를 추가하면, 링크 대상을 다운로드합니다.
예를 들어
<a href="image.jpg">Go</a>는 image.jpg 파일을 웹브라우저에서 보여주지만
<a href="images/image.jpg" download>Go</a>는 image.jpg 파일을 다운로드합니다.
문서 내 특정 위치로의 링크
href 속성의 값 앞에 # 을 붙이면, 해당 id 를 가진 요소로
이동합니다.
예를 들어
<a href="#result">Go to result.</a>는 id 속성의 값으로 result를 갖는 요소로 이동합니다.
이메일주소로의 하이퍼링크
이메일 주소로의 하이퍼링크는 다음과 같이 만듭니다.
Contact <a href="mailto:liveblogger@gmail.com">Admin</a>
링크를 클릭하면 메일 프로그램이 실행됩니다.
하지만, 스팸메일 등의 이유로 잘 사용하지는 않습니다.
기타 HTML 참조
>제목 >
>문단 >
>줄바꿈 >
>공백 >
>목록 >
>이미지 >
>동영상 >
>오디오 >
- 링크
>표 >
>양식 >
>인용구 >
>기초 >