#07 HTML 태그의 이해 - 04. 하이퍼텍스트 링크

하이퍼텍스트 링크: 문서를 연결하는 태그

- 웹페이지로의 이동 혹은 웹페이지의 특정한 위치로 이동할 때 사용

기본 꼴 : <a href= "이동할 페이지 또는 url" 속성 = "-"> </a>

특징: - 글자처럼 옆으로 나열되는 성격 > (inline)

- 자동으로 스타일이 생성 > ( 밑줄 / 글자색)

- 링크연결시 마우스 올리면 손모양 커서로 변경

- 링크 클릭시 화면 내 전환.

<a href = " # ">링크연결 </a> - # 은 임시링크로 쓴다.

가장 유명한 네이버를 예시로 들어보겠다.

다음처럼 www.naver.com 을 입력하여 하이퍼링크를 만들 수 있다.

네이버로 이동하기 를 클릭했는데 아래그림처럼 페이지가 뜨지 않는다!!

왜일까?

그 이유는 인터넷주소 앞에 http:// 를 입력하지 않았기 때문이다.

**인터넷 페이지를 연결시킬 때에는 반드시 인터넷주소 앞에

http:// 를 입력해야 한다.

네이버로 연결되는 것을 알 수 있다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

다음과 같이 <a> 를 두개 입력했는데 웹문서에서는 가로로 나란히 표현된다.

여기서 <a> 도 위아래로 나누어 표현하기 위해선 <br/> 를 이용해야 한다는 것을 알 수 있다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

다른 문서를 불러오기하는데 사용하기 위해 sub 문서를 하나 만들고

<body> 에는 sub_page로 이동완료!

라고 저장해두겠다.

sub문서를

앞에서 사용하던 a 문서와 동일한 위치에 index.html로 저장하겠다.

a문서로 돌아와서 sub문서로 이동하는 링크를 표현하겠다.

페이지 이동 을 클릭하면 sub문서로 이동한다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

이번에는 메일주소로 이동해보겠다.

똑같이 href ="메일주소" 꼴로 입력하고

이메일 연결 을 클릭해도 메일주소로 들어가지지않는다.

왜일까?

이메일주소로 이동하는 경우도 마찬가지로

메일주소 앞에 mailto: 를 입력해 주어야 하기 때문이다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

이번엔 속성에 대해 알아보겠다.

먼저 title 이라는 속성이다.

title: 링크에 마우스를 올렸을 때 이름이 생성됨

마우스 커서를 네이버사이트 위에 올려두면 네이버로 이동 이라는 문구가 보이는 것을 확인할 수 있다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

두번째 속성은 target 이다.

target: 링크의 창이 열리는 방법을 지정

여러가지 방법중 두가지만 얘기해보겠다.

- "_self" : 현재의 창에서 바로 전환 (기본)

- "_blank" : 문서는 그대로 두고 새창으로 전환 (다른 인터넷주소, 패밀리사이트)

self는 입력하지 않아도 기본이므로 blank를 입력하여 확인해보자.

본래의 문서는 그대로 두고 새창이 열린 것을 확인할 수 있다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

=================================================================

부가적으로 <Style> 에 대해 약간 얘기해보겠다.

a{text-decoration:none; color:#000; }

위 표현은 모든 a태그에 대해 글자를 꾸미지 않고 색은 검정으로 통일한다는 의미이다.

(#000 = 검정.)

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

a:hover{ color: #f00; }

위 표현은 마우스 커서를 a태그 글자위에 올렸을 때의 글자가 빨강색을 띈다라는 의미이다.

====================================================================

THE END

728x90

저작자표시 비영리 변경금지

':: HTML 🚩' 카테고리의 다른 글

#08 -2 CSS의 이해 - 속성의 종류 (0)	2021.02.15
#08 CSS의 이해 (0)	2021.02.15
#06 HTML 태그의 이해 - 3. 이미지 태그 (0)	2021.02.15
#05 HTML 태그의 이해 -2. table 태그 (0)	2021.02.15
#04 HTML 태그의 이해 -1. Text 관련 태그 (0)	2021.02.15