생각 작업실 The atelier of thinking

9. <HTML> 하이퍼링크 태그 - <a> 본문

웹(Web) 이야기

9. <HTML> 하이퍼링크 태그 - <a>

knowledge-seeker 2024. 2. 11. 16:56

HTML은 "Hypertext Markup Langage"의 약자입니다.
그 중 "Hyper Text"는 하이퍼링크(hyperlink)를 정의하여 문서의 내용과 내용을 연결한 텍스트를 말합니다.
앞서 Text 관련 태그들은 알아봤습니다.

이번 회차에는 하이퍼링크에 관련한 태그인 <a> 태그에 대해 알아보겠습니다.

1. 하이퍼링크(hyperlink)란?



하이퍼링크(hyperlink)는 웹페이지에서 한 위치에서 다른 위치로 이동할 수 있도록 하는 링크, 즉 연결고리를 의미합니다.
하이퍼링크는 주로 텍스트나 이미지 등을 클릭하면 다른 웹 페이지,문서,미디어 파일 또는 웹사이트의 특정부분으로 이동하도록 하는데 사용됩니다.

2. <a> 태그 사용법


<a> 태그의 href 속성을 이용하여 하이퍼링크 작성합니다. 

<!DOCTYPE html>
<html>
<head>
 <title> 하이퍼링크 </title>
</head>
<body>
<h1> 외부링크 연결하기 </h1>
<p> 
<ul>
     <li> <a href="https://www.naver.com/" > 네이버 </a> </li> 
     <li> <a href="https://www.google.com/" > 구글 </a> </li>
     <li> <a href="https://www.daum.net/" > 다음 </a> </li>
</ul>
</p>
</body>
</html>


다른 웹 사이트의 HTML 페이지 모두 연결 가능합니다.

target 속성을 이용해서 링크가 열리는 위치를 지정하는 데 사용됩니다.

 

<!DOCTYPE html>
<html>
<head>
 <title> 하이퍼링크 </title>
</head>
<body>
<h1> 외부링크 연결하기 </h1>
<p> 
<ul>
     <li> <a href="https://www.naver.com/" target="_blank"> 네이버 </a> </li> 
     <li> <a href="https://www.google.com/" target="_blank"> 구글 </a> </li>
     <li> <a href="https://www.daum.net/" target="_blank"> 다음 </a> </li>
</ul>
</p>
</body>
</html>

 

하이퍼링크

외부링크 연결하기

 


'_blank' 를 값으로 주면 새로운 브라우저 창이나 탭에서 열립니다.
'_self' 는 기본값으로 설정되어 있으며, 현재 브라우저 창이나 탭에서 열립니다.

하이퍼링크를 이미지로 작성할 수 있습니다.

앞선 <table> 태그와 함께 사용하여 작성해 보겠습니다.
이미지 <img> 태그를 <a> 태그로 감싸면 됩니다. href 속성에 연결하고자 하는 웹사이트의 url을 입력하여 주시면 됩니다.

 

<!DOCTYPE html>
<html>
<head>
 <title> 하이퍼링크 </title>
</head>
<body>
    <table border="1">
        <caption>외부링크 연결</caption>
        <thead> 
          <th> <a href="https://www.naver.com/" target="_blank"> 네이버 </a></th> 
          <th> <a href="https://www.google.com/" target="_blank"> 구글 </a></th> 
          <th> <a href="https://www.daum.net/" target="_blank"> 다음 </a></th> 
        </thead>
        <tbody> 
          <tr>
              <td> <a href="https://www.naver.com/" target="_blank"> 
                   <img src="images/naver logo.png" alt=""> </a></td>
              <td> <a href="https://www.google.com/" target="_blank">
                   <img src="images/google logo.jpg" alt=""> </a></td> 
              <td> <a href="https://www.daum.net/" target="_blank"> 
                   <img src="images/daum.png" alt=""> </a> </td>
          </tr>
           
       </tbody>
       <tfoot>
           <td colspan="3"> 텍스트나 이미지를 클릭하시면 이동합니다. </td> 
        </tfoot>
    </table>
</body>
</html>

 



결론적으로 하이퍼링크는 텍스트나 이미지로 작성할 수 있습니다.

<a> 태그는 같은 웹사이트내의 다른 HTML로 이동할 수 있으며, 같은 HTML 페이지 내의 특정위치로 이동할 수도 있습니다.

3. 나만의 웹페이지


지금까지 <HTML> 태그를 이용해 텍스트 작성, 리스트, 이미지 삽입, 표 사용 및 하이퍼링크까지 살펴보았습니다. 이 태그들을 이용해서 간단한 나만의 웹페이지를 만드는 데에는 문제 없을 것입니다.

조금은 빠르게 코딩에 익숙해지고 싶은 분에게 저의 경험담을 공유하자면, 웹페이지를 일종의 나만의 노트로 사용하는 것을 추천드립니다.

지금은 인터넷 검색창에서 모든 지식을 검색할 수 있는 시대인지라 "Know How" 가 아닌 "Know Where"가 더 중요하다고 할 수 있습니다. 하지만 나에게 딱 맞는 것을 찾는 것은 쉽지 않습니다. 그래서 일단 한 번 찾은 나만의 지식을 찾기 편하게 기록하는 것을 노트나 다른 워드 프로그램 등으로 할 수도 있지만, 이 기록을 웹페이지로 만들어 보는 것을 추천드립니다.

이 때 가장 필수적인 태그가 하이퍼링크 <a> 태그입니다.

'웹(Web) 이야기' 카테고리의 다른 글

11. <HTML> 요소(Element) 와 <CSS> 선택자 (Selector)  (0) 2024.02.17
10. <CSS> 란 ?  (0) 2024.02.15
8. <HTML> <Table> 태그  (0) 2024.01.31
7. <HTML> 이미지 태그 - <image>  (1) 2024.01.30
6.<HTML> 텍스트 표현 태그-<b>,<u>,<i>  (1) 2024.01.29
'웹(Web) 이야기' Related Articles more