네이버 홈페이지형 블로그 응용편 01.와이드형 스킨 블로그에 적용
홈페이지형 블로그 만들기 응용 편을 준비했습니다. 기초 편을 못 보신 분들은 기초 편을 먼저 보시고(유튜브, 블로그 포스트) 응용 편을 보시길 추천합니다. 응용 편에서는 이미지맵 좌표를 이용해서 다양한 디자인에 링크를 거는 방법을 새롭게 알아보도록 하겠습니다.
블로그에 작성하는 글과 사진은 유튜브 동영상 강의를 캡처하여 작성했습니다. 홈페이지형 블로그 만들기 와이드형 스킨 블로그에 적용하는 방법을 시작으로 총 10편으로 제작되었습니다. 그럼 최종 편까지 시작해보겠습니다.
*영상의 캡처 화면을 사용하여 글이 작성되었기 때문에 이미지의 화질이 다소 좋지 못한 점 양해 부탁드립니다. 유튜브 영상을 먼저 촬영하고 글을 작성하게 되었습니다.
*네이버 홈페이지형 블로그 만들기 HTML 위젯 코딩 소스 종합 모음(txt 파일 첨부)를 글 하단에 두었습니다. 파일을 다운로드하여 편하게 작업해 보세요.
홈페이지형블로그 응용1편 목차
Prologue1: 기초 편 홈페이지형 블로그
Prologue2: 이미지맵을 이용한 다양한 블로그
1. 스킨 사이즈 조절하기
2. 내 블로그 관리로 이동
3. 리모콘 기능 활성화
4. 스킨 적용
5. 투명 위젯 만들기
6. 투명 위젯 최종 적용
7. 투명 위젯 영역 확인
홈페이지형 블로그 실전 활용 편 영상이 편하신 분들은 유튜브 영상을 참고해주시고 영상보다는 글로 보는 게 편하신 분들은 앞으로 발행되는 글로 참고하시어 나만의 홈페이지형 블로그를 만들어 보셨으면 좋겠습니다. 응용 편에서는 이미지맵을 활용한 좌표값을 알아봐야 합니다. 이미지맵의 좌표값을 알아낼 수 있는 무료 웹사이트 2곳을 통해서 응용 편을 진행해보도록 하겠습니다.
유튜브 강의홈페이지형 네이버 블로그 만들기01 / 02편
유튜브 영상을 먼저 촬영한 이후에 포스팅했습니다. 영상의 캡처 화면을 사용하여 글이 작성되었기 때문에 이미지의 화질이 다소 좋지 못한 점 양해 부탁드립니다.
이번 응용 편에서 소개할 사이트 두 곳은 이미지맵툴과 온라인 이미지맵 에디터 입니다. 이번 응용 편에서 소개되는 이미지맵을 활용한 좌표값 소스 보는 방법과 좌표값을 적용하여 위젯 직접 등록을 해보신다면 앞으로 다양한 디자인으로 나만의 홈페이지형 블로그 만들기를 하실 수 있으실 겁니다.
Prologue1: 기초 편에서 만들었던 홈페이지형 블로그
우선 기존에 만들어봤던 기초 편에서의 블로그 형태를 보도록 하겠습니다. 기존에 기초 편에서 만들어본 홈페이지형 블로그의 경우 아래 보이는 체코 관광청 공식 블로그와 같이 가장 기본적인 형태로 작업을 해봤습니다.
기존에 같이 제작을 해봤던 분들은 이번 응용 편 작업이 크게 어렵지 않을 수 있습니다. 만약에 기초 편을 아직 못 보셨다면 상단 관련 글 링크에 있는 기초 편에서 위젯을 활용한 네이버 블로그 홈페이지형 만들기를 먼저 제작해보시고 응용 편을 보시는 것을 추천합니다.
위의 화면은 기본 편에서 같이 만들어봤던 블로그입니다. 기초편에서 적용했던 블로그는 아래 링크로 확인해보세요.
홈페이지형 블로그 기초편으로 만들었던 네이버 블로그는 [여기에서 확인]
Prologue2: 이미지맵을 이용한 다양한 디자인의 블로그
응용 편에서는 기존에 만들어 봤던 메뉴 구성과는 다른 디자인으로 작업을 해보도록 하겠습니다. 우선 베이직한 구성에서 벗어난 이미지맵을 활용한 다양한 디자인의 블로그들을 예시로 보겠습니다.
1) 인천광역시 공식 블로그의 경우 상단은 타이틀이 되는 제목+메인화면으로의 링크가 걸려있습니다. 하단에는 메뉴 버튼 4개, 왼쪽 sns 아이콘 6개로 구성되어 있습니다.
2) 에어글 코리아 공식 블로그의 경우 상단 로고 이미지 아래로 메뉴 버튼들이 구성되어 있습니다. sns은 와이드형 이미지 아래로 아이콘 5개가 구성되어 있습니다.
3) 네이버 디자인 프레스 블로그는 메뉴 구성이 2단으로 되어있는 것을 볼 수 있습니다.
4) 듀오백 공식 블로그의 백그라운드(뒷배경)로 와이드 한 이미지를 넣고 그위로 로고 이미지에 메인화면으로 링크가 걸려있고 로고 아래로 메뉴 구성이 되어 있습니다.
위에 예시로 본 블로그들처럼 이미지맵만 활용할 줄 안다면 좌표값을 찾아내고 적용하여 다양한 디자인으로 홈페이지형 블로그 만들기가 가능해집니다. 이제 본격적으로 응용 편을 시작해 보도록 하겠습니다. 스킨을 적용하는 방법부터 알아보겠습니다. 스킨 디자인의 경우 블로그를 운영하는 목적과 주제에 따라 모두 다르기 때문에 참고용으로 보시면 될 것 같습니다. 오늘 작업하는 방법은 디자인이 달라도 적용하는 방법은 동일하기 때문에 응용을 해서 적용하면 됩니다.
1. 스킨 사이즈 조절하기
제일 먼저 작업할 부분은 위젯의 영역을 잡기 위한 스킨을 임시로 올려주는 작업을 하도록 하겠습니다. 저의 경우 이미 영상을 촬영하기 위해 미리 만들어보고 블로그에 적용을 해봐야 했기 때문에 디자인은 이미 완료가 된 상태입니다. 지금 처음 만드시는 여러분들은 디자인이 되어 있지 않은 가지고 있는 이미지로 사이즈만 규격화해서 스킨을 적용시켜주시면 됩니다. 이미지를 포토샵으로 불러와 가로 2000px*세로 720px로 조절만 해주고 (임시 배경 스킨. jpg)으로 이미지를 저장해주세요. 폴더 위치는 본인이 정하시면 됩니다.
(※ 참고: 이때 중요한 것은 미리 디자인을 해두면 안 된다는 것입니다. 미리 스킨 디자인을 해놓으면 위젯의 영역이랑 디자인의 메뉴(카테고리) 부분이 어긋나거나 다른 방향에 위젯의 버튼 링크가 걸리기 때문입니다.)
2. 내 블로그 관리로 이동
스킨 직접 등록을 위해서 프로필 영역 하단에 있는 관리로 들어가 줍니다. 꾸미기 설정→세부 디자인 설정을 클릭합니다.
(※ 참고: 세부 디자인의 리모컨을 빠르게 이동하려면 내 블로그 상단에 있는 내 메뉴→리모컨 메뉴를 클릭하면 바로 리모컨이 활성화됩니다.)
3. 리모콘 기능 활성화
1)세부 디자인 설정을 클릭하면 우측으로 리모컨 기능이 나옵니다. 리모컨이 활성화되면 스킨 배경 → 직접 등록 → 파일 등록을 눌러줍니다.
(※ 참고: 4. 하단영역(패턴)은 컬러를 흰색으로 적용합니다.)
2)스킨을 선택하여 열기를 클릭합니다. 이때 스킨은 디자인 작업을 하지 않은 가로 2000px*세로 720px로 크기만 조절한 (임시 배경 스킨. jpg)을 불러옵니다.
3)세부 디자인 적용을 완료하여 스킨을 내 블로그에 씌어줍니다.
4. 스킨 적용 (내 블로그에 스킨 씌우기 완료)
그럼 아래 화면과 같이 가로 2000px*세로 720px의 이미지가 스킨으로 적용된 걸 알 수 있습니다.
5. 투명 위젯 만들기
이제 투명 위젯으로 영역을 잡아 보도록 하겠습니다. 꾸미기 설정→레이아웃/위젯 설정으로 들어갑니다.
1)우측 하단에 있는 위젯 직접 등록을 클릭합니다.
2)이 부분은 기초 편에서 설명했던 부분이라 따로 설명 없이 바로 넘어가도록 하겠습니다. 투명 위젯 html 소스는 아래 블로그를 이동하여 메모장 첨부파일 다운로드하셔서 가로 값과 세로 값만 조절하여 사용해주시면 됩니다.
3)위와 같은 방법으로 투명 위젯 4개를 아래 화면과 같이 더 만들어 주시면 됩니다. 사이즈는 가로 값은 170px* 세로 값을 600px의 투명 위젯을 만들어주시면 됩니다. 위젯 1개의 세로의 최댓값이 600px입니다.
6. 투명 위젯 최종 적용하기
미리보기 후 특별한 문제가 없다면 하단에 있는 적용 버튼을 눌러서 스킨을 적용시켜줍니다.
7. 투명 위젯 영역 확인하기
블로그의 메인 상단을 마우스로 드래그해보면 아래 화면과 같이 위젯의 영역이 잡힌 것을 확인할 수 있습니다. 1줄에 5개의 위젯이 들어간 위젯을 보면 세로 값은 위젯을 추가해 더 아래로 늘릴 수 있지만 가로 값은 170px으로 고정시켜줍니다. 이 사이즈는 어느 블로그를 가서 봐도 그 영역에서 벗어나지 못합니다. (다음 글에서 확인할 수 있습니다.) 네이버에서는 블로그 상단 스킨 영역의 가로 값을 최대 170px 그리고 세로 값을 600px로 정해 놓았기 때문에 이 영역에 맞춰서 최대한 디자인 작업을 해줘야 합니다.
유튜브 영상과 블로그를 보면서 하나씩 만들어 가고 있는 분들이라면 저와 디자인이 다르기 때문에 위젯의 위치나 메뉴 등 사이즈가 많이 달라질 것입니다. 하지만 이미지맵을 이용하여 좌표를 삽입하는 방법은 동일하기 때문에 디자인이 달라도 응용하여 사용하기에는 크게 문제없을 것입니다. 제가 하는 방법을 예시로 보고 앞으로 진행되는 좌표값 찾는 방법만 잘 알아두시면 어떤 디자인도 적용이 가능하게 됩니다.
(※ 참고: 네이비 위젯 등록 시 중요한 3가지는 알아두시면 도움이 됩니다.)
1) 위젯은 최대 20개까지 등록이 가능합니다.
2) 위젯 코드는 1개당 2000byte까지 입력이 가능합니다.(글자 수로는 1,000자 정도입니다.)
3) 위젯의 하나 크기는 최대 가로 170px, 세로 600px까지 가능합니다.
댓글