HTML Links.
HTML 링크는 사용자가 인터넷 상의 다른 웹 페이지, 파일 또는 같은 페이지 내의 특정 섹션으로 이동할 수 있는 클릭 가능한 참조나 하이퍼링크를 생성하는 요소입니다.
이를 통해 사용자는 웹 사이트 내외의 다양한 리소스를 탐색할 수 있습니다.
링크 위로 마우스를 이동하면 마우스 화살표가 작은 손 모양으로 바뀝니다.
링크는 텍스트일 필요가 없습니다. 링크는 이미지나 다른 HTML 요소가 될 수 있습니다!
HTML Links - Syntax
HTML의 <a> 태그는 하이퍼링크를 생성하는 데 사용되는 태그입니다. 이 태그를 사용하여 텍스트 또는 이미지를 클릭 가능한 링크로 만들 수 있습니다.
href: 링크의 대상 URL을 지정합니다.
링크는 물론 CSS로 스타일을 지정하여 다른 모습을 볼 수 있습니다.
<a href="url">link text</a><!DOCTYPE html>
<html>
<body>
<h1>HTML Links</h1>
<p><a href="https://wooooozin.tistory.com//">wooooozin 티스토리 방문하기</a></p>
</body>
</html>HTML Links
기본적으로 링크는 모든 브라우저에서 다음과 같이 표시됩니다.
- 방문하지 않은 링크는 밑줄과 파란색으로 표시됩니다.
- 방문한 링크는 밑줄과 보라색으로 표시됩니다.
- 활성 링크는 밑줄과 빨간색으로 표시됩니다.
HTML Links - The target Attribute
HTML 링크(<a> 태그)의 대상(Target) 속성은 링크를 어떻게 열지를 지정하는 속성입니다.
대상 속성은 target으로 표시되며 다양한 값을 가질 수 있습니다. 일반적으로 사용되는 값은 다음과 같습니다:
_self: 기본값입니다. 링크를 현재 창 또는 프레임에서 엽니다.
_blank: 링크를 새 창 또는 탭에서 엽니다.
_parent: 링크를 부모 프레임에서 엽니다.
_top: 링크를 현재 창의 최상위 프레임에서 엽니다.
<!DOCTYPE html>
<html>
<body>
<h2>The target Attribute</h2>
<div>
<a href="https://www.daum.net/" target="_blank">_blank 다음 사이트 열기</a>
</div>
<div>
<a href="https://www.daum.net/" target="_self">_self 다음 사이트 열기</a>
</div>
<div>
<a href="https://www.daum.net/" target="_parent">_parent 다음 사이트 열기</a>
</div>
<div>
<a href="https://www.daum.net/" target="_top">_top 다음 사이트 열기</a>
</div>
</body>
</html>The target Attribute
URL 구조.
URL(Uniform Resource Locator)은 웹 리소스의 위치를 식별하는 주소 형식
프로토콜://도메인:포트/경로?쿼리스트링#프래그먼트
protocol://domain:port/경로/파일명.확장자?key=vlaue&key2=value2#hash프로토콜(Protocol)
프로토콜은 웹 브라우저가 서버와 통신할 때 사용할 통신 규약을 지정합니다.
가장 일반적인 프로토콜은 "http"와 "https"입니다. 기타 프로토콜로는 "ftp", "mailto", "file" 등이 있습니다.
도메인(Domain)
도메인은 웹 사이트의 주소를 식별하는 부분입니다.
도메인은 일반적으로 사이트의 이름을 나타내는 부분으로 구성되며,
예를 들어 www.daum.net 과 같이 도메인 이름이 있습니다.
포트(Port)
포트는 서버에서 사용하는 특정 네트워크 포트 번호를 나타냅니다.
웹 브라우저는 일반적으로 기본 HTTP 포트인 80번을 사용합니다.
포트 번호는 필요한 경우에만 지정되며, 생략될 수도 있습니다.
경로(Path)
경로는 웹 서버 내의 리소스 위치를 지정하는 부분입니다.
예를 들어, "/products/category1/item1"과 같이 경로를 지정할 수 있습니다.
경로는 웹 서버의 디렉토리 구조와 관련이 있습니다.
쿼리스트링(Query String)
쿼리스트링은 웹 서버로 전달되는 추가 매개변수를 지정하는 부분입니다.
쿼리스트링은 "?"로 시작하며, "key=value" 형식으로 매개변수와 값을 나타냅니다.
여러 개의 매개변수는 "&"로 구분될 수 있습니다.
프래그먼트(Fragment), hash
프래그먼트는 문서나 리소스 내에서 특정 부분을 가리키는 데 사용됩니다.
프래그먼트는 "#"로 시작하며, 해당 부분의 ID나 이름을 나타냅니다.
웹 페이지의 특정 섹션에 스크롤하거나, 문서 내부의 앵커를 찾는 데 사용됩니다.
Absolute URLs vs. Relative URLs
절대 URL(Absolute URL)과 상대 URL(Relative URL)은 웹 페이지에서 링크를 지정할 때 사용되는 두 가지 형식입니다.
절대 URL(Absolute URL)
절대경로는 URL을 참조하는 문서가 어느 컴퓨터에 있던 상관없이 항상 특정 자원을 불러올 수 있도록 작성하는 형식으로 URL 전체를 작성하는 방법
상대 URL(Relative URL)
상대 경로는 현재 작성하는 문서를 기준으로 자원의 경로를 지정
<!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>
Absolute URLs
Relative URLs
HTML Links - Use an Image as a Link
HTML에서 이미지를 링크로 사용하려면 <a> 태그 안에 <img> 태그를 넣어주면 됩니다.
이렇게 하면 이미지가 클릭 가능한 링크로 표시 됩니다.
<a href="http://www.example.com">
<img src="image.jpg" alt="이미지 대체 텍스트" style="width:42px;height:42px;">
</a><a href="https://www.youtube.com/">
<img src="https://images.unsplash.com/photo-1611162616475-46b635cb6868?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80"
alt="유튜브 바로가기" style="width:160px;height:90px;">
</a>
Link to an Email Address
<a> 태그에서 mailto 프로토콜은 사용자의 이메일 클라이언트를 미리 채워진 이메일 주소로 열 수 있는 링크를 만들수 있습니다.
<a href="mailto:someone@example.com">Send email</a>
Button as a Link
<!DOCTYPE html>
<html>
<body>
<h2>Button as a Links</h2>
<p>Click the button to go to the HTML tutorial.</p>
<button onclick="document.location='default.asp'">HTML Tutorial</button>
</body>
</html>Button as a Links
Click the button to go to the HTML tutorial.
Link Titles
정보는 마우스가 요소 위로 이동할 때 도구 설명 텍스트로 가장 자주 표시
<!DOCTYPE html>
<html lang="en-US">
<body>
<h2>Link Titles</h2>
<p>The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.</p>
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>
</body>
</html>Link Titles
The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.
Visit our HTML Tutorial
출처 : https://www.w3schools.com/html/html_links.asp
'FRONTEND > HTML' 카테고리의 다른 글
| HTML 튜토리얼 - HTML Favicon (0) | 2023.07.17 |
|---|---|
| HTML 튜토리얼 - HTML Images (0) | 2023.07.14 |
| HTML 튜토리얼 - CSS (0) | 2023.07.12 |
| HTML 튜토리얼 - HTML Colors (0) | 2023.07.11 |
| HTML 튜토리얼 - HTML 텍스트 서식 / 인용문 / 인용 요소 (0) | 2023.07.07 |