문서의 이전 판입니다!
목차
HTML Links
- description : HTML Links
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-04-09
Source of the article
HTML 이미지 맵을 사용하여, 이미지 위에서 클릭 가능한 영역을 만들 수 있습니다.
Image Maps
거의 모든 웹 페이지에서션
- email : shlim@repia.com
- lastupdate : 2021-04-09
</WRAP>
Source of the article
거의 모든 웹 페이지에서 링크(Links)를 찾을 수 있습니다. 링크를 통해 사용자는 페이지를 이동합니다.
HTML Links - Hyperlinks
HTML 링크는 하이퍼링크(Hyperlinks)입니다.
링크를 클릭하면 다른 문서로 이동할 수 있습니다.
링크 위로 마우스를 이동하면, 마우스 화살표가 작은 손 모양으로 바뀝니다.
Note:
링크는 텍스트일 필요가 없습니다. 링크는 이미지 또는 기타 HTML 요소가 될 수 있습니다!
HTML Links -Syntax
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로 스타일을 지정하여 다른 형태의 외관을 가질 수 있습니다.
HTML Links - The target Attribute
target 속성은 링크된 문서를 열 위치를 지정합니다.
target 속성은 다음 값 중 하나를 가질 수 있습니다.
_self- 기본값입니다. 클릭한 것과 동일한 창/탭에서 문서를 엽니다._blank- 새 창 또는 탭에서 문서를 엽니다._parent- 부모 프레임에서 문서를 엽니다._top- 창의 전체 본문으로 문서를 엽니다.
예제
target = "_ blank"를 사용하여 새 브라우저 창 또는 탭에서 링크된 문서를 엽니다.
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
Absolute URLs vs. Relative URLs
위의 두 예제는 href 속성에 절대 경로 (absolute URL)(전체 웹 주소)을 사용하고 있습니다.
로컬 링크local link(동일한 웹 사이트 내의 페이지에 대한 링크)는
**상대 경로(relative URL (“https://www“부분 제외)으로 지정됩니다.
예제
