img 태그 이미지가 안 보일 때 확인할 것

img 태그 이미지가 안 보일 때 확인할 것에서 먼저 볼 부분

이미지가 안 보일 때는 대부분 경로, 파일명 대소문자, 확장자, 배포 위치 문제입니다. 순서대로 확인하면 빠르게 찾을 수 있습니다.

src는 현재 HTML 파일 위치를 기준으로 이미지를 찾습니다. 글 파일이 posts 폴더 안에 있다면 ../images처럼 한 단계 올라가야 할 수 있습니다.

로컬에서는 대소문자를 대충 써도 보이는 경우가 있지만 배포 환경에서는 Image.png와 image.png가 다른 파일로 처리될 수 있습니다.

alt는 이미지가 보이지 않을 때 대체 문구가 되고 접근성에도 중요합니다. 단순 장식이 아니라면 의미를 설명하는 문구를 넣는 것이 좋습니다.

잘못된 경로와 올바른 경로

<!-- 잘못된 예: 파일 위치가 다르면 깨질 수 있음 -->
<img src="image.png" alt="예시 이미지">

<!-- images 폴더 안에 있는 경우 -->
<img src="./images/image.png" alt="예시 이미지">

이 예제는 그대로 복사해서 확인하는 것보다 한 줄씩 바꿔보는 쪽이 더 도움이 됩니다. 태그 이름, 선택자, 변수 이름, 함수 실행 위치를 조금씩 바꾸면 어떤 부분이 결과에 영향을 주는지 직접 확인할 수 있습니다.

잘못 작성했을 때 나타나는 흐름

HTML 글은 화면에 보이는 모양보다 문서가 어떤 의미로 읽히는지를 먼저 봅니다.

브라우저 개발자 도구의 Elements 탭에서 실제 태그 구조가 예상대로 만들어졌는지 확인하면 오류를 줄일 수 있습니다.

검색엔진과 보조 기술은 태그의 의미를 참고하므로, 단순히 div로 감싸기보다 상황에 맞는 태그를 선택하는 습관이 좋습니다.

브라우저에서 직접 확인하는 순서

먼저 화면에 나타나는 결과를 보고, 그다음 코드에서 방금 수정한 부분을 확인하세요. 결과가 예상과 다르다면 콘솔 오류, 파일 경로, 선택자 이름, 태그 닫힘, 실행 순서 중 하나가 흔한 원인입니다.

초보 단계에서는 정답 코드를 한 번에 외우기보다 실패한 코드와 수정한 코드를 나란히 비교하는 방식이 좋습니다. 이 글의 예제를 기준으로 작은 값을 바꿔보면 다음 글을 읽을 때도 기준이 더 선명해집니다.

실습 후 점검할 항목

• 이미지 파일이 실제 위치에 있는지 확인하기
• src 경로가 HTML 파일 위치 기준으로 맞는지 확인하기
• 파일명 대소문자와 확장자 확인하기
• alt 문구를 비워두지 않았는지 확인하기