이 블로그는?

안녕하세요. 니힐입니다. 이 블로그는 제 관심사들을 담아놓은 제 일상의 영역입니다. 볼 것이 많지는 않습니다만 천천히 구경하시다 가시면 되겠습니다. 아래는 이 블로그에 대한 몇가지의 안내사항입니다. 즐거운 하루 되시고, 좋은 일만 가득하시길 기원합니다.

1.이 블로그는 PC에서 볼 때 더 쾌적한 환경으로 즐길 수 있습니다.
2.이 블로그의 주제는 애니메이션, 게임, 일본어, 그림으로 크게 4가지입니다. 다른 것들을 다루기도 합니다.
3.다양한 정보를 공유하기도 합니다. 많은 분들의 편리함을 위해 좋은 포스트를 작성하는 것이 이 블로그의 일차적인 목표입니다.

감사합니다
이 블로그가 조금이나마 여러분들의 여흥과 심심함을 해소해드렸다면 좋겠습니다. 다양한 재미를 만들어드리기 위해 노력하고 또 노력하겠습니다. 남은 하루 좋은 하루 되셨으면 좋겠습니다. 감사합니다.
포스트 검색하기
포스트
작성된 시간 2018.08.28 10:30

니힐의 포토샵 주저리 - 네이버 블로그 홈페이지형 스킨 만들기 2편 - 이미지매핑

업로드 시간 : 2018 0828 - 10 : 30

니힐입니다. 이번 글은 저번 글에서 만들었었던 네이버 블로그 홈페이지형 스킨의 두번째 포스팅입니다. 우리는 스킨을 하나 만들었습니다. 레이아웃은 뭐 여러분이 나름대로 설정을 해서 완성을 했을 것이고, 완성이 되었다면 그것을 사용하시면 됩니다.

하지만, 더 심화적으로 더 홈페이지 같은 느낌을 내고 싶으시다면 이제 이 글을 통해서 뭘 해야하는지를 알려드리려고 합니다.

홈페이지형 스킨 만들기 그 두번째!

목적부터 이야기를 해보자면, 우리가 만들었던 스킨에 링크를 추가하는 겁니다. 홈페이지형 스킨이라는 것은 기존의 블로그의 형태를 최대한 숨기고 여러가지의 감각적인 디자인을 통해서 홈페이지처럼 보이게끔 하는 것을 말합니다.

지금 당장 네이버에 홈페이지형 스킨이라고 검색을 해보시면 다양한 블로그가 나옵니다. 아무거나 클릭해서 들어가보시면 우리와 똑같은 방식으로 설정된 배경 이미지에 링크가 달려 있는 것을 볼 수 있을 것입니다. 그것이 홈페이지 형 스킨의 주요 메커니즘입니다.

우리도 저런 것을 만들어보자는 겁니다. 그리고 여러분이 괜찮다면, 이제 여기에 링크를 추가해줘야 합니다. 그러기 위해서는 몇가지의 수정이 필요합니다.

일단 우선적으로 해야 하는 것은 위젯을 수정하는 겁니다. 우리는 저번 글에서 div 태그를 이용해서 위젯을 만들었습니다. 저는 600 높이 5개와 150 높이 5개를 이용해서 스킨을 짰습니다. 하지만 여기에는 링크를 넣을 수가 없습니다. 이미지가 아니기 때문입니다.

그런고로 저번 글에서 만든 것은 일반판이라고 생각을 하시면 되고 우리는 그 일반판을 리미티드 에디션으로 개조를 하는 것이라고 생각을 해주시면 될 것 같습니다.

위젯 수정하기

위젯부터 건드려봅시다. 일단 포토샵을 켜주시고 새로운 캔버스를 하나 만듭니다. 여러분이 만들었던 위젯의 크기만큼의 투명한 캔버스를 만들면 됩니다. 저는 170에 600과 170에 150 사이즈로 위젯을 만들었었으니까 위젯과 똑같은 사이즈의 투명한 이미지를 두개 만들었습니다. 확장자는 png 여야만 하고 투명해야 합니다. 아마 저장하면 검은색 파일일 겁니다. 그걸 네이버 메모 게시판에 들어가서 비공개로 업로드 합니다.

170 600 사이즈의 이미지를 다섯 번 업로드 합니다. 저는 170 150 사이즈의 이미지도 다섯 번 업로드 해야 합니다. 메모 게시판에 업로드를 하셨습니까? 그러면 인터넷에 여러분이 만든 이미지가 등록이 되었을 겁니다. 그럼 이제 그 이미지들의 주소를 복사해주세요. 구글 크롬이나 네이버 웨일 같은 브라우저를 사용하면 편하게 주소를 복사 할 수 있습니다.

복사한 주소는 다른데다가 메모를 해두시기 바랍니다. 주소는 이미지마다 다 다르니까 저는 총 10개의 이미지가 필요한 셈입니다.

그리고나서 아래의 코드를 주목해주시기 바랍니다. 위젯을 수정을 할 것인데, 아래의 코드를 이용할 겁니다. img 태그는 웹 페이지에 이미지를 로드하는 기능을 하는 태그입니다. src="#" 를 주목해 주시기 바랍니다. 우리는 #의 자리에 우리가 복사한 이미지 주소를 여기에 넣을 겁니다. 반드시 하나만 넣어 주시기 바랍니다.

1
<img src="주소" usemap="#내용" />
cs


그 다음에는 usemap="#내용" 에 대한 부분을 살펴봅시다. 이건 이 이미지에 이미지맵을 적용하겠다 라는 선언입니다. 맵의 이름을 설정해줍시다. 아무거나 작성하시면 됩니다. 다만, 꼭 기억해두시기 바랍니다. 자, 그럼 여기서부터는 약간 어려워집니다.

