HTML에서 a태그 사용방법
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>링크타겟</title>
</head>
<body>
<!-- a태그의 기본값은 _self로 생략가능 -->
<a href="https://www.google.com" target="_self">Google로 이동</a>
<br/><br/>
<!-- a태그의 _blank는 새로운 탭을 생성 후 이동 시켜준다. -->
<a href="https://www.google.com" target="_blank">새창에서 Google로 이동</a>
<br/><br/>
<!-- 상대경로 -->
<a href="./test.html" target="_blank">test.html로 이동</a>
<br/><br/>
<!-- 절대경로 -->
<a href="c:/폴더/test.html" target="_blank">test.html로 이동</a>
</body>
</html>
실행결과
설명
<a> | 하이퍼링크를 걸어주는 태그 |
href, target | href 속성은 클릭시 이동할 주소(링크)를 받음 target 속성 _self : 현재 탭에서 페이지 이동 _target : 새로운 탭에서 페이지 이동 _top : 현재 페이지의 최상단으로 시점 이동 |
상대경로 | 자기 자신이 존재하는 위치를 기준으로 정해서 경로 탐색 내 컴퓨터/내문서/사진/사진.jpg ex) 위 경로에서 현재 사용자가 사진 폴더에 있을 경우 상대경로로 사진을 찾기 경로 : ./사진.jpg 현재폴더 : ./ = 사진 상위폴더 : ../ = 내문서 최상단폴더 : / = 내컴퓨터 |
절대경로 | 디렉토리(/)를 기준으로 경로 탐색하는 방식 ex) 내 컴퓨터/내문서/사진/사진.jpg 위 경로에서 현재 사용자가 사진 폴더에 있을 경우 절대경로로 사진을 찾기 경로 : 내컴퓨터/내문서/사진/사진.jpg |
'html-css' 카테고리의 다른 글
HTML 기초7 img, video 태그 (0) | 2022.01.28 |
---|---|
HTML 기초6 ul, ol, li태그 (0) | 2022.01.27 |
HTML 기초4 공백, <, >, &, © 특수문자 (0) | 2022.01.26 |
HTML 기초3 p, br, hr 태그 (0) | 2022.01.26 |
HTML 기초2 h#태그 (0) | 2022.01.26 |