INJE BLOG

WASTING YOUR TIME

SINCE 2017

jQuery 창 가로길이에 따른 함수 적용하기

INJE KIM code/web | 2018. 3. 23. 10:00

반응형 사이트나 모바일 사이트를 만들 때
함수가 특정 화면 넓이에서만 작동해야 할때가 있죠?

그럴땐 아래와 같이 width() 를 사용하면 되는데요

if($(window).width() > 768) {
	/* do something */ 
}

이 방법을 쓰면 함수를 실행했을 때 넓이만 인식을 하고
창 크기를 조정하는건 인식을 못한답니다

예를들어 768px 보다 클때만 배경음악이 나오는 사이트를 생각해 볼까요?
처음에 1000px 짜리 창을 켜고, 700px 로 줄이면
분명 768px 보다 작지만 노래가 계속 나오게 된다는 거죠

그럼 어떻게 해야할까요?
resize() 함수를 사용하면 됩니다!

$(window).resize(function() {
	if($(window).width() > 768) { 		
		/* do something */ 	
	} 
});

자! 이렇게 하면 창 크기를 바꿀 때 마다 검사를 해서
창 크기가 768px 보다 클때만 적용을 하게 되죠

같은 예를 들어보면 1000px 짜리 창을 켜고, 768px 까지 줄이는 순간
노래가 꺼지게 됩니다!

유용하게 사용하셨으면 공감버튼 부탁드려요!