본문 바로가기

Webstoryboy

Category

Explanation

HTML/Alphabet

[HTML] <a>

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 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
<a>

참고 사이트(Reference)


더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기