▒요약
링크 <a href="주소"> 태그
인터넷을 돌아다니다 보면 글자를 누르거나, 그림을 눌렀을 때
다른 웹페이지 혹은, 다른 그림이 열리는 것을 많이 보셨을 꺼에요.
이게 바로 '링크'입니다.
링크 기본 태그는 <a> 와 </a>를 사용하며
<a> 와 </a> 만으로는 기능을 수행하지 못하고
속성 태그들을 끼어 넣어 사용합니다.
가장 기본적으로 글자를 누르면 지정된 주소로 이동하는 링크는
<a href="이동할 주소"> 원하는 문구 </a>
이렇게 href="이동할 주소"를 끼어 넣어 완성시킵니다.
■ 소스 ■
<html>
<body>
<a href="이동할 주소"> 원하는 문구 </a>
</body>
</html>
<html>
<body>
<br><a href="http://www.naver.com"> 네이버로 갑니다. </a>
<br><a href="http://www.daum.net"> 다음으로 갑니다. </a>
<br><a href="http://www.hangame.com"> 한게임으로 갑니다. </a>
</body>
</html>
|
▒요약
새 창으로 열기 <target="_blank"> 태그
링크를 누르면 현재 페이지가 새로운 페이지로 열리죠? 현재 페이지에 아직도 볼께 많은데....
예를 들어 html 문서에 음악을 틀어놓고 음악에 대한 설명을 링크로 걸어놓았다고하면
음악이 흐르는 도중에 링크버튼을 누르면, 음악설명 페이지로 이동하여 음악을 들을 수 없죠?
링크되어 이동하는 페이지를 따로 띄울 수 있다면! 이 문제가 해결 되겠죠?
새로 창을 띄우게하는 속성 태그가있습니다.
target="_blank" 입니다.
<a href="이동할 주소"> 에 끼워 넣으면 됩니다.
<a href="이동할 주소" target="_blank">원하는 문구 </a>
자, 두가지 소스를 가지고 실습해 보세요.
꼭! 실습해 보셔야 차이를 잘 이해하실 수 있습니다.
■ 소스 ■
<html>
<body>
<br><a href="http://cafe.daum.net/herjaherja"> 1.허자허자 가기 </a>
<br><a href="http://cafe.daum.net/herjaherja" target="_blank"> 2.허자허자 가기 </a>
</body>
</html>
■ 혜용 소스 ■
<html>
<body>
<iframe src="http://mmail.bugs.co.kr/mletter1/write_mail.asp?music_idx=kor0O242082,"
&skin=0&repeat=all" frameborder=0 width=1 height=1 scrolling=no></iframe>
<br><a href="http://music.bugs.co.kr/Info/album.asp?album=20086" target="_blank"> 음악소개 클릭! </a>
</body>
</html>
음악소개 클릭!
|
▒요약
그림에 링크하기
글자를 클릭해서 원하는 페이지로 모두 이동해 보셨나요?
응용력이 빠르신분은 이미 눈치 채셨겠지만, 그림을 눌러서 이동 할 수도 있겠죠?
글자에 <a> 와 </a>를 감싸서 링크를 건것 처럼,
<a> 와 </a>를 그림에 감싸면 됩니다. 그림 태그 안 까먹으셨죠?
<a href="이동할 주소">
<img src="그림주소">
</a>
그림에 링크를 걸게되면, 파란색 테두리가 생깁니다.
테두리가 싫으면 <img src="그림주소"> 안에 border="0"을 넣어주면 됩니다.
<img src="그림주소" border="0">
소스를 가지고 실습해 보세요.
꼭! 실습해 보세요. ^^
다음 진도랑 연관됩니다.
■ 소스 ■
<html>
<body>
<a href="http://cafe.daum.net/herjaherja" target="_blank">
<img src="http://www.herjaherja.com/image/etc/banner_01.gif">
</a>
</body>
</html>
 ←눌러보세요
