반응형
WEB 의 가장 큰 특징은 연결 입니다.
하이퍼링크는 WEB 을 WEB (web, 거미줄, 연결을 의미) 답게 만들어 줍니다.
하이퍼링크(Hyperlink) 란?
모든 웹내 컨텐츠를 연결시켜주는 역할을 합니다.
링크의 구조
<a>
anchor 의 약자로 다른 컨텐츠로의 연결을 만들어줍니다.
링크는 <a>
태그와 href
(hypertext reference) 속성으로 만들어 줍니다.
skyksit.com Study 바로가기
<!-- a 태그로 컨텐츠를 감싸주고 -->
<a>skyksit.com Study 바로가기</a>
<!-- href 속성을 추가합니다 -->
<a href="">skyksit.com Study 바로가기</a>
<!-- href 속성에 웹 주소를 넣어줍니다 -->
<a href="https://skyksit.com/study/">skyksit.com Study 바로가기</a>
title 속성 추가하기
title
속성은 마우스를 오버했을때에 툴팁에 대한 기능도 제공합니다.
<a href="https://skyksit.com/study/" title="skyTechBlog">skyksit.com Study 바로가기</a>
이미지 링크
<a>
태그 안에 <img>
태그를 넣어서 이미지에 링크를 걸 수 있다
<a href="https://skyksit.com">
<img src="https://skyksit.com/images/logo.png" alt="skyTechBlog" style="width:122px;height:122px;">
</a>
절대경로 상대경로
링크를 거는 방법은 도메인부터 시작하는 절대경로와
해당 페이지를 기준으로 하는 상대경로가 있다
<!--절대경로-->
<a href="https://skyksit.com/categories/Programming/Html/" target="_blank">Visit skyksit.com</a>
<!--상대경로-->
<a href="../Programming/" target="_blank">Visit skyksit.com</a>
문서 조각 Document fragments
id
속성 값을 활용하여 페이지의 해당 위치로 이동 시킬 수 있다.
일반적으로 heading 으로 이동시킨다.
- 이동할 곳이
id
속성으로 정의 되어 있을 것 - URL 끝에
#
기호를 이용한다
이메일 링크
링크에 이메일 주소를 넣을 수 있다.
PC 에 설치되어있는 이메일 어플리케이션이 실행되면서 받는 사람에 해당 이메일 주소가 자동 입력된다
<a href="mailto:someone@example.com">메일보내기</a>
Links target
target
속성으로 이동을 새창으로 할 건지 바로 이동할 건지를 정할 수 있다
_self
- default, 같은 창에서 Links 로 이동_blank
- 현재 창과 다른 새 창을 띄워서 이동_parent
- 현재의 부모 frame 에서 이동_top
- 창의 전체 본문에서 이동
<a href="https://skyksit.com/" target="_blank">Visit skyksit.com</a>
반응형
'IT > HTML' 카테고리의 다른 글
언어코드 (Language Code) (0) | 2022.06.28 |
---|---|
국가코드 (Country Code) (0) | 2022.06.28 |
색상명 (Color Names) (0) | 2022.06.27 |
SEO(Search Engine Optimization) 요약 (0) | 2022.06.27 |
HTML TEXT 작성법 (0) | 2022.06.27 |
HTML HEAD 작성법 (0) | 2022.06.27 |
HTML 주요태그 (0) | 2022.06.27 |
HTML Cheatsheet (한장요약) (0) | 2022.06.27 |