HTML의 태그 중 img src 부분에서 공부할 때 똑같이 따라 쓰고 연습해도 엑박이 나오는 경우가 있습니다. 보통 이런 경우에는 올바르지 않은 경우가 많지만 이에 대한 해결 방법을 알아보도록 하겠습니다. 보통 엑박은 사진이 제대로 보이지 않고 네모난 가운데 빨간 엑스 표시만 보일 경우 이를 엑박이라고 칭합니다. img, 이미지 엑박의 이유위에서 말씀드렸다시피 보통 엑박의 이유는 올바르지 않은 경로 설정 때문입니다. 보통 3가지 이유를 볼 수 있는데 1. 코드 수정 후 저장하지 않은 경우 2. 파일 이름의 대소문자를 잘못 입력하였을 경우 3. 파일의 경로가 잘못된 경우 이 3가지가 대표적인 엑박의 이유입니다  습관적으로 / 로 시작하게 되면 이전 디렉토리로 이동한 후에 파일을 찾기 때문에 원본 소스 폴더 안의 test폴더를 찾는 것이 아닌 원본 소스의 상위 폴더로 이동 후 test폴더를 찾게 되는 것입니다. 절대 경로 방식으로 사용하실 때는 정확한 경로를 입력해주셔야 합니다. 감사합니다
<img> 태그img는 image의 약자로 즉, 그림이나 사진을 보여주는 태그 이다. <img>태그는 종료태그 없이 단독으로 사용된다 위에서 src는 source의 약자로 이미지의 원본 소스의 위치 정보를 받는 곳인데, 위치정보는 절대경로와 상대경로 두가지로 나누어 진다 1) 절대경로- 고유한 전체 경로이다. 절대 경로로 이미지를 띄워보자 ( •̀ ω •́ )y * 원하는 사이트-> 원하는 사진 우클릭 -> 이미지 주소 복사 * 문법에 맞춰 코드 입력 [결과] 잠깐 ! 여기서 img 태그 내 alt는 무엇일까? 인터넷이 느리거나 파일 경로가 잘못됐을 때 이미지를 대체하는 설명 2) 상대경로- html 문서를 기준으로 이미지 파일이 있는 경로를 입력하는 것이다. 이미지 파일의 위치는 정말 다양하기 때문에 아래와 같은 경우로 나눠 볼 수 있을 것 같다 :)
2) 이미지가 하위 폴더에 있는경우 3) 이미지가 상위 폴더에 있는 경우 4) 이미지가 상위폴더 > 하위폴더에 있는 경우 한번 사용해보자 ! [결과] <img src="images/icons/logo.png" /> 이렇게 작성했을 시 웹에서 이미지가 업로드 되지 않습니다. 그래서 images/icons/logo.png -> icons/logo.png images를 제외하고 입력하였더니 웹에 정상적으로 이미지 업로드가 됩니다. 그래서 검색해 보니 상대경로 -이미지를 삽입할 HTML 문서를 기준으로 경로를 인식하는 방법 -이미지 파일이 HTML 문서와 같은 폴더에 있는지, 상위 폴더에 있는지, 하위 폴더에 있는지를 따져보고 경로를 지정해줘야 함 1. HTML 문서와 이미지 파일이 같은 폴더에 저장되어 있다면, 이미지 파일명만 적어주면 됨 2. 하위폴더로 이동하는 방법은 하위폴더명를 적어주고 슬래쉬(/)를 입력 3. 상위폴더로 이동 => 2번에 해당하기 때문에 images/icons/ logo.png 이렇게 사용해야 하는 건 알겠습니다만, 저의 경우에 images를 넣으면 오류가 발생합니다. 왜 그런 것인지 알 수 있을까요..? html파일과 logo.png 파일이 공동적으로 images 폴더에 들어가 있기 때문에 굳이 적지 않아도 되어서 그런건가요? 즉, index.html 파일이 images 폴더에 위치하고있고 logo.png 파일은 images 폴더의 하위폴더인 icons 폴더에 위치하고 있기 때문에 <img scr="icons/logo.png" />와 같이 지정하면 되는건가요? |
HTML 이미지 경로 오류 - HTML imiji gyeonglo olyu
관련 게시물
저작권 © 2024 ko.apacode Inc.