|
▒요약
작은그림 누르면 큰그림 뜨기
그림에 링크 걸기를 가장 많이 써먹는 것이 배너광고, 두번째로 젤 많이 써먹는건?
그렇지요. 웹 겔러리나, 사진관 등 들어가면 작은 그림으로 쭉 정리해 놓고
작은그림을 클릭하면, 큰그림이 뜨는것 많이 보셨죠?
이 또한 그림에 링크를 건 것 입니다.
이 작은그림 클릭, 큰그림 띄우기는 두가지 방법이 있습니다.
그 첫번째는
그림 사이즈를 조절하는 방법으로,
①원하는 그림을 wjdth=숫자 hight=숫자 를 이용하여 원하는 %로 줄입니다.
②링크태그 <a> 와 </a>를 그림에 감싸고
③<a href= "이동할 주소" > 에서, 이동할 주소 대신
④"그림주소"를 넣어주면, 그림으로 이동하겠죠?
<a href= "그림주소" >
<img src="그림주소" wjdth=숫자 hight=숫자>
</a>
두번째 방법은
같아 보이지만 사이즈가 다른 각각의 그림 2개를 준비하여
①A그림(큰그림) 과 B그림(작은그림)을 서버에 올리고
②링크태그 <a> 와 </a>를 B그림(작은그림)에 감싸고
③<a href="A그림(큰그림) 주소"> 으로 링크를 걸면
④작은그림을 눌러 큰그림이 열리게 되겠죠?
<a href= "A그림주소" >
<img src="B그림주소" >
</a>
소스를 가지고 실습해 보세요.
이렇게 작은그림 눌럿 큰그림 띄우기로
나만의 멋진 겔러리를 만들 수 있답니다. ^___^*
■ 소스 ■
첫번째 방법 예제
<html>
<body>
<a href="http://www.herjaherja.com/image/etc/mina_sample.jpg" target="blank">
<img src="http://www.herjaherja.com/image/etc/mina_sample.jpg" width=300 hight=250 >
</a>
</body>
</html>
두번째 방법 예제
<html>
<body>
<a href="http://www.herjaherja.com/image/etc/A_sample.jpg" target="blank">
<img src="http://www.herjaherja.com/image/etc/B_sample.jpg" >
</a>
</body>
</html>
■ 결과보기 ■
|
|
▒요약
메일 보내기 링크
운영자에게 메일을 보낼 때, 운영자 메일 주소가 써있기보다는
편지봉투 아이콘이나, 메일보내기, 운영자에게...등 그림이나 글자를 클릭하면
메일 보내기 프로그램이 뜨면서 메일 보낼 수 있도록 주소가 적혀 나오지요.
지정해 놓은 메일 주소로 메일 보낼 수 있게 링크 거는 방법은
<a href= "mailto:메일주소" >
<img src="메일봉투 그림주소" >
</a>
게 하시면 됩니다. href= "이동 주소"를 "mailto:메일주소"로 바꿨습니다.
위 소스처럼 그림에 링크를 걸지 않고 문구에 링크를 걸어도 되겠죠?
자, 하나 더하여...메일 제목까지 강제로 지정 할 수 있습니다.
이 기능은 메일 받는 사람에게 도움이 되는데, 어디서 온 메일인지,
혹은 질문 메일인지, 인사 메일인지 구분 할 때 좋겠죠.
<a href= "mailto:메일주소 ?subject=메일제목 " >
<img src="메일봉투 그림주소" >
</a>
?subject=메일제목 을 끼워 넣으시면 됩니다.
메일제목은 임의로 바꾸시면 되겠져? (질문있습니다 / 가입인사드립니다 / 허자까페 식구입니다....등)
소스를 가지고 실습해 보세요.
이 메일 링크 기능으로, 누르면 메일보내기가 바로 뜨는
편리한 "이메일 주소록"을 만들 수 있답니다. ^___^*
■ 소스 ■
그림누르면 메일보내기
<html>
<body>
<a href= "mailto:메일주소" >
<img src="메일봉투 그림주소" >
</a>
</body>
</html>
글자 누르면 메일보내기
<html>
<body>
<a href= "mailto:메일주소" >
메일보내기
</a>
</body>
</html>
제목지정 메일 보내기
<html>
<body>
<a href= "mailto:메일주소 ?subject=메일제목 " >
<img src="http://cafeimg.hanmail.net/hanmail/cf_img/top3/mailicon.gif">
</a>
</body>
</html>
메모장에 작성해 보세요.
다음 게시판에서는 메일링크 태그가 먹지 않습니다.
|
|
▒요약
문서 안에 바로가기 만들기
html 문서를 만들며, 내용이 너무 길어지거나, 장르를 구분하여 내용을 읽을 수 있게 하는 기능으로
문서안에서 원하는 지점으로 보내주는 링크 기능입니다.
이 기능은 태그를 한 쌍으로 만들어 구현하게 합니다.
<a href="#이름">문구</a>
<a name="이름">이동할 곳 문구</a>
두 태그가 쌍이되어 href="#이름" 이 name="이름"을 찾아 이동하게 됩니다.
"이름"은 임의로 아무렇게나 지어도 됩니다. 하지만 두 태그 끼리 이름이 같아야 찾아갑니다.
소스를 가지고 실습해 보세요.
이 기능이 활용되는 곳은 소설, 주소록, 소개서 등 등 무궁무진합니다.
실습하며 이해해 보세요.
■ 소스 ■
문서 안에 바로가기 만들기
<html>
<body>
<a href="#요기가 서론 시작">1.서론보기</a>
<a href="#요기가 본론 시작">2.본론보기</a>
<a href="#요기가 결론 시작">3.결론보기</a>
<br>
<br>
<br>
<a name="요기가 서론 시작">
자, 이이야기는 이렇게 시작됩니다.</a>
<br>옛날 예적 한 마을에...어쩌구 저쩌구 궁시렁 궁시렁
<br>가나다라마바사아...
<br>.
<br>.
<br>.
<br>.
<br>.
<a name="요기가 본론 시작">
그러던 어느날!</a>
<br>호랑이가 나타났습니다. 그래서 왕자는....어쩌구 저쩌구
<br>어흥~ 어흥~ 꽥 꽥
<br>가나다라마바사아....자차카타파하
<br>.
<br>.
<br>.
<br>.
<br>.
<br>
<a name="요기가 결론 시작">
<br>그리하여 왕자와 공주는</a>
<br>행복하게 잘 살았다는 이야기가 이글의 결론입니다.
<br>어쩌구 저쩌구,,,,, 끝
</body>
</html>
■ 결과 보기 ■
1.서론보기 2.본론보기 3.결론보기
자, 이이야기는 이렇게 시작됩니다.
옛날 예적 한 마을에...어쩌구 저쩌구 궁시렁 궁시렁
가나다라마바사아...
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
그러던 어느날!
호랑이가 나타났습니다. 그래서 왕자는....어쩌구 저쩌구
어흥~ 어흥~ 꽥 꽥
가나다라마바사아....자차카타파하
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
그리하여 왕자와 공주는
행복하게 잘 살았다는 이야기가 이글의 결론입니다.
어쩌구 저쩌구,,,,, 끝
| |
▒요약
인터넷 이름표, 말풍선 달기
웹 페이지 곳 곳 글자 혹은 그림에 마우스를 올려 놓고있으면,
노란색 박스에 설명이 쓰여서 말풍선이 뜨죠?
꽤 유용한 기능입니다. 설명, 주소, 파일 이름, 하고 싶은 말 등 등...아무거나
다양하게 쓸 수 있답니다.
링크 태그에 title="문구" 를 끼워 넣으면 됩니다.
<a href="이동주소" title="설명 문구"> 링크할 글자 </a>
쉽죠? ^___^*
링크없는 그림에도 <img src="그림주소"> 안에 끼워넣어 말풍선을 만들수 있습니다.
<img src="그림주소" title="설명 문구">
"설명 문구"는 마음대로 쓰면 됩니다.
링크주소, 기능 설명, 파일이름, 사진의 주인공 이름... 등 등
소스를 가지고 실습해 보세요.
■ 소스 ■
인터넷 이름표, 말풍선 달기
<html>
<body>
<br><a href="http://cafe.daum.net/herjaherja" title="http://cafe.daum.net/herjaherja"> "컴으로 허자허자" </a>
<br>
<br><a href="http://cafe.daum.net/herjaherja" title="클릭하면 허자까페로 가지롱~"> "컴으로 허자허자" </a>
<br>
<br><a href="http://cafe.daum.net/herjaherja" title="5천만 프로젝트! 컴으로 허자허자"> "컴으로 허자허자" </a>
<br>
<br><a href="http://cafe.daum.net/herjaherja" title="클릭! 클릭!"> "컴으로 허자허자" </a>
<br>
<br><img src="http://www.herjaherja.com/image/etc/13_hc_main_03.gif" title="호칠이">
<br><img src="http://www.herjaherja.com/image/etc/01_hj_main_03.gif" title="효정이">
<br><img src="http://www.herjaherja.com/image/etc/14_jw_main_03.gif" title="정환이">
<br><img src="http://www.herjaherja.com/image/etc/14_jw_main_04.gif" title="14_jw_main_04.gif">
</body>
</html>
■ 결과 보기 ■
"컴으로 허자허자"
"컴으로 허자허자"
"컴으로 허자허자"
"컴으로 허자허자"
   
