<이미지와 하이퍼링크>
-
<img src>: 이미지 삽입 태그
-
width, height: 이미지 크기 조절
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>이미지 삽입하기</title>
</head>
<body>
<h1>이미지 크기 조절</h1>
<img src="images/gugudan.jpg" alt="바빠 구구단">
<img src="images/gugudan.jpg" width="250" height="250">
</body>
</html>
-
<figure><figcaption>: 이미지 설명
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>이미지 삽입하기</title>
<style>
img {
border:1px solid #ccc;
}
figure {
display:inline-block;
}
</style>
</head>
<body>
<figure>
<img src="images/prod.jpg" alt="모카 마타리">
<figcaption>예맨 모카 마타리</figcaption>
</figure>
</body>
</html>
-
<a>태그: 하이퍼링크. <a>태그의 속성들
-
href : 링크한 문서나 사이트의 주소 입력
-
target: 링크한 내용이 표시될 위치를 지정
-
download: 링크한 내용을 다운로드
-
target 속성들
-
_blank: 링크 내용이 새 창이나 새 탭에서 열림
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>링크 만들기</title>
<style>
a{
text-decoration: none;
color:black;
}
</style>
</head>
<body>
<h1>텍스트 링크 만들기</h1>
<a href="http://www.google.com" target="_blank">구글사이트 이동</a>
<h1>이미지 링크 만들기</h1>
<a href="http://www.google.com">
<img src="images/google.jpg">
</a>
</body>
</html>
-
한 페이지 안에서 이동하기
-
<a href="#"> 이용. 이동하고자 하는 단락에 id를 부여하고 하이퍼링크 주소에는 id를 뜻하는 #을 앞에 붙여줌
<!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>
-
<area>태그, usemap 속성: 한 이미지 상에 여러 다른 링크를 만드는 것
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>이미지맵</title>
<style>
a {
text-decoration:none
}
</style>
</head>
<body>
<img src="images/kids.jpg" alt="어린이이미지" usemap="#favorite">
<map name="favorite">
<area shape="rect" coords="10,10,160,200" href="http://www.daum.net" target="_blank" alt="다음페이지이동">
<area shape="rect" coords="220,10,380,200" href="http://www.google.com" target="_blank" alt="구글페이지이동">
</map>
</body>
</html>
-
svg 파일: 이미지를 확대하거나 축소하더라도 테두리가 원래의 깨끗한 상태로 유지되는 벡터 이미지
'Learning > HTML&JavaScript' 카테고리의 다른 글
| <datalist>가 있는 신청서 폼 (0) | 2020.07.17 |
|---|---|
| 폼 관련 태그들 (0) | 2020.07.14 |
| 표 제목(<caption>, <figure>, <figcaption>), 표 구조 정의(<thead>, <tbody>, <tfoot>), 열 스타일(<col>, <colgroup>) (0) | 2020.07.07 |
| 목록태그(<ul>,<li>,<ol>), 설명목록(<dl>,<dt>,<dd>), 표를 만드는 태그(<table>,<tr>,<td>,<colspan>) (0) | 2020.07.07 |
| <strong>, <br>, <q>, <q cite>, <mark>, <span>, <div>, <ruby>, <rt> (0) | 2020.07.07 |
