[HTML] 05. Hyperlink

Front-End/HTML

[HTML] 05. Hyperlink

Bigone17 2021. 11. 15. 16:38

🟡 1. hyperlink

- hyperlink는 html link라고도 불리고, hyperlink를 눌렀을 시 작성자가 설명하고자 하는 내용이 있는 웹주소로 이동하게 됩니다. 태그로는 a 태그를 사용하고 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML hyperlink</title>
  </head>
  <body>
    <a href="https://www.naver.com">네이버 홈페이지 고고</a>
  </body>
</html>

네이버 홈페이지 고고

🟡 1.1 href 속성(attribute)

- href 속성은 이동하고자 하는 정보나 파일의 위치(경로)를 지정해줍니다. 경로는 웹사이트의 주소 일 수도 있고, 내 컴퓨터 안에 파일 경로 일 수도 있습니다.

🟡 1.1.1 디렉토리(Directory)

- 디렉토리는 컴퓨팅에서 파일을 분류하기 위해 사용하는 이름 공간이라고 위키백과에서는 설명하고 있는데, 쉽게 말해서 폴더라고 생각하면 됩니다. 조금 TMI를 하자면 MS-DOS, UNIX와 같은 CLI 환경에서는 디렉토리라고 표현하고, 윈도우, OS와 같은 GUI 환경에서는 폴더라고 표현합니다.

	설명	명령문
루트 디렉토리	파일 시스템 계층 구조 상의 최상위 디렉토리	- Unix : / - Windows : C:\
홈 디렉토리	시스템의 사용자에게 할당된 개별 디렉토리	- Unix : /Users/{사용자명} - Windows : C:\Users\{사용자명}
작업 디렉토리	작업중인 파일의 위치한 디렉토리	./
부모 디렉토리	작업 디렉토리의 부모 디렉토리	../

🟡 1.1.2 파일 경로 (File Path)

- 파일 경로는 파일 시스템에서 파일의 위치를 나타내는 방법입니다. 경로에는 절대경로와 상대경로가 있습니다.

	설명	예시
절대경로(Absolute path)	현재 작업하는 디렉토리와는 상관없이 특정파일의 절대 위치를 가리킵니다.	- https://www.naver.com - D:\GIT\Blog\HTML\project01\1.html
상대경로(Relative path)	현재 작업하는 디렉터리를 기준으로 특적 파일의 상대적인 위치를 가리킵니다.	- ./1.html - ../js/1.js

현재 작업하는 파일이 1.html이라고 가정합니다. (1.html의 절대 경로 : D:\GIT\Blog\HTML\project01\1.html)	⚫ 1_1.js 파일 경로 구하기	⚫ 2.css 파일 경로 구하기
	🟢 절대 경로 : D:\GIT\Blog\HTML\project01\1_1.js 🟣 상대 경로 : ./1_1.js	🟢 절대 경로 : D:\GIT\Blog\HTML\project02\css\2.css 🟣 상대 경로 : ../project02/css/2.css
	⚫ 1.js 파일 경로 구하기	⚫ 2.json 파일 경로 구하기
	🟢 절대 경로 : D:\GIT\Blog\HTML\project01\js\1.js 🟣 상대 경로 : ./js/1.js	🟢 절대 경로 : D:\GIT\Blog\HTML\project02\json\2.json 🟣 상대 경로 : ../project02/json/2.json

TMI : 사용하는 tool은 vscode이고, 사진에 나와있는 아이콘들은 Material Icon Theme입니다 ㅎㅎ

- a 태그의 href 속성에는 아래 표와 같은 값을 사용할 수 있다.

Value	설명	예시
절대 url	웹사이트 URL 및 파일 경로	<a href="https:www.naver.com"> 네이버 URL</a>
상대 url	작성중인 파일 위치를 기준으로한 대상의 URL	<a href="1_1.js">1_1js파일</a>
fragment identifier	페이지 내의 특정 id를 갖는 요소의 링크	<a href="#bottom">하단으로</a>
메일	메일 보내기	<a href="mailto:people@example.com?Subject=Hello Stranger">메일보내기</a>
script	스크립트 실행	<a href="javascript:alert('Hi!');">알럿띄우기</a>

<!DOCTYPE html>
<html>
  <body>
    <a href="https:www.naver.com">네이버 URL</a><br>
    <a href="1_1.js">1_1js파일</a><br>
    <a href="#bottom">하단으로</a><br>
    <a href="mailto:people@example.com?Subject=Hello Stranger">메일보내기</a><br>
    <a href="javascript:alert('Hi!');">알럿띄우기</a>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p id="bottom">하단입니다!</p>
  </body>
</html>

소스 복붙 해서 실행해보세요~ :)

🟡 1.2 target 속성

- a 태그 안에 href 속성 이외에 target이라는 속성을 지정할 수 있는데, target 속성은 a 태그 클릭 시 브라우저를 어떻게 열지 지정합니다.

value	설명
_self	링크를 클릭 시 현재 브라우저에서 오픈을 합니다.(기본값)
_blank	링크를 클릭 시 새로운 브라우저에서 오픈을 합니다.

<!DOCTYPE html>
<html>
  <body>
    <a href="https://daily-life-of-bigone.tistory.com/12" target="_self">지금 창에서 열기</a><br>
    <a href="https://daily-life-of-bigone.tistory.com/12" target="_blank" rel="noopener noreferrer">새로운 창에서 열기</a>
  </body>
</html>

- _black를 이용해서 새 탭으로 링크를 오픈했을 때 편리함은 있지만 보안에 취약하여 Tabnabbing 피싱 공격을 당할 수도 있으므로, rel="noopener noreferrer"도 함께 사용하는 걸 권장합니다! 아래 사이트를 참고하시면 더 좋습니다 :)
❗https://tech.lezhin.com/2017/06/12/tabnabbing

긴 글 읽어주셔서 감사합니다 :)
틀린 내용이 있거나, 덧붙일 내용이 있다면 언제든지 댓글 달아주세요!
제 글이 조금이나마 읽은 신 분들에게 도움이 되도록 노력하겠습니다
다음 편에 봬요~

728x90

저작자표시

'Front-End > HTML' 카테고리의 다른 글

[HTML] 07. 이미지 & 비디오 & 음악 (2)	2021.11.29
[HTML] 06. LIST & TABLE (1)	2021.11.17
[HTML] 04. 텍스트 관련 태그2 (0)	2021.11.12
[HTML] 03. 텍스트 관련 태그 (0)	2021.11.10
[HTML] 02. 기본 Tag (2)	2021.11.08

현재글[HTML] 05. Hyperlink

250x250

tag, html button, 코테, rn 화면 회전 금지, Next.js, Sentry, NextJS, 코딩테스트, 자바스크립트, jsonServer, 프로그래머스, JavaScript, 자바스크립트 객체, HTML, json-server, JS, rn 화면 회전, programmers, rn 세모 모드 고정, HTML FORM,

Today :
Yesterday :

운좋개