네이버 홈페이지형 블로그 응용편 08.온라인 이미지 맵 에디터 사용법

응용 편 7-1편에 이어서 네이버 블로그 홈페이지형 블로그 만들기를 해보도록 하겠습니다. 저번 시간에는 1번째 줄에 들어가는 위젯명 logo1_1~1_5의 5개의 위젯을 등록 완료했습니다.

이번 네이버 블로그 홈페이지형 블로그 만들기 7-2편에서는 2번째 줄에 들어가는 위젯을 완료해보도록 하겠습니다. 홈페이지형 블로그 만들기는 유튜브 강의 1~4편으로 먼저 제작되었습니다.

홈페이지형블로그 응용8편 목차

1. 온라인 이미지 맵 에디터
2. 온라인 이미지 맵 에디터 사용방법 설명
3. 이미지 업로드하기
4. 옵션 창 입력 부분
5. 이미지맵 영역 설정
6. 좌표값 보는 방법
7. 좌표값 복사하기
8. 3번째 줄 위젯 메모장에 붙여넣기
9. 두 번째 메뉴, 세 번째 메뉴 좌표값 복사
10. 마지막 4번째 줄 SNS위젯 좌표값

*영상의 캡처 화면을 사용하여 글이 작성되었기 때문에 이미지의 화질이 다소 좋지 못한 점 양해 부탁드립니다. 유튜브 영상을 먼저 촬영하고 글을 작성하게 되었습니다.

유튜브 강의

홈페이지형 네이버 블로그 만들기

03 / 04편

01. 온라인 이미지 맵 에디터(Online Image Map Editor)

온라인 이미지 맵 에디터(Online Image Map Editor) 사이트에서 본격적으로 좌표값을 알아보도록 하겠습니다. 

온라인 이미지 맵 에디터 사이트 [여기]로 이동합니다.

02. 온라인 이미지 맵 에디터 사용방법 설명

온라인 이미지 맵 에디터의 메인에 파일 선택 버튼이 있습니다. 파일 선택을 누른 후 → 업로드 버튼을 클릭 →우측에 있는 accept 클릭하면 이미지가 웹사이트에 업로드됩니다. 이 부분을 같이 해보도록 하겠습니다.

3. 이미지 업로드하기

방법1) 파일 선택 버튼을 눌러서 아직 좌표값을 넣지 않았던 분할 이미지를 불러옵니다. 3번째 줄 위젯 메뉴 버튼 이미지부터 작업해보겠습니다.

방법2) 이미지를 불러왔다면 우측에 있는 upload(업로드) 버튼을 클릭한 후 accept 버튼을 눌러줍니다.

방법3) 아래 화면과 같이 사이트에 업로드되어 이미지가 보이게 됩니다.

4. 옵션 창 입력 부분

온라인 이미지 맵 에디터도 다른 설정 부분들에 입력을 따로 설정하지 않아도 됩니다. 메모장에 이미 코딩 소스가 들어가 있기 때문에 이 사이트에서는 좌표값만 찾아내면 됩니다. 상단 설정 부분에서 맨 좌측에 있는 이미지 맵 모양을 선택만 해주면 됩니다.

5. 이미지맵 영역 설정

이미지 맵의 모양을 선택했다면 이미지 위에 마우스 왼쪽 버튼을 누른 채로 드래그하여 링크를 걸어야 하는 영역을 지정해주면 됩니다.

영역을 지정하면 상단에 Coords에 좌표값이 생성된 것을 확인할 수 있습니다. 번호가 앞에 표시되어 있기 때문에 영역의 구별도 찾기 쉽습니다. 이제 링크를 걸어야 하는 나머지 카테고리 영역들도 위와 같은 방법으로 영역을 지정합니다.

6. 좌표값 보는 방법

온라인 이미지맵 에디터에서 좌표값을 보는 방법을 정리해보면 총 2가지 방법으로 좌표값 확인이 가능합니다. 첫 번째, 메인 화면에 있는 상단 Coords 값을 그대로 복사하여 사용을 합니다. 두 번째, 메인 화면 상단에 있는 옵션 부분에 HTML 버튼을 클릭 또는 하단에 있는 Code를 클릭하여 확인이 가능합니다.  하지만 지금 필요한 건 좌표값만 찾으면 되기 때문에 Code에 있는 전체 소스는 사용하지 않겠습니다. 메인에 있는 바로 보이는 좌표값만 복사하여 사용하도록 하겠습니다

7. 좌표값 복사하기

이미지 맵 영역의 1번째 좌표값을 복사합니다.

8. 3번째 줄 위젯 메모장에 붙여 넣기

복사한 좌표값을 3번째 줄 HTML 소스 Coords="좌표값" 따옴표 안에 붙여 넣기 해줍니다.

9. 두 번째 메뉴, 세 번째 메뉴 좌표값 복사

위와 같은 방법으로 3번째 줄 HTML 소스를 좌표값을 넣어 소스를 완성시켜줍니다.

10. 마지막 4번째 줄 SNS위젯 좌표값

마지막으로 4번째줄 SNS에 해당하는 아이콘들에 들어가야 하는 좌표값을 찾으면 모든 소스가 완성됩니다.

방법1) 방법은 3번째 줄 위젯 좌표값 찾는 방법과 같습니다. 파일 선택을 누른 후 → 업로드 버튼을 클릭 →우측에 있는 accept 클릭하면 이미지가 웹사이트에 업로드되면 이미지맵 영역 설정에서 이미지 맵의 모양을 선택합니다. 

방법2) 이미지 위에 마우스 왼쪽 버튼을 누른 채로 드래그하여 링크를 걸어야 하는 영역을 지정해주면 됩니다.

방법3) 영역을 지정한 후 상단에 있는 Coords에 생성된 좌표값을 하나씩 복사하여 해당하는 메뉴 카테고리 영역에 Coords="좌표값" 따옴표 안에 하나씩 붙여 넣기 해줍니다.

이렇게 해서 모든 소스가 완성되었습니다. 다음 편에서는 좌표값까지 모두 알아낸 3번째 줄, 4번째 줄 HTML 소스를 위젯 직접 등록을 통해 블로그에 적용시켜 보도록 하겠습니다. 저번에 소개했던 이미지 맵툴 사이트와 이번에 소개한 온라인 이미지 맵 에디터 두 사이트 중에 자신에게 가장 잘 맞는 곳을 선택하여 좌표값을 찾으시면 좋겠습니다.