728x90
반응형
SMALL
<a>
: 서로 다른 웹페이지나 url로 이동하거나 연결할 때 사용하는 태그로 다른 페이지의 전환이 표현되는 태그이다
글자와 같이 나열되는 성격을 지니고 있다. (inline level element)
링크 위에서는 손모양의 커서가 나타나며, 브라우저 내에서 바로 전환된다.(기본값)
태그 표현 방법
<a href="https://www.naver.com">네이버</a>
<a href="링크주소">링크이름</a>
스타일 변화
기본값 : 밑줄 + 텍스트(파란색)
방문 후 : 밑줄 + 텍스트(보라색)
클릭시 : 밑줄 + 텍스트(빨간색)
연결방법
1. 인터넷 주소, 도메인 url
* https:// 를 필수로 앞에 붙여줘야 한다.
<body>
<a href="https://www.naver.com/">네이버</a>
</body>
2. 임시링크
<body>
<a href="#">임시링크</a>
</body>
3. 문서/서브페이지 전환
<body>
<a href="/문서이름.html">문서/서브페이지 전환</a>
</body>
컴퓨터 내에 저장되어있는 파일의 경로를 입력해 연결시켜준다.
4. 메일(mailto)
<body>
<a href="mailto:관리자 메일 주소">메일연결</a>
</body>
아웃룩(Outlook) 메일 계정 연결 시 사용한다.
5. 전화(tel)
<body>
<a href="tel:전화번호">전화걸기연결</a>
</body>
전화걸기를 연결시키는 기능을 가지고 있어서 모바일에서 사용 가능하다.
6. 문자(sms)
<body>
<a href="sms:전화번호">문자보내기연결</a>
</body>
문자를 보내는 기능을 가지고 있어서 모바일에서 사용 가능하다.
+ 추가 기능
target=" " : 링크된 문서를 클릭했을 때 문서가 열릴 위치를 지정한다.
_blank : 새 창 전환(새로운 도메인창)을 열 때 사용한다.
<body>
<a href="https://www.naver.com/" target="_blank">네이버</a>
</body>
_self : 현재의 브라우저에서 전환된다. (기본값)
<body>
<a href="https://www.naver.com/" target="_self">네이버</a>
</body>
title="설명" : 마우스를 올렸을 때 전환되어질 화면에 대한 미리보기 설명을 표시해준다.
<body>
<a href="https://www.naver.com/" title="네이버입니다">네이버</a>
</body>
728x90
반응형
LIST
'Front-End > HTML 5' 카테고리의 다른 글
| [프론트엔드][html5] 13. 목록태그 <ul> <ol> <dl> (0) | 2021.07.07 |
|---|---|
| [프론트엔드][html5] 12. 공간분할 <div> (+ block/inline요소) (0) | 2021.07.06 |
| [프론트엔드][html5] 10. 이미지 태그 <img> (0) | 2021.06.29 |
| [프론트엔드][html5] 9. 특수문자 (0) | 2021.06.29 |
| [프론트엔드][html5] 8. 글자와 같이 나열되는 태그- inline (2) (0) | 2021.06.29 |
