[HTML] HTML 마크업 요소 (링크&iframe)

SMALL

링크 요소 (Anchor)

- <a> Tag는 Anchor의 약자로 텍스트/이미지 콘텐츠에 링크를 설정하거나 다른 페이지로 연결한다.
* 하이퍼링크
- 지정한 페이지(다른 html 파일)나 웹 사이트(http://www.~~)나 지정한 위치로 이동할 때 사용한다.
- Tag를 서로 중첩해서 사용할 수 없다.
● 소스코드
<a href="https://han-hoon.tistory.com/" target="_blank" title="Hoongrammer로 이동">Hoongrammer로 이동</a>
속성 설명

href 이동할 페이지 또는 링크할URL을 연결합니다.
href = "이동할 페이지 또는 링크할URL"

target 새 윈도우 창을 여는 방식을 설정합니다.
target = "_blank | _top | _self | _parent"

● target 속성 상세 설명

속성 값 설명

_blank - 링크 내용이 새창이나 새탭에서 열린다.

_self - target 속성의 기본값으로 링크가 있는 화면에서 열린다.

_parent - 프레임을 사용했을 때 링크 내용을 부모 프레임에 표시한다.

_top - 프레임을 사용했을 때 프레임에서 벗어나 링크 내용을 전체 화면으로 표시한다.

● 결과 (<body> 내부에 입력)

Hoongrammer로 이동

링크 요소 (#Anchor)

- 같은 페이지 안에서 특정 요소를 클릭 시 그 위치로 한 번에 이동시킨다.
- 여기서 #은 ID를 의미한다. (comma(.)는 Class를 의미한다.)
- 다음 두가지 유형으로 많이 사용한다.
<tag id="anchor name">text or image</tag>
<a href="#anchor name">text or image</a>
● 소스코드
<ul id="Anchor_Tag">
	<li><a href="#HTML_List">HTML List로 이동</a></li>
</ul>
<ul id="HTML_List">
	<li><a href="#Anchor_Tag">Anchor Tag 내용으로 이동</a></li>
</ul>
● 결과 (<body> 내부에 입력)

아래 하이퍼링크를 클릭해보세요

HTML List로 이동

링크 요소 (map)

- 하나의 이미지에 여러 개의 link를 할당한다. (Click 위치에 따라 서로 다른 link)
- 아래와 같이 사용한다.
<img src="../img/image.png" usemap="#image">
<map name="image">
    <area shape="rect" coords="5,5,185,80" href="http://www.naver.com" target="_blank">
    <area shape="rect" coords="190,5,345,80" href="http://www.daum.net" target="_top">
</map>
- 이미지 영역을 표시할 때 <area> Tag를 사용한다.
- area의 속성은 href(링크 경로), target(링크표시 대상), shape(링크로 사용할 영역의 형태) 등이 있다.
- shape 값은 default, rect, cicle, poly가 있다.

링크 요소 (link)

- link tag를 사용하며 문서와 외부 자원을 연결하기 위해 사용한다.
- <head> 위치에 정의하며 여러 자원을 연결할 수 있다.
- rel 속성은 현재 문서와 연결된 문서 사이의 연관관계를 지정하기 위해 사용한다.
- href 속성은 연결된 문서의 위치를 지정하기 위해 사용한다.
- 주로 스타일시트(CSS)를 연결하기 위한 용도로 사용한다.
<head>
	<meta charset="UTF-8">
	<title>link example</title>
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="css/main2.css">
</head>

프레임 요소 (iframe)

- 화면의 일부분에 다른 문서를 포함하는 것이다.
* 아래 결과를 통해 눈으로 확인하면 빠르게 이해할 수 있습니다.
- src 속성은 포함시킬 외부 문서의 경로를 지정한다. (상대경로, URL 모두 가능하다.)
- height, width 속성은 프레임 사이즈를 지정한다.
- name 속성은 프레임의 이름을 지정한다.
- HTML5부터는 사용을 하지 않는 추세를 보이고있다.
● 소스코드
<h3>iframe 요소</h3>
<a href="https://www.tistory.com/" target="javacontent">tistory</a>
<a href="https://han-hoon.tistory.com/" target="javacontent">hoongrammer</a>
<a href="https://www.google.com/" target="javacontent">google</a>
<a href="https://www.naver.com/" target="javacontent">naver</a>
<br><br>
<iframe src="https://www.tistory.com/" name="javacontent" width="100%" height="400px"></iframe>
● 결과 (<body> 내부에 입력)
* 모바일에서는 제대로 작동하지 않을 수 있습니다.

아래 하이퍼 링크들을 클릭해보세요
tistory hoongrammer google naver

HTML List

Anchor Tag 내용으로 이동

HTML List

HTML 기본 문법!!! ● 기회는 준비된 자에게 찾아온다.

han-hoon.tistory.com

기회는 준비된 자에게 찾아온다.

LIST

저작자표시 비영리 변경금지

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

[HTML] HTML 마크업 요소 (공간 분할 태그) - p/div/span (0)	2022.03.14
[HTML] HTML 마크업 요소 (Form) - 스압주의 (0)	2022.03.14
[HTML] HTML 마크업 요소 (이미지) (0)	2022.03.14
[HTML] HTML 마크업 요소 (Table) (0)	2022.03.14
[HTML] HTML 마크업 요소 (포맷팅&목록형) (0)	2022.03.14

Hoongrammer

[HTML] HTML 마크업 요소 (링크&iframe)

아래 하이퍼링크를 클릭해보세요

아래 하이퍼 링크들을 클릭해보세요

기회는 준비된 자에게 찾아온다.

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

댓글

티스토리툴바

속성	설명
href	이동할 페이지 또는 링크할URL을 연결합니다. href = "이동할 페이지 또는 링크할URL"
target	새 윈도우 창을 여는 방식을 설정합니다. target = "_blank \| _top \| _self \| _parent"

속성 값	설명
_blank	- 링크 내용이 새창이나 새탭에서 열린다.
_self	- target 속성의 기본값으로 링크가 있는 화면에서 열린다.
_parent	- 프레임을 사용했을 때 링크 내용을 부모 프레임에 표시한다.
_top	- 프레임을 사용했을 때 프레임에서 벗어나 링크 내용을 전체 화면으로 표시한다.

[HTML] HTML 마크업 요소 (링크&iframe)

아래 하이퍼링크를 클릭해보세요

아래 하이퍼 링크들을 클릭해보세요

기회는 준비된 자에게 찾아온다.

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

관련글

댓글

티스토리툴바