스마트폰 초대장 정보
스마트폰 초대장본문
<!DOCTYPE html>
<html>
<head>
<!--meta charset="euc-kr" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"/-->
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
<link rel="apple-touch-icon-precomposed" href="/data//sample07/" />
<script src="/common/js/m_jquery.min.js"></script>
<style type="text/css">
@charset "euc-kr";
/* base CSS */
* { -webkit-text-size-adjust:none; }
html, body { width:100%; margin:0; padding:0; font-family:Dotum, Arial,Tahoma; color:#292929; background-color:#fff; }
h1, h2, h3, h4, h5, h6 { margin:0; padding:0; font-size:13px; }
p, ul, ol, li, dl, dt, dd { margin:0px; padding:0px; list-style-image:none; list-style-position:outside; list-style-type:none; border:0px; }
table { border-collapse:separate; display:table; }
table th, table td {font-family: Dotum, sans-serif; display:table-cell; }
tbody { display:table-row-group; }
hr {display: none;}
label {vertical-align:middle;}
textarea, input,button { }
select { }
input{-webkit-appearance:none;-webkit-border-radius:0;}
legend {display:none; }
a { color:#77787b; text-decoration:none; }
a:link, a:visited { color:#77787b; text-decoration:none; }
a:active { color:#77787b; text-decoration:none; }
img { vertical-align:middle; border:0px;}
/* loyout CSS */
#wrap {position:relative; width:100%; min-width:320px; border:0px none; z-index:5;}
#header {width:320px; background:url('./img/title.jpg') no-repeat; height:40px;}
#header ul {height:36px;}
#header li {float:left; display:inline;}
#header li a span {display:none; height:40px;}
#header li a span.link {display:block; height:40px; overflow:hidden;}
#header li a {float:left; display:inline; height:40px;}
#header_m01 a {width:205px;}
#header_m02 a {width:115px;}
#skin_box {position:relative; width:320px; height:100%;}
/* Counter */
.counter,.counter_s,.counter_i{display:inline-block;position:relative; float:left;height:22px;vertical-align:top}
.counter{top:-118px;left:250px;z-index:10; border-top:0; background:none;font-weight:bold;font-size:12px;font-family:Helvetica;line-height:22px;color:#fff;text-align:center;-webkit-border-radius:9px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.17)}
.counter_n{font-size:12px;font-family:Tahoma,Verdana-Bold,Helvetica}
.counter_s,.counter_i{background:url('./img/counter.gif') no-repeat;-webkit-background-size:90px 22px}
.counter_s{margin-right:8px;background-position:0 0}
.counter_i{left:8px;min-width:1px;padding:0 7px 0 6px;background-position:100% 0;text-indent:-7px}
.q_counter,.q_counter_s,.q_counter_i{display:inline-block;position:relative;height:22px;vertical-align:top}
.q_counter{top:-258px;left:50px;z-index:10; background:none;font-weight:bold;font-size:12px;font-family:Helvetica;line-height:22px;color:#fff;text-align:center;-webkit-border-radius:9px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.17)}
.q_counter_n{font-size:12px;font-family:Tahoma,Verdana-Bold,Helvetica}
.q_counter_s,.q_counter_i{background:url('./img/counter.gif') no-repeat;-webkit-background-size:90px 22px}
.q_counter_s{margin-right:8px;background-position:0 0}
.q_counter_i{left:8px;min-width:1px;padding:0 7px 0 6px;background-position:100% 0;text-indent:-7px}
.main {}
.main .photo {position:absolute; text-align:center; z-index:-1;}
.gallery_01 .img01 {position:absolute; float:left; top:347px; left:0px;}
.gallery_02 .img02 {position:absolute; float:left; top:491px; left:0px;}
.date {height:133px; background:url('./img/date.jpg') no-repeat top; font-family:tahoma; font-weight: bolder; text-align:left; letter-spacing:-1px;}
.date .days {position:relative; float:left; color:#545454; font-size:28px; top:37px; left:32px;}
.date .yoil {position:relative; float:left; top:89px; left:-65px; color:#0000ff; font-size:12px;}
.date .year {position:relative; float:left; top:85px; left:5px; color:#fff;}
.date .d_day {position:relative; float:right; width:55px; text-align:left; color:#545454; font-size:28px; top:60px; right:22px;}
.loc {height:52px; background:url('./img/loc.jpg') no-repeat center; color:#fff;}
.loc div {padding-top:16px; padding-left:43px; font-family:tahoma; font-weight: bolder; text-align:left; letter-spacing:-1px;}
.invitation_ti {height:96px; background:url('./img/invitation.jpg') no-repeat top;}
.invitation_ti span {position:relative; float:right; top:54px; right:40px; font-family:tahoma; font-weight: bolder; font-size:12px; text-align:left;}
.invitation_cn {background:url('./img/invitation_cn.jpg') repeat-y;}
.invitation_cn div { text-align:left; padding-top:10px; padding-left:35px; font-size:13px; color:#A5A395; letter-spacing:-1px; line-height:20px; }
.invitation_bt {height:25px; background:url('./img/invitation.jpg') no-repeat bottom;}
.invitation_type {height:207px; text-align:left; background:url('./img/info.jpg') no-repeat center;}
.invitation_type ul {padding-top:3px; padding-left:100px;}
.invitation_type li {line-height:38px; font-size:14px; color:#2e2e2e; font-weight:bolder; word-break:break-all; word-wrap:break-word; overflow:hidden;}
.map_type {height:88px; text-align:left; background:url('./img/hall_text.jpg') no-repeat center;}
.map_type ul {padding-top:10px; padding-left:35px; letter-spacing:-1px;}
.map_type li {padding-top:3px; font-size:13px; color:#fff; font-weight:bolder; word-break:break-all; word-wrap:break-word; overflow:hidden;}
.map_type li.color {color: #FFF294;}
.map_type a {color:#fff; text-decoration:none;}
.url {height:47px; text-align:left; background:url('./img/url.jpg') no-repeat center;}
.url a {padding-left:35px; line-height:47px; font-size:13px; color: #fff; font-weight:bold;}
.day {height:43px; text-align:left; background:url('./img/day.jpg') no-repeat center;}
.day p {padding-left:100px; line-height:43px; font-size:12px; color: #fff; font-weight:bold;}
.quickmenu {background:url('./img/q_menu.jpg') no-repeat; height:636px;}
.quickmenu ul {height:58px; padding-top:18px;}
.quickmenu li {float:left; display:inline;}
.quickmenu li a span {display:none; height:58px;}
.quickmenu li a span.link {display:block; height:58px; overflow:hidden;}
.quickmenu li a {float:left; display:inline; height:58px;}
.quickmenu_m01 a {width:62px; padding-left:11px; margin-right:173px;}
.quickmenu_m02 a {width:62px; padding-right:12px;}
.quickmenu_m03 a {width:62px; padding-left:11px; margin-right:173px;}
.quickmenu_m04 a {width:62px; padding-right:12px;}
.quickmenu_m05 a {width:297px; padding-left:11px; padding-right:12px;}
.quickmenu_m06 a {width:297px; padding-left:11px; padding-right:12px;}
.quickmenu_m07 a {width:149px; padding-left:11px;}
.quickmenu_m08 a {width:148px; padding-right:12px;}
.quickmenu_m09 a {width:297px; padding-left:11px; }
.quickmenu_m10 a {width:149px; padding-left:11px;}
.quickmenu_m11 a {width:148px; padding-right:12px;}
.quickmenu_m12 a {width:297px; margin-top:38px; padding-left:11px; padding-right:12px;}
.quickmenu_m13 a {width:297px; padding-left:11px; padding-right:12px;}
#footer { width:100%;}
.bookmark_text {height:35px; background-color: #000; color:#fff; font-size:0.80em; font-weight:bold; text-align:center; padding-top:20px; margin-bottom:0px;}
.arrow {background-color: #202020; text-align:center;}
</style>
<script type="text/javascript">
if (document.URL.indexOf("#")<=0) {
window.addEventListener('load', function(){
setTimeout(scrollTo, 0, 0, 1);
}, false);
}
function sendTwitter(title,url) {
var wp = window.open("http://twitter.com/home?status=" + encodeURIComponent(title) + " " + encodeURIComponent(url), 'twitter', '');
if ( wp ) {
wp.focus();
}
}
function sendFaceBook(title,url) {
var wp = window.open("http://www.facebook.com/sharer.php?u=" + url + "&t=" + encodeURIComponent(title), 'facebook', '');
if ( wp ) {
wp.focus();
}
}
function init() {
var video = document.getElementById('video');
video.addEventListener('click',function(){
document.play();
},false);
}
function kakaoSend(message,send_url){
var UserAgent = navigator.userAgent;
if(UserAgent.match(/iPhone|iPod|Android|Windows CE|BlackBerry|Symbian|Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia|SonyEricsson/i) != null || UserAgent.match(/LG|SAMSUNG|Samsung/) != null) {
var ka_appid = encodeURIComponent("com.company.app");
var ka_appver = encodeURIComponent("1.0");
var ka_msg = encodeURIComponent(message);
var ka_appurl = encodeURIComponent(send_url);
var kakao_link_url = "kakaolink://sendurl?msg=" + ka_msg + "&url=" + ka_appurl + "&appid=" + ka_appid + "&appver=" + ka_appver;
document.location.href = kakao_link_url;
}else{
alert("스마트폰이 아니거나 카카오톡이 설치되어 있지 않습니다.");
return;
}
}
</script>
<html>
<head>
<!--meta charset="euc-kr" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"/-->
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
<link rel="apple-touch-icon-precomposed" href="/data//sample07/" />
<script src="/common/js/m_jquery.min.js"></script>
<style type="text/css">
@charset "euc-kr";
/* base CSS */
* { -webkit-text-size-adjust:none; }
html, body { width:100%; margin:0; padding:0; font-family:Dotum, Arial,Tahoma; color:#292929; background-color:#fff; }
h1, h2, h3, h4, h5, h6 { margin:0; padding:0; font-size:13px; }
p, ul, ol, li, dl, dt, dd { margin:0px; padding:0px; list-style-image:none; list-style-position:outside; list-style-type:none; border:0px; }
table { border-collapse:separate; display:table; }
table th, table td {font-family: Dotum, sans-serif; display:table-cell; }
tbody { display:table-row-group; }
hr {display: none;}
label {vertical-align:middle;}
textarea, input,button { }
select { }
input{-webkit-appearance:none;-webkit-border-radius:0;}
legend {display:none; }
a { color:#77787b; text-decoration:none; }
a:link, a:visited { color:#77787b; text-decoration:none; }
a:active { color:#77787b; text-decoration:none; }
img { vertical-align:middle; border:0px;}
/* loyout CSS */
#wrap {position:relative; width:100%; min-width:320px; border:0px none; z-index:5;}
#header {width:320px; background:url('./img/title.jpg') no-repeat; height:40px;}
#header ul {height:36px;}
#header li {float:left; display:inline;}
#header li a span {display:none; height:40px;}
#header li a span.link {display:block; height:40px; overflow:hidden;}
#header li a {float:left; display:inline; height:40px;}
#header_m01 a {width:205px;}
#header_m02 a {width:115px;}
#skin_box {position:relative; width:320px; height:100%;}
/* Counter */
.counter,.counter_s,.counter_i{display:inline-block;position:relative; float:left;height:22px;vertical-align:top}
.counter{top:-118px;left:250px;z-index:10; border-top:0; background:none;font-weight:bold;font-size:12px;font-family:Helvetica;line-height:22px;color:#fff;text-align:center;-webkit-border-radius:9px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.17)}
.counter_n{font-size:12px;font-family:Tahoma,Verdana-Bold,Helvetica}
.counter_s,.counter_i{background:url('./img/counter.gif') no-repeat;-webkit-background-size:90px 22px}
.counter_s{margin-right:8px;background-position:0 0}
.counter_i{left:8px;min-width:1px;padding:0 7px 0 6px;background-position:100% 0;text-indent:-7px}
.q_counter,.q_counter_s,.q_counter_i{display:inline-block;position:relative;height:22px;vertical-align:top}
.q_counter{top:-258px;left:50px;z-index:10; background:none;font-weight:bold;font-size:12px;font-family:Helvetica;line-height:22px;color:#fff;text-align:center;-webkit-border-radius:9px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.17)}
.q_counter_n{font-size:12px;font-family:Tahoma,Verdana-Bold,Helvetica}
.q_counter_s,.q_counter_i{background:url('./img/counter.gif') no-repeat;-webkit-background-size:90px 22px}
.q_counter_s{margin-right:8px;background-position:0 0}
.q_counter_i{left:8px;min-width:1px;padding:0 7px 0 6px;background-position:100% 0;text-indent:-7px}
.main {}
.main .photo {position:absolute; text-align:center; z-index:-1;}
.gallery_01 .img01 {position:absolute; float:left; top:347px; left:0px;}
.gallery_02 .img02 {position:absolute; float:left; top:491px; left:0px;}
.date {height:133px; background:url('./img/date.jpg') no-repeat top; font-family:tahoma; font-weight: bolder; text-align:left; letter-spacing:-1px;}
.date .days {position:relative; float:left; color:#545454; font-size:28px; top:37px; left:32px;}
.date .yoil {position:relative; float:left; top:89px; left:-65px; color:#0000ff; font-size:12px;}
.date .year {position:relative; float:left; top:85px; left:5px; color:#fff;}
.date .d_day {position:relative; float:right; width:55px; text-align:left; color:#545454; font-size:28px; top:60px; right:22px;}
.loc {height:52px; background:url('./img/loc.jpg') no-repeat center; color:#fff;}
.loc div {padding-top:16px; padding-left:43px; font-family:tahoma; font-weight: bolder; text-align:left; letter-spacing:-1px;}
.invitation_ti {height:96px; background:url('./img/invitation.jpg') no-repeat top;}
.invitation_ti span {position:relative; float:right; top:54px; right:40px; font-family:tahoma; font-weight: bolder; font-size:12px; text-align:left;}
.invitation_cn {background:url('./img/invitation_cn.jpg') repeat-y;}
.invitation_cn div { text-align:left; padding-top:10px; padding-left:35px; font-size:13px; color:#A5A395; letter-spacing:-1px; line-height:20px; }
.invitation_bt {height:25px; background:url('./img/invitation.jpg') no-repeat bottom;}
.invitation_type {height:207px; text-align:left; background:url('./img/info.jpg') no-repeat center;}
.invitation_type ul {padding-top:3px; padding-left:100px;}
.invitation_type li {line-height:38px; font-size:14px; color:#2e2e2e; font-weight:bolder; word-break:break-all; word-wrap:break-word; overflow:hidden;}
.map_type {height:88px; text-align:left; background:url('./img/hall_text.jpg') no-repeat center;}
.map_type ul {padding-top:10px; padding-left:35px; letter-spacing:-1px;}
.map_type li {padding-top:3px; font-size:13px; color:#fff; font-weight:bolder; word-break:break-all; word-wrap:break-word; overflow:hidden;}
.map_type li.color {color: #FFF294;}
.map_type a {color:#fff; text-decoration:none;}
.url {height:47px; text-align:left; background:url('./img/url.jpg') no-repeat center;}
.url a {padding-left:35px; line-height:47px; font-size:13px; color: #fff; font-weight:bold;}
.day {height:43px; text-align:left; background:url('./img/day.jpg') no-repeat center;}
.day p {padding-left:100px; line-height:43px; font-size:12px; color: #fff; font-weight:bold;}
.quickmenu {background:url('./img/q_menu.jpg') no-repeat; height:636px;}
.quickmenu ul {height:58px; padding-top:18px;}
.quickmenu li {float:left; display:inline;}
.quickmenu li a span {display:none; height:58px;}
.quickmenu li a span.link {display:block; height:58px; overflow:hidden;}
.quickmenu li a {float:left; display:inline; height:58px;}
.quickmenu_m01 a {width:62px; padding-left:11px; margin-right:173px;}
.quickmenu_m02 a {width:62px; padding-right:12px;}
.quickmenu_m03 a {width:62px; padding-left:11px; margin-right:173px;}
.quickmenu_m04 a {width:62px; padding-right:12px;}
.quickmenu_m05 a {width:297px; padding-left:11px; padding-right:12px;}
.quickmenu_m06 a {width:297px; padding-left:11px; padding-right:12px;}
.quickmenu_m07 a {width:149px; padding-left:11px;}
.quickmenu_m08 a {width:148px; padding-right:12px;}
.quickmenu_m09 a {width:297px; padding-left:11px; }
.quickmenu_m10 a {width:149px; padding-left:11px;}
.quickmenu_m11 a {width:148px; padding-right:12px;}
.quickmenu_m12 a {width:297px; margin-top:38px; padding-left:11px; padding-right:12px;}
.quickmenu_m13 a {width:297px; padding-left:11px; padding-right:12px;}
#footer { width:100%;}
.bookmark_text {height:35px; background-color: #000; color:#fff; font-size:0.80em; font-weight:bold; text-align:center; padding-top:20px; margin-bottom:0px;}
.arrow {background-color: #202020; text-align:center;}
</style>
<script type="text/javascript">
if (document.URL.indexOf("#")<=0) {
window.addEventListener('load', function(){
setTimeout(scrollTo, 0, 0, 1);
}, false);
}
function sendTwitter(title,url) {
var wp = window.open("http://twitter.com/home?status=" + encodeURIComponent(title) + " " + encodeURIComponent(url), 'twitter', '');
if ( wp ) {
wp.focus();
}
}
function sendFaceBook(title,url) {
var wp = window.open("http://www.facebook.com/sharer.php?u=" + url + "&t=" + encodeURIComponent(title), 'facebook', '');
if ( wp ) {
wp.focus();
}
}
function init() {
var video = document.getElementById('video');
video.addEventListener('click',function(){
document.play();
},false);
}
function kakaoSend(message,send_url){
var UserAgent = navigator.userAgent;
if(UserAgent.match(/iPhone|iPod|Android|Windows CE|BlackBerry|Symbian|Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia|SonyEricsson/i) != null || UserAgent.match(/LG|SAMSUNG|Samsung/) != null) {
var ka_appid = encodeURIComponent("com.company.app");
var ka_appver = encodeURIComponent("1.0");
var ka_msg = encodeURIComponent(message);
var ka_appurl = encodeURIComponent(send_url);
var kakao_link_url = "kakaolink://sendurl?msg=" + ka_msg + "&url=" + ka_appurl + "&appid=" + ka_appid + "&appver=" + ka_appver;
document.location.href = kakao_link_url;
}else{
alert("스마트폰이 아니거나 카카오톡이 설치되어 있지 않습니다.");
return;
}
}
</script>
댓글 전체
css 수정을 좀 해보시면 될듯하네요.
body 100% 혹은 다른 div의 값때문이 아닐까 하네요
body 100% 혹은 다른 div의 값때문이 아닐까 하네요
모바일은 프레임셋으로 작업하면 안됩니다.
화면을 꽉 채워서 보려면(모바일 사파리외에서는 무시됨)
<meta name="viewport" content="user-scable= no, width=device-width" />
화면을 꽉 채워서 보려면(모바일 사파리외에서는 무시됨)
<meta name="viewport" content="user-scable= no, width=device-width" />
