NHN 고도몰, 모바일에서 본 PC 화면 CSS 및 javascript 적용 방법!

모바일과 웹 사이트 구축 작업을 하다보면, 모바일 디바이스로 홈페이지 혹은 쇼핑몰을 볼때가 있다. 이부분에서 때로는 난감한 부분이 있는데 이는 모바일 디바이스로 모바일 웹을 보는 것이 아닌 pc화면으로 웹 사이트를 보는 경우가 있는데 디바이스로 pc용 웹사이트를 보면 레이아웃이 틀어져있거나 퀵배너, 팝업같이 특수한 목적으로 position style을 주어서 여백이 발생하는 경우가 가끔있다. 이 부분의 문제를 해결하기 위한 한가지 방법이 있다.

일단 고도몰 관리자 화면으로 접속하여 디자인 메뉴를 클릭한다. 그럼 좌측에 페이지 수정 메뉴들이 나온다.

그 중에서 우리가 볼 화면은 footer 영역의 하단 디자인이 되겠다. 위 이미지를 참고하여 해당 페이지로 들어간다. 그리고 맨 아랫쪽으로 스크롤을 내리면 

<!--{ ? isMobileDevice == true }--> 로 시작하는 코드 부분이 나오는데 이부분이 모바일에서 pc 웹사이트를 봤을때

모바일 화면으로 보기 버튼이 출력되는 부분이다. 이는 모바일 디바이스로 봤을때만 노출되는 버튼으로 if 문의 코드가 들어가있는 것을 유추해볼 수 있다.  이쯤에서 눈치챘겟지만 이 코드를 활용하여 응용하면 된다는 것을 알 수 있다.

일반 pc화면에서 웹사이트를 봤을때 노출되지 않는 버튼이라는 것은 모바일 디바이스 환경에서만 보여지도록 되어 있는 if문의 코드라 할 수 있다. 

<!--{ ? isMobileDevice == true }-->
<style type="text/css">
.body-main #scroll_right {position:absolute; top:580px; right:50%; margin-right:-960px; width:105px; }
.body-main #scroll_right.ban_fixed {position:fixed; top:90px; right:0;}
</style>

<div class="foot_mobile">
	<a href="{=currentPageMobileUri}">MOBILE 화면 보기</a>
</div>
 <!--{ / }-->

위와 같은 방식으로 

<!--{ ? isMobileDevice == true }-->  <!--{ / }-->  사이에 css style 혹은 javascript를 적용하면 모바일 환경에서 pc 웹사이트를 접속할 때만 효과가 적용되는 것이다. 분명 본인과 같이 동일한 문제로 고생하는 분이 있을 수 있으니 공유하도록 한다. 이 코드를 응용하면 이벤트성 효과도 낼 수 있고 다양하다고 생각된다. 

사소한 코드이지만 이것을 응용하여 사용하면 굉장히 효율적인 것임을 알아두도록 하자.

---

본 게시글이 도움이 되셨다면 로그인 없이 클릭 가능한 ♥ 공감 버튼 클릭 부탁드립니다 :) 
"당신의 하루가 별보다 빛나길"