HTML Links

• HTML Links

거의 모든 웹 페이지에서 링크(Links)를 찾을 수 있습니다. 링크를 통해 사용자는 페이지를 이동합니다.

HTML 링크는 하이퍼링크(Hyperlinks)입니다.

링크를 클릭하면 다른 문서로 이동할 수 있습니다.

링크 위로 마우스를 이동하면, 마우스 화살표가 작은 손 모양으로 바뀝니다.

Note:
링크는 텍스트일 필요가 없습니다. 링크는 이미지 또는 기타 HTML 요소가 될 수 있습니다!

HTML <a> 태그는 하이퍼링크를 정의합니다. 구문은 다음과 같습니다.

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

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

link 텍스트는 독자가 볼 수 있는 부분입니다.

링크 텍스트를 클릭하면 독자는 지정된 URL 주소로 이동합니다.

이 예제는 W3Schools.com에 대한 링크를 만드는 방법을 보여줍니다.

<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>

기본적으로, 링크는 모든 브라우저에서 다음과 같이 나타납니다.

• 방문하지 않은 링크(unvisited link)는 밑줄이 있고 blue 색상입니다.
• 방문한 링크(visited link)는 밑줄이 있고 purple 색상입니다.
• 활성 링크(acitve link)는 밑줄이 있고 red 색상입니다.

Tip: 링크는 CSS로 스타일을 지정하여 다른 형태의 외관을 가질 수 있습니다.

target 속성은 링크된 문서를 열 위치를 지정합니다.

target 속성은 다음 값 중 하나를 가질 수 있습니다.

• _self- 기본값입니다. 클릭한 것과 동일한 창/탭에서 문서를 엽니다.
• _blank - 새 창 또는 탭에서 문서를 엽니다.
• _parent - 부모 프레임에서 문서를 엽니다.
• _top - 창의 전체 본문으로 문서를 엽니다.

target = "_ blank"를 사용하여 새 브라우저 창 또는 탭에서 링크된 문서를 엽니다.

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

위의 두 예제는 href 속성에 절대 경로 (absolute URL)(전체 웹 주소)을 사용하고 있습니다.

로컬 링크^{local link}(동일한 웹 사이트 내의 페이지에 대한 링크)는
상대 경로(relative URL)(“https://www“부분 제외)으로 지정됩니다.

<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
 
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>

이미지를 링크로 사용하려면 <a> 태그 안에 <img> 태그를 넣으십시오.

    <h2>Image as a Link</h2>
    <p>The image below is a link. Try to click on it.</p>
    <a href="https://www.w3schools.com/html/default.asp"><img src="smiley.gif" alt="HTML tutorial" style="width:42px; height:42px;"></a>

사용자의 이메일 프로그램을 여는 링크를 생성하려면 (새 이메일을 보낼 수 있도록)
href 속성 내에서 mailto:를 사용하십시오.

<a href="mailto:someone@example.com">Send email</a>

HTML 버튼을 링크로 사용하려면, JavaScript 코드를 추가해야 합니다.

JavaScript를 사용하면 버튼 클릭과 같은 특정 이벤트에서 발생하는 작업을 지정할 수 있습니다.

<button onclick="document.location='https://www.w3schools.com/html/default.asp'">HTML Tutorial</button>

title 속성은 요소에 대한 추가 정보를 지정합니다.
대부분의 경우, 정보는 마우스가 요소 위로 이동할 때 툴팁(tooltip) 텍스트로 표시됩니다.

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

전체 URL을 사용하여 웹 페이지에 연결:

<a href="https://www.w3schools.com/html/default.asp">HTML Tutorial</a>

현재 웹 사이트의 html 폴더에 있는 페이지에 링크:

<a href="/html/default.asp">HTML tutorial</a>

현재 페이지와 같은 폴더에 있는 페이지에 링크 :

<a href="default.asp">HTML tutorial</a>

• <a> 요소를 사용하여 링크를 정의합니다.
• href 속성을 사용하여 링크 주소를 정의합니다.
• target 속성을 사용하여 링크된 문서를 열 위치를 정의합니다.
• 이미지를 링크로 사용하려면 <a> 내부에 <img> 요소를 사용하세요.
• 사용자의 이메일 프로그램을 여는 링크를 만들려면 href 속성 내에서 mailto: 체계를 사용하세요.

링크를 클릭했을 때 이전 창이 없을 경우 새탭을 생성하고
있을 경우 포커스를 이동 시킴

자바스크립트를 사용하면 효율적임

<input type="button" value="Open window, focus" onclick="openWin(true)" />
<input type="button" value="Open window, nofocus" onclick="openWin()" />
 
function openWin(doFocus)
{
    myWindow=window.open('','mywindow');
    myWindow.document.write("<p>This is 'myWindow'</p>");
    if(doFocus)
        myWindow.focus();
}

• https://forums.caspio.com/topic/11400-open-link-in-new-tab-or-focus-to-it-if-already-open/
• https://jsfiddle.net/jaraics/pEG3j/