묻고답하기
홈페이지 여백에 관해 질문드립니다.
2014.10.14 14:07
팁도 보고 찾아보고 했는데 홈페이지 html에 body부분이 없어서 뭘 해볼수가 없네요ㅠ
pc버전은 괜찮은데 모바일로 들어갈때만 왼쪽전체에 여백이 생깁니다.
바쁘시겠지만 해결방법 도움 좀 부탁드려요!
<meta name="viewport" content="width=1440px, initial-scale=0.4, maximum-scale=1">
<load target="css/reset.css" />
<load target="css/font.css" />
<load target="css/font-awesome/css/font-awesome.min.css" />
<load target="css/im_common.css" />
<load target="css/slider_style.css" />
<load target="js/common.js" />
<load target="js/jquery.glide.min.js" />
<load target="js/jquery.leanModal.min.js" />
<load target="css/theme/blue.css" cond="$layout_info->colorset == 'blue'" />
<include target="css/theme/custom.html" cond="$layout_info->colorset == 'custom'" />
<div class="im_layout" id="gototop">
<div class="im_headerWrap">
<div class="im_topUtilmenuWrap">
<div class="im_topUtilmenu">
<div class="im_topCustomMenu">
<ul>
<li loop="$top_menu->list=>$key1,$val1" class="active"|cond="$val1['selected']"><a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a></li>
</ul>
</div>
<div class="im_memberMenu">
<ul>
<li cond="!$is_logged"><a rel="leanModal" name="im_login_btn" href="#im_modal_login">{$lang->cmd_login}</a></li>
<li cond="!$is_logged"><a href="{getUrl('act','dispMemberSignUpForm')}">{$lang->cmd_signup}</a></li>
<li cond="$is_logged"><a href="{getUrl('act','dispMemberInfo')}" >{$lang->cmd_view_member_info}</a></li>
<li cond="$is_logged"><a href="{getUrl('act','dispMemberLogout')}">{$lang->cmd_logout}</a></li>
<li class="im_language">
<a href="#" class="toggle"><span class="im_flag"><img src="images/gb.png" alt="English" cond="$lang_type == 'en'" /><img src="images/kr.png" alt="한국어" cond="$lang_type == 'ko'" /></span><span class="im_label">{$lang_supported[$lang_type]}</span><span class="im_icon"><i class="fa fa-angle-down"></i></span></a>
<ul class="selectLang">
<li loop="$lang_supported=>$key,$val" cond="$key!= $lang_type">
<a href="#" onclick="doChangeLangType('{$key}');return false;">{$val}</a>
</li>
</ul>
</li>
<li cond="$logged_info->is_admin=='Y' && !$site_module_info->site_srl"><a href="{getUrl('','module','admin')}" onclick="window.open(this.href);return false;">{$lang->cmd_management}</a></li>
</ul>
</div>
</div>
</div>
<div class="im_header">
<div class="im_topLogo">
<h1>
<a href="{$layout_info->index_url}" cond="$layout_info->logo_image"><img src="{$layout_info->logo_image}" alt="logo" border="0" /></a>
<a href="{$layout_info->index_url}" cond="!$layout_info->logo_image"><img src="images/logo.png" alt="Intermission Layout" /></a>
</h1>
</div>
<div class="im_header_right">
<div class="im_social" cond="$layout_info->social_link == 'default'">
<a href="{$layout_info->social_fb}" class="im_social_icon"><span><i class="fa fa-facebook-square"></i></span></a>
<a href="{$layout_info->social_tw}" class="im_social_icon"><span><i class="fa fa-twitter"></i></span></a>
<a href="{$layout_info->social_gp}" class="im_social_icon"><span><i class="fa fa-google-plus-square"></i></span></a>
<a href="{$layout_info->social_yt}" class="im_social_icon"><span><i class="fa fa-youtube"></i></span></a>
<a href="{$layout_info->social_li}" class="im_social_icon"><span><i class="fa fa-linkedin-square"></i></span></a>
</div>
<div class="im_search" cond="$layout_info->layout_type !== 'main_preset'">
<form action="{getUrl()}" method="get" class="search" id="im_top_search">
<input type="hidden" name="vid" value="{$vid}" />
<input type="hidden" name="mid" value="{$mid}" />
<input type="hidden" name="act" value="IS" />
<input type="text" class="search_textarea" name="is_keyword" value="{$is_keyword}" title="{$lang->cmd_search}" />
<a href="#" class="topsearch_submit" title="{$lang->cmd_search}" onclick="document.getElementById('im_top_search').submit();"><i class="fa fa-search"></i><span class="im_hidden">전송버튼</span></a>
</form>
</div>
<div class="im_search" cond="$layout_info->layout_type == 'main_preset'">
<form action="{getUrl()}" method="get" class="search" id="im_top_search">
<input type="hidden" name="vid" value="{$vid}" />
<input type="hidden" name="mid" value="{$layout_info->search_mid}" />
<input type="hidden" name="act" value="IS" />
<input type="text" class="search_textarea" name="is_keyword" value="{$is_keyword}" title="{$lang->cmd_search}" />
<a href="#" class="topsearch_submit" title="{$lang->cmd_search}" onclick="document.getElementById('im_top_search').submit();"><i class="fa fa-search"></i><span class="im_hidden">전송버튼</span></a>
</form>
</div>
</div>
</div>
<div class="im_gnbWrap">
<div class="im_gnb">
<h2 class="im_hidden">global navigaion menu / 글로벌 네비게이션 메뉴</h2>
<ul class="depth1">
<li loop="$main_menu->list=>$key1,$val1" class="active"|cond="$val1['selected']"><a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}<span cond="$val1['list']" class="arrow-up"></span><span cond="$val1['list']" class="arrow-up-back"></span></a>
<ul class="depth2" cond="$val1['list']">
<li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']" >
<a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}<span cond="$val2['list']" class="arrow-right"><i class="fa fa-angle-right"></i></span></a>
<ul class="depth3" cond="$val2['list']">
<li loop="$val2['list']=>$key3,$val3" class="active"|cond="$val3['selected']"><a href="{$val3['href']}" target="_blank"|cond="$val3['open_window']=='Y'">{$val3['link']}</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="im_slider" cond="$layout_info->layout_type == 'main' || $layout_info->layout_type == 'main_preset'">
<ul class="slides">
<li class="slide im_slider_img1" cond="$layout_info->slider_image1"><a href="{$layout_info->slider_url1}"><span class="im_hidden">{$layout_info->slider_alt1}" /></span></a></li>
<li class="slide im_slider_img2" cond="$layout_info->slider_image2"><a href="{$layout_info->slider_url2}"><span class="im_hidden">{$layout_info->slider_alt2}" /></span></a></li>
<li class="slide im_slider_img3" cond="$layout_info->slider_image3"><a href="{$layout_info->slider_url3}"><span class="im_hidden">{$layout_info->slider_alt3}" /></span></a></li>
<li class="slide im_slider_img4" cond="$layout_info->slider_image4"><a href="{$layout_info->slider_url4}"><span class="im_hidden">{$layout_info->slider_alt4}" /></span></a></li>
<li class="slide im_slider_img5" cond="$layout_info->slider_image5"><a href="{$layout_info->slider_url5}"><span class="im_hidden">{$layout_info->slider_alt5}" /></span></a></li>
<li class="slide no_slider_image1" cond="!$layout_info->slider_image1"><a href="#"></a></li>
<li class="slide no_slider_image2" cond="!$layout_info->slider_image1"><a href="#"></a></li>
</ul>
</div>
<!-- Slider 가로세로 위치조정-->
<style type="text/css">
.im_slider {height: {$layout_info->slider_height}px;}
.slide a {display:block; height: {$layout_info->slider_height}px; background-repeat: no-repeat; background-position: center center; margin:0 auto;}
.im_slider_img1 a {background-image: url("./{$layout_info->slider_image1}");}
.im_slider_img2 a {background-image: url("./{$layout_info->slider_image2}");}
.im_slider_img3 a {background-image: url("./{$layout_info->slider_image3}");}
.im_slider_img4 a {background-image: url("./{$layout_info->slider_image4}");}
.im_slider_img5 a {background-image: url("./{$layout_info->slider_image5}");}
.no_slider_image1 a {background-image: url("./layouts/layout_intermission/images/im_default_slider_img.jpg"); width:100%; height:500px;}
.no_slider_image2 a {background-image: url("./layouts/layout_intermission/images/im_default_slider_img2.jpg"); width:100%; height:500px;}
<block cond="!$layout_info->slider_image1">
.im_slider {height: 500px !important;}
</block>
</style>
<div class="im_container" cond="$layout_info->layout_type == 'main_preset'">
<load target="css/im_main.css" />
<include target="preset_main.html" />
{$content}
</div>
<div class="im_container" cond="$layout_info->layout_type == 'main' || $layout_info->layout_type == 'sub'">
{$content}
</div>
<div class="im_container" cond="$layout_info->layout_type == 'sub_sidebar'">
<div class="im_sub_topbar">
<div class="im_page_navi" cond="$layout_info->sub_page_nav=='yes'">
<span class="link"><a href="{getUrl()}">HOME </a>
<block loop="$main_menu->list=>$key1,$val1" cond="$val1['selected']">
» <a href="{$val1['href']}">{$val1['text']}</a>
<span loop="$val1['list']=>$key2,$val2" cond="$val2['selected']">
<span cond="$val1['list']">»</span> <a href="{$val2['href']}"> {$val2['text']}</a>
<span loop="$val2['list']=>$key3,$val3" cond="$val3['selected']">
<span cond="$val2['list']">»</span><a href="{$val3['href']}"> {$val3['text']}</a>
</span>
</span>
</block>
</span>
</div>
<!--
<div class="im_btn_print">
<a href="javascript:window.print()"><img src="images/button-print.png" alt="print this page" /></a>
</div>
-->
<br>
<br>
</div>
<div class="im_sub_content">
{$content}
</div>
<div class="im_sub_rightbar">
<div class="im_lnb">
<block loop="$main_menu->list=>$key1,$val1" cond="$val1['selected']">
<h2 class="im_lnb_title"><span class="im_lnb_heading">{$val1['text']}</span></h2>
</block>
<div class="im_lnb_box">
<ul class="depth2" loop="$main_menu->list=>$key1,$val1" cond="$val1['selected'] && $val1['list']">
<li loop="$val1['list']=>$key2,$val2" ><a href="{$val2['href']}" class="on"|cond="$val2['selected']" target="_blank"|cond="$val2['open_window']=='Y'"><span class="lnblv1">{$val2['text']}</span></a>
<ul class="depth3" cond="$val2['list']&&$val2['selected']">
<li loop="$val2['list']=>$key3,$val3"><a href="{$val3['href']}" class="on"|cond="$val3['selected']" target="_blank"|cond="$val3['open_window']=='Y'">{$val3['link']}</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div> <!-- // 오른쪽 사이드바 -->
</div><!-- // im_container cond="sub" -->
<div class="im_footerWrap">
<div class="im_footer">
<div class="im_footer_logo">
<a href="{$layout_info->index_url}" cond="$layout_info->footer_logo_image"><img src="{$layout_info->footer_logo_image}" alt="logo" border="0" /></a>
<a href="{$layout_info->index_url}" cond="!$layout_info->footer_logo_image"><img src="images/f_logo.png" alt="Intermission Layout" /></a>
</div>
<div class="im_footer_right">
<div class="im_footer_menu">
<ul>
<li loop="$footer_menu->list=>$key1,$val1" class="active"|cond="$val1['selected']"><a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a></li>
</ul>
</div>
<div class="im_footer_info">
<span class="contact" cond="!$layout_info->footer_info_image">
주소:부산 진구 범천동 857-2번지 동일타워스위트 1708호 | 사업자등록번호 : 617-36-84791 | 상호명:에코폰부산<br>
연락처:010-3590-2359 | E-Mail : ecpbusan@naver.com | 대표자 : 임현진 | 통신판매업 신고 제2014-부산남구-0181호<br>
COPYRIGHT ⓒ www.ecpbusan.com ALL RIGHT RESERVED.
</span>
<span class="contact" cond="$layout_info->footer_info_image"><img src="{$layout_info->footer_info_image}" alt="{$layout_info->footer_info_image_alt}" /></span>
<span class="copyright" cond="!$layout_info->footer_copy_image"></span>
<span class="copyright" cond="$layout_info->footer_copy_image"><img src="{$layout_info->footer_copy_image}" alt="{$layout_info->footer_copy_image_alt}" /></span>
</div>
<div class="im_familysite" cond="$layout_info->family_site == 'default'">
<a href="#" class="im_open"><span class="label">관련사이트</span><span class="icon"><i class="fa fa-angle-up"></i></span></a>
<ul>
<li><a href="{$layout_info->fs_link_1}">{$layout_info->fs_name_1}</a></li>
<li><a href="{$layout_info->fs_link_2}">{$layout_info->fs_name_2}</a></li>
<li><a href="{$layout_info->fs_link_3}">{$layout_info->fs_name_3}</a></li>
<li><a href="{$layout_info->fs_link_4}">{$layout_info->fs_name_4}</a></li>
<li><a href="{$layout_info->fs_link_5}">{$layout_info->fs_name_5}</a></li>
</ul>
</div>
</div>
<div class="im_gototop">
<a href="#"><span class="icon"><i class="fa fa-chevron-up"></i></span><span class="label">TOP</span></a>
</div>
</div>
</div>
</div>
<!--@if(!$is_logged)-->
{@ $member_config = MemberModel::getMemberConfig(); }
<!--%import("./filter/login.xml")-->
<!--@if($member_config->enable_openid=='Y')--><!--%import("./filter/openid_login.xml")--><!--@end-->
<!-- Modal login window -->
<div id="im_modal_login">
<p class="loginWindow_header"><img src="images/login_white.png" alt="{$lang->cmd_login}"/></p>
<div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
<p>{$XE_VALIDATOR_MESSAGE}</p>
</div>
<div class="loginWindow">
<form action="" method="post" id="im_Login_form" ruleset="@login" >
<input type="hidden" name="success_return_url" value="{getRequestUriByServerEnviroment()}" />
<input type="hidden" name="act" value="procMemberLogin" />
<fieldset>
<legend class="im_hidden">로그인폼</legend>
<dl>
<dt><label for="uid" cond="$member_config->identifier != 'email_address'">{$lang->user_id}</label><label for="uid" cond="$member_config->identifier = 'email_address'">{$lang->email_address}</label></dt>
<dd><input name="user_id" type="text" class="inputuid" id="uid" title="<!--@if($member_config->identifier != 'email_address')-->{$lang->user_id}<!--@else-->{$lang->email_address}<!--@end-->" /></dd>
<dt><label for="upw">{$lang->password}</label></dt>
<dd><input name="password" type="password" class="inputupw" id="upw" title="{$lang->password}" /></dd>
</dl>
<div class="keepWrap">
<div class="keep">
<input name="keep_signed" type="checkbox" id="keep_login" value="Y" class="inputCheck" onclick="if(this.checked) return confirm('{$lang->about_keep_signed}');"/>
<label for="keep_login" title="{$lang->keep_signed}"></label>
</div>
<p class="keep_text"><span>{$lang->keep_signed}</span></p>
</div>
<div class="submit_btn"><a href="#" class="login_submit" onclick="document.getElementById('im_Login_form').submit()">{$lang->cmd_login}</a></div>
</fieldset>
</form>
<div class="login_menu">
<ul>
<li><a href="{getUrl('act','dispMemberSignUpForm')}">{$lang->cmd_signup}</a></li>
<li><a href="{getUrl('act','dispMemberFindAccount')}">{$lang->cmd_find_member_account}</a></li>
</ul>
</div>
<p class="close_loginWindow"><a href="" class="modal_close"><i class="fa fa-times"></i></a></p>
</div>
</div>
<!-- /loginWindow -->
<!--@end-->
댓글 4
-
고코루리
2014.10.14 16:30
-
도징
2014.10.14 20:57
아그런가요 제가 잘 몰라서 죄송합니다ㅠ
사이트 주소는 http://ecpbusan.com/ 입니다.
-
고코루리
2014.10.14 21:00
첫인덱스 화면을 제외하고는 여백은 없습니다.
그리고 첫화면의 경우 PC화면이고 사이즈를 1440px 픽스시켰기 때문에 여백이 생성되는 것입니다.
PC에서는 문제가 없는 이유는 PC에서는 viewport 설정이 안먹습니다. 온리 모바일용입니다..
따라서
<meta name="viewport" content="width=1440px, initial-scale=0.4, maximum-scale=1">
이 부분을
<meta name="viewport" content="width=device-width, initial-scale=0.4, maximum-scale=1">
로 변경하시거나
아예 해당 부분을 날려버리세요
-
도징
2014.10.14 22:28
아 바로 적용 되네요 늦은 시간인데도 댓글 달아주셔서 정말 감사합니다.
이렇게 보여주시면 귀신이 와도 모릅니다. 차라리 사이트 링크를 알려주시는 게 나을 거에요