HTML/CSSLanguage

<img> 태그의 주소 값으로 # 은 사용해서 안된다.

Written by munilive on (Updated: )

이미 오래된 내용이지만 아직도 유효하기에 작은 팁으로써 아래의 글을 남긴다.
제목에 나온대로 <img> 태그의 src 값으로 #은 입력 하면 안된다.

왜 안되는지 결론부터 이야기 하면 서버에서 해당 페이지를 여러번 호출 하기 때문이다.
사용자가 보는 화면에서는 분명 페이지가 한번만 열린걸로 보이지만 실제 아파치 로그를 보면 해당 페이지가 한번더 호출 된다.

이 사실은 개발중인 사이트의 쿼리문을 로그로 찍어서 확인하다 2번씩 로그가 찍히는 것을 발견하고 그 원인으로 해결 하려다 알게 된 것이다.
처음에는 어디선가 쿼리 실행 메소드를 2번 호출 하는거라 생각하고 xDebug를 이용해서 코드를 추적 하였다.추척 결과 특정 메소드의 중복 호출이 아닌 페이지 전체가 다시 읽어 들이고 있는 것을 확인하였다.
브라우저에서 2번씩 호출을 하는 것인지 확인하려고 크롬의 개발자툴을 열고 Network 탭에서 확인을 하였는데 이도 아니였다. 그래서 아파치 access 로그를 확인 하였지만 별다른 특이점은 존재 하지 않았다.개발중인 사이트에서는 아파치의 rewrite 모드를 이용하고 있었다. 그래서 그것이 문제 인가 생각되어 디버깅을 해보았지만 그것도 원인은 아니였다.

해당 문제에 대한 힌트가 존재 하지 않을까해서 구글링을 시도 했고 아래와 같은 내용을 발견 하였다. https://kldp.org/node/29679 질문은 올리신 분은 스스로 답변을 달으셨는데 그 문제의 원인은 <bgsound src='#' 에 있었다.
지금은 사용하지 않는 태그 이지만 src='#' 에서 무엇인가 나와 공통점이 있다는 것을 느겼다.
내가 개발중인 사이트에서도 리스트를 ajax를 이용해서 출력을 할때 동일한 마크업을 유지 하기 위하여 페이지내에 리스트의 기본 구조를 그대로 삽입을 하였는데 그때 이미지의 src 태그를 비우거나 다른 이미지를 지정하지 않기 위해 #으로 처리 하였던 것이다.
그래서 혹시나 하는 마음에 HTML을 전부 걷어 내고 테스트를 진행 했다.
쿼리 로그는 1번만 찍혔다. 이번에는 좀더 명확하게 하기 위해 src=’#’ 만 제거하고 다시 테스트 해보았다. 역시 로그는 1번만 찍혔다. 2번씩 실행되던 원인을 찾은 것이다.
src="#"
보통 폼으로 자기 자신을 다시 호출 할때 #을 이용하거나 페이지를 상단으로 올릴때 주소를 #으로 지정하곤 하였는데.
이미지에 #을 사용하였더니 브라우저는 이미지를 가져오기 위하여 자기자신을 다시 호출 한 것이였다.
<img> 태그 뿐만 아니라 src 어트리뷰트를 사용하는 곳에서는 #을 입력 하는 경우 해당페이지를 다시 불러오는것 같다.

이대로 운영서버에 반영되었다면 1명이 접속 했을때 src='#' 이 쓰여진 만큼 페이지뷰가 발생했을지 모른다. 그것은 사이트 전체의 부하가 증가 한다는 이야기가 된다.
앞으로 퍼블리싱된 파일을 적용할 때 기본 이미지를 넣어주거나 src 어트리뷰트를 빼는 방법을 취해야 할듯 하다. <img src='#'> 의 표현은 매우 위험하니 주의 해야 겠다.

원인 분석을 위해 확인 하였던 로그도 같이 남긴다.

