본문 바로가기

html-css

HTML 기초5 a태그

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태그

설명

<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