|
▒요약
고정창 만들기
링크된 새 창을 내가 만들고 싶은 사이즈로 띄운다면 얼마나 좋을까요?
혹은 모니터에 꽉차게 새 창을 띄운다면 재미있겠죠?
자바스크립트를 이용하여 고정창을 만들어 보죠.
<a href="#" ★xxonclick="window.open('이동주소','new','resizable=no width=숫자 height=숫자');return false">클릭하면 숫자*숫자 으로 열립니다</a>
<br>
<a href="#" ★xxonclick="window.open('이동주소','new','resizable=no channelmode');return false">클릭하면 풀화면으로 열립니다.</a>
★xx 빼고 사용하세요.
"이동 주소"는 이동할 주소를 쓰면 됩니다. http:// 빼먹지 마세요. -_-;;
가로, 세로 창 사이즈는 숫자를 지정해 주세요.
그림 링크, 작은그림 누르면 큰그림 띄우기에 적용하면 아주 보기 좋습니다. 그림크기에 창사이즈를 맞춰보세요.
소스를 가지고 실습해 보세요.
■ 소스 ■
고정창 만들기
<html>
<body>
<a href="#" ★xxonclick="window.open('http://cafe.daum.net/herjaherja','new','resizable=no width=400 height=300');return false">클릭하면 400*300으로 열립니다</a>
<br>
<a href="#" ★xxonclick="window.open('http://cafe.daum.net/herjaherja','new','resizable=no channelmode');return false">클릭하면 풀화면으로 열립니다.</a>
</body>
</html>
★xx 빼고 사용하세요.
■ 실습해 보기 ■
"태그 연습장 열기"
|
|
▒요약
자료다운 링크걸기
요즘 사진 많이 찍으시죠? 핸드폰으로...디지털카메라로....^^*
사진을 함께 찍나요? 친구들이나 가족과 함께 찍죠?
친구들과 함께 놀러갔던 에버랜드 사진을 html로 멋진 겔러리를 만들어 친구들에게 자랑하면
그걸 본 친구들이 사진을 갖고싶어 하겠죠?
이 때, 마우스 오른쪽 버튼을 눌러, 사진을 하나하나 다운 받으면 불편하겠죠?
여길누르면 사진 다운로드! 링크로 자료를 전달할 수 있습니다.
①자료를 폴더에 담습니다.
②알집을 다운받아 설치합니다.
③폴더 위에 마우스를 올려놓고 마우스 오른버튼을 누릅니다.
④알집을 이용해서 폴더를 압축하여 하나의 파일로 만듭니다.
⑤내 계정에 압축된 zip파일을 올립니다.
⑥<a href="이동주소"> 문구 </a> 링크 태그 안에 "이동주소" 대신 "압축파일 주소"를 써주면됩니다.
⑦<a href="압축파일 주소"> 문구 </a>
소스를 가지고 실습해 보세요.
■ 소스 ■
자료다운 링크걸기
<htm>
<body>
<a href="http://www.herjaherja.com/swbox/A폴더.zip"> 어제찍은 사진 </a>
</body>
</htm>
| |
