01.
참고 : 블록구조/인라인구조
난이도 쉬움<a> 태그는 다른 페이지 이동을 설정합니다. 페이지 주소 뿐만 아니라, 메일 주소, 전화 번호 등도 연결할 수 있으며, 아이디(#) 값으로 페이지 내에서도 이동이 가능합니다.
<a>
<a> 태그는 다른 페이지 이동을 설정합니다.
| 특징 | 설명 |
|---|---|
| 요소 | 인라인 구조(Inline Element) |
| 닫는 태그 | 적용(<a> ~ </a>) |
| 버전 | HTML4 |
| 시각적 표현 | 밑줄과 파란색으로 표시 |
| 사용성 | ★★★★★ |
정의(Definition)
- <a> 태그는 클릭하면 다른 페이지로 이동합니다. 현재 페이지에서 다른 페이지 URL로 연결하는 것을 하이퍼링크라고 합니다.
- <a> 태그는 페이지 주소 뿐만 아니라, 메일 주소, 전화 번호 등도 연결할 수 있습니다.
- <a> 태그는 아이디(#id)로 이동 할 수 있습니다.
- <a> 태그는 target 속성을 이용하면 새로운 브라우저 창에서 페이지 이동을 할 수 있습니다.
- <a> 태그는 방문한 링크는 밑줄과 보라색으로 표시되고, 활성화된 링크는 밑줄과 빨간색으로 표시됩니다.
- 원칙적으로 <a> 태그는 블록구조를 포함 할 수 없지만, HTML5에서는 <a> 태그는 블록 요소를 포함할 수 있습니다.
- href="#"의 페이지 지정을 막기 위해 javascript:void(0)를 사용하는 것보다 <button> 태그를 사용하는 것이 바람직합니다.
접근성(Accessibility)
- 링크를 통해 페이지 이동시 "페이지 이동" 및 "새로운 브라우저에서 열림" 등의 메시지를 명시하여야 합니다.
- target="_blank" 속성을 사용할 경우 "새로운 브라우저에서 열림" 등의 메세지를 명시하여야 스크린리더기를 사용하는 사용자에게 도움을 줄 수 있습니다.
예제1(Sample)
다른 페이지 이동(URL), 메일, 전화를 설정합니다.
링크를 클릭하면 이동합니다.
HTML
CSS
SCRIPT
<p>스터디 인원은 이번 주까지 모집합니다.</p>
<p>참가 신청은 <a href="https://cafe.naver.com/crossbrowsing/10982">카페</a>에서 해주시면 됩니다.</p>
<p>참가 신청은 <a href="mailto:webstoryboy@naver.com">메일</a>로도 가능합니다.</p>
<p>당연히 <a href="tel:01093128004">전화</a>로도 가능합니다.</p>
a {
color: #FF4B4C;
border-bottom: 1px solid #FF4B4C;
}
//Javascript none
예제2(Sample)
아이디(#)로 이동합니다.
아이디 값을 넣으면 건너뛰기 기능을 제공합니다.
댓글을 쓰고 싶다면 클릭해주세요!
링크를 클릭하면 이동합니다.
HTML
CSS
SCRIPT
<p>아이디 값을 넣으면 건너뛰기 기능을 제공합니다.</s></p>
<p><a href="#entry229Comment">댓글을</a> 쓰고 싶다면 클릭해주세요!</p>
a {
color: #FF4B4C;
border-bottom: 1px solid #FF4B4C;
}
//none
예제3(Sample)
타겟을 설정하여 현재 브라우저 및 새로운 브라우저에서 보일 수 있도록 설정합니다.
링크를 클릭하면 이동합니다.
HTML
CSS
SCRIPT
<div>
<p>타겟을 설정하면 새로운 브라우저 및 현재 브라우저에서 이동이 가능합니다.</s></p>
<p><a href="https://wsss.tistory.com/" target="_blank">애니메이션</a> 사이트를 새로운 창에서 보고 싶다면 클릭해주세요!</p>
<p><a href="https://wsss.tistory.com/" target="_self">애니메이션</a> 사이트를 현재 창에서 보고 싶다면 클릭해주세요!</p>
</div>
a {
color: #FF4B4C;
border-bottom: 1px solid #FF4B4C;
}
//none
호환성(Compatibility)
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <a> | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
