Coding Note

[HTML] <a> 하이퍼링크 만들기! 본문

Web/HTML, CSS

[HTML] <a> 하이퍼링크 만들기!

jinnkim 2021. 12. 12. 23:30

 

웹 사이트는 여러 개의 HTML 페이지를 가지고 상호 연결하는 방식으로 구성된다!

그러므로 피드에서 소개할 <a> 태그는 매우 중요한 개념이다!

 

<a> 태그 속성

속성  
<href> 이동할 HTML 페이지의 URL 혹은 HTML 페이지 내 앵커 이름
<target> 링크에 연결된 HTML 페이지가 출력될 윈도우 이름 지정
<download> 링크가 클릭되면 href에 지정된 파일 다운로드됨

 

<target> 속성

target 속성에서 사용할 수 있는 값은 _blank, _self, _parent, _top 이 있다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Navigation</title>
</head>
<body>
<h3>링크 만들기</h3>
<hr>
<h4>포털사이트</h4>
<ul>
    <li><a href="https://www.google.com/" target="_blank">Google(새 윈도우, _blank)</a>
    <li><a href="https://www.google.com/" target="_parent">Google(현재 윈도우, _self)</a>
    <li><a href="https://www.google.com/" target="_self">Google(부모 윈도우, _parent)</a>
    <li><a href="https://www.google.com/" target="_top">Google(브라우저 윈도우, _top)</a>
</ul>
</body>
</html>

 

 

<download> 속성

 

download 속성은 모든 파일을 다운로드할 수 있는 링크를 만든다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>navgation</title>
</head>
<body>
<h3>Download 속성</h3>
<hr>
<a href="image/Cat.jpg" download>
    <img src="image/Cat.jpg" width="450" height="300">
    <br>고양이 이미지 다운로드
</a>
</body>
</html>

'Web > HTML, CSS' 카테고리의 다른 글

[CSS]FlexBox(Flexible Box Module)  (0) 2022.05.03
[HTML] 시맨틱태그  (0) 2022.05.02
[HTML] 중요한 표 만들기!  (0) 2021.12.12
[HTML] 리스트 만들어보자!  (0) 2021.12.10
[HTML, CSS] 폰트 적용하기!  (0) 2021.12.08
'Web/HTML, CSS' Related Articles more
Comments