｜기초 5편){kind=link}
홈페이지형 네이버 블로그 만들기 기초 시리즈, 벌써 다섯 번째 시간입니다. 이전 글에서는 위젯 직접 등록을 통해 투명 버튼을 HTML 코드로 제작해 공간을 확보하는 방법을 알아봤죠. 이번 편에서는 그 버튼에 실제로 링크를 걸어 메뉴 버튼처럼 동작하도록 만들어볼게요. 특히 이번 포스트에서는 이전 글쓰기 버전(스마트 에디터 2.0) 을 활용해 이미지 업로드부터 URL 연결, HTML 코드 추출까지 하나하나 설명드릴게요. 스마트에디터 3.0 버전은 다음 편에서 다룹니다.
- 이동할 페이지의 링크 주소(URL) 확인
- 링크 주소 복사 및 정리
- 버튼별 이동 주소 정리
- 카테고리 비공개로 추가하기
- 이미지 업로드하기 (구버전 글쓰기 활용)
- 이미지에 링크 주소 넣기 (구버전 글쓰기 활용)
*이 글은 유튜브 영상을 먼저 촬영한 후 캡처 화면을 활용해 작성되었기 때문에, 일부 이미지의 화질이 다소 낮을 수 있는 점 양해 부탁드립니다.
관련 유튜브 강의
유튜브 검색창에 "여행하는 디자이너 트래블러"를 입력하면 쉽게 찾아볼 수 있어요.
강의 링크:
(기초1편 바로가기)
(기초2편 바로가기)
(기초3편 바로가기)
1. 이동할 페이지의 링크 주소 확인
홈페이지형 블로그의 핵심은 버튼을 누르면 원하는 페이지로 이동하는 구조를 만드는 것입니다. 먼저 이동할 페이지의 URL 주소를 확보해보겠습니다.
- 이동할 페이지에 들어가서 마우스 오른쪽 버튼 → 속성 클릭
- 스마트에디터 3.0으로 작성한 글이라면 공유 → URL 복사
- 이전 버전이라면 게시물 우측에 있는 복사 버튼 클릭
2. 링크 주소 복사 및 정리
링크가 많을 경우 메모장에 정리해두는 게 좋습니다. 아래처럼 각 버튼과 매칭되는 URL을 함께 정리해주세요.
- 버튼1 - https://blog.naver.com/예시1
- 버튼2 - https://blog.naver.com/예시2
- 버튼3 - https://blog.naver.com/예시3
3. 버튼별 링크 주소 정리 방법
- 메모장에 버튼 번호와 함께 URL 붙여넣기
- 여러 개 버튼이 있다면 구분 가능한 이름과 함께 저장
→ 이 작업을 통해 HTML 작업 시 헷갈리지 않게 할 수 있어요.
4. 카테고리 비공개로 추가하기
버튼 이미지를 업로드할 공간이 필요합니다. 방문자에게 보일 필요 없는 비공개 카테고리를 하나 만들어봅시다.
설정 방법
- 블로그 관리 클릭
- 상단 탭에서 메뉴/글/동영상 선택
- 좌측에서 블로그 → 카테고리 추가
- 비공개 체크 후 확인
5. 구버전 글쓰기로 버튼 이미지 업로드하기
스마트에디터 3.0에서는 이미지 삽입 후 URL 추출이 까다롭기 때문에, 스마트에디터 2.0으로 글쓰기 환경을 변경해서 이미지 업로드를 진행합니다.
글쓰기 설정 변경 방법
- 관리 → 기본 설정 → 기본 에디터 설정에서 스마트에디터 2.0 선택
- 비공개 게시판 카테고리 선택 후 글쓰기 시작
- 상단 사진 버튼 클릭 → 버튼 이미지 삽입
6. 이미지에 링크 주소(URL) 삽입하기
- 업로드한 버튼 이미지를 클릭하여 선택
- 에디터 상단의 URL 버튼 클릭
- 메모장에 정리한 주소를 붙여넣기
- 적용 버튼 클릭
- 하단 HTML 탭 클릭하여 코드를 복사
- 메모장에 저장 (ex. 버튼1_HTML.txt)
이전 글쓰기 버전(스마트 에디터 2.0)을 활용하면 복잡한 코딩 없이도 버튼 이미지에 링크를 넣고 HTML 코드를 추출할 수 있습니다. 다음 글에서는 스마트에디터 3.0 버전에서 동일한 작업을 어떻게 하는지 자세히 안내해드릴게요.
댓글 쓰기