하이퍼링크는 동영상, 이미지, 문서, HTML 페이지, 동영상 등 파일과 문서의 연결 고리 역할을 합니다. 파일이면 다운로드를 할 수 있고, HTML 페이지 라면 해당 페이지로 이동을 합니다. 아주 흔하게 쓰이는 태그로 속성 4가지에 대해 샘플을 통해서 사용법을 알아 보겠습니다.
▼ 하이퍼링크는 “연결된 개체”를 말합니다. 인터넷의 가장 큰 장점으로 한정된 지면에 흩어져 있는 데이터들을 하나로 통합하는 역할을 합니다. 그래서 인터넷 웹 페이지에서는 <a> 태그를 많이 쓸 수 밖에 없습니다. <a> 태그의 주요 속성은 다음과 같습니다.
l href : 연결하고 싶은 주소를 지정한다.
l name : 연결하고 싶은 위치의 이름을 지정한다. HTML5 부터는 사용하지 않는다.
l target : 링크를 클릭했을 때 창의 형태를 지정한다. _blank/_sef/_top/_bottom 의 4가지 종류가 있다.
l title : 링크에 대한 설명이 들어간다.
▼ 그럼 각 속성별로 어떻게 적용되는지 샘플을 통해서 알아 보도록 하겠습니다.
| ◎ href, title 속성 |
▼ href 는 Hypertext Reference 의 약자이며 속성의 값으로 이동 경로를 입력하면 됩니다. 문법은 간단합니다. <a href=”연결 주소”> 내용 </a> 이며 기본 값으로 파란색 밑줄이 적용됩니다. 내용을 클릭하면 연결 주소로 이동하게 되겠죠. title 속성은 링크에 대한 설명인데 마우스로 가져가면 <img> 태그의 title 속성처럼 설명이 나타납니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>HTML</title>
<style type="text/css">
body {
background-color: #e7e7e7;
}
</style>
</head>
<body>
<a href="http://mainia.tistory.com" title="녹두장군 블로그">
나의 블로그
</a>
</body>
</html>
| ※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ HTML 입력한 형태 그대로 보여 주는 pre 태그 사용법 ▶ HTML 입력양식 input 태그 HTML5 추가된 type 타입 에 대한 설명 ▶ 윈도우 메모장에 HTML 문서 작성하는 방법 ▶ HTML 단락 들여쓰기 blockquote 태그 사용하는 방법 ▶ HTML form 태그 사용하는 다양한 방법 |
| ◎ target 속성 |
▼ 링크한 창을 어떻게 열지 결정하는 속성입니다. 속성의 값은 아래와 같습니다. 주로 사용되는 속성은 _blank 와 _self 입니다. 새로운 창으로 열 것인지 아니면 링크한 창에서 이동할 것인지 결정하는 값이죠.
l _blank : 새 창 이나 탭이 열리게 됩니다.
l _self : 연결 문서를 클릭한 창에서 열리게 됩니다.
l _parent : 부모 창에서 열리며 부모창이 없다면 _self 와 같습니다.
l _top : 가장 상위 창에서 열립니다. 상위 창이 없다면 _self 와 같습니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>HTML</title>
<style type="text/css">
body {
background-color: #e7e7e7;
}
</style>
</head>
<body>
<a href="http://mainia.tistory.com" target="_blank">
녹두장군 블로그
</a>(_blan) <br/><br/>
<a href="http://mainia.tistory.com" target="_self">
녹두장군 블로그
</a>(_self)<br/><br/>
<a href="http://mainia.tistory.com" target="_top">
녹두장군 블로그
</a> (_top)<br/><br/>
<a href="http://mainia.tistory.com" target="_parent">
녹두장군 블로그
</a>(_parent)
</body>
</html>
| ※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ HTML 입력한 형태 그대로 보여 주는 pre 태그 사용법 ▶ HTML 입력양식 input 태그 HTML5 추가된 type 타입 에 대한 설명 ▶ 윈도우 메모장에 HTML 문서 작성하는 방법 ▶ HTML 단락 들여쓰기 blockquote 태그 사용하는 방법 ▶ HTML form 태그 사용하는 다양한 방법 |
'웹 프로그래밍 > HTML' 카테고리의 다른 글
| HTML 입력한 형태 그대로 보여 주는 pre 태그 사용법 (1) | 2022.12.16 |
|---|---|
| HTML div, span 태그 사용법과 차이 (20) | 2022.12.07 |
| HTML 용어 정의할 때 사용하는 dl, dt, dd 태그 사용법 (1) | 2022.12.01 |
| HTML 하이퍼링크 a 태그 id 속성으로 내부 링크(책갈피) 기능 구현하는 방법 (7) | 2022.11.18 |
| HTML5 와 CSS 이용해 페이지 레이아웃 만드는 방법 (0) | 2022.11.01 |
| HTML 입력양식 input 태그 HTML5 추가된 type 타입 에 대한 설명 (2) | 2022.07.03 |
| HTML 입력양식 input 태그 기본 적인 타입에 대한 설명 (0) | 2019.04.26 |
| HTML 입력양식 input 태그 HTML5 추가된 속성에 대한 설명 (1) | 2019.04.11 |
