코밍이의 하루
[HTML5] 링크 만들기 본문
1. 개발 환경
| 구분 | 내용 |
| 사용 언어 | HTML5 |
| 개발환경 | Visual Studio Code |
| 참고 도서 | [Do it] HTML5 + CSS3 웹 표준의 정석 |
| 웹브라우저 | Chrome |
2. 주요 문법
1) <a> 태그
- 텍스트와 함께 사용하면 텍스트 링크가 되고 이미지와 함께 사용하면 이미지 링크가 된다.
| 기본형 |
| <a href="링크할 주소" [속성="속성 값"]> 텍스트 </a> <a href="링크할 주소" [속성="속성 값"]> <img src = "이미지 파일 경로"> </a> |
2) <a> 태그 속성
| 속성 | 내용 |
| href | 링크한 문서나 사이트의 주소를 입력 |
| target | 링크한 내용이 표시될 위치(현재 창 또는 새 창)를 지정 |
| download | 링크한 내용을 보여 주는 것이 아니라 다운로드 한다 |
| rel | 현재 문서와 링크한 문서의 관계를 알려줌 |
| hreflang | 링크한 문서의 언어 지정 |
| type | 링크한 문서의 파일 유형을 알려줌 |
3) target 속성
| 속성 | 내용 |
| _blank | 링크 내용이 새 창이나 새 탭에서 열림 |
| _self | - target 속성의 기본값 - 링크가 있는 화면에서 열리 |
| _parent | 프레임 사용 시 링크 내용을 부모 프레임에 표시 |
| _top | 프레임 사용 시 프레임에서 벗어나 링크 내용을 전체 화면에 표시 |
4) 앵커(anchor)
- 페이지가 긴 웹 문서에서 특정 요소를 클릭하면 그 위치로 한 번에 이동하도록 도와준다.
| 기본형 |
| <태그 id="앵커 이름"> 텍스트 또는 이미지 </태그> <a href="#앵커 이름"> 텍스트 또는 이미지 </a> |
5) <map> 태그
- 이미지 맵 : 한 이미지상에서 클릭 위치에 따라 서로 다른 링크가 열리는 것
| 기본형 |
| <map name="맵 이름"> <area> <area> ...... </map> <img src="이미지 파일" usermap = "#맵이름"> |
- <map> 속성
| 속성 | 설명 | ||
| alt | 대체 텍스트를 지정 | ||
| coords | 링크로 사용할 영역을 시작 좌표와 끝 좌표를 이용해 저장 | ||
| download | 링크를 클릭했을 때 링크 문서 다운로드 | ||
| href | 링크 문서 경로 지정 | ||
| media | 링크 문서를 어떤 미디어에 최적화시킬지 지정 | ||
| rel | 현재 문서와 링크 문서 사이의 관계 지정 | 속성 값 | Iternate, bookmark, help, license, next, nofollow, noreferer, prefetch, prev, search, tag |
| shape | 링크로 사용할 영역 형태 지정 | 속성 값 | default, rect, circle, poly |
| target | 링크를 표시할 대상 지정 | 속성 값 | _blank, _parent, _self, _top, 프레임 이름 |
| type | 링크 문서의 미디어 유형 지정 | ||
3. 소스 코드 및 실행 화면
- link.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>링크 만들기</title>
</head>
<body>
<h1>텍스트 링크 만들기</h1>
<a href="http://www.easyspub.com">이지스퍼블리싱 홈페이지</a>
<h1>이미지 링크 만들기</h1>
<a href="http://www.easyspub.com">
<img src="images/easyspub.jpg" alt="이지스퍼블리싱 홈페이지로 가기">
</a>
</body>
</html>
- target.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>텍스트 링크</title>
<style>
a {
text-decoration:none;
color:black;
}
</style>
</head>
<body>
<h1>텍스트 링크 만들기</h1>
<p><a href="http://www.easyspub.com">이지스퍼블리싱 홈페이지(현재 화면)</a></p>
<p><a href="http://www.easyspub.com" target="_blank">이지스퍼블리싱 홈페이지
(새 창 또는 새 탭)</a></p>
</body>
</html>
- parent.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Do it! 지옥에서 온 문서 관리자 깃 & 깃허브 입문</title>
<style>
body {
text-align:center;
}
iframe {
border:1px dotted gray;
}
</style>
</head>
<body>
<h1>Do it! 지옥에서 온 문서 관리자 깃 & 깃허브 입문</h1>
<p>아래 화면은 iframe 태그를 이용해 외부 문서를 현재 문서에 삽입한 것입니다.</p>
<br><br>
<iframe src="child.html" width="600" height="400"></iframe>
</body>
</html>
- child.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>프런트엔드 웹 디자인 입문</title>
<style>
body {
background-color:#ffffff /* 문서 전체 배경색 */
}
img {
float:left; /* 왼쪽으로 배치 */
margin-right:20px; /* 이미지의 오른쪽 여백*/
}
</style>
</head>
<body>
<img src="images\git.jpg" alt="두잇, 지옥에서 온 문서 관리자 깃 and 깃허브 입문">
<br><br>
<h2>문서 지옥, 깃&깃허브로 하루 안에 탈출한다!</h2>
<p>1시간이면 초보 탈출, 5시간이면 기본 활용법 완전 정복!</p>
<p>자주 쓰는 기능을 모두 담아 한 권에 끝낸다!</p>
<p><a href="http://www.easyspub.co.kr/20_Menu/BookView/337">도서 상세 보기(현재 화면에)</a></p>
<p><a href="http://www.easyspub.co.kr/20_Menu/BookView/337" target="_top">
도서 상세 보기(전체 화면에)</a></p>
</body>
</html>
- anchor.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>링크 만들기</title>
</head>
<body>
<h1>앵커 만들기</h1>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<ul id="menu">
<li><a href="#content1">메뉴1</a></li>
<li><a href="#content2">메뉴2</a></li>
<li><a href="#content3">메뉴3</a></li>
</ul>
<h2 id="content1">내용1</h2>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p><a href="#menu">[메뉴로]</a></p>
<h2 id="content2">내용2</h2>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p><a href="#menu">[메뉴로]</a></p>
<h2 id="content3">내용3</h2>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p><a href="#menu">[메뉴로]</a></p>
</body>
</html>
- map.html
'웹언어 공부 > HTML5' 카테고리의 다른 글
| [HTML5] 폼 만들기 (0) | 2021.08.19 |
|---|---|
| [HTML5] SVG 이미지 (0) | 2021.08.16 |
| [HTML5] 이미지 (0) | 2021.08.16 |
| [HTML5] 표를 만드는 태그(2) (2) | 2021.08.12 |
| [HTML5] 표를 만드는 태그(1) (0) | 2021.08.12 |
'웹언어 공부/HTML5' Related Articles
more
