html 5 - 링크 페이지로 이동하기

by 각설탕(샵) 2022. 8. 31. 22:15

안녕하세요 각설탕입니다.
오늘은 브라우저에 이미지와 글씨에 사이트를 링크해서 이동하는 것을 알아보겠습니다.

1. 텍스트에서 링크 페이지 이동하기

매번 준비하는 기본 틀을 열어주세요.
오늘 할 작업들은 바디 부분에 정리하겠습니다.
바디 부분에 <h>를 활용하여 어떤 것에 대한 설명인지 제목으로 사용해 보겠습니다.
<h2> 글자에 링크 걸기 </h2>

이후 링크 주소를 입력하는데 <a href=""></a>를 사용합니다. " "사이에 링크할 주소를 입력합니다.
<a href="http://www.naver.com">네이버로 이동</a>
이렇게 적으면 네이버로 이동이라는 글자를 클릭하면 네이버 홈페이지로 이동하는 것입니다.

2. 새로운 창으로 열기

네이버로 이동을 클릭하면 같은 브라우저에서 이동하게 됩니다. 새창으로 열고 싶을 때는 target="blank"를 입력합니다.
<a href="http://www.naver.com" target="blank" >
아래 이미지처럼 새창으로 네이버가 열립니다.

<!doctype html>

<html>
     <head>
<title></title>
      <meta charset="utf-8">
</head>

     <body>
        <h2>글자에서 링크로 이동</h2>
        <a href="http://www.naver.com" target="blank" >네이버로 이동</a>
     </body>

3. 이미지에서 링크페이지 이동하기
우선 이미지를 링크해서 가져오는 것은 같은 폴더에 이미지를 준비해주셔야 합니다.
<h2>이미지에서 링크페이지 이동하기</h2> 만들어줍니다.
이미지링크는 단독 태그로 <img src="" />사용합니다.
"" 안에는 폴더이름/이미지파일이름.확장자를 적어줍니다.

img/naver.jpg를 적어주면 됩니다. 이 때 파일 이름은 영문으로 해주셔야 오류가 나지않습니다.
<a href="http://www.naver.com" target="blank" ><img src="img/naver.jpg />네이버로 이동</a>

오늘은 링크하는 방법에 대해 알아봤습니다.