5. 페이지를 넘어가자, 하이퍼링크

2017. 8. 6. 15:22하루만에 프로그래밍 끝내기/HTML

1. 하이퍼링크 태그 속성

속성 

설명 

href="주소" 

링크가 연결된 주소를 지정합니다. 

id="이름" 

웹페이지 내에서 이동할 위치를 지정합니다. 

target="속성" 

링크가 열릴 창을 지정합니다.
_self : 현재 창에서 바로 보여 줍니다. target 속성을 사용하지 않으면 기본 값으로 현재 창에서 바로 보여줍니다.

_blank : 새로운 창으로 보여 줍니다.

title="내용" 

링크에 마우스를 올렸을 때 보이는 내용을 지정합니다. 


2. 페이지 이동 예제


<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <title>하이퍼링크</title>
</head>
<body>
 <a href="http://yuchaestory.tistory.com/">앙큼한유채</a>
</body>
</html>
 


3. 이미지로 페이지 이동

 
<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <title>하이퍼링크</title>
</head>
<body>
 <a href="http://yuchaestory.tistory.com/">앙큼한유채</a><br>
 <a href="http://yuchaestory.tistory.com/"><img src="../img/4-01.png"></a>
</body>
</html>


4. 페이지 내 이동


<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <title>하이퍼링크</title>
</head>
<body>
 <span>1. 하이퍼링크 페이지 이동</span><br>
 <a href="http://yuchaestory.tistory.com/">앙큼한유채</a><br>
 <span>2. 이미지 클릭 페이지 이동</span><br>
 <a href="http://yuchaestory.tistory.com/"><img src="../img/4-01.png"></a><br>
 <span><h1>페이지 내 이동</h1></span>
 <p>나의 도서 목록 포트폴리오</p>
 <p>나의 도서 목록 포트폴리오에서는 현재까지 내가 읽은 도서 목록과 간단한 도서 내용을 요약해서 보여 드립니다.</p>
 <ul>
  <li><a href="#book01">데미안</a></li>
  <li><a href="#book02">죄와벌</a></li>
  <li><a href="#book03">인간의 굴레</a></li>
  <li><a href="#book04">사람은 무엇으로 사는가?</a></li>
  <li><a href="#book05">동물농장</a></li>
  <li><a href="#book06">젊은 베르테르의 슬픔</a></li>
  <li><a href="#book07">곰의 제국</a></li>
  <li><a href="#book08">마지막 강의</a></li>
  <li><a href="#book09">논어</a></li>
  <li><a href="#book10">정의란 무엇인가?</li>
  <br><br><br><br><br><br><br><br><br><br><br>
  <hr>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

  <h3>도서 요약</h3>
  <table width="800px"; border="solid 1px black">
   <tr>
    <td bgcolor="lightgray";>
     <a id="book01"></a><span>데미안</span>
    </td>
   </tr>
   <tr>
    <td>
     <span>- 저자 : </span><br>
     <span>- 출판사 : </span><br>
     <span>- 책소개 : </span><br>
    </td>
   </tr>
   <tr>
    <td bgcolor="lightgray";>
     <a id="book02"></a><span>죄와벌</span>
    </td>
   </tr>
   <tr>
    <td>
     <span>- 저자 : </span><br>
     <span>- 출판사 : </span><br>
     <span>- 책소개 : </span><br>
    </td>
   </tr>
  </table>
 </ul>
</body>
</html>