30,800원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결실전! 웹사이트제작! Step By Step! ('포메인'_풀페이지사이트 제작)
right nav에 active 질문입니다
<!--오른쪽 네비--> <ul class="rightNav" id="rightNav"> <li data-menuanchor="firstPage" class="active"><a href="#firstPage"><span>홈</span></a></li> <li data-menuanchor="secondPage"><a href="#secondPage"><span>브랜드</span></a></li> <li data-menuanchor="thirdPage"><a href="#thirdPage"><span>메뉴</span></a></li> <li data-menuanchor="fourthPage"><a href="#fourthPage"><span>서비스</span></a></li> <li data-menuanchor="fifthPage"><a href="#fifthPage"><span>사회공헌</span></a></li> <li data-menuanchor="sixthPage"><a href="#sixthPage"><span>SNS</span></a></li> <li data-menuanchor="seventhPage"><a href="#seventhPage"><span>커뮤니티</span></a></li> </ul>css/* rightNav motion*/ .fullPageWrap .rightNav li.active a span{opacity: 1;right: 30px; transition: all 0.5s ease-in-out;} .fullPageWrap .rightNav li.active a:after{right:-2px; width: 12px; height: 12px; border: 2px solid #96cc29; border-radius: 12px; background: rgba(255,255,255,0);box-sizing: border-box;margin-top: -6px;} html에 active가 첫 firstpage에만 붙어있는데 어떻게 다른 secondpage,thirdpage... 에도 적용이 되는지 궁금합니다! fullpage.js 에 붙어있는 기능인지 , 아니면 :active를 붙여서 사용된건지 자세하게 알고싶습니다!
- 미해결실전! 웹사이트제작! Step By Step! ('포메인'_풀페이지사이트 제작)
3:30 에 제공해드린 파일이 어디있나요..?
3:30 에 제공해드린 파일이 어디있나요..?최종결과물 파일 외에 또 새로운 파일을 어디에서 받아야하는건가요..?카운트업 js 랑 플러그인 js는 어디서 받아야하는건가요,,?
- 미해결실전! 웹사이트제작! Step By Step! ('포메인'_풀페이지사이트 제작)
질문 메일 드렸습니다~!도와주세요!!
countup부분이 되지 않는데 왜그런지 모르겠습니다메일드렸습니다~~!
- 미해결실전! 웹사이트제작! Step By Step! ('포메인'_풀페이지사이트 제작)
섹션6 snsIco 부분(5:56) 누락된거 같습니다
Contents 영역 제작_3 강의에서5:56~6:29 넘어갈 때#section6 .inner .bottomBox .snsList li a img 까지 진행중이다가#section6 .inner .bottomBox .snsIco#section6 .inner .bottomBox .snsIco a#section6 .inner .bottomBox .snsIco li a span이 세 부분에 관한 강의가 누락된 거 같습니다확인 부탁드립니다~!
- 미해결실전! 웹사이트제작! Step By Step! ('포메인'_풀페이지사이트 제작)
fullpage플러그인 쓸때 말고도 쓰고싶은데 waypoint가 전혀 안먹네요(counterup은 됩니다) 이유가 뭘까요?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="format-detection" content="telephone=no, address=no, email=no" /> <meta name="description" content="." /> <meta name="keyword" content="" /> <meta name="theme-color" content="#0096D6" /> <!-------------------------Open Graph-------------------------> <meta property="og:url" content="d" /> <meta property="og:type" content="website" /> <meta property="og:image" content="d" /> <meta property="og:title" content="Sennheiser" /> <!-------------------------반응형웹 선언문-------------------------> <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <!-------------------------제이쿼리-------------------------> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <!-------------------------아이콘 설정-------------------------> <link rel="apple-touch-icon" sizes="76X76" href="img/icon.png" /> <link rel="apple-touch-icon" sizes="120X120" href="img/icon.png" /> <link rel="apple-touch-icon" sizes="152X152" href="img/icon.png" /> <link rel="shortcut icon" sizes="196X196" href="img/icon.png" /> <!-------------------------폰트어썸-------------------------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous" /> <!-------------------------XEICON-------------------------> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css" /> <!-------------------------Swiper-------------------------> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <!-------------------------CSS basic-------------------------> <link rel="stylesheet" href="css/basic/slick-theme.css" /> <link rel="stylesheet" href="css/basic/aos.css" /> <link rel="stylesheet" href="css/basic/reset.css" /> <!-------------------------JS basic-------------------------> <script src="js/basic/aos.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script> <script src="js/basic/jquery.counterup.min.js"></script> <!-------------------------CSS/JS custom-------------------------> <link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/common.css" /> <link rel="stylesheet" href="css/responsive.css" /> <script src="js/custom.js"></script> <title>Document</title> </head> <!-- 페이지 로드될 때 잠깐 보이는 트랜지션 없애기 --> <body class="preload"> <section class="abc"> <article class="abc-inner"> <div class="abc-item"> <div class="abc-pic"> <img src="img/pic1.jpg" alt="" /> </div> <div class="abc-desc"> <h6>sdsdfsdf</h6> <p>skfjsldfjsldfksldfksdfjsldkfjflk</p> </div> </div> <div class="abc-item"> <div class="abc-pic"> <img src="img/pic4.jpg" alt="" /> </div> <div class="abc-desc"> <h6>sdsdfsdf</h6> <p>skfjsldfjsldfksldfksdfjsldkfjflk</p> </div> </div> <div class="abc-item"> <div class="abc-pic"> <img src="img/pic5.jpg" alt="" /> </div> <div class="abc-desc"> <h6>sdsdfsdf</h6> <p>skfjsldfjsldfksldfksdfjsldkfjflk</p> </div> </div> <div class="abc-item"> <div class="abc-pic"> <img src="img/pic8.jpg" alt="" /> </div> <div class="abc-desc"> <h6>sdsdfsdf</h6> <p>skfjsldfjsldfksldfksdfjsldkfjflk</p> </div> </div> </article> <article> <span class="counter">305,400</span><span>장</span> <img src="img/pic7.webp" alt="" /> <img src="img/pic8.jpg" alt="" /> <img src="img/pic8.jpg" alt="" /> </article> </section> <!-------------------------aos-------------------------> <!-- data-aos="fade-left" data-aos-delay="300" --> <script> $(document).ready(function () { setTimeout(function () { AOS.init({ easing: "ease-out-back", duration: 1000, }); }, 500); }); </script> </body> </html> $(document).ready(function () { // const jq = $.noConflict(); // 카운터업 $(".counter").counterUp({ delay: 10, time: 1000, }); });
- 미해결실전! 웹사이트제작! Step By Step! ('포메인'_풀페이지사이트 제작)
상단 네비게이션 바에 대한 강의가 없습니다.
안녕하세요. 선생님 강의는 잘 듣고있습니다. 1) 상단 gnb에 대한 강의 내용이 빠져있는듯하여 동영상 내용이 누락된 건지에 문의 드립니다. 2) main_js 파일 설명에 대해서 //1. 풀페이지 스크롤 $(function(){ $('#fullPage').fullpage({ fingersonly: true, anchors:['firstPage','secondPage','thirdPage','fourthPage','fifthPage','sixthPage','seventhPage'], menu:'.rightNav', }); }); 까지만 Fullpage_제작3 동영상에 나와있는데, 선생님께서 주신 자료에는 afterLoad: function(anchorLink, index){ if(index == 2){ $('.count').counterUp({delay: 10,time: 550}); } if(index == 3){ $('.count2').counterUp({delay: 10,time: 550}); } } 코드가 추가 되어있던데 동영상에는 해당 부분에 대한 설명이 없어서 문의 드립니다.