20.링크시키기

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

① 링크시키기 태그

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

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

② 새 창으로 링크시키기

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

풍란의 향기로

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

③ 링크편집

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

풍란의 향기로

이번엔 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="https://t1.daumcdn.net/daumtop_deco/icon/image.hanmail.net/hanmail/image/hanmail/daumlogo.gif" alt="Daum로고" border="0"></a>
<a href="http://blog.daum.net/jinojino/" target="_blank">
풍란의 향기로...</a>
제대로 실행이 되셨나요?
</body>
</html>

'정보창고 > 블로그 정보' 카테고리의 다른 글

18.이미지태그로 문서 꾸미기 (0)	2012.02.08
19.배경음악 올리기 (0)	2012.02.08
21.table넣기 (0)	2012.02.08
22.프레임 나누기 (0)	2012.02.08
23.프레임 응용하기 (0)	2012.02.08

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

당신의 쉼 터

20.링크시키기

'정보창고 > 블로그 정보' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

20.링크시키기

'정보창고 > 블로그 정보' 카테고리의 다른 글

'정보창고/블로그 정보' Related Articles

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역