링크태그(연결하기)

▶ 링크 태그 링크와 관련된 속성들 <TABLE style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; WIDTH: 552px; BORDER-COLLAPSE: collapse; FONT-FAMILY: ; HEIGHT: 180px; FONT-SIZE: 9pt; BORDER-TOP: medium none; BORDER-RIGHT: medium none" class=txc-table border=0 cellSpacing=0 cellPadding=0 width=552 align=left> <TBODY> <TR> <TD style="BORDER-BOTTOM: #000 1px solid; TEXT-ALIGN: left; BORDER-LEFT: #000 1px solid; BACKGROUND-COLOR: #d5d5d5; WIDTH: 50%; BORDER-TOP: #000 1px solid; BORDER-RIGHT: #000 1px solid" cols="1" rows="1">  속 성</TD> <TD style="BORDER-BOTTOM: #000 1px solid; TEXT-ALIGN: center; BACKGROUND-COLOR: #d5d5d5; WIDTH: 50%; BORDER-TOP: #000 1px solid; BORDER-RIGHT: #000 1px solid" cols="1" rows="1"> 의  미 </TD></TR> <TR> <TD style="BORDER-BOTTOM: #000 1px solid; TEXT-ALIGN: left; BORDER-LEFT: #000 1px solid; WIDTH: 50%; BORDER-RIGHT: #000 1px solid" cols="1" rows="1">  href</TD> <TD style="BORDER-BOTTOM: #000 1px solid; TEXT-ALIGN: left; WIDTH: 50%; BORDER-RIGHT: #000 1px solid" cols="1" rows="1"> 이동할 위치  </TD></TR> <TR> <TD style="BORDER-BOTTOM: #000 1px solid; TEXT-ALIGN: left; BORDER-LEFT: #000 1px solid; WIDTH: 50%; BORDER-RIGHT: #000 1px solid" cols="1" rows="1">  name</TD> <TD style="BORDER-BOTTOM: #000 1px solid; TEXT-ALIGN: left; WIDTH: 50%; BORDER-RIGHT: #000 1px solid" cols="1" rows="1"> 연결될 위치</TD></TR> <TR> <TD style="BORDER-BOTTOM: #000 1px solid; TEXT-ALIGN: left; BORDER-LEFT: #000 1px solid; WIDTH: 50%; BORDER-RIGHT: #000 1px solid" cols="1" rows="1">  target</TD> <TD style="BORDER-BOTTOM: #000 1px solid; TEXT-ALIGN: left; WIDTH: 50%; BORDER-RIGHT: #000 1px solid" cols="1" rows="1"> 메뉴를 클릭했을 때 나타나게될           브라우저의 형태지정  </TD></TR></TBODY></TABLE>                     링크란 여러분들이 웹서핑을 하면서 글자나 그림을 클릭하면 다른 웹페이지나 그림으로 연결되지요. 그부분이 바로 하이퍼링크를 해놓은 부분입니다. <HR style="COLOR: red" align=left SIZE=1 width=500 noShade> 링크의 기본 원리 링크태그의 기본은 <a>와</a> 태그입니다. 그러나<a></a> 이것만을 사용하면 아무것도 나타나지 않습니다. 어느 곳으로 연결시켜줄 것인가를 지정해주어야 하지요 이걸 지정해주는 속성이 href="주소" 속성입니다. 그럼 직접 해볼까요? <a href="링크 시킬 주소">여길 누르세요</a.>이명령이 링크를 시켜주는 태그입니다. 위 태그는 지금하고있는 화면이 다른 화면으로 바뀌어 버립니다. 예제 1 <A href="http://cafe.daum.net/jumchon17">여기를 눌러보세요! </A> 화면이 바뀌면 되돌아오기 로 다시 돌아오세요.. 다른 새로운 창을 띄우려면 아래의 명령어 로 해야 새로운 창이 뜬니다. target ="_blank"☜이것이 새창을 뜨게하는 속성입니다. 그럼 새로운 창으 띄우게 하려면 아래와 같이 하시면 됩니다. <a href="링크시킬 주소" target="_blank">여길누르세요</a> 예제 2 <A href="http://cafe.daum.net/jumchon17" target=_blank>여기를 눌러보세요!</A>   <HR style="COLOR: red" align=left SIZE=1 width=500 noShade> (1) 사이트 링크 설정<a href>태그     * <a href="이동할 위치(URL)">텍스트 또는 이미지</a>        이동할 주소 입력시 반드시 이중 인용부호 "  " 를 사용하여 표기.     * <a>태그내의 href에는 연결 하고자 하는 곳의 주소 혹은 문서의        url을 지정     <a href>~</a>태그로 둘러싸인 곳이 링크가 되며 이 링크를 클릭     하면 연결된 다른 문서가 나타나게 되는데 텍스트는 밑줄이 생기고    이미지는 테두리가 생긴다.    이미지의 경우 <border=0>으로 지정함으로써 테두리를 없앨 수 있다.   (2) 같은 폴더 안에서 다른 문서 연결하기     <a href="이동할 문서 이름">텍스트 또는 이미지</a>    href속성에 연결한 웹 문서의 이름(html 이나 htm파일)을 지정하   고 링크된 부분을 클릭하여 연결된 문서로 이동.   문서(파일)이름에는 꼭 이중 인용부호 " " 를 사용하여 표기해야 한다. <HR style="COLOR: red" align=left SIZE=1 width=500 noShade> (3) 같은 문서 안에서 특정 위치로 링크하기      <a href="#특정위치지정">개요</a>       <a name="이동될 위치이름"> 개요(특정위치제목)</a>      * 이것역시 <a> 태그에서 name속성을 지정하여 사용. 같은 문서의        내용 중 특정한 위치로 연결시킬때 이방법을 사용.     * 한 페이지에 많은 양의 정보를 나타내고자 할때 아주 유용. 이러한       문서내으 링크는 링크를 삽입할 때와 비슷하지만 href 속성에 # 기호와       특정위치 이름을 삽입하면 된다.     * 이방법도 이동 되어질 특정 문서의 맨 아래에 태그를 여러 번 넣어 공간을        많이 주어야 아래 부분의 위치를 특정위치로 클릭했을 때 문서의 위치가 제대로       나타납니다. 맨 아래에만 삽입하면 된다. <HR style="COLOR: red" align=left SIZE=1 width=500 noShade> (4) 위로가기 버튼이나 링크 만들기      * <a href="#">위로</a>혹은         <a href="#"><img src="이미지파일"></a>      * 문서의 내용이 많을 때 문서의 중간이나 아래에 위로가기 버튼을 만들면         스크롤바를 움직이지 않아도 쉽게 문서의 맨 윗부분으로 이동 할 수 있습니다.      * 위로 가기 링크 태그는 <a href=>태그에 '#' 기호를 붙이면 된다.   (5) 위로 가기 버튼을 눌렀을 때 특정 위치로 가기       *<a name="특정위치 이름"> 이름 지정</a>         <a href="#특정위치 이름">위로</a>혹은         <a href="#벼랑끝"><img src="top 이미지파일"></a>        * 무조건 문서의 맨 윗부분으로 가는 게 아니라 특정위치를 선택        * 사용법은 <a href=> 태그에 '#' 기호 바로 뒤에 나타내고자 하는 위치 지정.   (6) target      * 창을 새로 띄울 것인지 /현재창에 띄울 것인지 걸정      * <a href=파일명(주소) target="_blank">내용(제목)</a>         <a href=파일명 (주소) target="new">내용(제목)</a>         <a href=파일명 (주소) target="_self">내용(제목)</a>        <a href=파일명 (주소) target="_top">내용(제목)</a>      * _blank 링크를 클릭했을 때 내용이 새 창에 나타남.          target="new"로 설정해도 같은 효과 나타냄      * _self 자기 자신의 창에 내용을 나타냄         target 속성을 설정하지 않았을 대 동일한 효과 입니다.      *_top 프레임 설정에 관계없이 한 화면에 내용이 나타남.         내용이 화면을 꽉 채워 버림 즉 프레임은 무효가 된다. <HR style="COLOR: red" align=left SIZE=1 width=500 noShade> 텍스트 링크 설정하기 <html> <head> <title> 텍스트 링크</title> </head> <body> <center> <a href="http://www.daum.net">다음</a> <a href="http://www.empas.com">엠파스</a> <a href="http://kr.yahoo.com">야 후</a> <a href=<A href="http://www.naver.com/">http://www.naver.com</A> target="_blank">네이버</a> <a href="http://urikr.com">유리꽃</a> </body> </html> <xhtml> <head> <title> 텍스트 링크</title> </head> <xbody> <center> <a href="http://www.daum.net">다음</a> <a href="http://www.empas.com">엠파스</a> <a href="http://kr.yahoo.com">야 후</a> <a href=http://www.naver.com target="_blank">네이버</a> <a href="http://urikr.com">유리꽃</a> </xbody> </xhtml>   <HR style="COLOR: red" align=left SIZE=1 width=500 noShade>     이미지 를 삽입한 링크 방법 ♣ 이미지 에서 웹페이지로 링크 <a href="웹페이지주소"><img src="이미지주소"></a>☜ 그림을 눌러보세요! 예제 1 <A href="http://cafe.daum.net/jumchon17"><IMG src="https://t1.daumcdn.net/cfile/cafe/205C61144A66A0DC7C"></A>☜ 그림을 눌러보세요! ♣ 이미지 에서 다른 이미지로 링크 <a href="이미지주소">"><img src="이미지주소"></a> 예제 2 <A href="http://cfile255.uf.daum.net/attach/195E22144A66A0DD786A40"><IMG src="https://t1.daumcdn.net/cfile/cafe/205C61144A66A0DC7C"></A>☜ 그림을 눌러보세요! ♣ 이미지를 삽입하여 새창을 뜨게하는 방법 <a href-"링크 시킬 주소"target="_blank"><img src="그림주소"></a>☜ 이렇게 하세요.. 예제 3<A href="http://cafe.daum.net/jumchon17" target=_blank><IMG src="https://t1.daumcdn.net/cfile/cafe/205C61144A66A0DC7C"></A>☜ 눌러보세요. ♣ 웹페이지→ 이미지로 링크 <a href="이미지주소">여길클릭</a>예제 4 <A href="http://cfile249.uf.daum.net/attach/205C61144A66A0DC7C0049">여기클릭</A> ♣ 이미지 테두리 없에기 border="0" 이렇게 하면 테두리가 없어집니다. 숫자가 클수록 테두리 두께가 넓어집니다. ♣ 이미지위에 마우스커서를 갖다대면 점촌초등학교17 이라는 글씨가 뜨는 속성은 아래와 같습니다 alt="점촌초등학교17" 이렇게 쓰시면 됩니다. <img src="이미지 주소" border="0" alt="점촌초등학교17"> 이렇게 씁니다. 예제 5   <IMG alt=점촌초등학교17 src="https://t1.daumcdn.net/cfile/cafe/205C61144A66A0DC7C" bordet="0">☜ 마우스 를 올려보세요 <HR style="COLOR: red" align=left SIZE=1 width=500 noShade>  메일보내기 링크에 대해서 간단히 설명을 하겠습니다. 이메일링크시키는 방법은 <a href="mailto:이메일주소"> 카페지기에게 메일 보내기</a> ☜ 이렇게 해주면 됩니다. 즉 이메일 주소 앞부분에 mailto: 만 넣어주면 되지요... 메일 예제 <A href="mailto:<a href="http://go.daum.net/bin/go.cgi?relative=1&url=/Mail-bin/login_f.cgi%3Ferror%3Dlogin%26lu%3D/Mail-bin/send_mail.form.cgi%3FTO%3Dyek8711@hanmail.net">yek8711@hanmail.net</a>">카페지기 에게 메일보내기</A>