Javascript-full-stack

링크 태그_웹사이트의 경로와 주소

내가갈게하와이 2022. 1. 11. 17:52

하이퍼 링크(Hyperlink)는 하이퍼 텍스트를 가능하게 만든 핵심 도구이다. 즉 주소링크를 말한다. 

 

링크 태그 <a>

하이퍼 링크의 역활을 수행한다.

<a> 태그는 태그와 컨텐츠, 속성으로 구성되어 있다. ex) <a 속성>컨텐츠</a>

속성(attributes)은 태그의 특징, 즉 태그에 대한 추가 정보의 모음이다.

모든 태그에 속성을 입력할 수 있지만 항상 필히는 아니다. 하지만 <a>태그는 필수이다.

<a>의 속성, href :  href는 Hypertext Reference의 약자로, <a>가 참조하는 웹사이트 주소(경로)를 값으로 가진다.

 

<a>의 속성, target : target 속성은 링크를 클릭했을 때 해당 페이지를 어디에서 열지 정하는 속성이다. 

-target의 대표적인 값은 _self_blank가 있다. _self는 현재 탭에서 링크를 열고 _blank는 새 탭에서 링크를 연다. 

 

<a href="https://www.naver.com/" target="_self">네이버</a>
<a href="https://www.naver.com/" target="_blank">네이버</a>

 

 

href의 값을 조금 더 보도록 하자. 우리가 주소의 값을 넣을 때 출발지부터 목적지까지 가는 경로를 포함시켜 URL의 값을 넣어줘야한다. 

URL(Uniform Resource Location)은 주소(Address)+ 경로(Path)를 합쳐서 생성이 된다.

 

HTML에서 URL은 매우 다양하게 쓰이며, 크게 절대 URL과 상대 URL로 나뉜다. 

  • 절대 URL은 접근하는 최초 시작점(주소)부터 경유한 경로를 모두 기록하여 리소스의 위치를 나타낸다.
  • 상대 URL은 현재 위치(기준점)를 기준으로 상대적인 경로를 기록하여 리소스의 위치를 나타낸다. 
절대 URL : https://edu.goorm.io/lecture/바로-실행해보면서-배우는.html
상대 URL : lecture/바로-실행해보면서-배우는.html

절대 URL : https://edu.goorm.io/lecture/바로-실행해보면서-배우는.html
상대 URL : 바로-실행해보면서-배우는.html

'Javascript-full-stack' 카테고리의 다른 글

입력 양식 태그  (0) 2022.01.14
멀티미디어 관련 태그  (0) 2022.01.11
글자와 관련된 태그  (0) 2022.01.10
제목과 본문 태그  (0) 2022.01.10
vs code으로 html 기본구조 자동완성하기  (0) 2022.01.10