본문 바로가기

태그공책

42. 연결하기 - ⑨ 자료다운 링크걸기 ▒ 요 약 자료다운 링크걸기 요즘 사진 많이 찍으시죠? 핸드폰으로...디지털카메라로....^^* 사진을 함께 찍나요? 친구들이나 가족과 함께 찍죠? 친구들과 함께 놀러갔던 에버랜드 사진을 html로 멋진 겔러리를 만들어 친구들에게 자랑하면 그걸 본 친구들이 사진을 갖고싶어 하겠죠? 이 때, 마우스 오른쪽 버튼을 눌러, 사진을 하나하나 다운 받으면 불편하겠죠? 여길누르면 사진 다운로드! 링크로 자료를 전달할 수 있습니다. ①자료를 폴더에 담습니다. ②알집을 다운받아 설치합니다. ③폴더 위에 마우스를 올려놓고 마우스 오른버튼을 누릅니다. ④알집을 이용해서 폴더를 압축하여 하나의 파일로 만듭니다. ⑤내 계정에 압축된 zip파일을 올립니다. ⑥ 문구 링크 태그 안에 "이동주소" 대신 "압축파일 주소"를 써주면됩.. 더보기
41. 연결하기 - ⑧ 고정창 만들기 ▒ 요 약 고정창 만들기 링크된 새 창을 내가 만들고 싶은 사이즈로 띄운다면 얼마나 좋을까요? 혹은 모니터에 꽉차게 새 창을 띄운다면 재미있겠죠? 자바스크립트를 이용하여 고정창을 만들어 보죠. 클릭하면 숫자*숫자 으로 열립니다 클릭하면 풀화면으로 열립니다. (★은 빼고 사용하세요.) "이동 주소"는 이동할 주소를 쓰면 됩니다. http:// 빼먹지 마세요. -_-;; 가로, 세로 창 사이즈는 숫자를 지정해 주세요. 그림 링크, 작은그림 누르면 큰그림 띄우기에 적용하면 아주 보기 좋습니다. 그림 크기에 창사이즈를 맞춰보세요. 소스를 가지고 실습해 보세요. ▒ 요 약 1. 클릭하면 400*300으로 열립니다 2. 클릭하면 풀화면으로 열립니다. 더보기
40. 연결하기 - ⑦ 인터넷 이름표, 말풍선 달기 ▒ 요 약 인터넷 이름표, 말풍선 달기 웹 페이지 곳 곳 글자 혹은 그림에 마우스를 올려 놓고있으면, 노란색 박스에 설명이 쓰여서 말풍선이 뜨죠? 꽤 유용한 기능입니다. 설명, 주소, 파일 이름, 하고 싶은 말 등 등...아무거나 다양하게 쓸 수 있답니다. 링크 태그에 title="문구" 를 끼워 넣으면 됩니다. 링크할 글자 쉽죠? ^___^* 링크없는 그림에도 안에 끼워넣어 말풍선을 만들수 있습니다. "설명 문구"는 마음대로 쓰면 됩니다. 링크주소, 기능 설명, 파일이름, 사진의 주인공 이름... 등 등 소스를 가지고 실습해 보세요. ▒ 요 약 "컴으로 허자허자" "컴으로 허자허자" "컴으로 허자허자" "컴으로 허자허자" 더보기
39. 연결하기 - ⑥ 문서 안에 바로가기 만들기 ▒ 요 약 문서 안에 바로가기 만들기 html 문서를 만들며, 내용이 너무 길어지거나, 장르를 구분하여 내용을 읽을 수 있게 하는 기능으로 문서안에서 원하는 지점으로 보내주는 링크 기능입니다. 이 기능은 태그를 한 쌍으로 만들어 구현하게 합니다. 문구 이동할 곳 문구 두 태그가 쌍이되어 href="#이름" 이 name="이름"을 찾아 이동하게 됩니다. "이름"은 임의로 아무렇게나 지어도 됩니다. 하지만 두 태그 끼리 이름이 같아야 찾아갑니다. 소스를 가지고 실습해 보세요. 이 기능이 활용되는 곳은 소설, 주소록, 소개서 등 등 무궁무진합니다. 실습하며 이해해 보세요. ▒ 요 약 1.서론보기 2.본론보기 3.결론보기 자, 이이야기는 이렇게 시작됩니다. 옛날 예적 한 마을에...어쩌구 저쩌구 궁시렁 궁시렁 .. 더보기
38. 연결하기 - ⑤ 메일 보내기 링크 ▒ 요 약 메일 보내기 링크 운영자에게 메일을 보낼 때, 운영자 메일 주소가 써있기보다는 편지봉투 아이콘이나, 메일보내기, 운영자에게...등 그림이나 글자를 클릭하면 메일 보내기 프로그램이 뜨면서 메일 보낼 수 있도록 주소가 적혀 나오지요. 지정해 놓은 메일 주소로 메일 보낼 수 있게 링크 거는 방법은 게 하시면 됩니다. href= "이동 주소"를 "mailto:메일주소"로 바꿨습니다. 위 소스처럼 그림에 링크를 걸지 않고 문구에 링크를 걸어도 되겠죠? 자, 하나 더하여...메일 제목까지 강제로 지정 할 수 있습니다. 이 기능은 메일 받는 사람에게 도움이 되는데, 어디서 온 메일인지, 혹은 질문 메일인지, 인사 메일인지 구분 할 때 좋겠죠. ?subject=메일제목 을 끼워 넣으시면 됩니다. 메일제목은 .. 더보기
37. 연결하기 - ④ 작은그림 누르면 큰그림 뜨기 ▒ 요 약 작은그림 누르면 큰그림 뜨기 그림에 링크 걸기를 가장 많이 써먹는 것이 배너광고, 두번째로 젤 많이 써먹는건? 그렇지요. 웹 갤러리나, 사진관 등 들어가면 작은 그림으로 쭉 정리해 놓고 작은그림을 클릭하면, 큰그림이 뜨는것 많이 보셨죠? 이 또한 그림에 링크를 건 것 입니다. 이 작은그림 클릭, 큰그림 띄우기는 두가지 방법이 있습니다. 그 첫번째는 그림 사이즈를 조절하는 방법으로, ①원하는 그림을 wjdth=숫자 hight=숫자 를 이용하여 원하는 %로 줄입니다. ②링크태그 와 를 그림에 감싸고 ③ 에서, 이동할 주소 대신 ④"그림주소"를 넣어주면, 그림으로 이동하겠죠? 두번째 방법은 같아 보이지만 사이즈가 다른 각각의 그림 2개를 준비하여 ①A그림(큰그림) 과 B그림(작은그림)을 서버에 올리.. 더보기
36. 연결하기 - ③ 그림에 링크하기 ▒ 요 약 그림에 링크하기 글자를 클릭해서 원하는 페이지로 모두 이동해 보셨나요? 응용력이 빠르신분은 이미 눈치 채셨겠지만, 그림을 눌러서 이동 할 수도 있겠죠? 글자에 와 를 감싸서 링크를 건것 처럼, 와 를 그림에 감싸면 됩니다. 그림 태그 안 까먹으셨죠? 그림에 링크를 걸게되면, 파란색 테두리가 생깁니다. 테두리가 싫으면 안에 border="0"을 넣어주면 됩니다. 아래의 예제소스를 가지고 실습해 보세요. 꼭! 실습해 보세요. ^^ 다음 진도랑 연관됩니다. 더보기
35. 연결하기 - ② 새 창으로 열기 <target="_blank"> 태그 ▒ 요 약 새 창으로 열기 태그 링크를 누르면 현재 페이지가 새로운 페이지로 열리죠? 현재 페이지에 아직도 볼께 많은데.... 예를 들어 html 문서에 음악을 틀어놓고 음악에 대한 설명을 링크로 걸어놓았다고하면 음악이 흐르는 도중에 링크버튼을 누르면, 음악설명 페이지로 이동하여 음악을 들을 수 없죠? 링크되어 이동하는 페이지를 따로 띄울 수 있다면! 이 문제가 해결 되겠죠? 새로 창을 띄우게하는 속성 태그가있습니다. target="_blank" 입니다. 에 끼워 넣으면 됩니다. 원하는 문구 자, 두가지 소스를 가지고 실습해 보세요. 꼭! 실습해 보셔야 차이를 잘 이해하실 수 있습니다. 더보기
34. 연결하기 - ① 링크 <a href="주소"> 태그 ▒ 요 약 링크 태그 인터넷을 돌아다니다 보면 글자를 누르거나, 그림을 눌렀을 때 다른 웹페이지 혹은, 다른 그림이 열리는 것을 많이 보셨을 꺼에요. 이게 바로 ''링크''입니다. 링크 기본 태그는 와 를 사용하며 와 만으로는 기능을 수행하지 못하고 속성 태그들을 끼어 넣어 사용합니다. 가장 기본적으로 글자를 누르면 지정된 주소로 이동하는 링크는 원하는 문구 이렇게 href="이동할 주소"를 끼어 넣어 완성시킵니다. 더보기
33. 음악주소 직접만들기 - ⑩ 계정만들기 ▒ 요 약 계정만들기 인터넷 전용 음악은 파일로 변환도 끝났고...이제 직접 주소를 만들어 보지요. 네이버, 다음, 싸이월드 등 마이홈, 블로그, 홈피 등의 서비스에 자료를 저장하고 보여주는 서비스가 있으나 네이버 안에서만, 다음 안에서만 공유할 수 있고, 네이버에 있는 그림주소를 다음에서 읽으면 깨지는 경우가 많습니다. 꺼꾸로 다음에있는 그림주소를 네이버에서 읽어도 그렇구요. 전문 계정 서비스를 하는 곳이 아니고 그 사이트 안에 커뮤니티간에 공유할 수 있게 서비스해서 그렇답니다. 계정 서비스를 전문으로 하는곳을 하나 소개해 드릴께요. www.com.ne.kr 컴내꺼라는 사이트입니다. (한시간과 컴내꺼는 아무 상관 없어요. -_-;;) ①가입하여 계정을 만듭니다. ②http://아이디.com.ne.kr .. 더보기

티스토리툴바