HTML - 링크시키기

링크시키기

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

① 링크시키기 태그

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

<a href="http://cafe.daum.net/CafeLeaders">Daum카페 리더 모임으로</a>

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

② 새 창으로 링크시키기

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

<a href="http://cafe.daum.net/CafeLeaders" target="_blank">Daum카페 리더 모임으로</a>
Daum카페 리더 모임으로

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

③ 링크편집

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

<a href="http://cafe.daum.net/CafeLeaders" target="new">Daum카페 리더 모임으로</a>
Daum카페 리더 모임으로

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

이것도 간단합니다. 주소이름을 넣을 자리에 '그림넣기'에서 배운 것처럼 태그를 넣어주면 됩니다.
여기에서 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://www.daum.net" target="blank">
<img src="http://image.hanmail.net/hanmail/image/hanmail/
daumlogo.gif" alt="Daum로고" border="0"></a>
<a href="http://cafe.daum.net/CafeLeaders" target="_blank">
Daum카페 리더 모임으로...
</a>
제대로 실행이 되셨나요?
</body>
</html>

예제실행 - 결과를 보시려면 클릭하세요.

'컴퓨터사용팁' 카테고리의 다른 글

삭제한 파일 복구하기 Recuva (1)	2011.01.06
HTML - Table 넣기 (0)	2011.01.05
HTML - 음악 넣기 (0)	2011.01.05
HTML - 그림 넣기 (0)	2011.01.05
HTML - 글자 폰트의 모든 것 (0)	2011.01.05

컴퓨터라이프

HTML - 링크시키기

'컴퓨터사용팁' 카테고리의 다른 글

티스토리툴바

HTML - 링크시키기

'컴퓨터사용팁' 카테고리의 다른 글

관련글

티스토리툴바