[HTML] <a> 태그 사용법(페이지 내 이동, 다른 페이지 이동 삽입 방법)

하나의 글에 여러 주제가 섞여있어서 각 주제 구간으로 이동 시키는 방법이나 외부 링크를 넣어야 하는 일들이 있죠?

오늘은 링크를  다루는 방법인 <a> 태그 사용법에 대해 설명하겠습니다.

<목차>

1. <a> 태그란?

2. 다른 페이지로 이동 시키는 방법 

3. 페이지 내 이동 시키는 방법

 

 

1. <a> 태그란?

 

 <a> 태그는 html에서 페이지 간의 이동을 시키고 싶을 때, 사용합니다.

목적지를 가리키는 href 속성과 같이 사용해야 합니다.

href 속성과 더불어 여러 속성이 존재합니다.

 

2.다른 페이지로 이동 시키는 방법

 

<a> 태그의 기본 형태는

<a href="링크 주소">클릭</a>

입니다. 

이렇게 작성하면 클릭이라는 글씨를 누르면 해당 링크 주소로 넘어가게 적용할 수 있습니다. 

예시로 티스토리에서 <a>태그를 사용하여 링크를 통해 네이버로 옮기는 방법을 보여드리겠습니다.

 

예시

1. 기본모드에서 내용을 작성하고 html모드로 변경

2. 코드작성

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

_blank는 연결한 웹 페이지를 새로운 탭에서 열기 위해서 작성하였고 target="_blank"를 사용하면 보안과 퍼포먼스가 떨어진다는 문제점이 있어서 문제를 해결해주기 위해 rel="noopener"을 사용한다.

 

3. 페이지 내 이동 시키는 방법 

 

기본 형태에서 링크만 바꿔주면 됩니다. 현재 페이지를 #으로 지칭하기 때문에 이를 이용해서 링크를 만듭니다.

<!-- 링크 태그 추가 #에 id 이름 추가 -->
<a href="#main">a</li>
<!-- 본인이 옮겨졌으면 하는 부분 태그 안에 id로 이름을 준다 -->
<li id="main">a</li>

제가 쓴 글을 예시로 들어 보여주면

이런 식으로 사용하시면 됩니다!