HTML · CSS/HTML · CSS 코드 예제 만들기

웹 HTML 예제 만들기 1. 이미지로 하이퍼링크 만들기

Tomitom 2022. 11. 9. 14:16
반응형

 

하이퍼링크를 표시하는 방법에 대해서 배워보았으니

각 이미지를 클릭하면 해당 하이퍼링크를 표시하는 태그를 작성해보겠습니다. 

 

https://blue-dot.tistory.com/115

 

웹 HTML 입문 공부 6. 하이퍼링크 표시

링크 anchor 링크는 anchor (앵커, 축, 정박지, 닻 과 같은 의미를 가집니다.) 의 약자인 a 태그를 사용합니다. 하이퍼링크를 표시하는 태그는 다음과 같습니다. a 태그 요소는 href 속성을 통해 다른 페

blue-dot.tistory.com

 

그림의 출처는 픽사베이의 저작권 프리 이미지를 사용했습니다.

https://pixabay.com/ko/

 

 

놀라운 무료 이미지 - Pixabay

놀라운 무료 이미지 우리의 관대한 커뮤니티를 통해 공유되는 0.1 백만개의 이미지와 비디오를 살펴보세요. 인기 이미지: 가을, 꽃, 바다, 하늘, 배경, 겨울, 사람, 국화, 단풍, 자연, 강아지, 크리

pixabay.com

 

<!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>
    <div title="네이버로 간다.">
    <p>
        <a href="http://www.naver.com" target="_blank">
            <img src="images/naverhat.png" width="150">
        </a>
    </p>
    </div>

    <div title="구글로 간다."> 
    <p>
        <a href="http://www.google.com" target="_blank">
            <img src="images/google.png" width="150">
        </a>
    </p>
    </div>
</body>
</html>

 

다음은 실행화면입니다. 

 

 

반응형