코딩

HTML <a> 태그 쓰는 법

bearwoong 2020. 3. 5. 18:51
728x90

HTML <a> 태그 쓰는 방법

하이퍼링크

웹페이지에서 글씨나 그림에 마우스를 올렸을 때 손가락 모양으로 변할 때가 있다. 이 부분을 클릭하면 연결된 사이트로 이동하거나 파일을 다운받을 수 있는데 이 역할을 하는 것이 하이퍼링크다.

<a> 태그 쓰는 방법

하이퍼링크를 쓰기위해서는 <a>태그를 이용한다. 사용할 속성은 href, target, title 3가지이다.

href : 이동할 위치의 주소를 알려준다.
href = "목차.html" (연결될 웹페이지와 같은 폴더에 있을 때)
href = "https://bearwoong.tistory.com/" (인터넷의 다른 웹페이지로 이동시킬 때)

target : 이동할 때 창을 어떤 형태로 띄울지 결정한다.
target = "_blank" (새창에서 이동할 페이지를 띄운다)
target = "_self" (보고있던 창에서 이동할 페이지를 띄운다)
target = "parnet" (이동할 페이지를 부모(상위레벨) 윈도에서 띄운다)

title : 마우스를 올렸을 때 하이퍼링크에 대한 설명을 띄워준다.
title = "곰웅이의 티스토리" (마우스를 올리면 곰웅이의 티스토리 라고 나온다)

title 예시

제목과 목록의 항목마다 하이퍼링크를 넣어보았다.

<!doctype html>
<html>
<head>
 <title>곰웅이의 티스토리</title>
 <meta charset="utf-8">
</head>
<body>
  <a href="홈.html" target="_self" title="홈"><h1>곰웅이의 티스토리</h1></a>
 <ul>
  <li><a href="공부하는 즐거움.html" target="_self" title="홈">공부하는 즐거움</a></li>
  <li><a href="읽는 즐거움.html" target="_self" title="읽는 즐거움">읽는 즐거움</a></li>
  <li><a href="기타.html" target="_parent" title="기타">기타</a></li>
 </ul>

 <h1>지속가능한 즐거움은 생산에 있다</h1>
 <p>자기를 소개할 때 빠지지 않고 나오는 항목 중 하나가 '취미'이다.
 <br>나는 이 항목에 항상 컴퓨터 게임이라고 대답하였다.
 <br>내 주변의 친구들이 특별하다고 생각하지 않는다면 내 또래의 많은 남자들 또한 취미가 게임일 것이다. (아니면 술마시기가 많지싶다.)</p>
 <p style="margin-top:25px;">물론 취미로 게임만 하는 건 아니다.
 <br>책도 읽고, 수영도 재미있게 배우고 있다. 그럼에도 무언가 아쉬움을 느끼고 있던 중에 한 유튜브 방송을 보게되었다.
 <br>그 방송에서 아래의 말을 듣고 이거다 하는 생각이 들었다.</p>
 <img src="joy.jpg" width ="50%">
 </body>

<a> 실습

 

반응형