이미지 버튼을 바꿨는데 예전 글로 열릴 때: 그림 src와 링크 href 구분

이미지 링크 그림 주소와 이동 주소라는 큰 제목, 산 그림을 띄운 노트북과 돋보기 및 고리 장식이 있는 책상 삽화

새 그림이 보이는데 클릭하면 예전 글로 이동한다면 이미지 주소와 링크 목적지를 따로 확인하세요. 이미지 버튼을 교체할 때 두 주소가 함께 바뀌었다고 가정하면 오류를 놓치기 쉽습니다. 단순 HTML 구조와 편집기의 링크 입력을 나눠 읽는 방법입니다.

1. 보이는 그림과 클릭 목적지는 별도입니다

HTML에서 링크의 href는 이동할 주소를 지정하고, 이미지의 src는 보여줄 이미지의 주소를 지정합니다. 따라서 그림을 새 것으로 바꿔도 기존 링크가 남으면 예전 글로 이동할 수 있습니다. 반대로 링크만 고치면 화면의 그림은 그대로일 수 있습니다.

이 표는 단순 HTML 링크 구조를 읽는 예시입니다. 편집기가 링크를 다른 방식으로 처리한다면 지원되는 링크 입력 기능과 실제 공개 결과를 확인합니다.

<a href="https://example.com/read-topic">
  <img src="https://example.com/topic-cover.jpg"
       alt="해당 주제 상세 안내 읽기">
</a>

예시는 실제 자료를 제공하는 주소가 아니라 구조를 설명하기 위한 가상 URL입니다. 첫 주소가 글의 목적지이고, 두 번째 주소가 그림 파일입니다. 두 주소가 서로 달라도 이상한 것이 아닙니다.

편집기에서 사진을 선택했을 때 ‘링크 입력’ 항목이 있다면 그 칸에 넣는 주소가 무엇인지 확인하세요. 이미지를 업로드할 때 생긴 파일 주소를 본문 상세글 목적지로 착각하지 않습니다. 이미지 미리보기 확대 링크와 상세 안내 링크도 구분해 봅니다.

먼저 수정할 그림 위치와 현재 목적지를 기록하고 원문을 보존합니다. 새 그림을 넣은 뒤 편집기가 기존 링크를 유지했는지 실제 링크 입력 칸에서 확인하세요. 제목·그림·목적지가 같은 주제를 가리키는지 함께 대조합니다.

그다음 공개 화면에서 해당 그림을 한 번 눌러 열리는 글의 제목과 주소를 확인합니다. 그림이 잘 보인다는 사실만으로 링크 연결을 완료했다고 기록하지 않습니다. 다른 탭으로 열렸다면 그 탭의 실제 목적지를 확인하고 불필요한 작업 탭을 닫습니다.

이미지 로딩 확인과 클릭 이동 확인은 두 가지 결과입니다. 목록 대표 이미지가 맞더라도 본문 버튼의 링크가 별도로 남을 수 있어 수정한 위치를 확인해야 합니다.

파일명만으로 판단할 수 없습니다. 링크 목적지를 따로 확인하고 실제로 눌러봅니다.

새 그림의 내용과 역할에 맞는지 확인하세요. 이전 주제 설명을 그대로 남기면 이미지와 설명이 어긋납니다.

기술 근거: MDN 링크 요소, MDN 이미지 요소. 가상 코드와 편집 확인 순서는 직접 구성했습니다.

확인 기준일: 2026년 10월 4일.

대표 책상 삽화는 AI로 제작했으며, 코드·비교표·편집 예시는 직접 구성했습니다. 실제 편집기 화면이 아닙니다.