[HTML+CSS] [이미지와 하이퍼링크] 02

[HTML+CSS] [이미지와 하이퍼링크] 01 - 이미지 태그

[HTML+CSS] [텍스트 관련 태그] 04 - 표를 만드는 태그 [HTML+CSS] [텍스트 관련 태그] 03 - 목록을 만드는 태그 [HTML+CSS] [텍스트 관련 태그] 02 - 인라인 레벨 태그 [HTML+CSS] [텍스트 관련 태그] 01 - 블록..

onelight-stay.tistory.com

지난번 이미지를 삽입하는 과정에 대해서 알았다면

이번에는 이미지나 텍스트를 클릭해 또 다른 페이지로 넘어가는

링크에 대해서 알아보자.

<a> - 링크

이미지나 문서를 클릭할 경우 다른 페이지로 넘어가는 효과를 나타나게 해주며,

텍스트에 효과를 주면 텍스트 링크가 되고

이미지에 효과를 넣었을 시에 이미지 링크가 된다.

또한 <a>에 사용되는 속성들도 매우 다양하다.

- target 속성 -

<a> 태그만 사용하면 해당 텍스트나 이미지를 클릭했을 경우

현재 활성화 되어있는 창에서 바로 페이지로 넘어가지만,

target 속성을 사용할 경우 현재 활성화중인 창이 아닌 새로운 창이 만들어져

현재 창의 내용은 유지한 채 링크가 진행되게 할 수 있다.

target 속성에서 해당하는 속성값이니 원하는 속성값을 입력해 주면 된다.

앵커(anchor)

앵커는 페이지가 긴 웹문서에서 특정 요소를 클릭하면

새 창이 뜨는 것이 아니라 해당 위치로 한번에 이동하게 되는 것을 말한다.

앵커 이름 앞에 '#'을 붙여서 앵커를 표시한다.

<map>, <area>, usemap 속성 - 이미지 맵 지정

한 이미지상에서 클릭 위치에 따라 서로 다른 링크가 열리는

이미지 맵 효과를 보여주는 태그이다.

<map> 태그로 이미지맵을 만들고

<area> 에서 이미지맵 효과를 나타낼 영역을 설정해 준 뒤에

<img> 태그에서 usemap 속성을 이용해 사용할 이미지맵을 지정해 주면된다.

이미지 맵에서 사용되는 속성들이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>링크 만들기</title>
</head>
<body>
    <h1>텍스트 링크 만들기</h1>
    <a href="https://www.naver.com/">네이버로 이동하기</a>
    <br>
    <hr>
    <h1>이미지 링크 만들기</h1>
    <a href="https://www.naver.com/"><img src="images/naver.jpg" width="300px"></a>
    <br>
    <hr>
    <h1>텍스트 링크 만들기</h1>
    <p><a href="https://www.naver.com/">네이버 홈페이지(현재 화면)</a></p>
    <p><a href="https://www.naver.com/" target="_blank">네이버 홈페이지(새 창 또는 새 탭)</a></p>
    <br>
    <hr>
    <h1>문서 안에 다른 문서 넣기</h1>
    <iframe src="iframe.html" width="400px" height="145px"></iframe>
    <br>
    <hr>
    <h1 id="menu">앵커 만들기</h1>
    <p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고<br>
     그 위치로 한번에 이동하는 링크를 만들 수 있는데, <br>
     이 기능을 앵커(anchor)라고 합니다.
    </p>
    <ul>
        <li><a href="#content1">메뉴1</a></li>
        <li><a href="#content2">메뉴2</a></li>
        <li><a href="#content3">메뉴3</a></li>
    </ul>
    <h1 id="content1">내용1</h1>
    <p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고<br>
     그 위치로 한번에 이동하는 링크를 만들 수 있는데, <br>
     이 기능을 앵커(anchor)라고 합니다.
    </p>
    <a href="#menu">[메뉴로]</a>
    <h1 id="content2">내용2</h1>
    <p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고<br>
     그 위치로 한번에 이동하는 링크를 만들 수 있는데, <br>
     이 기능을 앵커(anchor)라고 합니다.
    </p>
    <a href="#menu">[메뉴로]</a>
    <h1 id="content3">내용3</h1>
    <p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고<br>
     그 위치로 한번에 이동하는 링크를 만들 수 있는데, <br>
     이 기능을 앵커(anchor)라고 합니다.
    </p>
    <a href="#menu">[메뉴로]</a>
    <br>
    <hr>
    <h1>이미지 맵 만들기</h1>
    <img src="images/dog_cat.jpg" usemap="#catdog">
    <map name="catdog">
        <area shape="rect" coords="37,54,274,196" href="https://terms.naver.com/entry.nhn?docId=565768&cid=46639&categoryId=46639" target="_blank">
        <area shape="rect" coords="154,205,244,307" href="https://terms.naver.com/entry.nhn?docId=1062053&cid=40942&categoryId=32624" target="_blank">
    </map>
    <br>
</body>
</html>

link.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iframe 테스트 웹문서</title>
</head>
<body>
    <h1>문서 안에 다른 문서 넣기</h1>
    <p>iframe 태그를 사용하기 위해 제작된 테스트 웹문서</p>
</body>
</html>

iframe.html

메모장 같던 웹문서가 이제 진짜 홈페이지화 된것같다.

약간 뿌듯...

< 참고 >

Do it! HTML5+CSS3 웹 표준의 정석

※ 해당 글은 습득 목적으로 작성된 글입니다 ※

저작자표시

'개인공부 > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS] [이미지와 하이퍼링크] 04 - 연습문제 (0)	2020.06.15
[HTML+CSS] [이미지와 하이퍼링크] 03 - SVG 이미지 (0)	2020.06.14
[HTML+CSS] [이미지와 하이퍼링크] 01 - 이미지 태그 (0)	2020.06.12
[HTML+CSS] [텍스트 관련 태그] 05 - 연습문제 (0)	2020.06.11
[HTML+CSS] [텍스트 관련 태그] 04 - 표를 만드는 태그 (0)	2020.06.10

IT Information Notebook

[HTML+CSS] [이미지와 하이퍼링크] 02 - 링크 태그

<a> - 링크

앵커(anchor)

<map>, <area>, usemap 속성 - 이미지 맵 지정

'개인공부 > HTML5 + CSS3' 카테고리의 다른 글

댓글

티스토리툴바

[HTML+CSS] [이미지와 하이퍼링크] 02 - 링크 태그

<a> - 링크

앵커(anchor)

<map>, <area>, usemap 속성 - 이미지 맵 지정

'개인공부 > HTML5 + CSS3' 카테고리의 다른 글

관련글

댓글

티스토리툴바