링크는 HTML에서 a 요소를 사용하여 정의됩니다. 사용 방법을 보여드리기 전에 하이퍼링크에 대한 몇 가지 일반적인 팁을 알려드리겠습니다. 좋은 링크 텍스트에 대해 생각해 보세요. 평범한 뒷부분은 일반적으로 누구에게도 도움이 되지 않습니다. (외부 페이지에서 방문한 방문자는 일반적으로 백이 무엇을 의미하는지 모릅니다). 설명적인 링크 텍스트를 선택하세요.
하이퍼링크는 HTML에서 항상 동일한 원칙을 따릅니다.
<a href="videos.html">현재 동영상</a>
href 속성은 a 요소에 할당됩니다. 이 href는 차례로 링크 대상을 값으로 기대합니다. 이전 예제에서는 videos.html 파일을 참조했습니다. 이 파일은 하이퍼링크가 정의된 HTML 파일과 동일한 디렉토리에 있습니다.
하이퍼링크를 정의할 때 그래픽 통합과 관련하여 제시된 규칙도 적용됩니다.
참고로 프로젝트 내부 링크만 정의할 수 있는 것은 아닙니다. 하이퍼링크는 외부 파일 및 도메인으로 설정할 수도 있습니다.
<a href="http://www.psd-tutorials.de">PSD-Tutorials.de</a>
여는 <a>와 닫는 <a> 사이의 텍스트는 궁극적으로 링크 텍스트입니다. 기본적으로 이 텍스트는 브라우저에서 밑줄이 그어져 있습니다.
대상 창 지정하기
하이퍼링크를 클릭하면 링크 대상이 현재 브라우저 창에서 열립니다. 이것은 일반적으로 완벽하게 정상입니다. 그러나 예를 들어 외부 도메인에 대한 링크를 설정했을 가능성이 있습니다. 방문자가 이 링크를 클릭하면 링크 타깃이 새 브라우저 창이나 탭에서 열립니다. 이 변형의 장점은 웹사이트가 백그라운드에서 계속 열려 있다는 것입니다.
하지만 방문자가 금방 짜증을 낼 수 있으므로 사이트의 모든 하이퍼링크를 외부 창에서 열어서는 안 됩니다.a 요소의 대상 속성을 사용하여 각 링크 대상이 열릴 대상 창을 결정할 수 있습니다. HTML은 처음에 세 가지 표준 타겟 값을 제공합니다.
- _공백 - 링크 타깃이 새 브라우저 창에 표시됩니다.
- _self - 현재 브라우저 창에서 링크 대상을 엽니다.
- 부모 - 여기에서 프레임을 벗어날 수 있습니다. (HTML5에서는 프레임이 지원되지 않습니다. 어쨌든 오늘날 더 나은 대안이 있으므로 이 기술은 더 이상 사용하지 않아야 합니다. 프레임에 대해 자세히 알아보려면 http://de.wikipedia.org/wiki/Frame_(HTML) 에서 원하는 내용을 찾을 수 있습니다.)
- _top - 이 역시 프레임과 관련하여 사용됩니다. 프레임 세트 외부에서 링크 대상을 여는 데 사용할 수 있습니다.
다음은 타겟 속성을 사용하는 방법의 예시입니다:
<a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.com</a>
이 경우 링크 타깃 http://www.psd-tutorials.de 새 창/탭에서 열립니다. 예약된 이름 _blank 대신 halligalli와 같은 판타지 이름을 사용하는 경우에도 동일한 효과를 얻을 수 있습니다. 그러나 대상을 사용하는 경우 실제로는 예약된 이름 중 하나를 사용하는 것이 좋습니다.
참조 기준 결정
HTML 파일의 헤드 영역에 소위 참조 기반을 정의할 수 있습니다. 이러한 링크 기반은 모든 링크 타겟이 특정 브라우저 창에 표시되도록 합니다. 물론 이것은 주로 프레임과 관련하여 관심이 있습니다.
그러나 예를 들어 _blank를 사용하여 모든 링크를 새 브라우저 창에 표시하려는 경우에도 실용적입니다. 링크 목록을 상상해 보세요. 링크 타깃이 항상 새 창을 열어야 한다면 다음과 같이 보일 것입니다.
<a href="http://www.facebook.com/psdtutorials" target="_blank">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt" target="_blank">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk" target="_blank">http://www.facebook.com/HowToNetzwerk</a>
따라서 각 정의에 대상 속성을 할당해야 합니다.
보시다시피 이것은 특별히 효율적이지 않습니다. 게다가 몇 달 후에 링크 타깃을 새 창에서 열지 않기로 결정한다면 효율성은 더욱 떨어질 것입니다. 그러면 모든 링크의 타겟 속성을 조정해야 합니다. 이는 앞서 언급한 타겟 창 베이스를 통해 방지할 수 있습니다. 이는 head 내의 기본 요소를 통해 정의됩니다. 베이스 요소에는 원하는 값의 타깃 속성이 할당됩니다. 다음은 그 예시입니다:
<!DOCTYPE html> <html lang="en"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> <base target="_blank"> </head> <body> <a href="http://www.facebook.com/psdtutorials">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk">http://www.facebook.com/HowToNetzwerk</a> </body> </html>
이렇게 하면 많은 타이핑을 줄일 수 있습니다.
앵커 정의하기
다른 파일에 대한 하이퍼링크를 설정하는 방법을 이미 살펴보았습니다. 하지만 HTML 파일 내에 소위 앵커를 정의할 수도 있습니다. 그런 다음 이러한 앵커에 대한 참조를 설정할 수 있습니다. 이 방법은 예를 들어 광범위한 페이지에 유용합니다. 이를 통해 문서 시작 부분에 목차를 정의할 수 있으며, 방문자는 브라우저 창을 스크롤하지 않고도 관련 섹션으로 이동하는 데 사용할 수 있습니다.
앵커는 a 요소를 통해 만들어집니다. 그러나 앵커 정의에는 href 속성이 아닌 name 속성이 할당됩니다.
<a name="page start">콘텐츠</a> <a name="chapter1">콘텐츠 1장</a> <p>여기에 많은 텍스트가 이어집니다.</p> <a name="chapter2">콘텐츠 2장</a> <p>여기에 많은 텍스트가 이어집니다.</p>
앵커 이름은 자유롭게 지정할 수 있습니다. 그러나 가능한 한 짧게 작성하고 소문자만 사용하며 특수 문자는 피하는 것이 좋습니다.
앵커를 참조하려면 이 튜토리얼의 시작 부분에 표시된 것처럼 일반 하이퍼링크를 정의합니다.
<a href="#페이지 시작">페이지 상단으로</a>
앵커 이름은 href 속성에 값으로 할당됩니다. 그러나 앵커 이름 앞에 해시 기호가 오는 것이 중요합니다.
파일 전체에 걸쳐 앵커에 대한 참조를 설정할 수도 있습니다. 다음 예에서는 실제 HTML 파일과 같은 디렉터리에 news.htm 파일이 있다고 가정합니다. news.htm 내에 앵커 페이지 시작이 정의되어 있습니다. 이를 참조하기 위해 대상 파일 이름(news.htm) 뒤에 해시 기호가 표시됩니다. 그 뒤에 앵커 이름이 표시됩니다.
<a href="news.htm#페이지 시작">페이지 상단으로</a>
이렇게 하면 파일에서 앵커에 대한 참조를 설정하는 것이 얼마나 쉬운지 알 수 있습니다.
