모바일 크기에 맞게 이미지 조정

완벽한 반응형 웹을 위한 시각적 요소의 크기 자동 조절 방법

위에서 언급했듯이 이미지와 동영상은 최대 해상도가 정해져 있습니다. 따라서 반응형 웹에서 이러한 것들을 출력할 때에는 최대 해상도를 미리 정한 후, 정해진 수치 이상으로 해상도가 벗어나지 않도록 해야 합니다. 언뜻 보면 매우 어려운 작업 같지만 의외로 이 작업은 매우 쉽습니다. 여러분은 CSS의 max-width 속성과 max-height 속성에 대해서 알고 있습니까? 이 속성은 최대 넓이와 최대 높이를 정의하는 CSS 속성입니다. 이 속성을 이용하면 이미지와 동영상의 최대 해상도를 미리 정해 놓을 수 있습니다. 그리고 이 속성이 지정된 객체에 width 속성과 height 속성 모두를 100%로 정의하면 해상도에 따라 자동으로 크기가 조절되는 시각적 요소가 완성됩니다. 다음 예시를 보면 쉽게 이해할 수 있을 것입니다.

1	<img src="..." style="max-width:1024px; max-height:800px; width:100%; height:100%;" />

그러나 매번 이렇게 이미지에 스타일을 지정하는 것은 너무나 번거로운 작업입니다. 또한 티스토리나 텍스트큐브와 같은 블로그 관리 프로그램에서는 <img>와 같은 시각적 요소에 자동으로 width 속성과 height 속성이 추가되어 블로거가 위와 같은 방법을 사용할 수 없습니다. 그렇다면 아래의 방법을 사용하기 바랍니다. 만약 번거롭지 않고 티스토리나 텍스트큐브가 아니라면, 위의 방법을 사용해도 괜찮습니다.

자바스크립트를 이용한 시각적 요소의 크기 자동 조절 방법

이 글에서는 티스토리에서 기본적으로 지원하고 있는 jQuery를 이용하여 시각적 요소의 크기를 자동적으로 조절하는 방법에 대해서 알아볼 것입니다. 만약 현재 자신이 운영하고 있는 블로그에서 jQuery를 사용할 수 없는 경우에는 다음 글을 참고하시기 바랍니다. 블로그에서 jQuery를 사용하는 방법에 자세하게 설명되어 있습니다. ㅡ 외부 링크 방식으로 jQuery를 블로그에서 사용하는 방법

jQuery를 이용하면 웹 페이지 내에 있는 모든 이미지에 대해서 위에서 설명한 크기 자동 조절 속성을 추가할 수 있습니다. 위에서 설명했던 스타일 속성을 일일이 웹 페이지 내에 있는 모든 이미지에 적용시키는 것은 매우 번거로운 작업일 것입니다. 그리고 해당되는 이미지의 최대 이미지가 항상 픽셀로 정해져 있는 것은 아닙니다. 어떤 이미지는 800px이 최대 크기일 것이고, 또 어떤 이미지는 500px이 최대 크기일 것입니다. 조금이나마 이러한 불편함을 덜 수 있도록 이 글에서는 자바스크립트를 이용하여 일괄적으로 웹 페이지 내의 모든 이미지에 대해서 스타일 속성을 추가하는 방법에 대해서 소개할 것입니다.

먼저 아래의 자바스크립트 소스코드를 보도록 하겠습니다.

1 2 3 4 5 6 7 8 9 10 11 12

$(function() {     $("#post_content img, .resizablebox").each(function() {         var oImgWidth = $(this).width();         var oImgHeight = $(this).height();         $(this).css({             'max-width':oImgWidth+'px',             'max-height':oImgHeight+'px',             'width':'100%',             'height':'100%'         });     }); });

위의 소스코드는 #post_content 내의 모든 이미지 그리고 resizable 클래스가 적용된 모든 객체에 대해서 최대 해상도를 지정하고 기본 해상도를 100% x 100%로 맞추는 역할을 합니다. 자바스크립트의 작동 순서를 보자면, 이미지에 이미 정해져 있던 또는 이미지의 본래 크기를 구한 후 이것을 최대로 확대 가능한 해상도로 정의하고, 반응형 웹에서는 해상도에 따라 크기가 변동되어야 하므로 기본 해상도를 100% x 100% 로 정의하는 순서로 작동합니다. 이렇게 하면 웹페이지에 삽입되어 있는 모든 이미지와 시각적 요소에 대해서 그 크기를 반응형으로 만들 수 있습니다.

출처:http://www.erzsamatory.net/86