홈페이지형 블로그 만들기 응용 편을 준비했습니다. 기초 편을 못 보신 분들은 기초 편을 먼저 보시고 응용 편을 보시길 추천합니다. 응용 편에서는 이미지맵 좌표를 이용해서 다양한 디자인에 링크 연결하는 방법을 새롭게 알아보도록 하겠습니다.
✅ 본 포스팅은 유튜브 영상과 함께 구성되어 있으며, 글 아래에서 강의 링크를 확인하실 수 있습니다.
✅이미지 화질은 영상 캡처 기반이라 다소 낮을 수 있는 점 양해 부탁드립니다.
✅홈페이지형 블로그 기초 편을 아직 안 보셨다면 먼저 보고 오시는 걸 추천드립니다.
- Prologue1: 기초 편 요약
- Prologue2: 이미지맵 블로그 디자인 이해
- STEP 1: 스킨 사이즈 조절
- STEP 2: 블로그 관리 진입
- STEP 3: 리모콘 기능 활성화
- STEP 4: 스킨 적용하기
- STEP 5: 투명 위젯 만들기
- STEP 6: 투명 위젯 최종 적용
- STEP 7: 위젯 영역 확인 및 주의사항
- HTML 위젯 코드 모음 다운로드
본 포스트는 이런 분들께 추천드려요
- 네이버 블로그를 홈페이지처럼 꾸미고 싶은 분
- HTML 위젯을 활용한 커스터마이징에 관심 있는 분
- 이미지맵 좌표 활용법을 배우고 싶은 분
- 유튜브보다 글을 보며 따라 하는 게 편한 분
Prologue1: 기초 편 요약
기초 편에서는 체코 관광청 블로그 스타일을 참고하여 기본적인 홈페이지형 스킨 구성법을 배웠습니다. 위젯 배치와 기본 레이아웃 구성을 익히셨다면, 이번 응용편도 어렵지 않게 따라오실 수 있어요.
Prologue2: 이미지맵을 활용한 다양한 디자인
이미지맵은 하나의 이미지를 여러 개의 링크 버튼으로 분할할 수 있는 기능입니다. 좌표값만 알면 메뉴 구성의 제약 없이 자유롭게 블로그를 꾸밀 수 있어요.
예시 블로그 디자인
🔗[인천광역시 블로그 바로가기]: 메인화면 링크 + 메뉴 + SNS 아이콘 6개
🔗[네이버 디자인 프레스 블로그 바로가기]: 2단 메뉴 구조
🔗[듀오백 공식 블로그 바로가기]: 와이드 배경 이미지 + 메뉴 구성(좌표활용)
STEP 1. 스킨 사이즈 조절하기
포토샵에서 가로 2000px, 세로 720px로 임시 배경 이미지를 만듭니다.
주의: 메뉴 위치와 위젯 링크가 어긋날 수 있으므로 디자인은 비워둡니다.
STEP 2. 내 블로그 관리로 이동
내 블로그 → 관리→ 꾸미기 설정 → 세부 디자인 설정
STEP 3. 리모콘 기능 활성화
- 스킨 배경 → 직접 등록 → (임시 배경 스킨.jpg) 업로드
- 하단 영역(패턴)은 흰색으로 설정
STEP 4. 스킨 적용 완료
스킨 적용이 완료되면 배경 이미지가 블로그 상단에 뜹니다.
STEP 5. 투명 위젯 만들기
- 꾸미기 설정 > 레이아웃/위젯 설정 > 위젯 직접 등록
- 위젯 크기: 가로 170px / 세로 600px
- 총 4개 이상 위젯으로 영역 분할
🔗 [HTML 위젯 코드 다운로드] (txt파일)
STEP 6. 투명 위젯 최종 적용
위젯 위치 확인 후 적용 버튼 클릭
STEP 7. 투명 위젯 영역 확인하기
- 블로그 상단을 마우스로 드래그하여 위젯이 잘 배치됐는지 확인
- 가로 최대 170px / 세로 최대 600px
- 하나의 위젯은 최대 2,000byte (약 1,000자)까지 가능
- 최대 20개까지 등록 가능
마무리 Tip
- HTML, 이미지맵, 좌표값만 익히면 어떤 디자인이든 구현 가능
- 디자인은 자유롭게, 코드는 정확하게!
- 블로그 디자인을 바꾸고 싶다면, 이 응용편 시리즈를 참고하세요!
다음 편에서는 이미지맵 좌표값을 실제로 구하고 적용하는 방법을 다룰 예정이니 이어서 봐주세요!
댓글 쓰기