네이버 홈페이지형 블로그 응용편 06.이미지맵툴image map 사용법
이전 글에 이어서 네이버 블로그 꾸미기 응용 편을 시작해 보겠습니다. 홈페이지형 블로그 만들기 기초 편에서는 다루지 않았던 응용된 부분은 바로 이미지맵 image map 사용방법입니다.
이미지맵 툴을 활용하여 좌표값만 찾을 수 있다면 앞으로 더 다양한 디자인으로 홈페이지형 블로그 꾸미기가 가능합니다.
홈페이지형블로그 응용6편 목차
1. 이미지 맵 툴 사이트 바로가
2. 이미지 불러오기
3. 이미지 업로드 완료 확인
4. 이미지 맵 모양 설정
5. 이미지맵 영역 설정
6. 저장하기
7. 이미지맵 설정 완료
8. 두 번째 메뉴 이미지맵 영역 지정
9. HTML Code 탭
10. Title 메뉴명 입력
11. 좌표값 복사하기
12. 좌표값 붙여넣기
13. 두 번째 메뉴 좌표값 복사
14. 두번째 메뉴 좌표값 붙여넣기
*영상의 캡처 화면을 사용하여 글이 작성되었기 때문에 이미지의 화질이 다소 좋지 못한 점 양해 부탁드립니다. 유튜브 영상을 먼저 촬영하고 글을 작성하게 되었습니다.
유튜브 강의홈페이지형 네이버 블로그 만들기03 / 04편
1. 이미지맵 툴 사이트 바로가기
이미지 맵 툴 사이트에서 이제 본격적으로 좌표값을 알아보도록 하겠습니다. 메모장에서 1개의 이미지의 여러 개의 링크를 걸어야 할 때 "좌표값" 따옴표에 들어갈 좌표값을 찾기 위해서 아래 무료 이미지 맵 툴 사이트로 이동합니다.
이미지맵 툴 바로가기는 여기
02. 이미지 불러오기
이미지 맵 툴 사이트 사용방법을 알아보도록 하겠습니다. 메인 화면에 있는 Browse for File을 눌러서 분할해 놓았던 이미지를 불러옵니다. 이때 불러오는 이미지는 좌표값을 알아내야 하는 이미지를 불러오면 됩니다.
2번째 줄 들어가는 이미지를 선택합니다. 1개의 이미지에 여러 개의 링크를 걸 때 필요한 이미지를 불러오면 됩니다. 2번째 줄 들어가는 이미지를 선택합니다. 1개의 이미지에 여러 개의 링크를 걸 때 필요한 이미지를 불러오면 됩니다. 이미지를 불러온 후 다시 아래 버튼 Start Mapping을 클릭합니다.
03. 이미지 업로드 완료 확인
아래 화면과 같이 이미지가 업로드된 걸 확인합니다. 이미지가 업로드되었다면 이미지 바로 위에 있는 click to continue를 클릭합니다.
04. 이미지 맵 모양 설정
마우스 우버튼을 클릭하면 여러 메뉴들이 나오는데 맨 위에 있는 create Rect, create poly, create circle 이 세 가지 메뉴는 이미지 맵의 모양을 설정하는 부분입니다. 원하는 모양의 이미지맵을 선택한 후 클릭하면 옵션 창이 나옵니다. 옵션창 여러 탭 중에 입력해야 하는 부분은 따로 없습니다. 그 이유는 이미 메모장에 HTML 코딩으로 필요한 소스를 완성해놓았기 때문입니다.
옵션 창에서 Event탭을 보면 Targat 속성 등을 설정할 수 있는 부분이 있지만 이미 메모장에 이 부분까지 코딩 소스를 입력해 놓았기 때문에 따로 선택을 하거나 입력을 하는 부분들은 안 하셔도 됩니다. 이미지 맵 툴 사이트에서는 좌표값만 찾는 용도로 사용할 예정입니다.
05. 이미지맵 영역 설정
마우스 커서를 이미지 위에 대고 마우스 왼쪽 버튼을 누른 채로 드래그하여 링크를 걸어야 하는 부분의 영역을 지정합니다.
06. 저장하기
영역을 지정했다면 옵션 창 하단에 save를 눌러 주면 최종적으로 완료가 됩니다.
07. 이미지맵 설정 완료
Save 저장을 클릭하면 이미지맵을 설정한 영역은 투명한 빨간색 박스로 변경된 걸 확인할 수 있습니다.
08. 두 번째 메뉴도 이미지맵 영역으로 지정
위와(1~7번까지) 같은 방법으로 이미지 맵 영역을 이미지에 있는 메뉴에 적용시켜주면 됩니다.
(※참고:완료된 영역의 사이즈를 조절하고 싶다면 수정을 원하는 이미지맵 영역을 클릭하면 사이즈 조절도 가능합니다.)
09. HTML Code 탭
영역을 모두 잘 지정했다면 마우스 우버튼을 클릭하여 나오는 메뉴 중에 Get Code를 선택합니다. 코드와 관련된 소스를 볼 수 있는 창이 나옵니다.
상단에 있는 탭 중에 두 번째 탭 HTML Code를 선택합니다. 이제 하단에 나와있는 HTML 코딩 소스에서 좌표값을 찾을 수 있습니다.
메뉴의 첫 번째 좌표값과 두 번째의 좌표값을 확인할 수 있습니다. 하지만 HTML 코딩 소스를 자주 보는 게 아닌 분들은 아마 구별이 쉽지 않을 수 있습니다. 이런 경우 좌측에 있는 title입력란에 메뉴명을 입력하고 save를 해주면 쉽게 구별이 됩니다. 이 부분을 설정하는 방법은 아래와 같습니다.
10. Title 메뉴명 입력
소스를 볼 수 있는 창을 닫고 다시 이미지로 돌아와 메뉴 첫 번째에 해당되는 쉽게 배우기를 클릭하여 옵션 창을 열어줍니다. 그리고 Title 입력란에 메뉴명을 입력하고 하단 save 버튼을 눌러 저장해줍니다.
두 번째 메뉴가 마찬가지로 메뉴명을 입력하고 저장합니다. 그리고 다시 마우스 우버튼을 클릭하여 GatCode로 가서 두번째 탭을 클릭합니다.
HTML 소스를 확인해 보면 아래와 같이 title에 메뉴명이 들어가 있는 것을 확인할 수 있습니다. HTML언어를 처음 접한다면 이미지 맵툴에서 처음 영역을 지정할 때 title에 메뉴명을 넣어놓고 HTML Code를 확인하는 게 가장 좋은 방법입니다.
11. 좌표값 복사하기
업로드한 이미지에서 첫 번째 메뉴의 이미지맵 영역을 지정했던 좌표값을 복사합니다. 저의 경우 쉽게 배우기의 좌표값이 됩니다.
12. 좌표값 붙여넣기
메모장에 해당하는 메뉴의 "좌표값"따옴표 안에 복사한 좌표값을 붙여 넣기 합니다.
13. 두 번째 메뉴 좌표값 복사
위와 방법은 동일합니다. 두번째 메뉴에 이미지 맵 영역을 지정했던 좌표값을 복사합니다.
14. 두번째 메뉴 좌표값 붙여넣기
메모장에 해당하는 메뉴의 "좌표값" 따옴표 안에 복사한 좌표값을 붙여 넣기 합니다.
다음 편에 이어서 좌표값을 알아내 완성된 HTML 코딩 소스와 1번째 줄 로고 HTML 소스를 위젯 직접 등록을 통해 블로그에 적용시켜보도록 하겠습니다. 또한 3번째 줄 HTML과 4번째 줄 HTML 소스는 저번에 소개했던 온라인 이미지 맵 에디터 사용방법으로 좌표값을 알아보도록 하겠습니다. 두 곳의 사이트 중에 편한 방법으로 작업을 해보시면 되겠습니다.
댓글