a 요소는 단순히 링크 용도의 목적뿐만 아니라 다양한 속성과 활용법을 내포하고 있습니다. 아래에서 이를 살펴봅니다.
A 요소
a 요소는 앵커(Anchor, 닻)를 표시한다. 서로 다른 두 지점을 연결하려면 두 지점에 대한 정보와 연결방향이 필요하다. 두 지점에 대한 정보를 앵커라고 부른다.
링크된 텍스트는 단순히 읽기를 위한 텍스트가 아니므로 본문 글자와는 다른 형태를 보일 필요가 생겼고 이때문에 a 요소가 적용된 글자는 파란색으로 바뀌고 밑줄이 생긴다.
앵커의 종류
- 소스(source) 앵커 : 다른 곳에 있는 문서를 참조하기 위해 href 속성을 사용한다.
- 목적지(destination) 앵커 : 같은 문서 내에 있는 다른 지점으로 연결할 때는 name이나 id 속성을 사용하여 이동하고자 하는 지점을 표시한다.
download 속성
HTML5에 추가된 속성으로서, 참조하는 리소스로 이동하는 대신 다운로드하도록 할때 사용한다.
<a href="/images/myw3schoolsimage.jpg" download="w3logo">
위 속성은 href 속성이 있을때만 사용한다.
href 속성
href 속성은 문서를 참조하기 위한 속성이다.
- a 요소가 하이퍼링크 기능을 수행하기 위해서는 반드시 href 속성이 필요하다.
- 문서, 특정 지점, 이미지, 동영상, PDF 파일 등 다른 형식의 파일등을 참조할 수 있다.
- href 속성값은 절대 경로, 상대 경로, 앵커 URL(
href="#top") 중에 하나의 값을 가지며 링크주소(URL)가 된다.
rel 속성
rel 속성은 링크된 문서와의 관계(relationship)를 지정한다.
- 개발자나 브라우저, 검색엔진에게 링크 관계에 대한 정보를 알려주면, 이 정보를 활용한 브라우저나 검색엔진은 사용자 요청에 대해 더 정확하게 대응할 수 있다.
- rel의 속성값을 한 가지 속성값만으로 링크의 종류와 성격을 단정 짓기 어려울땐 띄어쓰기로 여러개의 속성값을 지정할 수 있다.
- rel은 href 속성을 위한 추가 정보이므로 href 속성이 있을 때만 지정되어야 한다.
rel="alternate"
현재 문서를 대체(alternate)하기 위한 문서 링크를 지정하기 위한 속성이다. link, a, area 요소에서 사용할 수 있다. 인쇄용 문서, 번역 문서처럼 현재 문서와 내용은 같지만 형식이 다른 문서라는 사실을 알 수 있게 해준다.
<a rel="alternate" href="http://www.example.com/web_standards_print.html/">인쇄</a>
rel="author"
현재 문서의 저작자에 관한 문서 링크를 지정하기 위한 속성이다. link, a, area 요소에서 사용할 수 있다. 작성자, 연락처 등 문서의 운영과 관리에 대한 구체적인 정보를 별도의 문서에서 제공할 때 author 속성값을 사용한다.
<a rel="author" href="http://www.example.com/profile.html/">저자 소개</a>
rel="bookmark"
고유주소(permalink)를 가진 문서 링크를 지정하기 위한 속성이다. a, area 요소에서 사용할 수 있다. 중요한 문서는 그 주소가 바뀌지 말아야만 즐겨찾기(bookmark)로 등록한 사용자가 나중에 다시 찾아올 수 있다. 현재 문서 주소가 변경될 가능성이 있다면 사용자를 고유주소로 이동시킨 다음 그곳에서 즐겨찾기 등록이 이루어지도록 해야 하는데, 이럴 때 bookmark 속성값을 사용한다.
<a rel="bookmark" href="http://www.example.com/web_standards.html/">이 문서의 원본으로 가기</a>
rel="external"
외부(external)에 있는 문서 링크를 지정하기 위한 속성이다. a, area 요소에서 사용할 수 있다. 이 속성값은 링크된 문서가 다른 웹 사이트 일부라는 사실을 알려준다.
<a rel="external" href="http://www.w3c.org/html5.html/">HTML5</a>
rel="help"
도움말(help)이 있는 문서 링크를 지정하기 위한 속성이다. link, a, area 요소에서 사용할 수 있다. 간혹 전문 용어나 사용 방법을 안내하기 위해 도움말을 링크시키는 때가 있다. 예를 들어 어떤 사용자가 공인인증서라는 링크를 맞닥뜨렸을 때 맥락적으로 이 링크가 도움말과 연결되어 있다는 사실을 알 수 있더라도 스크린리더 사용자들은 이것을 알아채기 힘들다. 이 링크가 도움말과 연결되어 있는지 공인인증서 내려받기 문서와 연결되어 있는지 알수 없기 때문이다. 이럴때 rel 속성을 사용하여 도움말 여부에 대한 힌트를 제공해 주는 것이 바람직하다.
<a rel="help" href="http://www.example.com/public_certi.html/">공인인증서</a>
rel="license"
현재 문서의 저작권정보(license, copyright)가 있는 문서 링크를 지정하기 위한 속성이다. link, a, area 요소에서 사용할 수 있다. 문서 전체에 대한 권리를 표시하기 위해 푸터 영역에서 저작권 정보를 제공하는데 문서 내에 있는 외부 콘텐츠의 출처를 표시할 때에는 저작권 정보를 별도로 제공할 필요가 있다.
<a rel="license" href="http://creativecommons.org/licenses.html/">CCL</a>
rel="nofollow"
검색엔진이 링크된 문서로 따라가지 않도록 문서 링크를 지정하는 속성이다. a, area 요소에서 사용할 수 있다. 검색엔진이 문서 내에 있는 모든 링크를 따라가지 않도록 하려면 nofollow를 헤더의 meta 요소에서 지정한다.
<meta name="robots" content="nofollow">
특정 링크마다 개별적으로 지정하려면 a나 area 요소에서 지정한다.
<a rel="nofollow" href="login.html/">로그인</a>
구글과 같은 검색엔진은 나름의 규칙에 따라 링크를 따라 다니면서 문서를 인덱싱(색인작업)을 하는데 불필요한 인덱싱을 줄이기 위해 신뢰성이 낮은 콘텐츠, 유려 링크, 우선순위가 낮은 문서(예. 로그인 문서)등은 인덱싱할 필요가 없으므로 이러한 문서나 링크는 nofollow로 지정하길 원하고 있다.
rel="noreferrer"
링크를 선택하더라도 레퍼러가 발생하지 않도록 문서 링크를 지정하는 속성이다. a, area 요소에서 사용할 수 있다. 사용자가 A 문서에 있는 링크를 통해 B 문서를 방문하게 되면 브라우저는 B 문서를 참조한 문서, 즉 A 문서의 URL 정보를 B 문서가 있는 웹 서버로 보낸다. 이때 A 문서의 URL 정보를 바로 레퍼러 또는 HTTP referrer라고 부른다.
<a rel="noreferrer" href="http://www.reference.com/" target="_blank">참고문서</a>
noreferrer 속성값을 지정하면 사용자가 a 또는 area 요소를 선택하더라도 브라우저는 레퍼러를 전송한다.
rel="sidebar"
링크된 문서를 사이드바 용도로 지정하는 속성이다. link, a, area 요소에서 사용할 수 있다. 사이드바는 문서 본문의 측면에 자리 잡고 있는 영역을 의미한다. 단순한 정보로 이루어진 문서는 본문 영역만으로 구성될 수 있지만 정보가 복잡해지면 본문 영역 이외에도 내비게이션 영역, 관련 콘텐츠 영역처럼 사이드바가 필요하다.
<a rel="sidebar" href="toc.html" title="Help">Create panel with table of contents for Opera help</a>
저작자는 rel="sidebar"를 통해 링크된 문서가 사이드바로 이용될 수 있다는 사실을 표시할 수 있다.
rel="tag"
현재 문서에 대한 태그를 지정하는 속성이다. link, a, area 요소에서 사용할 수 있다. 태그는 검색을 위한 키워드 또는 주제어로 볼 수 있다. 검색엔진은 링크된 텍스트를 단순히 링크된 텍스트가 아니라 현재 문서를 핵심적으로 설명하는 키워드로 인식하고, 이러한 텍스트 위주로 인덱싱을 하게 되면 작업 효율성을 크게 높일 수 있다.
<a rel="tag" href="http://www.example.com/allaboutdesign.html/">디자인</a>
링크된 텍스트에 rel="tag"를 지정하면, 이 텍스트는 현재 문서에 대한 태그가 된다.
rel="prev"
이전 문서를 지정한다. link, a, area 요소에서 사용할 수 있으며, 연속적인 정보 구조에서 현재 문서보다 이전에 있는 문서를 가리킨다. 속성값을 지정했을 때 어떤 효과가 있는지 아직 명확하게 밝혀진 바가 없지만 문서마다 이전 또는 다음에 대한 정보가 있다면 브라우저나 검색엔진이 문서의 순서나 구조를 전체적으로 파악하는데 도움을 줄 수 있을 것으로 본다.
<a rel="prev" href="page1.html">첫번째 문서</a>
rel="next"
다음 문서를 지정한다. link, a, area 요소에서 사용할 수 있으며, 연속적인 정보 구조에서 현재 문서보다 다음에 있는 문서를 가리킨다.
<a rel="next" href="page3.html">세번째 문서</a>
media 속성
media 속성은 대상 문서(target document)의 전달 매체(media, device)를 지정한다. 다양한 기기에 대응하기 위해 브라우저가 이해할 수 있도록 돕기 위해 media 속성이 필요하다. 지정할 수 있는 매체 종류는 아래와 같으며 여러가지 매체를 지정할 때에는 쉼표를 사용하여 지정한다.
media="all"
대상 문서가 모든 매체에 적합한 경우 속성값을 all로 지정한다. all은 기본값이므로 별도로 지정하지 않으면 브라우저는 대상 문서가 모든 매체에 적합한 문서라고 판단한다.
media="aural"
대상 문서가 음성 출력 기기에 적합한 경우 속성값을 aural로 지정한다.
media="braille"
대상 문서가 점자 출력기에 최적화되어 있는 경우 속성값을 braille로 지정한다.
media="handheld"
대상 문서가 소형기기에 최적화되어 있는 경우 속성값을 handheld로 지정한다. 대체로 소형기기는 해상도와 대역도가 낮다.
media="projection"
대상 문서가 영사기(projection, projector)에 최적화되어 있는 경우 속성값을 projection으로 지정한다.
media="print"
대상 문서가 인쇄물에 최적화되어 있는 경우 속성값을 print로 지정한다. 인쇄물은 웹 문서와 달리 스크롤의 개념이 적용되지 않는다. 많은 양의 정보를 담고 있는 문서가 인쇄물로 전환될 때에는 어쩔 수 없이 문서 나누기(pagination)방식으로 출력되어야 한다. 그리고 인쇄물은 용지가 정해져 있으므로 글자 크기가 포인트(pt), 피카(pica)등 고정 크기로 설정될 수 있다.
media="screen"
대상 문서가 컴퓨터 화면에 최적화되어 있는 경우, 속성값을 screen으로 지정한다.
media="tty"
대상 문서가 전보(teletype), 터미널(terminal)등과 같이 고정폭 문자를 사용하는 매체에 최적화되어 있는 경우 속성값을 tty로 지정한다(픽셀 단위를 사용할 수 없다).
media="tv"
대상 문서가 텔레비전에 최적화되어 있는 경우 속성값을 tv로 지정한다.
출력 방식이나 레이아웃등 매체 특성은 다음과 같은 방법으로 지정하는데 "device-"가 붙은 속성값은 특정 출력 매체를 지정할 때 사용한다. orientation, scan, grid를 제외한 나머지 속성값은 "min-(최소값)과 "max-"(최대값)를 이용하여 범위 또는 제한 조건을 미리 지정할 수 있다.
width
출력 영역의 가로 크기를 지정한다.
- 예1) media="print and (min-width:25cm)" - 인쇄 출력 영역이 최소 25cm 이상일 때
- 예2) media="screen and (min-width:400px) and (max-width:700px)" - 가로 화면이 400~700픽셀인 컴퓨터 화면일 때
- 예3) media="handheld and (min-width:20em), screen and (min-width:20em)" - 가로 화면이 최소 20em 이상인 소형기기와 컴퓨터 화면일 때
height
출력 영역의 높이를 지정한다.
device-width
출력 매체의 가로 화면 크기를 지정한다.
- 예) media="screen and (device-width:800px)" - 가로 화면이 800픽셀인 컴퓨터 화면일 때
device-height
출력 매체의 세로 화면 크기를 지정한다.
orientation
출력 매체의 화면 방향을 지정한다. 화면 방향은 수직(portrait)과 수평 방향(landscape)으로 구분된다.
- 예) media="all and (orientation:landscape)" - 화면 방향이 수평인 매체일 때
aspect-ratio
화면 비율을 지정한다. 가로와 세로 크기로 표현하는데 비율을 지정하는 것이 목적이므로 실제 수치를 입력하지 않고 비례값을 입력할 수도 있다.
- 예1) media="screen and (aspect-ratio:16/9)" - 화면 비율이 16/9(가로/세로)인 컴퓨터 화면일 때
- 예2) media="screen and (aspect-ratio: 1280:720)" - 화면 비율이 1280:720 픽셀(가로:세로)인 화면일 때
device-aspect-ratio
출력 매체의 화면 비율를 지정한다. 가로와 세로로 표현하는데 비율을 지정하는 것이 목적이므로 실제 수치를 입력하지 않고 비례 값을 입력할 수도 있다.
- 예1) media="screen and (device-aspect-ratio:16/9)" - 화면 비율이 16/9(가로/세로)인 컴퓨터 화면일 때
- 예2) media="screen and (device-aspect-ratio:1280:720)" - 화면 비율이 1280:720 픽셀(가로:세로)인 컴퓨터 화면일 때
color
출력 매체의 색 깊이를 지정한다. 비트 수가 많을수록 많은 색을 표현할 수 있다.
- 예1) media="all and (color)" 또는 media="all and (min-color:1)" - 모든 컬러 매체에 적용할 때
- 예2) media="all and (min-color:3)" - 색 깊이가 최소 3비트 이상인 매체일 때
color-index
출력 매체의 색 지수를 지정한다. 색 지수는 기기에서 사용할 수 있도록 색을 체계적으로 분류한 것을 말하는데 색 지수가 높을수록 색의 가지 수도 많아진다.
- 예) media="all and (min-color-index:256)" - 최소 256가지의 색을 지원하는 매체일 때
monochrome
흑백기기의 색 깊이를 지정한다.
- 예1) media="all and (monochrome)" 또는 media="all and (monochrome:1)" - 영상을 흑백으로 처리하는 매체일 때
- 예2) media="all and (min-monochrome:2)" - 색 깊이가 최소 2비트 이상인 매체일 때
resolution
출력 매체의 해상도를 지정한다. 해상도 단위는 dpi(dot per inch) 또는 dpcm(dot per centimeter)을 사용한다.
- 예) media="all and (min-resolution:300dpi) - 해상도가 최소 300dpi 이상인 매체일 때
scan
텔레비전의 주사방식을 지정한다.
- 예) media="all and (scan:progressive)" - 주사 방식이 순차적 주사 방식일 때
grid
그리드방식의 출력을 지정한다. 이 속성값은 출력기기가 그리드 방식의 기기인지 아니면 비트맵 방식의 기기인지 알려준다. 그리드 방식의 기기는 속성값을 1, 그렇지 않은 경우는 0으로 지정한다.
- 예) media="handheld and (grid:1)" - 그리드 방식의 소형기기일 때
target 속성
target 속성은 링크된 문서가 열리는 곳을 지정한다.
_blank
링크된 문서를 새 창으로 연다. 스크린리더 사용자를 배려해 title 속성을 이용하여 새 창이 열린다는 사실을 알리는 것이 원칙이다.
_self
현재 창(또는 프레임)에서 링크된 문서를 연다. 기본 값으로 설정되어 있다.
_parent
부모 창(또는 프레임세트)에서 링크된 문서를 연다. 부모 창이 있다는 것은 자식 창이 있다는 것을 의미하며, 프레임세트가 있다는 것은 다른 프레임세트나 프레임이 있다는 것을 의미한다. 이런 상황에서는 다양한 브라우징이 다양한 양상으로 전개될 수 있기 때문에 _parent나 _top과 같은 속성값이 필요하다. 우선 부모와 자식 창이 열려 있는 경우 자식 창에 있는 링크를 _parent 속성값으로 지정하면 링크된 문서는 부모 창에서 열리게 된다. 또한 프레임에 있는 링크를 _parent 속성값으로 지정하면 링크된 문서는 해당 프레임이 속해 있는 프레임세트에서 열리게 된다.
_top
전체 영역에서 링크된 문서를 연다. 이 속성값은 문서 내에 독립적인 영역이 있을 때 필요하다. 가령 div나 frame 요소 단위로 데이터를 호출하는 경우, 브라우징은 전체 영역이 아니라 부분 영역 단위로 진행된다. 이때 전체 영역 수준에서 브라우징이 진행되는 것을 상위 레벨 브라우징이라고 본다면 부분 영역 수준에서 브라우징이 진행되는 것을 하위 레벨 브라우징이라고 볼 수 있다. 브라우징이 하위 레벨에서 진행되다가 상위 레벨로 바꿔야 할 때가 있을 것이다. 가령 프레임 방식으로 제공되는 문서의 경우 대개 프레임 단위로 문서를 불러오지만 경우에 따라서는 전체 영역으로 불러와야 할 때도 있다. 이럴 때 _top 속성값을 사용한다.
accesskey 속성
accesskey 속성은 바로가기 키(access key)를 지정한다. 컴퓨터의 기본 입력 장치는 마우스가 아니라 키보드이다. 따라서 문서에 있는 모든 요소는 키보드로 제어할 수 있어야 한다.
< a href="http://www.google.com/" accesskey="g">Google</a>
- accensskey 속성이 적용된 요소는 포커스를 받거나 실행이 이루어진다. input 요소에 적용되면 포커스를 받게 되고, a 요소에 적용되면 해당 키를 눌러 곧바로 목적지로 이동한다.
- 속성값은 키보드에 있는 알파벳이나 숫자 중에서 원하는 문자를 선택하여 지정한다.
- 하나의 요소에 두 개 이상의 문자를 정의할때는 띄어쓰기로 구분한다.
- 윈도우의 IE는 Alt키, Mac OS X의 사파리는 Cmd 키를 함께 사용한다.
- 바로가기 키의 중복을 방지하기 위해 영국 정부의 바로가기 키 권고안을 참조한다.
| 웹브라우저 | 윈도우 | 매킨토시 |
|---|---|---|
| Internet Explorer | Alt | - |
| Firefox 2+ | Alt + Shift | Ctrl |
| Opera | Shift + Esc | |
| Safari 3+ | Alt | Ctrl |
| Chrome | Alt ( + Shift) | Ctrl + Opt |
지원 현황
| 인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
|---|---|---|---|---|
| 지원 | 지원 | 지원 | 지원 | 지원 |
ping 속성
HTML5에 새롭게 추가된 속성으로서, 사용자가 하이퍼링크를 클릭하면 ping 속성은 HTTP POST 요청을 지정된 URL로 보낸다. 이 속성은 모니터링/트랙킹에 유용하다. href 속성이 함께 사용되어야 한다.
<a href="http://www.w3schools.com/html" ping="https://www.w3schools.com/trackpings">
서버로 보내질 http 요청의 상세한 사양
- post 메소드 사용
- Content-type 헤더 값은 "text/ping"
- 요청보다는 'ping' 이라는 문자열
- Ping-Form 이라는 헤더에 현재 페이지의 주소가 포함됨
- Referer 헤더에 현재 페이지의 주소가 포함됨
- Ping-To 라는 헤더에 링크 주소가 포함됨
- ping 송신 대상 서버가 링크를 가진 페이지의 도메인과 같을때 Refer 헤더는 포함되지 않음
- ping 송신 대상 서버가 링크를 가진 페이지의 도메인과 다를때
링크를 가진 페이지가 HTTPS에 의해 접속되었다면 Ping-Form과 Refer는 포함되지 않음
링크를 가진 페이지가 HTTPS에 의해 접속되지 않았다면 모든 헤더가 포함됨
서버측에서 이러한 ping 요청을 받을수 있으면 사이트 내에서의 사용자 행동을 추적할 수 도 있다. 이전에는 이러한 기능을 HTTP 리다이렉트로 구현했는데, 링크 주소를 포함한 하이퍼링크 URL을 동적으로 생성하고 그 링크를 클릭하면 서버측에서는 어떤 링크를 클릭했는지 기록하고 나서 목적지로 페이지를 리다이렉트 하는 방식이였다.
<!-- /track.php에서 처리한 후 index.html로 리다이렉트 -->
<a href="/track.php?linkTo=index.html">홈으로</a>
리다이렉션에 비해 ping 속성이 좋은점
- 링크 URL이 목적지 페이지를 직접 가리킬 수 있으므로 사용자가 알기 쉽다.
- ping이 보내지는 것을 브라우저가 사용자에게 알려줄 수 있다.
- 하이퍼링크 기능을 유지하면서도 사용자가 ping 통지 기능을 사용하지 않을수 있다.
- 브라우저가 링크 페이지를 미리 읽는 등의 방법으로 네트워크 대역을 효율적으로 이용할 수 있다.
title 속성
title 속성은 요소에 관한 제목을 지정한다. 여기에서 말하는 제목은 문서 제목처럼 내용을 대표하기 위한 이름이 아니라 특정 요소에 관한 추가정보를 의미한다. 추가적, 부가적, 조언적의 성격을 지니며 주로 특정 요소의 특성이나 성질을 설명하기 위한 용도로 사용되며, 거의 모든 요소에 사용할 수 있다.
튤팁(tool tip)
마우스를 링크된 텍스트나 입력 컨트롤 위에 대면, title 속성으로 지정된 텍스트가 풍선말 형태로 나타난다.
음성 출력
내용을 음성으로 출력하는 보조기기가 title 속성으로 지정된 텍스트를 음성으로 출력한다.
title 속성은 인쇄나 복사와 같이 브라우저의 기본 기능이 적용되지 않기 때문에 사용자가 반드시 처리해야 하는 정보는 title 속성이 아닌 본문을 통해 제공하는 것이 원칙이다.
title 예제
요소에 대한 설명이나 주석으로 본문의 내용이 복잡해지지 않도록 title 속성을 사용하면 된다.
a 요소
링크가 어디를 향하는지, 링크를 누르면 어떤 현상이 발생하는지 설명할 때 요약 제목으로 구성된 목록에서 전체 제목을 제공할 때 사용한다.
<a href="http://www.naver.com/" target="_blank" title="새창">naver</a>
p 요소
문단에 관한 주석을 제공할 때 사용한다.
<p title="이 내용은 다음 회기에 개정될 예정이다">
img 요소
이미지 파일에 관한 추가 설명이 필요할 때 사용한다.
<img src="shose.jpg" alt="어린이 등산화" title="사진 속 크기는 실제와 같습니다.">
input 요소
입력 컨트롤에 관한 사용 설명이 필요할 때 사용한다.
<input type="tel" title="숫자만 입력">
abbr 요소
약어나 두문자어를 풀이할 때 사용한다. 중요도가 높은 약어는 title 속성으로 설명하지 않고 본문에 직접 출력하는 것이 좋다.
<abbr title="HyperText Markup Language">HTML</abbr>
