본문 바로가기

웹개발/HTML+CSS

HTML 하이퍼링크 삽입, <a> 태그 속성

<a> 태그는 하이퍼링크를 걸어주는 태그입니다.

 

링크는 모든 브라우저에서 다음과 같이 표시됩니다.

- 방문하지 않은 링크는 밑줄과 파란색

- 방문한 링크는 밑줄과 보라색

- 활성 링크는 밑줄과 빨간색

 

 

속성

href : 클릭했을 때 이동할 링크

target : 링크를 여는 방법

 

target 에는 다음과 같은 속성이 쓰입니다.

 

_self  현재 페이지, 기본값으로 생략 가능
_blank  새 탭으로 오픈
_parent 부모 페이지로 오픈
_top 최상위 페이지로 오픈
프레임이름 명시된 프레임에서 오픈

 

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

 

예를 들어 다음과 같이

href 에 네이버 주소를 입력하고 target에는 "_blank"를 입력하고 실행한 결과입니다.

 

 

방문하지 않아 파란색 밑줄로 

네이버로 이동이라는 글자에 하이퍼링크가 걸렸습니다.

 

클릭하여 네이버로 이동해보겠습니다.

 

 

_blank를 사용했기 때문에 새 창으로 네이버가 열리는 것을 볼 수 있습니다.

 

 

네이버를 방문하여

보라색 밑줄로 바뀐 모습입니다.

 

 

 <a href="https://www.naver.com"><img src="img/banner01.jpg" alt="링크가 걸린 그림"></a>

 

글자 뿐만 아니라 이미지에도 링크를 걸 수 있습니다.

 

 

 <p><a href="https://www.naver.com">네이버로이동</a></p>

 

뿐만 아니라

<a> 태그를 다른 태그 안에서 사용할 수도 있습니다.