홈페이지형 네이버 블로그를 만드는 과정, 벌써 4편째입니다. 이전 글에서는 스킨 사이즈와 버튼 디자인을 적용하고, 완성한 스킨을 블로그에 등록해봤는데요. 이번 편에서는 위젯의 위치를 정리하고, 투명 버튼을 활용해 공간을 만드는 방법을 알려드릴게요. 초보자도 쉽게 따라 할 수 있도록 사진과 함께 단계별로 설명드릴게요.
- 레이아웃 설정 방법
- 위젯 위치 정리하기
- 적용 미리보기로 상태 확인
- 투명 위젯 버튼 만들기
- 위젯 적용 확인 및 추가 등록
- 투명 위젯 순서 정렬
- 투명 위젯 버튼 적용 완료
*이 글은 유튜브 영상을 먼저 촬영한 후 캡처 화면을 활용해 작성되었기 때문에, 일부 이미지의 화질이 다소 낮을 수 있는 점 양해 부탁드립니다.
관련 유튜브 강의
유튜브 검색창에 "여행하는 디자이너 트래블러"를 입력하면 쉽게 찾아볼 수 있어요.
강의 링크:
(기초1편 바로가기)
(기초2편 바로가기)
(기초3편 바로가기)
1. 레이아웃 설정 방법
관리 → 레이아웃/위젯 설정으로 이동해 주세요. 상단에 12개 레이아웃 중 11번째 레이아웃을 선택하고, 우측 메뉴에서 아래 설정을 적용합니다.
- 전체 정렬 → 중앙
- 글 영역 → 넓게
- 타이틀 → 체크 해제 (비활성화)
2. 위젯 위치 정리하기
이제 위젯 위치를 정리해볼게요. 남아 있는 위젯들을 드래그하여 모두 아래쪽으로 내립니다.
중요한 포인트는 카테고리와 포스트 사이에 아무 위젯도 없어야 합니다.
3. 적용 미리보기로 상태 확인
위젯을 정리한 후에는 꼭 미리보기를 눌러 제대로 적용됐는지 확인해 주세요. 정상적으로 설정됐다면 상단 스킨 이미지에 아무 위젯도 보이지 않아야 합니다.
4. 투명 위젯 버튼 만들기
이제 투명 버튼을 이용해 공간을 확보해봅니다.
관리 → 레이아웃 → 위젯 설정 → 위젯 직접 등록 클릭 후 아래처럼 설정하세요.
- 위젯명: 공간 1
- HTML 코드 입력: 아래 코드 복사해서 붙여넣기
1 2 3 4 5 6 7 | <table border="0"> <tbody> <tr> <td width="170" height="328" /> </tr> </tbody> </table> | cs |
이 코드는 가로 170px, 세로 328px의 투명 버튼입니다. 이후 디자인에 따라 수치를 자유롭게 바꾸셔도 됩니다.
5. 위젯 적용 확인 및 추가 등록
투명 버튼 위젯이 정상 등록됐다면 “공간 1” 위젯이 생성됩니다.
같은 방식으로 공간 2, 공간 3, 공간 4, 공간 5까지 총 5개를 만들어주세요.
6. 투명 위젯 순서 정렬
생성된 위젯들을 드래그해서 상단으로 이동시켜주세요. 공간 1부터 5까지 차례대로 배치하면, 글 영역이 아래로 자연스럽게 밀립니다.
7. 투명 위젯 버튼 적용 완료
아래 화면처럼 글 영역이 아래로 내려갔다면 투명 위젯이 잘 적용된 것입니다. 스킨 이미지와 겹치지 않고 공간 확보만 깔끔하게 된 것이죠.
이제 홈페이지형 블로그에서 가장 중요한 위젯 정리와 공간 확보까지 완료했어요.다음 편에서는 메뉴 버튼을 적용하고, 각 버튼에 원하는 페이지를 연결하는 방법을 알려드릴게요.
댓글 쓰기