본문 바로가기

HTML, CSS/HTML

[HTML] 링크

<a href="/abc.html">abc로 가기</a>
<a href="/">index로 가기</a>
<a href="./abc.html">abc로 가기</a>
<a href="./">index로 가기</a>
<a href="../abc.html">abc로 가기</a>
<a href="../">index로 가기</a>

/ (최상위 폴더),    ./(현재폴더),       ../(이전폴더)

index.html의 경우 생략이 가능하다.

 

위키백과

[1]처럼 클릭 시 그 페이지에서의 어떤 위치로 이동하려는 것은 어떻게 하는 걸까? 이는 URL 프레그먼트라고 한다.

<a href="#link">[1]</a>

<p id="link">abc</p>

id를 쓰고 아이디를 href로 받으면 이동이 가능하다. 단, id의 이름이 주소창에 들어가기 때문에 띄어쓰기는 불가능하다.

 

<a href="https://ko.wikipedia.org/wiki/" target=기능></a>

target 요소 : 이 하이퍼링크를 여는 위치를 정할 수 있다.

기능 : "_blank"(새 창으로 연다.), "_self"(현재창에서 넘어간다.) "아무거나"(아무거나라는 창에서 연다.)

아무거나라는 게 이해되지 않을 수 있다. 아래 예시를 들겠다.

<a href="https://ko.wikipedia.org/wiki/" target="wiki">위키백과</a>
<a href="https://namu.wiki/" target="wiki">나무위키</a>
<a href="https://www.wikipedia.org/" target="wiki">위키디피아</a>

위 코드는 한국어 위키백과, 나무위키, 위키디피아로 가는 3개의 링크가 있다. 하나를 누르면 target이 wiki인 새 창을 연다. 만약, 그 창을 끄지 않고 다른 링크를 누르면 새 창을 부르는 것이 아니라 wiki 창이 바뀌게 된다.

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

[HTML] 리스트  (0) 2023.08.29
[HTML] 텍스트 태그  (0) 2023.08.28
[HTML] 기본 템플릿(!)  (0) 2023.08.23
[HTML] 이미지 삽입  (0) 2023.08.23
[HTML] 제목 , 본문, 하이퍼 링크  (0) 2023.08.23