[HTML/CSS] 하이퍼링크 생성하기

 

웹 사용이 더욱 편리해지는 '링크'

 

하이퍼링크 생성하기

클릭으로 연결된 곳에 즉시 이동하여 웹 사용을 더욱 편리하게 해준는 기능

 

---

 

링크 태그

a 태그

- 링크 생성

해당 페이지에서 다른 페이지로 이동 시 사용

<a href=“웹주소” 속성=“속성값”> 텍스트 or <img src”이미지 파일 경로”></a>

 

- 앵커 생성

a태그와 id 속성을 이용하여 한 페이지 내에서 링크 만들 수 있음, 내부 링크를 통해 그 곳으로 이동

<a href="#intro">내용</a>

<태그 id="intro"></태그>

 

- 다운로드 링크 생성

다운로드할 수 있는 링크를 생성.

#을 사용하면 해당 파일의 페이지(#page=페이지 번호)나 북마크(#bookmark)를 이용해 열 수 있음

<a href=“파일 경로” download> 텍스트 </a>

TIP!
서버에 올렸을 때 브라우저에 따라 오류가 있는 경우가 있습니다.
해서 복잡한 것 말고 간단한 다운로드의 경우 이용합니다.
오류
- 다운로드 받은 파일이 깨져있을 수 있습니다
- 브라우저에 따라 바로 다운로드되거나 뷰어로 열립니다
- 브라우저에 따라 download 속성을 사용하지 않아도 다운로드 됩니다

---

a 관련 속성

a 기본값 reset 속성

속성	효과	기본값	reset
text-decoration	링크 영역 밑줄	underline	none
color	글자 컬러	blue	black

 

a 관련 속성

속성	효과	속성값	효과
href	링크한 문서나 사이트의 주소 입력	웹 주소	페이지 이동
		tel:	전화번호 연결
		mailto:	이메일 연결
		sms:	문자 연결
target	링크된 내용이 표시될 위치를 지정	_self	기본값 링크가 있는 화면에서 열림
		_blank	새 창에서 열림
		_parent	부모창에서 페이지를 열림 (없으면 현재창)
		_top	가장 상위 창에 열림 (없으면 현재창)
		프레임(frame) 이름	지정 창에서 열림
title	요소에 대한 부가적인 정보를 나타냄 마우스를 올려 놓았을 때, 도움말 설명을 보여줌
download	다운로드
rel	현재 문서와 링크한 문서의 관계 표시
hreflang	링크한 문서의 언어 표시
type	문서의 파일 유형을 알려줌

*title 속성 주의점
- 대체 텍스트(alt 속성)나 숨김 텍스트를 우선으로 사용하는 것이 좋음
- title 속성과 alt 속성의 값이 동일항 경우 과도한 정보제공이 될 수 있으므로 주의
- iframe 요소에 제목을 제공해야 할 때는 title 속성을 사용하여 정보를 제공
- label 요소를 넣기 어려운 상황에는 title 속성을 제공하는 것이 웹접근성 측면에서 바람직함.

 

---

 

관련 포스트

CSS 선택자 (Selector)

[CSS] CSS 선택자 (Selector)

---

 

참조 자료

http://blog.hivelab.co.kr/title

https://helpx.adobe.com/kr/acrobat/kb/link-html-pdf-page-acrobat.html