버튼 문구는 바꿨는데 눌러도 제자리이거나 엉뚱한 주소로 이동하나요? CodeBuilder의 ✏️ 내용 편집에서 🔗 링크 주소를 찾고 ‘📄 내 페이지…’ 목록으로 목적지를 연결한 뒤, 저장·미리보기에서 실제 이동까지 확인하는 순서를 안내합니다.
이 글의 목표는 홈페이지 안에 이미 만든 페이지를 버튼에 정확히 연결하는 것입니다. 주소를 외워 입력하기보다 CodeBuilder가 보여 주는 내 페이지 목록을 사용합니다.
CodeBuilder 메뉴명과 동작은 2026년 8월 30일 실제 화면·원본 코드·도움말에서 확인했습니다. 화면 안의 ‘온담 베이커리’는 기능 설명을 위한 가상 실습 사이트이며 실제 고객이나 제작 성과가 아닙니다.
버튼을 눌러도 제자리인 원인부터 확인합니다
버튼의 글자와 디자인이 보여도 이동할 주소가 올바르다는 뜻은 아닙니다. 링크 값이 #이면 같은 페이지의 위치를 가리키는 임시 주소라서 클릭해도 제자리처럼 보일 수 있습니다. 주소가 비어 있거나, 방문자가 접속할 수 없는 localhost 주소이거나, 이름을 바꾸거나 삭제한 페이지를 가리켜도 정상 이동하지 않습니다.
#: 디자인 단계에서 자주 쓰는 임시 링크입니다.- 빈 주소: 버튼 모양만 있고 목적지가 없습니다.
localhost: 내 컴퓨터에서는 보여도 방문자는 열 수 없습니다.- 없는 파일명: 페이지를 삭제하거나 이름을 바꾼 뒤 옛 주소가 남은 경우입니다.
1. 연결할 페이지가 실제로 있는지 확인합니다
먼저 왼쪽 파일 목록에서 연결할 페이지가 있는지 확인합니다. 예를 들어 ‘오시는 길’ 버튼을 연결하려면 location.html처럼 목적지가 될 페이지가 작업공간에 있어야 합니다. 아직 없다면 링크부터 입력하지 말고 페이지를 먼저 만드세요.
페이지 추가가 처음이라면 CodeBuilder에서 ‘오시는 길’ 메뉴와 페이지 추가하기의 순서를 따라 대상 페이지를 준비할 수 있습니다.
2. 버튼이 있는 페이지에서 ‘✏️ 내용 편집’을 엽니다
- 왼쪽 파일 목록에서 버튼이 보이는 페이지를 엽니다.
- 상단의 ✏️ 내용 편집을 누릅니다.
- 위쪽 찾기 칸에 버튼 글자 일부를 입력합니다. 예:
상담,오시는 길. - 🔗 링크 탭에서 해당 버튼의 링크 행을 찾습니다.
링크 행에는 🔗 링크 주소와 함께 “‘버튼 글자’을(를) 눌렀을 때 가는 곳”이라는 설명이 표시됩니다. 링크 숫자가 0이라면 다른 페이지 파일을 열었는지, 버튼이 실제 링크 요소인지, 자동으로 채워지는 보호 영역인지부터 확인하세요.
3. ‘📄 내 페이지…’에서 목적지를 고릅니다
링크 주소 칸 오른쪽의 📄 내 페이지…를 열고 연결할 페이지를 선택합니다. 목록에서 고르면 contact.html 같은 현재 작업공간의 파일명이 링크 칸에 들어갑니다. 철자를 직접 입력할 때 생기는 오타를 줄일 수 있어 내부 페이지 연결에는 이 방법이 가장 안전합니다.
버튼 글자도 함께 바꿔야 한다면 CodeBuilder에서 첫 화면 제목과 버튼 문구 바꾸기를 참고하되, 버튼 문구와 링크 주소는 서로 다른 항목이라는 점을 기억하세요.
4. ‘변경 내용 적용’과 위쪽 ‘저장’을 차례로 누릅니다
목적지를 고른 뒤 모달 아래의 변경 내용 적용을 누릅니다. 이 단계는 열린 작업 화면에 수정 내용을 반영하는 과정입니다. 이어서 CodeBuilder 위쪽의 💾 저장을 눌러 파일에 저장해야 다음에 다시 열어도 연결이 유지됩니다.
- 📄 내 페이지…에서 목적지를 선택합니다.
- 변경 내용 적용을 누릅니다.
- 화면에서 버튼과 페이지가 그대로 보이는지 확인합니다.
- 상단의 💾 저장을 누릅니다.
5. 미리보기에서 버튼을 직접 눌러 확인합니다
저장 표시만 보고 끝내지 말고 미리보기에서 버튼을 눌러 보세요. 연결한 페이지가 열리는지, 주소가 기대한 파일명으로 바뀌는지, 뒤로 가기를 눌렀을 때 원래 페이지로 돌아오는지 확인합니다. 모바일 화면에서도 같은 버튼을 한 번 눌러 터치가 되는지 확인하면 더 안전합니다.
연결이 예상대로 되지 않을 때 복구하는 방법
- 버튼을 눌러도 제자리입니다: 링크 주소가 여전히
#인지 확인하고 내 페이지 목록에서 다시 고릅니다. - 페이지를 찾을 수 없다고 나옵니다: 왼쪽 파일 목록에서 대상 파일명과 링크 값이 같은지 확인합니다. 페이지 이름을 바꿨다면 링크도 다시 연결합니다.
- 내용 편집에 링크가 없습니다: 버튼이 있는 파일을 열었는지 확인합니다. 자동 게시판·제품 영역처럼 보호되는 자리는 목록에서 빠질 수 있습니다.
- 적용했는데 다시 열면 사라집니다: 변경 내용 적용 뒤 상단의 💾 저장까지 눌렀는지 확인합니다.
- 엉뚱한 페이지가 열립니다: 비슷한 이름의 파일을 고른 경우가 많습니다. 대상 페이지를 먼저 열어 제목을 확인한 뒤 다시 선택합니다.
- 수정 전으로 돌아가야 합니다: 저장 전이면 취소하거나 되돌리기를 사용하고, 저장 뒤라면 history에서 이전 시점을 확인합니다.
완료 확인표
- 연결할 대상 페이지가 왼쪽 파일 목록에 실제로 있다.
- 버튼이 있는 페이지에서 ✏️ 내용 편집을 열었다.
- 🔗 링크 주소를 직접 추측하지 않고 📄 내 페이지…에서 골랐다.
- 변경 내용 적용 뒤 상단 💾 저장까지 눌렀다.
- PC와 모바일 미리보기에서 버튼을 직접 눌러 목적지를 확인했다.
- 페이지 이름을 바꾼 경우 기존 버튼 링크도 다시 확인했다.
