테스트 사이트 - 개발 중인 베타 버전입니다

width에 따라 변수값 설정하는 법 채택완료

하호헤하 1년 전 조회 2,503

아래 코드에서 max-width 980px일 때 $sliderHeight 값을 1000으로 하고 min-width 981px일 때 $sliderHeight 값을 800으로 하고 싶은데 코드를 어떻게 수정 추가해야 하나요?

 

<?php

    $sliderWidth ="1920";

    $sliderHeight ="800";</p>

<p>    $sliderSpacer ='<img src="'.G5_THEME_URL.'/plugin/abc/imageSpacer.php?w='.$sliderWidth.'&h='.$sliderHeight.'" alt="슬라이드 영역">';

?>

 

ChatGPT에 아무리 물어봐도 해결이 되지 않아 여기 고수님들께 여쭤봅니다 ㅠㅠ

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
1년 전

이미지 태그에 아이디값 입력해주세요

 

</p>

<p><?php</p>

<p>    $sliderWidth = "1920";</p>

<p>    $sliderHeight = "800"; // 기본 값</p>

<p>    $sliderSpacer = '<img id="sliderSpacer" src="'.G5_THEME_URL.'/plugin/abc/imageSpacer.php?w='.$sliderWidth.'&h='.$sliderHeight.'" alt="슬라이드 영역">';</p>

<p>?></p>

<p>

 

그 이후 스크립트로 처리할 수 있습니다.

Php코드 자체는 크기에 따라 반응형 변수 적용이 불가능합니다.

 

</p>

<p> </p>

<p>$(document).ready(function() {</p>

<p>    // 페이지 로드 시 크기를 설정</p>

<p>    adjustSliderHeight();</p>

<p> </p>

<p>    // 화면 크기가 변경될 때마다 크기 설정</p>

<p>    $(window).resize(function() {</p>

<p>        adjustSliderHeight();</p>

<p>    });</p>

<p> </p>

<p>    // 화면 크기에 따라 슬라이더 높이 변경 함수</p>

<p>    function adjustSliderHeight() {</p>

<p>        var width = $(window).width(); // 현재 화면의 너비 가져오기</p>

<p>        var sliderSpacer = $('#sliderSpacer');</p>

<p> </p>

<p>        if (width <= 980) {</p>

<p>            sliderSpacer.css('height', '1000px');</p>

<p>        } else {</p>

<p>            sliderSpacer.css('height', '800px');</p>

<p>        }</p>

<p>    }</p>

<p>});</p>

<p> </p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

하호헤하
1년 전
네 답변 감사합니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인