[HTML] HTML 링크

1. 링크

- 구문

• <a> : 하이퍼링크 정의

<a href="url">link text</a>

• href 특성을 이용해 링크 삽입

- 대상 속성

• target : 문서를 열 위치 설정
  - _self : 기본값. 문서를 클릭한 것과 동일한 창에서 연다.
  - _blank : 새 창에서 문서를 연다.
  - _parent : 상위 프레임에서 문서를 연다
  - _top : 창의 전체 본문에서 문서를 연다
  

- 이미지 사용

• 이미지를 사용하여면 <a> 태그 안에 <img> 태그를 넣는다

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

- 이메일 주소 링크

• mailto: href 를 사용해 메일 전송 링크를 만든다

<a href="mailto:[email protected]">Send email</a>

- 링크로 버튼

• Javascript를 사용해 특정 이벤트에서 발생하는 작업 수행

<button onclick="document.location='default.asp'">HTML Tutorial</button>

- 링크 타이틀

• title 특성을 사용해 링크의 내용 설명
• 링크에 마우스를 가져다대면 링크의 설명이 표시

<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>

2. 링크 색상

- 링크 색상

• 기본적인 링크 색상 표기
  - 방문하지 않은 링크는 밑줄과 파란색으로 표기
  - 방문한 링크는 밑줄과 보라색으로 표기
  - 활성 링크는 밑줄과 빨간색으로 표시
• CSS를 사용하여 링크 색상 상태 변경 가능
  - a:link : 방문하지 않은 링크
  - a:visited : 방문한 링크
  - a:hover : 마우스를 올렸을 때
  - a:active : 활성 링크

<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>

- 링크 버튼

• CSS를 사용하여 링크의 스타일을 버튼으로 만들 수 있다.

<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>

3. 링크 북마크

• 북마크 생성
  - 책갈피를 생성한 후 링크 추가
  - 링크를 클릭하면 페이지가 책갈피를 사용하여 이동
• id : 책갈피 생성 특성

<h2 id="C4">Chapter 4</h2>

• 페이지 내에서 책갈피에 대한 링크 추가법

<a href="#C4">Jump to Chapter 4</a>

• 다른 페이지에서 책갈피 링크 추가법

<a href="html_demo.html#C4">Jump to Chapter 4</a>

4. Iframe

- Iframe 구문

• <IFrame> : inline frame 지정
  -> inline frmae은 html 문서에 다른 문서를 포함하는데 사용

<iframe src="url" title="description"></iframe>

- 높이 및 너비 설정

• height, width 특성을 사용하여 크기 지정
  - 픽셀 단위로 지정

<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

• style, height, width 특성을 추가해서 CSS 및 속성 사용 가능

<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>

- 테두리 제거

• style, border 특성을 이용해서 테두리 제거

<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>

• CSS를 사용해 Iframe 테두리의 스타일 변경 가능

<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe>

- 링크 대상

• targer, name 특성을 이용해 iframe의 링크 표시 가능

<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>