img요소에 width와 height속성의 직접 사용이 허용되는 이유

 

 

웹 표준은 HTML이 구조와 데이터를, CSS가 표현 및 동작을, javascript가 동작 및 제어를 각각 담당하도록 분리하는 것을 권장하고 있다 

 

그러나 img 요소에서만큼은 표현을 담당하는 width와 height 속성을 html 태그 내에서 직접 지정해도 웹 표준에 어긋나지 않는다. 이는 브라우저가 웹 서버에서 페이지를 받아오고 출력하는 방식 때문이다. 

 

유저가 링크를 클릭하거나 주소창에 url을 입력하면 브라우저가 이 요청을 웹 서버로 전달하는데 웹 서버는 이에 대한 응답으로 우선 해당 페이지의 html 문서를 브라우저에 전송한다. 

 

그러면 브라우저는 이를 바탕으로 두 가지 작업을 병행하는데 하나는 전송된 html 문서를 해석해서 페이지 출력(렌더링)에 필요한 css,이미지, 스크립트 파일 등을 순차적으로 다시 웹 서버에 요청하여 그 결과를 받아오는 일이고 ,하나는 해석한 html을 페이지에 출력하는 일이다. 

 

그렇기 때문에 만약 페이지가 이미지가 많고 전송이 느린 동시에 img 요소안에 직접 width와 height 속성 값이 명시되어 있지 않다면 페이지에서 이미지가 차지하는 영역을 미리 알지 못해 텍스트가 로딩된 후에도 받아오는 이미지의 크기만큼 스크롤이 내려가는 상황이 발생한다.

 

그러나 이미지가 많고 전송이 느리다 하더라도 img 요소안에 직접 width와 height 속성 값을 명시해놨다면 css, 이미지, 스크립트 파일을 불러오기 전이라도 브라우저가 이미 이미지가 차지하는 영역을 알고 있기 때문에 애초에 문서의 길이를 모든 이미지를 수용할 수 있을만큼 늘려서 렌더링 한다.

 

img요소(와 object요소)에서 width와 height 속성 사용이 가능한 것은 이런 합리성에 기초한다. 그렇기 때문에 웹 표준에서 사용을 강제하진 않더라도 css영역 보다는 html영역, img 요소안에 직접 width와 height 값을 명시하는 것이 좋다. 

 

---

 

갑자기 해당 내용이 궁금해져서 구글링 해봤는데 wystan님의 블로그(http://blog.wystan.net/) 에서 소중한 포스팅(http://blog.wystan.net/2007/08/01/img-tag-with-width-and-height)을 읽게 되어 이를 공부의 목적으로 다시 정리한 글입니다. 댓글을 닫아 놓으셔서 감사의 인사를 여기에 남깁니다. 좋은 포스팅 감사합니다.