비주얼스튜디오 코드(Visual Studio Code)의 하이퍼링크

※하이퍼 링크란 다른 페이지나 사이트로 연결하는 링크(문자 또는 이미지)를 말합니다.

A태그를 사용하며 '<a href="사이트 또는 이동할 문서의 위치"> 링크에 사용될 문자 또는 이미지 </a>' 형식으로 사용합니다. 텍스트, 이미지, 버튼 등의 형태에 링크를 걸어 사용할 수 있습니다.

목차

1. A태그의 속성

2. A태그의 사용

3. A태그의 속성 값 변경

 

1. A 태그의 속성

@<a>

<a>는 'anchor', 즉, '닻'이라는 뜻입니다.

우리는 보통 인터넷 서핑, 웹서핑이라는 말을 많이 사용하는데 인터넷, 정보의 바다를 항해한다고도 표현합니다.

인터넷에서 정보의 바다를 항해하는 것은 대부분 링크를 클릭함으로써 이루어집니다.

그런 의미에서 html에서 링크를 표현하기 위해서 'anchor'의 약자인 <a> 태그를 사용합니다.

 

@href

링크를 클릭했을 때 이동할 페이지를 href 속성에 표현합니다.

href는 'Hypertext Reference'의 약자입니다.

 

@target

링크를 클릭했을 때 이동할 페이지를 띄울 위치를 지정해 줍니다.

 target의 속성은

 

_blank : 새 창이나 탭에 링크된 페이지를 보여준다.

_self : 현재 창에 링크된 페이지를 보여준다.

_parent : 부모 프레임에 링크된 페이지를 보여준다.

_top : 해당 프레임을 포함한, 최고 상단 페이지에 링크된 페이지를 보여준다.

페이지를 띄울 프레임 이름 : 사용자가 지정한 프레임에 링크된 창을 띄운다.

 

정리하면 아래와 같은 구조로 사용하게 됩니다.

'<a href="사이트 또는 이동할 문서의 위치" target="페이지를 띄울 위치"> 링크에 사용될 문자 또는 이미지 </a>'

 

2. A태그의 사용

@코드로 보기

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

위와 같이 작성하게 되면 '네이버로 이동'이란 텍스트를 클릭하면 '_blank' 값에 의해 새창으로 네이버가 연결되게 됩니다.

 

<a href="https://www.naver.com/" target="_blank"><img src="이미지_경로"></a>

또는 이미지를 넣어주고 이미지를 클릭시 이동할 수 있도록 링크를 걸 수도 있습니다.

 

 

 

3. A태그의 속성 값 변경

하이퍼링크는 기본적으로 방문이 되지 않았을 때에는 파란색, 방문이 되었을 때는 자주색으로 표현되며 밑줄을 가지고 있습니다. 기능적으로 편리하기는 하나 보기에 좋지 않은 경우가 많은데 그러한 속성 값들을 변경하는 방법들을 알아보겠습니다.

 

@ text-decoration-line 속성 (하이퍼링크 밑줄 없애기)

text-decoration-line 속성은 선이 생성되는 위치를 변경하는 값입니다.

주로 하이퍼링크의 밑줄을 없애기 위해서  'text-decoration-line' 속성을 none으로 지정하여 사용합니다.

text-decoration-line 속성은 다음의 4가지 값을 가질 수 있습니다.

• none : 선 없음
• underline : 밑줄
• overline : 윗줄
• line-through : 취소선

밑줄과 윗줄, 취소선을 동시에 적용할 수도 있습니다.

 

@코드로 보기

   <style>     

        a {

            text-decoration-line: none;

        }

   </style> 

위와 같이 <style></style> 탭에 a태그에 대한 설정 값을 넣어 주거나

 

@코드로 보기

<a href="https://www.naver.com/" target="_blank" style="text-decoration-line: none;">네이버로 이동</a>

a태그 안에 직접 속성값을 넣어주시면 됩니다.

 

 

@ text-decoration-style 속성

text-decoration-style 속성은 선의 모양을 바꾸기 위하여 사용합니다.

text-decoration-style 속성은 다음의 5가지 값을 가질 수 있습니다.

사용방식은 text-decoration-line 속성의 방식과 같습니다.

• 실선　text-decoration-style: solid;
• 점선　text-decoration-style: dotted;
• 굵은 점선 text-decoration-style: dashed;
• 이중선　text-decoration-style: double;
• 물결선　text-decoration-style: wavy;