HTML 기초, 하이퍼링크 <A> 태그와 다양한 속성활용방법 ② (14번째)
HTML 기초, 하이퍼링크 <A> 태그와 다양한 속성활용방법 ②
◎ 다른 홈페이지 링크로 활용하기
하이퍼링크를 사용해 연결할 수 있는 것은 아래와 같습니다.
|
종류 |
설명 |
|
HTML 문서 |
가장 보편적인 하이퍼링크 |
|
다른 홈페이지 |
다른 홈페이지의 URL을 입력하면 하이퍼 링크를 이용해 이동이 가능 |
|
텍스트 |
하이퍼링크를 사용하면 같은 페이지 내에 다른 텍스트로 이동하는 것이 가능합니다. 이를 앵커라 하며 문서가 너무 길어 질 경우 책갈피 역할을 합니다. |
|
이미지, 사운드, 동영상 클립 |
href 속성의 값으로 이미지, 사운드, 동영상 파일의 명칭을 입력하면 브라우저가 연결된 프로그램을 이용해 이를 재생하게 됩니다. |
|
파일 |
파일의 명칭을 연결하면 다운로드 받도록 할 수 있습니다. |
|
|
e-mail 주소를 입력해 자신에게 e-mail을 보낼 수 있는 링크를 만들 수 있습니다. |
|
기타링크 |
파일전송 프로토콜(ftp), 유즈넷(usenet)에 있는 파일 / 문서를 연결할 수 있습니다. |
◎ 이미지로 링크
이미지를 클릭해 링크될 수 있도록 하기 위해서는 <a></a> 태그 사이에 <img> 태그를 삽입하면 됩니다.
이렇게 하면 웹 브라우저에 보이는 이미지를 마우스로 클릭하면 지정한 곳으로 링크연결이 됩니다.
예문)
<a href="링크할 곳의 파일명"><img src="이미지파일명"></a>
tip.
이미지를 <a> 태그에 삽입하면 이미지 주변에 테두리선이 생깁니다.
테두리를 없애는 방법은 <img> 태그에 border="0" 속성을 주면 테두리선이 사라집니다.
◎ e-mail을 보내주는 하이퍼링크
예전보다는 사용빈도수가 적지만 여전히 사용하는 e-mail.
링크를 마우스로 클릭하면 바로 e-mail을 보낼 수 있도록 하이퍼링크로 지정할 수 있습니다.
인터넷 익스플로러는 아웃룩 익스프레스가 실행되고 넷스케이프는 메신저 프로그램이 실행됩니다.
아웃룩 익스프레스가 안깔려있다면 실행이 안될 수 있습니다.
예문)
<a href="maito:받고자하는 e-mail 주소"> 메일을 보내줘연~</a>
◎ 현재 HTML 문서의 지정된 위치로 링크를 설정하는 name 속성
HTML 문서가 길어지면 스크롤바로 찾아갈때 불편함을 느낄 수 있습니다. 이동하고자 하는 곳에 책갈피처럼 표시를 해두고
원하는 위치로 링크를 통해 이동할 수 있도록 도와주는 속성이 name 입니다.
<a name="name"> 태그를 사용해 특정 위치를 책갈피로 표시하는 것과 같은 원리로 지정하고 <a href="#name"> 링크로
이동하고자하는 위치의 이름을 지정합니다.
예문)
<a name="start"> 책갈피 표시해 둔 곳</a>
<a href="#start"> 이 부분을 클릭하면 책갈피 해둔 곳으로 이동합니다. </a>
해당 글씨를 클릭하시면 아래의 그림처럼 지정해둔 문서로 이동이 됩니다.
◎ 압축파일, 실행파일 링크하기
압축파일 / 실행파일 처럼 웹 브라우저에 나타낼 수 없는 파일을 링크로 설정하면 사용자가 이를 다운로드 받을 수 있습니다.
예문)
<a href="game.zip"> 파일다운로드 </a>
◎ 링크 결과를 새로운 창으로 열기
링크된 페이지를 새로운 웹 브라우저에 띄우기 위해서는 target 속성을 사용합니다.
target 속성에 "_blank" 값을 지정하면 새로운 페이지를 열고 거기에 링크 내용을 표시합니다.
