Adblock_detected

AdBlock을 사용중이시네요..

index.html

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

[CODE/WEB]

반응형 사이트나 모바일 사이트를 만들 때

함수가 특정 화면 넓이에서만 작동해야 할때가 있죠?


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

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

이 방법을 쓰면 함수를 실행했을 때 넓이만 인식을 하고

창 크기를 조정하는건 인식을 못한답니다


예를들어 768px 보다 클때만 배경음악이 나오는 사이트를 생각해 볼까요?

처음에 1000px 짜리 창을 켜고, 700px 로 줄이면

분명 768px 보다 작지만 노래가 계속 나오게 된다는 거죠


그럼 어떻게 해야할까요?

resize() 함수를 사용하면 됩니다!

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

자! 이렇게 하면 창 크기를 바꿀 때 마다 검사를 해서

창 크기가 768px 보다 클때만 적용을 하게 되죠


같은 예를 들어보면 1000px 짜리 창을 켜고, 768px 까지 줄이는 순간

노래가 꺼지게 됩니다!


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

1 ··· 3 4 5 6 7 8 9 10 11 ··· 43