- 121.134.227.181 - - [27/Jul/2016:09:27:18 +0000] "GET /contentManage HTTP/1.1" 200 30559 "http://blog.munilive.com/course/create" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:18 +0000] "GET /css-src/jquery-ui.css HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:18 +0000] "GET /css-src/select2.css HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:18 +0000] "GET /css-src/reset.css HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:18 +0000] "GET /css-src/design.common.css HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:18 +0000] "GET /css-src/design.layout.css HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:18 +0000] "GET /js-src/require.min.js HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:19 +0000] "GET /images/layout/logo.png HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:19 +0000] "GET /css-src/design-profile.css HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:19 +0000] "GET /js-src/require.config.js HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:19 +0000] "GET /images/layout/img_profile_bg.jpg HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:19 +0000] "GET /images/button/btn_close_10x9.png HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:19 +0000] "GET /images/etc/none_course_small.jpg HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:19 +0000] "GET /images/layout/logo_white_95x13.png HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:19 +0000] "GET /images/layout/img_loading_cnt.gif HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:19 +0000] "GET /images/layout/ask_load.png HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:19 +0000] "GET /images/background/bg_opacity_white_95_10x10.png HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:19 +0000] "GET /images/etc/etc_star_s_87x38.png HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:19 +0000] "GET /images/icon/ico_search_22x22.png HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:19 +0000] "GET /images/button/btn_top_17x10.png HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:19 +0000] "GET /images/icon/ssam_icon_01.png HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:19 +0000] "GET /images/etc/sns_none_pic.jpg HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:19 +0000] "GET /images/background/sns_pic_bg.png HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:19 +0000] "GET /images/icon/ico_mail_16x12.png HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:19 +0000] "GET /images/layout/img_loading.gif HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:19 +0000] "GET /images/icon/ico_search_on_22x22.png HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:19 +0000] "GET /images/button/btn_close_gray_19x19.png HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:19 +0000] "GET /images/layout/popup_wrap_bg_10x10.png HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:19 +0000] "GET /js-src/lib/jquery-3.0.0.min.js HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:19 +0000] "GET /contentManage HTTP/1.1" 200 30559 "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:19 +0000] "GET /js-src/lib/jquery-ui.min.js HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:19 +0000] "GET /js-src/lib/select2.min.js HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:19 +0000] "GET /js-src/lib/jquery.slimscroll.min.js HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:19 +0000] "GET /js-src/lib/hammer.min.js HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:19 +0000] "GET /js-src/lib/utility.lib.js HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:19 +0000] "GET /js-src/lib/language.js HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:19 +0000] "GET /js-src/lib/jquery.ssamcast.follow.js HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:20 +0000] "GET /js-src/lib/jquery.s3.uploader.js HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:20 +0000] "GET /js-src/lib/jquery.cropbox.js HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:20 +0000] "GET /js-src/lib/lang/en.js HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:20 +0000] "GET /js-src/lib/jquery.ui.touch-punch.min.js HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:20 +0000] "GET /js-src/lib/jquery.imageEdit.js HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:20 +0000] "GET /js-src/common.js HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:20 +0000] "GET /js-src/common.social.js HTTP/1.1" 304 - "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
- 121.134.227.181 - - [27/Jul/2016:09:27:21 +0000] "GET /images/layout/favicon.ico HTTP/1.1" 200 1150 "http://blog.munilive.com/contentManage" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
이 저작물은 크리에이티브 커먼즈 저작자표시-비영리-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다.

Related Posts

HTMLattribute srcimg tagreferenceserver

메타태그(META TAG) 속성정리 및 사용 방법

메타태그(META TAG) 속성정리 및 사용 방법 검색엔진최적화(SEO) – 메타태그(META TAG)의 속성정리 검색엔진최적화(SEO)를 위한 첫 걸음으로 중요한 요소인 메타태그(META TAG)의 속성을 나름대로 정리해 본다. 메타태그(meta tag)는 웹페이지(Web page)의 요약이므로 상당히 중요하다고...

파일 첨부 시 특정 파일 확장자만 선택하게 하기

<input type=”file”> 태그에 accept 속성으로 사용자가 첨부하려는 파일을 특정할 수 있다. 실제 동작하는 모습을 보여주기 위하여 예제를 준비 했다. 하단의 링크를 클릭해서 어떤 모습인지 확인이 가능하다. HTML Example: 파일 선택시...

참고자료 – object 태그 안에 사용되는 param 속성 정리(IE전용)

제목과는 관계 없지만 익스전용으로 만들었던 미디어플레이어 제어 스크립트 첨부합니다. 미디어플레이어+제어스크립트 미디어플레이어 제어를 위한 MSDN 문서 주소 http://msdn.microsoft.com/en-us/library/dd563945(v=VS.85).aspx https://docs.microsoft.com/ko-kr/windows/win32/wmp/object-model-reference-for-scripting?redirectedfrom=MSDN 이전에 미디어플레이어 제어를 위하여 구글링 했을때 스크랩한 내용입니다. 출처는 적어 두지 않아서...