-
HTML Linkweb coding/HTML 2021. 3. 17. 02:52
HTML Link
HTML Link
- 하이퍼링크 기능
- 형태 : <a href=" URL ">...</a>
<a href="https://www-cozy.tistory.com">www_cozy</a>
practice
HTML Link basic 더보기<html>
<body>
<h3>Link Syntax</h3>
<p>Lorem
<a href="https://www.daum.net">ipsum</a>
<a href="https://www.naver.com">dolor</a>
sit amet consectetur adipisicing elit.
</p>
<hr>
<h3>Link : target attribute</h3>
<a href="https://www.google.com" target="_self">google_self</a>
<a href="https://www.w3schools.com" target="_blank">wc3schools_blank</a>
<hr>
<h3>Link : relative URLs</h3>
<a href="color-ex1.html">color</a>
<hr>
<h3>Link : style </h3>
<a href="https://www.google.com" style="text-decoration: underline;">google_underline</a>
<a href="https://www.google.com" style="text-decoration: none;">google_none</a>
<a href="https://www.google.com" style="text-decoration: line-through;">google_line-through</a>
<hr>
<h3>Link : image</h3>
<a href="https://www.google.com">
<img src="제니.jpg" alt="">
</a>
</body>
</html>
Result
HTML link -result image
Link Syntax
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Link : target attribute
* target="_self"
- 기본값, 현재 창에서 보여줌
* target="_blank"
- 새로운 창에서 보여줌
Link : relative URLs
* <a href="color-ex1.html">color</a>
같은 폴더 또는 현재 웹사이트 html 폴더 경로로 이동
※ tistory 내에선 bookmark 기능으로 대체- id 어트리뷰트 사용함 ]
Link : style
google_underline google_none google_line-through
- 일반 태그에 쓰는 것처럼 attribute style : text-decoration을 적용시킨 모습
- CSS <style>을 사용할 경우 button, color(text) 등 더 다양한 기능으로 사용 가능
Link : image
✔ color-ex1.html
Lorem, ipsum dolor.
Lorem, ipsum dolor.
Lorem, ipsum dolor.
Lorem, ipsum dolor.
Lorem, ipsum dolor.
+ 전부터 궁금했던 기능 bookmark-
- 이동하게 되는 위치설정 문법
<h2 id="C4">Chapter 4</h2>
- 원하는 위치로 이동을 위한 링크 문법
<a href="#C4">Jump to Chapter 4</a>
링크 모두 검사 완료 - 문제 x
북마크 확인 완료 - 문제 x
오늘도 뿌듯 😆
'web coding > HTML' 카테고리의 다른 글
HTML CSS ( internal & external ) (0) 2021.03.16 HTML attribute (style) (0) 2021.03.15 HTML attribute (basic) (0) 2021.03.13 HTML element (basic) (0) 2021.03.12 HTML (1) 2021.03.12