I. a 태그
anchor. hyperlink, 즉 특정 데이터에 대한 clickable link를 정의한다. 이 때, destination은 href attribute를 이용해 정의할 수 있다.
href attribute는 value로 절대 경로 URL, 상대 경로 URL, fragment, other protocols, script를 허용한다.
<body>
<h1 id="top">엄청나게 재밌는 소설</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores quas impedit doloribus suscipit inventore commodi a nemo nulla est, ut voluptates sunt, tempore iusto voluptatum adipisci asperiores ratione minima laborum.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui repellat rerum similique, nemo reprehenderit, eveniet velit modi laborum nihil sunt repudiandae sapiente. Enim eaque repellendus, laudantium minus magnam doloribus saepe?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et velit officiis quod facere saepe, debitis unde voluptas ipsa eaque illo! Inventore pariatur incidunt nulla atque sint ut, cum ipsa autem?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, nesciunt eum odit fugiat ratione ducimus ipsam iusto minus placeat, consequuntur reprehenderit pariatur unde vero nisi aut labore quia facilis sint!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad repellendus id excepturi sed harum, nam molestias nisi adipisci ea dolorem optio eligendi sequi similique odio eaque corrupti natus nesciunt voluptas!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad architecto sit quia cupiditate laboriosam id veniam, repellendus eaque aperiam voluptatem velit fugit totam atque necessitatibus libero at, provident rem dolorum.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. In, corrupti culpa dignissimos dolor ratione corporis ab ipsum et eos animi ad harum praesentium! Repellat est nisi placeat repudiandae, autem voluptate!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam repellat porro cumque eaque pariatur eveniet nihil illo, impedit officia ut explicabo atque tenetur eos laborum laudantium sunt autem reprehenderit vero!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem pariatur nisi sequi consequatur obcaecati repellat vitae, praesentium ratione eos magnam impedit minus voluptatibus alias optio maxime quod! Libero, eius nulla!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores quas impedit doloribus suscipit inventore commodi a nemo nulla est, ut voluptates sunt, tempore iusto voluptatum adipisci asperiores ratione minima laborum.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui repellat rerum similique, nemo reprehenderit, eveniet velit modi laborum nihil sunt repudiandae sapiente. Enim eaque repellendus, laudantium minus magnam doloribus saepe?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et velit officiis quod facere saepe, debitis unde voluptas ipsa eaque illo! Inventore pariatur incidunt nulla atque sint ut, cum ipsa autem?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, nesciunt eum odit fugiat ratione ducimus ipsam iusto minus placeat, consequuntur reprehenderit pariatur unde vero nisi aut labore quia facilis sint!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad repellendus id excepturi sed harum, nam molestias nisi adipisci ea dolorem optio eligendi sequi similique odio eaque corrupti natus nesciunt voluptas!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad architecto sit quia cupiditate laboriosam id veniam, repellendus eaque aperiam voluptatem velit fugit totam atque necessitatibus libero at, provident rem dolorum.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. In, corrupti culpa dignissimos dolor ratione corporis ab ipsum et eos animi ad harum praesentium! Repellat est nisi placeat repudiandae, autem voluptate!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam repellat porro cumque eaque pariatur eveniet nihil illo, impedit officia ut explicabo atque tenetur eos laborum laudantium sunt autem reprehenderit vero!</p>
<a href="http://google.com">절대 경로</a><br>
<a href="01.html">상대 경로</a><br>
<a href="#top">fragment</a><br>
<a href="mailto:mathlife12345@gmail.com?Subject=메일 제목">메일 쓰기</a><br>
<a href="javascript:alert('Hello');">코드 실행</a>
</body>
target attribute
target attribute를 이용하면 hyperlink를 클릭했을 때 웹 페이지를 여는 방법을 지정할 수도 있다.
<body>
<a href="http://www.google.com">이 페이지에서 열기</a><br>
<a href="http://www.google.com" target="_blank" rel="noopener noreferrer">새 페이지에서 열기</a>
</body>
target=”_blank” 를 사용하는 경우 보안 취약점이 존재하는 것으로 알려져 있다. 이를 예방하기 위해 rel=”nooperner noreferrer” 를 같이 추가하는 것이 권장된다.
Reference
[1] https://poiemaweb.com/html5-tag-link
Uploaded by N2T
'Frontend > HTML' 카테고리의 다른 글
| 06. HTML5 이미지, 오디오, 비디오 (0) | 2022.08.27 |
|---|---|
| 05. HTML5 List & Table (0) | 2022.08.26 |
| 03. HTML5 텍스트 관련 태그 (0) | 2022.08.26 |
| 02. HTML5 기본 태그 (0) | 2022.08.26 |
| 01. HTML5 기본 문법 (0) | 2022.08.25 |