사진을 억지로 맞추기 보다는 모바일 전용 이미지를 등록을 해서 모바일일떄는 모바일에 등록한 이미지가 뜨도록 하는게 좋지 않을까요?

메인 슬라이드를 보니까 사이즈가 줄어듬에 따라서 좌우측의 내용을 짜르면서 화면이 줄어들게 되어있습니다. 

슬라이드 이미지를 축소를 해서 줄일수도 있지만 그렇게 하게 되면 슬라이드 높이값이 너무 적어지는 관계로 보기에 좋지 않을까 판단됩니다. 

그래서 차라리 모바일용 이미지를 따로 만들어서 모바일 사이즈일때는 모바일이미지가 뜨도록 처리를 하는거죠...

저희쪽에서 생각하기에는 오히려 이게 더 좋은 방법인것 같습니다. 

 

슬라이드가 현재 맞춤xml로 처리가 되고 있기에 맞춤xml에 이미지를 하나더 등록가능하도록 처리를 하시고 슬라이드 소스에다가 모바일일때는 모바일의 내용이 출력되도록 약간의 수정을 해주시면 될듯 합니다 

 

 

모바일에서만 나타나게 하려면 어떻게 수정하여야 하나요?

1. [디자인관리 > 전문가 환경설정 > 맞춤 XML 파일생성] 페이지에서 '메인 슬라이드 이미지' 의 환경설정 버튼을 클릭합니다.

 

2. 현재 적용되어있는 이미지 항목은 다음과 같습니다.

 

비주얼 이미지 - $v[img1_url]

문구 이미지 - $v[img2_url]

버튼 이미지 - $v[img3_url]

 

이중 사용하지 않는 '문구 이미지' 항목명을 '모바일 이미지' 로 변경합니다.

('버튼 이미지' 는 항목명을 삭제합니다.) 

 

 

 

 

 

 

3. 소스를 다음과 같이 수정합니다.

 

<a href="{$v[url1_value]}"|cond="$v[url1_value] && !$app_conn_yn" href="javascript:app_inweb_url('','{$v[url1_value]}')"|cond="$v[url1_value] && $app_conn_yn" target="{$v[url1_target]}"|cond="$v[url1_target]">
    <!--@if(!$mobile_conn_yn)-->
        <!-- PC 이미지 출력 -->
        <img src="{$v[img1_url]}" cond="$v[img1_url]" alt="{$v[txt1_value]}">
    <!--@else-->
        <!-- 모바일 이미지 출력 -->
        <img src="{$v[img2_url]}" cond="$v[img2_url]" alt="{$v[txt1_value]}">
    <!--@end-->
</a>
 

<!-- 사용하지 않는 항목 삭제
<span class="caption">
    <span class="inner">
        <span class="imgTxt" cond="$v[img2_url]"><img src="{$v[img2_url]}"></span>
        <span class="btnVisual" cond="$v[img3_url]"><a href="{$v[url2_value]}"|cond="$v[url2_value] && !$app_conn_yn" href="javascript:app_inweb_url('','{$v[url2_value]}')"|cond="$v[url2_value] && $app_conn_yn"><img src="{$v[img3_url]}"></a></span>
    </span>
</span>
-->

 

모바일 출력에 관한 설명은 다음 매뉴얼을 참고하시기 바랍니다.

http://manual.cubecenter.co.kr/page/basic1_01c

 

 

$mobile_conn_yn 의 경우 '모바일 기기' 여부를 체크하는 것이기 때문에,

PC 웹브라우저에서 화면을 줄였을 때는 PC버전 이미지가 그대로 출력됩니다.

 

태블릿의 경우, 스마트폰과 같은 모바일 기기로 인식하기 때문에 모바일 이미지가 출력됩니다.