링크시키기

5. 링크시키기

- 링크시키기 태그 및 새 창으로 링크, 그림으로 링크하는 방법

① 링크시키기 태그

<a href="링크할 주소">주소이름</a>
링크시키기 태그가 아주 쉽지요?
링크할 주소와 주소이름이 헷갈리시면 아래의 예제를 보세요.
제 홈페이지에 있는 홈페이지제작을 링크시킬 경우입니다.

<a href="http://my.dreamwiz.com/m9099/">'물결이와 놀아요'로</a>

이 경우에는 현재 브라우저창으로 링크가 되는 경우입니다.

② 새 창으로 링크시키기

이번에는 화면이 안에서 이동하는 것이 아니라 새로 창을 열어 이동하는 것을 해 보겠습니다.
target이라는 것은 이동할 화면을 지정하는 것인데요. 따옴표 안에 _blank, blank, new를 넣으시면 새 창이 열리면서 링크됩니다.
아래의 예제소스를 보시고 직접 링크를 클릭해 보세요.

<a href="http://my.dreamwiz.com/m9099/" target="_blank">'물결이와 놀아요'로</a>

'물결이와 놀아요'로

참고로 target="_top"라고 하면 새 창을 열지는 않지만 일부화면만 이동하는 것이 아니라 화면 전체로 이동하게 됩니다. 궁금하신 분은 직접 해 보세요.

③ 링크편집

링크는 모양을 다양하게 디자인할 수 있습니다.
마우스가 위에 있을 때, 링크한 후 등 색상을 변화시킬 수 있고 링크의 밑줄을 없앨 수도 있습니다. 그러나 이것은 8. 스타일시트와 9. 유용한 소스에서 자세히 설명하기로 하고 여기에서는 링크의 폰트변화와 그림으로 링크하는 법 등만 설명하겠습니다.

<a href="http://my.dreamwiz.com/m9099/="new">'물결이와 놀아요'로</a>

<A href="http://my.dreamwiz.com/m9099/" target=new>'물결이와 놀아요'로

이번엔 target="new"를 써보았는데 쉽죠?
'2. 글자폰트의 모든 것'에서 배운 것처럼 주소이름의 앞뒤에 글자 태그를 넣어주면 됩니다.

<a href="http://my.dreamwiz.com/m9099/" target="new"><img src="my.netian.com/~gemkky/banners/dream.GIF" alt="물결이 놀이방" border="0"></a>

이것도 간단합니다. 주소이름을 넣을 자리에 '3. 그림넣기'에서 배운것 처럼 태그를 넣어주면 됩니다.
여기에서 alt는 그림에 마우스를 대고 있을 때 나오는 설명으로 꼭 해야하는 것은 아니지만 다른 사람이 그림을 보고 이해할 수 있도록 예의상 해주는 것이 좋겠죠?
그리고 테두리가 보기싫게 나타나는 것을 막기 위해 border="0"을 넣어 주었습니다.

★예제소스★

<html>
<head><title>링크시키기 예제</title></head>
<body bgcolor="EEEEEE">
<center>링크시키기</center>
<hr size=2, color="teal" width=250 align=center>
<a href="http://my.dreamwiz.com/m9099/" target="blank">
<img src="http://my.netian.com/~gemkky/banners/dream.GIF" alt="물결이 놀이방" border="0"></a>
<a href="http://my.dreamwiz.com/m9099/" target="_blank">
'물결이와 놀아요'로...</a>
제대로 실행이 되셨나요?
</body>
</html>