[HTML] 하이퍼링크 만드는 법 - 웹페이지 이동하기!

728x90

SMALL

1. 하이퍼링크란 ❓

다른 페이지 또는 사이트로 연결하는 링크(문자 또는 이미지)
하이퍼링크는 웹을 웹 다워보이도록 만들어줌

<a href='이동할 사이트 또는 문서의 경로'>링크에 사용할 문자 또는 이미지</a>

✅ 다음 홈페이지로 연결하는 하이퍼링크를 만들어보자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>하이퍼링크</title>

</head>
<body>
    <h2>하이퍼링크</h2>

    <a href="https://www.daum.net/">다음 홈페이지</a>
	</body>
 
</html>

✅ 다음로고 이미지를 클릭하면 다음 홈페이지로 연결되도록 만들어보자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>하이퍼링크</title>

</head>
<body>
    <h2>하이퍼링크</h2>

    <a href="https://www.daum.net/">다음 홈페이지 바로가기</a>
    <a href="https://www.daum.net/">
        <img src='https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png',alt='다음 로고'></a>
    
      
    </body> 
    

</html>

✅ HTML 문서와 같은 폴더 내 subpage.html을 작성하고 하이퍼링크로 연결시켜 이동해보자!

📄 subpage.html

subpage.html

0.00MB

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>서브페이지</title>
</head>
<body>
    <h2>서브페이지</h2>
    <p><img src="춘배.png" alt="춘배"></p>   <!--같은 폴더 내 이미지 파일-->
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>하이퍼링크</title>

</head>
<body>
    <h2>하이퍼링크</h2>
    <a href="subpage.html">서브페이지</a>
       
    </body> 
    
</html>

✅ 이미지를 클릭하면 하이퍼링크로 연결되도록 작성해보자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>하이퍼링크</title>

</head>
<body>
    <h2>하이퍼링크</h2>

        <a href="subpage.html">서브페이지</a>
        <a href="subpage.html"><img src='cat2.png' alt="고양이 이미지"></a>
    </body> 
    

</html>

2. target 속성

_blank: 새탭에서 해당 페이지가 열림
아이프레임의 name: 해당 아이프레임에서 열림

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>하이퍼링크</title>
</head>
<body>
    <h2>하이퍼링크</h2>
    <p><a href="1_하이퍼링크.html">하이퍼링크 연습 페이지(현재페이지)</a> 
        <a href="1_하이퍼링크.html" target="_blank">하이퍼링크 연습 페이지(새탭)</a> 
       
</body>
</html>

📄 예제 HTML 문서

728x90

LIST

'Web > HTML' 카테고리의 다른 글

[HTML] 테이블 만드는 법 - 테이블 속성 설정하기 (1)	2023.03.27
[HTML] 책갈피 기능 만드는 법 - 페이지 내 이동하기 (0)	2023.03.27
[HTML] HTML의 태그 종류에 대해 알아보자🧐 (0)	2023.03.24
[HTML] 파일 경로 작성하는법(절대경로와 상대경로) (0)	2023.03.24
[HTML] 이미지 형식의 종류를 알아보자🧐 (0)	2023.03.24