문제좀 해결해주세요 ㅠㅠ 채택완료
반응형 웹사이트를 제작중입니다.
타 사이트에 소스를 퍼왔습니다.
하지만 홈페이지를 열었을때 비주얼이 보이지 않습니다만 화면을 줄였다 키웠다 하거나 전체화면을 풀었다 했다. 즉 화면의 사이즈가 변하면 비주얼이 나옵니다. 어떻게 해야 할지몰라서 조언부탁드립니다.
<div id="spot_main"></p><p> <div id="slider_t1"></p><p> <ul class="lst_slide"></p><p> <li class="n1"></p><p> <div class="img"><img src="../img/main/spot1.jpg" alt=""></div></p><p> <div class="cont"></p><p> <h1>WEB/MOBILE</h1></p><p> <div class="lst"></p><p> <p>Strategy</p></p><p> <p>Design UI .UX</p></p><p> <p>Program Custom Solution</p></p><p> <p>APP(Application Program)</p></p><p> <p>Responsive Web</p></p><p> <p>Parallax</p></p><p> <a href="index_cont1.asp" class="more">MORE</a></p><p> </div></p><p> </div></p><p> </a></p><p> </li></p><p> </p><p> <li class="n2"></p><p> <div class="img"><img src="/img/main/spot3.jpg" alt=""></div></p><p> <div class="cont"></p><p> <h1>SI SOLUTION</h1></p><p> <div class="lst"></p><p> <p>공공SI 서비스구축</p></p><p> <p>맞춤형 비즈니스 모델 개발</p></p><p> <p>-웹/모바일 서비스 구축</p></p><p> <span class="Apple-tab-span" style="white-space:pre"> </span> <p>-전자정부 프레임워크 기반 구축</p></p><p> <span class="Apple-tab-span" style="white-space:pre"> </span> <p>-정보포털 서비스 구축</p></p><p> <span class="Apple-tab-span" style="white-space:pre"> </span> <p>-포인트통합관리 프로그램</p></p><p> <span class="Apple-tab-span" style="white-space:pre"> </span> <p>-쇼핑몰, 폐쇠몰, 웹진, 이메일</p></p><p> <span class="Apple-tab-span" style="white-space:pre"> </span> <p>-특허관리, 예약관리</p></p><p> <span class="Apple-tab-span" style="white-space:pre"> </span> <p>-CMS</p></p><p> <a href="index_cont3.asp" class="more">MORE</a></p><p> </div></p><p> </p><p> </div></p><p> </li></p><p> </p><p> <li class="n3"></p><p> <div class="img"><img src="/img/main/spot2.jpg" alt=""></div></p><p> <div class="cont"></p><p> <h1>MAINTENANCE</h1></p><p> <div class="lst"></p><p> <p>SEO(search engine optimization)</p></p><p> <p>Design upgrade</p></p><p> <p>Publishing homeostasis</p></p><p> <p>Security Check</p></p><p> <p>Promotion</p></p><p> <a href="index_cont2.asp" class="more">MORE</a></p><p> </div></p><p> </div></p><p> </li></p><p> </p><p> <li class="n4"></p><p> <div class="img"><img src="/img/main/spot4.jpg" alt=""></div></p><p> <div class="cont"></p><p> <h1>SYSTEM HOSTING</h1></p><p> <div class="lst"></p><p> <p>Ser Maintenance</p></p><p> <p>Web Hosting</p></p><p> <p>Co-Location</p></p><p> <p>Server Hosting</p></p><p> <p>Cloud Hosting</p></p><p> <p>Domain.Mail</p></p><p> <a href="index_cont4.asp" class="more">MORE</a></p><p> </div></p><p> </div></p><p> </li></p><p> </ul></p><p> </div></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><div class="down"></p><p> <a href="#main_product"></p><p> <!-- <span>SCROLL DOWN</span>!--></p><p> <span class="after"></span></p><p> </a></p><p> </p><p> </div><!-- //down --></p><p> </div></p><p> <!-- <span class="img on" data-stellar-ratio="-0.05" data-stellar-vertical-offset="-50"><img src="/images/main/spot4.jpg" alt=""></span></p><p> <span class="img" data-stellar-ratio="-0.05" data-stellar-vertical-offset="-50"><img src="/images/main/spot5.jpg" alt=""></span></p><p> <span class="img" data-stellar-ratio="-0.05" data-stellar-vertical-offset="-50"><img src="/images/main/spot6.jpg" alt=""></span></p><p> <div class="bg_cover"></div></p><p> <span class="txt" data-stellar-ratio="0.45" data-stellar-vertical-offset="20"><img src="/images/main/p2_oktomato.png" alt="We must think about tomorrow than today. Offers a little newer and extraordinary service."></span> --></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><div class="main_notice"></p><p> <!-- <h3><img src="main_notice_title.png" alt="News&Notice" /></h3> --></p><p> <!-- <input class="prev" type="image" src="main_btn_prev.png" alt="이전으로" /></p><p> <input class="next" type="image" src="main_btn_next.png" alt="다음으로" /> --></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p> </p><p> <div class="main_notice_list"></p><p> <ul></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li class="n0"><a href="#" >지역 농산물 직거래 스마트 제휴푸드 시스템 구축 </a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li class="n1"><a href="#" >스마트미디어센터</a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li class="n2"><a href="#" >서울시 서울길 운영관리</a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li class="n3"><a href="#" >대검찰청 검찰방송 </a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li class="n4"><a href="#" >보건복지부 저출산고령사회위원회</a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li class="n5"><a href="#" >문화관광체육부 아시아문화중심도시</a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li class="n6"><a href="#" >AKmall TagOn e-commerce </a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li class="n7"><a href="#" >풀무원 회원전용 폐쇄몰 그린체 오픈</a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li class="n8"><a href="#" >국립암센터 특허관리정보시스템 고도화 작업</a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li class="n9"><a href="#" >한국과학창의재단 무한상상정보넷 고도화 작업</a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li class="n10"><a href="#" >뉴스1 반려동물 포탈 “해피펫” 웹사이트 구축 프로젝트</a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li class="n11"><a href="#" >2015 ICT 어워드코리아 모바일 부분 미래창조과학부장관상 대상</a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li class="n12"><a href="#" >2015 ICT 어워드코리아 UI/UX 부분 한국정보화진흥원장상 금상</a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li class="n13"><a href="#" >인터플렉스 웹사이트 리빌딩 오픈</a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li class="n14"><a href="#" >풀무원 그린체 리빌딩 프로젝트 </a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li class="n15"><a href="#" >이마트 에브리데이 유지보수 계약 체결</a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li class="n16"><a href="#" >트리니티CC 유지보수 계약 체결</a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li class="n17"><a href="#" >한진화학 웹사이트 오픈</a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li class="n18"><a href="#" >LG 생명과학 그로스차트 프로그램 개발 </a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li class="n19"><a href="#" >머니투데이 아트원 웹사이트 오픈 </a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><li class="n20"><a href="#" >신세계건설 자유CC 웹사이트 리빌딩 </a></li></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p> <!-- <li><a href="#"><대구>지역수출기업 해외규격인증획득지원사업1...</a></li></p><p> <li><a href="#"><대구>학교종이 땡땡땡2...</a></li></p><p> <li><a href="#"><대구>학교종이 땡땡땡3...</a></li></p><p> <li><a href="#"><대구>학교종이 땡땡땡4...</a></li> --></p><p> </ul></p><p> </div> </p><p> </div><!--main_notice--></p><p> </p><p></div><!-- //spot_main --></p><p></div><!-- //wrap --></p><p><style></p><p> </p><p> </p><p> </p><p> </p><p></style></p><p> </p><p> </p><p><script type="text/javascript"></p><p> var bxSliderSpot = $('#slider_t1 > ul').bxSlider({</p><p> // pager: true,</p><p> // pagerType:'full',</p><p> // autoHidePager: true,</p><p>});</p><p> </p><p>var openWidth = 37;</p><p>var closeWidth = 21;</p><p>var normalWidth = 25;</p><p>var spotSpeed = 300;</p><p>var spotEase = "swing"</p><p>var slideReload = true;</p><p>var slideDestroy = true;</p><p> </p><p> </p><p>var PosResetNum = [0,normalWidth+"%",(normalWidth*2)+"%",(normalWidth*3)+"%"]</p><p>var widthNum = [</p><p> [openWidth+"%", closeWidth+"%", closeWidth+"%", closeWidth+"%"],</p><p> [closeWidth+"%", openWidth+"%", closeWidth+"%", closeWidth+"%"],</p><p> [closeWidth+"%", closeWidth+"%", openWidth+"%", closeWidth+"%"],</p><p> [closeWidth+"%", closeWidth+"%", closeWidth+"%", openWidth+"%"]</p><p>]</p><p>var PosNum = [</p><p> ["0%",openWidth+"%",(openWidth + closeWidth)+"%",(openWidth + (closeWidth*2))+"%"],</p><p> ["0%",closeWidth+"%",(openWidth + closeWidth)+"%",(openWidth + (closeWidth*2))+"%"],</p><p> ["0%",closeWidth+"%",(closeWidth*2)+"%",(openWidth + (closeWidth*2))+"%"],</p><p> ["0%",closeWidth+"%",(closeWidth*2)+"%",(closeWidth*3)+"%"]</p><p>]</p><p>// $("#slider_t1 ul.lst_slide > li").on("click",function(){</p><p>// var url =$(this).find(".more").attr("href");</p><p>// $(location).attr("href",url);</p><p>// });</p><p> </p><p> function sliderT1Height(b){</p><p> var WinWdith = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;</p><p> function resizeT1(){</p><p> var winHeight = $(window).height();</p><p> var headerHeight = $("#header").outerHeight();</p><p> var totalHeight = winHeight - headerHeight;</p><p> </p><p> if(WinWdith > 1100){</p><p> if(slideDestroy){</p><p> bxSliderSpot.destroySlider();</p><p> slideReload = true;</p><p> slideDestroy = false;</p><p> $("#slider_t1 > ul > li").off("mouseenter mouseleave").on("mouseenter mouseleave",sliderEnter).trigger("mouseleave");</p><p> }</p><p> </p><p> $("#spot_main ,#slider_t1 > ul").css("height",totalHeight);</p><p> $("#slider_t1 > ul > li").each(function(){</p><p> var $this = $(this);</p><p> $this.find(".img").css({ marginLeft : -($this.find(".img > img").width()/2) });</p><p> });</p><p> </p><p> </p><p> }else{ //WinWdith</p><p> if(slideReload){</p><p> bxSliderSpot.reloadSlider();</p><p> slideReload = false;</p><p> slideDestroy = true;</p><p> $("#slider_t1 ul.lst_slide > li").off("mouseenter mouseleave",sliderEnter);</p><p> } </p><p> </p><p> $("#spot_main ,#slider_t1 ul.lst_slide,#slider_t1 ul.lst_slide li, #spot_main .bx-viewport").css("height",totalHeight);</p><p> $("#slider_t1 ul.lst_slide li").each(function(){</p><p> var $this = $(this);</p><p> $this.css({ "left":"","height":$this.find(".img > img").height() }).find(".img").css({marginLeft : -($this.find(".img > img").width()/2)}).end()</p><p> .find(".cont").css("margin-top","");</p><p> });</p><p> </p><p> } //if :: WinWdith</p><p> </p><p> }//resizeT1</p><p> </p><p> if (b) {</p><p> $("#spot_main").imagesLoaded(function(){</p><p> resizeT1(true);</p><p> })</p><p> }else{</p><p> resizeT1(true);</p><p> }//if::b</p><p> </p><p> }</p><p> </p><p> </p><p>function sliderEnter(e){</p><p> if(e.type == "mouseenter"){</p><p> </p><p> var $this = $(this);</p><p> var num = $this.index();</p><p> var cont = $this.find(".cont");</p><p> var lstHeight = cont.find(".lst").outerHeight();</p><p> cont.find(".lst").stop().fadeIn(300);</p><p> cont.find("h1").css({"width":"70%"});</p><p> cont.stop().animate({"margin-top":-(lstHeight / 2)},300);</p><p> for (var i = 0; i < $("#slider_t1 > ul > li").length; i++) {</p><p> $("#slider_t1 > ul > li:eq("+i+")").stop().animate({</p><p> "width":widthNum[num][i],</p><p> "left":PosNum[num][i]</p><p> },spotSpeed,spotEase)</p><p> };</p><p> </p><p> }else{</p><p> var $this = $(this);</p><p> var num = $this.index();</p><p> var cont = $this.find(".cont");</p><p> $this.find(".lst").stop().fadeOut(300);</p><p> cont.stop().animate({"margin-top":-20},300);</p><p> cont.find("h1").stop().css({"width":""});</p><p> for (var i = 0; i < $("#slider_t1 > ul > li").length; i++) {</p><p> $("#slider_t1 > ul > li:eq("+i+")").stop().animate({</p><p> "width":normalWidth+"%",</p><p> "left":PosResetNum[i]</p><p> },spotSpeed,spotEase)</p><p> };</p><p> }</p><p> </p><p>}</p><p> </p><p> </p><p> </p><p> $(window).resize(function(){</p><p> sliderT1Height(false);</p><p> });</p><p> sliderT1Height(true);</p><p> </p><p> </p><p> if( isie7 || isie8 ){}else{</p><p> if(!Modernizr.touch){ </p><p> // $( window ).stellar({</p><p> // positionProperty :"transform"</p><p> // // hideDistantElements: false,</p><p> // // horizontalScrolling: false,</p><p> // // responsive: true</p><p> // }); </p><p> }</p><p>};</p><p>// var stellarTimeout;</p><p>// $(window).resize(function() {</p><p>// clearInterval(stellarTimeout);</p><p>// stellarTimeout = setTimeout(function(){</p><p>// $( window ).stellar('refresh');</p><p>// },300);</p><p> </p><p> </p><p> </p><p> </p><p>// });</p><p> </p><p> var notice_list = $(".main_notice_list"); </p><p> var notice_interval;</p><p> var detail ={ </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>speed:1000,</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>l_height:15,</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>delay:4000,</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>easing:"easeInCubic"</p><p> }</p><p> function notice_motion(c,p){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>if(c == "next"){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span> notice_list.find("ul").stop().animate({"top":-(detail.l_height)},detail.speed,detail.easing,function(){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$(this).find("li:first-child").clone().insertAfter($(this).find("li:last-child"))</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$(this).find("li:first-child").remove().end().css("top",0);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span> })</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}else{</p><p><span class="Apple-tab-span" style="white-space:pre"> </span> notice_list.find("ul li:last-child").clone().insertBefore(notice_list.find("ul li:first-child")).parent().css({"top":-(detail.l_height)});</p><p><span class="Apple-tab-span" style="white-space:pre"> </span> notice_list.find("ul").stop().animate({"top":0},detail.speed,detail.easing,function(){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$(this).find("li:last-child").remove();</p><p><span class="Apple-tab-span" style="white-space:pre"> </span> })</p><p><span class="Apple-tab-span" style="white-space:pre"> </span> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p> $(".main_notice_list > ul > li").off("click").on("click",noticeClick);</p><p> }//motion</p><p> function notice_run(){ notice_interval = setInterval(notice_motion_setintervarl,detail.delay); }//run</p><p> function notice_stop(){clearInterval(notice_interval); }//stop</p><p> function notice_motion_setintervarl(){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>notice_motion("next");</p><p> }//interval</p><p> </p><p> </p><p> /*$(".main_notice .prev,.main_notice .next").click(function(e){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var ac = $(this).attr("class");</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>notice_motion(ac);</p><p> }).parent().hover(function(){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>notice_stop();</p><p> },function(){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>notice_run();</p><p> });*/</p><p> </p><p> $(".main_visual ul li").hover(function(){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var $m_tab = $(this).find("img");</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$m_tab.attr("src",$m_tab.attr("src").split("_off").join("_on"));</p><p> },function(){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var $m_tab = $(this).find("img");</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$m_tab.attr("src",$m_tab.attr("src").split("_on").join("_off"));</p><p> })</p><p> notice_run();</p><p> </p><p> </p><p></script>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
Expert
9년 전
소스와 화면을 확인해야 하는 부분이라 텍스트로는 어떠한 부분을 원하시는건지 파악이 되지 않고 소스도 테스트 하며 확인이 되어야 하는 부분입니다.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
채택
답변대기
답변대기
채택
답변대기