화면 크기에 따른 이미지 변경

2017.08.23 11:34

반응형웹을 만들게 되면 화면 크기에 따라 이미지를 제어해야 하는 경우가 생긴다.

jquery를 이용해 어떻게 할 수 있을지 생각해보자.

1. .resize() 선언

resize를 이용하여 화면 크기의 변경을 체크한다.

선언하자마자 바로 불러와 계속해서 체크할 수있도록 해준다.

$(function((){ $(window).resize(function(){ }).resize(); });

2. 현재 화면의 크기를 변수에 저장

일단 현재 화면의 크기를 변수에 저장한다.

$(function((){ $(window).resize(function(){ var width = window.innerWidth; }).resize(); });

3. 원하는 화면 사이즈마다 이미지의 주소를 변경

if~else 구문과 .attr()을 이용하여 width라는 변수에 넓이값을 저장하고, 이것을 이용하여 원하는 화면 사이즈마다 이미지의 주소를 변경한다.

만약 화면이 1000보다 작을 경우 변경을 한다 가정해보자.

$(function((){ $(window).resize(function(){ var width = window.innerWidth; if(width < 1000){ $('제어대상').attr('src', '이미지경로') } else {$('.제어대상').attr('이미지경로');} }).resize(); });