네이버 블로그 스킨 이미지 맵 쉽게 만드는 법

안녕하세요~ 네이버 블로그를 하다가 티스토리로 넘어온 게으른여우입니다.

 

오늘은 네이버 블로그에서 홈페이지형 블로그 스킨을 만들때 사용했던

투명위젯에 맵 좌표를 이용하여 링크를 쉽게 만들어 볼게요.

 

게으른여우는 블로그 스킨과 무관한 이미지로 작성했습니다.

 

블로그 스킨을 만드는 많은 분들이 어려워하는게 좌표를 찍는부분을 가장 어려워합니다.

쉽게는 그림판으로 좌표를 찍을 수 있지만~

 

간혹 맥OS를 사용하는 분들은 그림판이 없으니

아래에 사이트를 이용해보세요!

http://maschek.hu/imagemap/imgmap/

 

위에 사이트에 들어가면 아래 사진처럼 화면이 보일거에요.

 

이미지 업로드는 URL로 할수있고, 내 pc에 저장된 파일로 할 수 있어요.

우선 내 pc에 저장된 사진으로 하는 방법을 알려드릴게요.

 

 

위에 사진에 표시된 부분을 눌러서 파일을 업로드 해주세요!

(파일을 선택한 후 옆에 Upload버튼을 눌러야합니다)

 

그리고 accept를 눌러야 화면에 사진이 보입니다.

 

 

저는 부트스트랩 버튼들 사진을 가져왔어요.

여기서 클릭을 이용하여 링크를 만들 영역을 그려주세요.

 

 

위에 사진처럼 여러가지 링크를 그릴수 있어요!

여기서 잠깐 간단한 설명해드릴게요.

 

rectangle은 사각형을 의미하고, 원, 다각형을 지원하는데

대부분 사각형이나 원을 많이사용합니다.

 

Coords는 좌표를 의미합니다.

2,31,112,87이라는 좌표가 있을때

시작x축, 시작y축, 끝x축, 끝y축 이렇게 이해하면 되는데

처음엔 많이 어려워요.

 

Href는 링크를 클릭했을때 이동할 URL을 의미해요.

 

Alt는 네트워크 환경이나 서버측 오류로 이미지가 보이지않을때

대체 메세지를 보여주는 텍스트입니다.

 

Target은 이 링크를 새창으로 보여주냐, 현재창으로 보여주냐 차이입니다.

주로 사용하는건 top / blank 두가지입니다.

 

top은 현재창으로 보여주는데 뒤로가기를 누르면

원래 창으로 돌아갈 수 있어요.

 

blank는 새창으로 보여주는데 말 그대로 새창으로 보여줘요.

 

이렇게 간단하게 설명은 끝났고,

이걸 바로 코드로 보고싶다면 사진 하단에 Code라는걸 눌러보면

 

열심히 설정한대로 코드가 만들어져있어요.

 

이걸 복사해서 네이버 투명위젯 코드에 넣으면 되겠죠?

(단, 맵에 대한 코드만 있고 이미지부분은 추가해줘요)