이미지매핑

이미지매핑이라는 것은 이미지의 특정 부분에 링크를 만들어서 웹페이지와 상호작용을 할 수 있는 기능을 말합니다. 이미지의 어떤 부분을 클릭하면 네이버가 뜨게끔 설정이 가능합니다. 준비물은 이미지고 그 다음에 필요한 것은 좌표입니다. div 태그로 만든 위젯은 이미지가 아니기 때문에 이미지매핑이 불가능했던 것이고, 이번에 우리가 만든 이미지들을 넣어서 수정한 위젯에는 이미지매핑이 가능해진 것입니다. 그럼 본격적으로 이미지매핑에 대해서 알아봅시다. 천천히 하다보면 어렵지 않습니다.

이미지매핑을 위한 코드는 아래와 같습니다.

1
2
3
4
<img src="주소" usemap="#내용" />
<map name="아무거나">
    <area shape="rect" coords="시작 가로 좌표,시작 세로 좌표,끝 가로 좌표,끝 세로 좌표" href="연결할 페이지" target="_blank" />
</map>
cs


보통은 이미지 태그와 같이 적어두면 더 보기에 편할겁니다. map name="아무거나" 같은 경우에는 우리가 위에서 적었던 usemap="#아무거나" 와 똑같아야 합니다. 즉 usemap이라는 것은 아무거나 라는 이름을 가진 맵을 사용하겠다. 라는 것입니다. area shape="rect" 이것은 사각형의 영역을 만들겠다는 겁니다. coords= 이것은 좌표입니다. 좌표에 대해서 간략하게 설명을 하고 넘어가야겠습니다.

가장 중요한 건 시작점과 끝점입니다. 이미지에 나와 있는 것처럼 시작점의 가로 좌표가 첫번째고 세로 좌표가 두번째입니다. 끝점의 가로 좌표가 세번째, 세로 좌표가 네번째가 됩니다. 이 수치를 알아내는 방법은 아주 가까운 곳에 있습니다. 그림판을 켜세요. 그리고 마우스를 원하는 지점에 갖다대봅니다. 숫자가 나옵니다. 그리고 다른 지점에 마우스를 대봅니다. 또 숫자 나옵니다. 순서대로 네개의 숫자를 적으면 사각형이 됩니다.

중요한 것은 시작점을 정했으면 오른쪽 대각선 아래에 끝점이 위치해야 한다는 겁니다.

href="연결할 페이지" 말 그대로 연결하고 싶은 페이지를 적으면 됩니다. 웹사이트의 주소를 적으라는 말이지요. target="_blank" 이것은 새로운 창에서 링크를 열겠다 라는 의미입니다. 만약에 링크를 클릭하면 클릭한 창에서 링크를 열고 싶다면 이걸 쓰면 안되고 target="_top" 을 쓰면 됩니다. 그리고 map으로 닫아줍니다. HTML의 기본은 알 필요가 없습니다. 그냥 저대로 쓰시면 됩니다. 새로운 창이면 블랭크. 기존의 창이면 톱. 쉽죠?

이것이 이미지매핑의 모든 것입니다. area태그는 여러줄 사용해도 됩니다. 한 이미지에 세개의 area가 있으면 세개의 링크가 있다는 겁니다. 사용하시다보면 이해가 올 것이라고 생각합니다. 이건 연습이 필요한 것이니까 익히고 연습하시는 것을 추천드립니다! html을 전혀 알 필요 없다고 생각했던 네이버 블로그에도 어느정도 필요한 html 지식은 있어야 하는 듯 합니다.

1
2
3
4
5
6
<img src="주소" usemap="#내용" />
<map name="아무거나">
    <area shape="rect" coords="시작 가로 좌표,시작 세로 좌표,끝 가로 좌표,끝 세로 좌표" href="연결할 페이지" target="_blank" />
    <area shape="rect" coords="시작 가로 좌표,시작 세로 좌표,끝 가로 좌표,끝 세로 좌표" href="연결할 페이지" target="_blank" />
    <area shape="rect" coords="시작 가로 좌표,시작 세로 좌표,끝 가로 좌표,끝 세로 좌표" href="연결할 페이지" target="_blank" />
</map>
cs


준비한 프로젝트는 여기까지입니다. 디자인 연습하면서 레이아웃 구성에 대해서나 시간이 되면 다뤄볼까 생각 중에 있습니다. 이번 글은 여기서 마치도록 하겠습니다. 네이버 블로그도 잘 꾸미면 아주 이쁘고 멋진 블로그가 될 수 있습니다. 아주 자유로운 티스토리와는 달리 형식이 존재한다는 것은 어쩌면 좋은 것일 수도 있다는 생각이 들기도 합니다. 제가 이 포스팅을 시작한 이유는 여러분이 보다 좋은 스킨을 만들 수 있고 사용할 수 있으셨으면 해서 였습니다. 저도 배우는 중이고 함께 배워가자는 의미입니다. 그럼, 다음 글에서 봅시다.


연락처

이 아래는 SNS 연락처들입니다. 하고 싶은 말이 있으시거나 질문 사항이 있으시면 연락 주시면 되겠습니다. 빠르게 답변드리도록 하겠습니다.

트위터 : @NIHIL_ILLUST
인스타그램 : nihil_illust
이메일 : nihil_ncunia@naver.com
디스코드 : 니힐 NIHIL#3841

네이버, 네이버 블로그, 홈페이지형 스킨, 스킨 만들기, 이미지맵, 이미지매핑, 네이버 홈페이지형 스킨
이 글은 CC BY-SA 2.0 KR를 따릅니다.
페이지 탐색
공지사항
방문자

오늘 72 어제 276 전체 1,067,632

메뉴
카테고리
기간별 포스트 현황