HTML / (13) 링크 - 하이퍼링크

▶ 링크는 거의 모든 웹 페이지를 찾을 수 있다.

▶ 링크를 클릭하여 사용자가 A 페이지에서 B 페이지로 이동할 수 있다.

 

■ HTML 링크 - 하이퍼링크

▶ HTML 링크는 하이퍼링크다.

▶ 링크를 클릭하여 다른 문서로 이동한다.

▶ 링크 위에 마우스를 이동하면, 마우스 화살표가 작은 손으로 변경된다.

 

■ HTML 링크 - 구문

▶ <a> 태그는 하이퍼링클르 정의한다.

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

▶ <a> 요소의 가장 중요한 속성은 목적지 링크를 나타내는 "href" 속성이다.

▶ 예시의 "link text" 는 사용자에게 보이는 부분인다.

▶ 예시의 "link text" 를 클릭하면, 지정된 URL 주소로 보낸다.

<a href="naver.com">네이버</a>

※ 링크는 CSS 로 스타일을 지정하여 다른 모습으로 할 수 있다.

 

■ HTML 링크 - "target" 속성

▶ 기본적으로 연결된 페이지는 현재 Browser 창에서 표시된다.

▶ 변경하고 싶으면 링크의 다른 "target"을 지정해야 한다.

▶ "target" 속성은 연결된 문서를 열 위치를 지정한다.

▶ "target" 속성은 아래에 값 중 하나를 사용할 수 있다.

▷ "_self" : (기본). 클릭한 것과 동일한 창/탭에 문서를 연다

▷ "_blank" : 새로운 창 혹은 탭에 문서를 연다

▷ "_parent" : 상위 프레임에서 문서를 연다

▷ "_top" : 창 전체에서 문서를 연다

<a href="naver.com" target="_self"> 네이버 </a><br>
<a href="naver.com" target="_blank"> 네이버 </a><br>
<a href="naver.com" target="_parent"> 네이버 </a><br>
<a href="naver.com" target="_top"> 네이버 </a>

 

■ 절대 경로 URL 과 상대 경로 URL

▶ 위의 두 예시는 모두 "href" 속성에 절대 경로 URL (전체 웹 주소)를 사용한다.

▶ 로컬 링크 (같은 웹 사이트 내의 페이지에 대한 링크)는 상대 경로 URL("https://www" 부분 제외)로 지정된다.

<h2>절대 경로 URLs</h2>
<p><a href="https://www.naver.com/">네이버</a></p>
<p><a href="https://www.google.com/">구글</a></p>

<!-- 상대 경로는 내 컴퓨터에서 찾기 때문에 열리지 않을 수 있다 -->
<h2>상대 경로 URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>