173만명의 커뮤니티!! 함께 토론해봐요.
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)
안녕하세요, 슬릭 슬라이더가 작동되지않고 jQuery.Deferred exception: $(...).slick is not a function TypeError: $(...).slick is not a function 이런 메세지가 나오는데요... 첨부해주신 단계별 코드를 보면서 하나하나 다 비교도 해보고 slick js, css 파일도 옮겨서 덮어써보고, jquery도 최신으로 바꿔봐도 슬릭 슬라이더만 작동이 되지 않는데 왜 그런 걸까요? index.html <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DesignWorks Architecture Agency</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- Page Scroll Effects JS & CSS --> <script src="js/velocity/modernizr.js"></script> <script src="js/velocity/velocity.min.js"></script> <script src="js/velocity/velocity.ui.min.js"></script> <script src="js/velocity/main.js"></script> <link rel="stylesheet" href="js/velocity/velocity.css"> <!-- Smooth Scrolling --> <script src="js/jquery.scrollTo.min.js"></script> <!-- Slick.js --> <link rel="stylesheet" href="js/slick/slick.css"> <link rel="stylesheet" href="js/slick/slick-theme.css"> <script src="js/slick/slick.min.js"></script> <!-- Custom JS & CSS --> <script src="custom.js"></script> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="responsive.css"> <script src="https://kit.fontawesome.com/62a31d096f.js" crossorigin="anonymous"></script> </head> custom.js $(function(){ // Trigger $('.trigger').click(function(){ $(this).toggleClass('active') $('.gnb').toggleClass('active') }) $('section, .menu a').click(function(){ $('.gnb').removeClass('active') $('.trigger').removeClass('active') }) /* Smooth Scrolling */ $('.menu a, .gototop').click(function(e){ $.scrollTo(this.hash || 0, 900) }) // Change CSS with Scroll $(window).scroll(function(){ if($(window).scrollTop() > 50) { $('header, .gototop').addClass('active') } else { $('header, .gototop').removeClass('active') } }) // slick.js : history $('.history-slider').slick({ dots: true, infinite: false, speed: 300, slidesToShow: 4, slidesToScroll: 2, }) // slick.js : project photo $('.project-photo').slick({ dots: true, infinite: true, speed: 500, fade: true, autoplay: true, autoplaySpeed: 2000, cssEase: 'linear' }) })
rondeur
2021-03-10T18:26:42.849Z
댓글 2
좋아요 1
조회수 1595
미해결
반응형 웹사이트 포트폴리오(App Official Landing Website)
원인을 모르겠어요 <! DOCTYPE html > < html lang = "ko" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > StarUp Mate : App Official Landing </ title > < link rel = "icon" href = "images/logo-favicon.png" > <!---jquery CDN---> < script src = "http:s//code.jquery.com/jquery-3.5.1.min.js" ></ script > <!--Slick slider--> < link rel = "stylesheet" href = "js/slick/slick/slick-theme.css" > < link rel = "stylesheet" href = "js/slick/slick/slick.css" > < script src = "js/slick/slick.min.js" ></ script > <!-- Custom CSS & JS --> < link rel = "stylesheet" href = "style.css" > < link rel = "stylesheet" href = "responsive.css" > < script src = "custom.js" ></ script > </ head > < body > < header > < div class = "header-inner" > < div class = "logo" > < a href = "#none" >< img src = "images/logo.png" alt = "" ></ a > </ div > < div class = "gnb" > < a href = "#none" > CEO 인사말 </ a > < a href = "#none" > 서비스 특징 </ a > < a href = "#none" > 자주 묻는 질문들 </ a > < a href = "#none" > 경영비전 </ a > < a href = "#none" > 사용자 리뷰 </ a > < a href = "#none" > 앱 사용자 가이드 </ a > < a href = "#none" > 최신소식 </ a > </ div > </ div > </ header > <!-- Section : welcome --> < section class = "welcome" > < div class = "slideshow" > < img src = "images/slide-welcome-01.png" > < img src = "images/slide-welcome-02.png" > < img src = "images/slide-welcome-03.png" > </ div > < div class = "welcome-heading" > < span > 창의적인 아이디어를 만드는 가장 빠른 방법 </ span > < h1 > An idea solution of startup for your < em id = "typing" ></ em > </ h1 > < p > 스타트업 메이트 앱이 여러분의 최상의 스타트업 구축을 위해 창의적인 아이디어를 제공하는 데 최선을 다하겠습니다. </ p > < div class = "welcome-btns" > < a href = "#none" class = "btn start" > CEO 시작하기 </ a > < a href = "#none" class = "btn guide" > 사용자 가이드 </ a > </ div > </ div > < div class = "mouse" > < span class = "wheele" ></ span > </ div > </ section > <!---.ceo-access---> < section class = "ceo-access" > </ section > <!---.banner---> < section class = "banner" > </ section > <!---.feature---> < section class = "feature" > </ section > <!---.vision---> < section class = "vision" > </ section > <!---.faq---> < section class = "faq" > </ section > <!---.review---> < section class = "review" > </ section > <!---.focus---> < section class = "focus" > </ section > <!---.guide---> < section class = "guide" > </ section > <!---.news---> < section class = "news" > </ section > < footer > </ footer > </ body > </ html > css /* Fontawesome 4.7 */ @ import url ( 'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' ); /* XEION CDN */ @ import url ( 'http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css' ); /* Web Fonts - Source Sans Pro */ @ import url ( 'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap' ); /* font-family: 'Source Sans Pro', sans-serif; */ /* Web Fonts - NoonNoo */ @ font-face { font-family : 'NEXON Lv2 Gothic' ; src : url ( 'https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic.woff' ) format ( 'woff' ); font-weight : normal ; font-style : normal ; } /* Reset CSS */ * { box-sizing : border-box ; } a { text-decoration : none ; color : # 222 ; } button , input { outline : none ; } h1 , h2 , h3 , h4 , h5 , h6 { margin-top : 0 ; font-weight : normal ; line-height : 1.5em ; } /* Default CSS */ body { font-family : 'NEXON Lv2 Gothic' , sans-serif ; font-size : 18px ; line-height : 1.7em ; margin : 0 ; background-color : # fff ; color : # 222 ; } /*########header#########*/ header { position : fixed ; width : 100% ; z-index : 100 ; } . header-inner { width : 1300px ; margin : auto ; overflow : hidden ; padding-top : 30px ; padding-bottom : 15px ; } . logo { float : left ; } . logo img { margin-top : -7px ; } . gnb { float : right ; } . gnb a { margin : 10px ; font-size : 16px ; } /* ################# section : welcome ################# */ . welcome { /* border: 5px solid #000; */ height : 90vh ; position : relative ; } . slideshow {} . welcome-heading { position : absolute ; top : 50% ; transform : translateY ( -50% ); /*수직으로 섹션을 기준으로 정중앙에 옴*/ left : 200px ; text-align : center ; width : 750px ; } . welcome-heading span { font-size : 24px ; } . welcome-heading h1 { font-family : 'Source Sans Pro' , sans-serif ; font-size : 60px ; font-weight : 600 ; line-height : 1.2em ; margin-bottom : 30px ; margin-top : 15px ; } . welcome-heading h1 em { display : block ; font-style : normal ; color : # eb4d4b ; } . welcome-heading p { padding : 0 100px ; margin-bottom : 50px ; } . welcome-btns {} . btn { display : inline-block ; width : 160px ; padding : 8px ; color : # fff ; border-radius : 5px ; margin : 5px ; transition : 0.5s ; } . btn : hover { box-shadow : 0 5px 10px rgba ( 0 , 0 , 0 , 0.1 ); transform : translateY ( -5px ); } . btn . start { background-color : # 0abde3 ; } . btn . guide { background-color : # fff ; color : # 222 ; } /* Mouse Wheele */ . mouse { border : 2px solid # fff ; position : absolute ; width : 32px ; height : 45px ; border-radius : 30px ; bottom : 100px ; left : 250px ; } . wheele { position : absolute ; width : 4px ; height : 15px ; background-color : # fff ; border-radius : 5px ; left : 12px ; top : 10px ; animation : wheele 1.5s linear infinite ; } @ keyframes wheele { 0% { top : 10px ; } 50% { top : 20px ; } 100% { top : 10px ; } } /* ▦▦▦▦▦▦▦▦▦ Slick Custom CSS ▦▦▦▦▦▦▦▦▦ */ . slideshow . slick-arrow { border : 1px solid # 000 ; display : none !important ; } . slideshow * { outline : none ; } jquery $ ( function (){ /* Slick Slider - Welcome */ $ ( '.slideshow' ). slick ({ infinite : true , dots : false , autoplay : true , autoplaySpeed : 2000 , fade : true , speed : 1000 , pauseOnHover : false });
슬라이더오류 빈틈원인 반응형-웹 빈틈원인을모르겠어요 HTML/CSS 웹퍼블리싱 jquery html javascript jquery
My own life
2021-02-20T05:05:36.897Z
댓글 1
좋아요 2
조회수 361
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
block 이 되면 오른쪽에 안 보이는 영역 까지, 한 줄에 하나씩이라고 알고있는데요, gnb가 block 으로 바꼈는데 왜 gnb 영역이 수업화면에서는 그렇지가 않아서 의아합니다. gnb 가 블럭요소가 됐는데 왜 inline 영역만큼의 영역을 가지고 있나요??
tt t
2021-02-08T01:33:41.623Z
댓글 1
좋아요 1
조회수 346
미해결
퍼블리싱 핵심이론 PDF 교재 및 예제파일(HTML+CSS+FLEX+JQUERY)
안녕하세요! 현재 퍼블리싱 관련 강의를 수강하고 있는 도중 궁금한 점이 생겨 문의드립니다. "퍼블리싱 핵심이론 PDF 교재 및 예제파일"에 수강 기한이 있는 것을 확인하였는데, 추후 교재가 수정이 된다면 기한이 끝나고 난 후 강의를 다시 구입해야 하나요? 만약, 다시 구입해야 한다면 교재가 수정(또는 개정)되었다는 것을 어떻게 알 수 있을까요? 인프런 강의에서 확인하는 방법이 될까요?
류달리
2021-01-07T08:39:00.687Z
댓글 1
좋아요 1
조회수 297
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)
자막파일 따로 다운받아서 놓친부분 찾기도 좋고 중간중간에 목소리 끊기는 부분도 있고 학교과제하느라 제가 시간도 많이 부족해서..... 다음 영상제작부터 자막이 있으면 계속 구매하고싶어요!!
dbs3346
2021-01-07T02:07:11.615Z
댓글 2
좋아요 2
조회수 702
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
선생님, 안녕하세요. 다름이 아니라 브라켓의 emmet 기능을 설치했는데도 강의에서 선생님처럼 css 속성 앞글자만 쳐도 속성 목록이 쭉 나와야 되는데 저는 css 속성 앞 글자만 작성해도 속성 목록이 전혀 나오지 않습니다. emmet 기능 말고도 다른 확장 기능을 설치해야 되나요? 질문드립니다.
2020-11-20T12:26:56.486Z
댓글 3
좋아요 1
조회수 658
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)
$ ( function (){ /* TRIGGER */ $ ( '.trigger' ). click ( function (){ $ ( this ). toggleClass ( 'active' ) $ ( '.gnb' ). toggleClass ( 'active' ) }) $ ( 'section' ). click ( function (){ $ ( '.gnb' ). removeClass ( 'active' ) $ ( '.trigger' ). removeClass ( 'active' ) }) }) 조금 더 정확하게 해주기 위해, 마지막에, $ ( '.trigger' ). removeClass ( 'active' ) 이거 한줄 더 넣어주면, 트리거 모양이 돌아옵니다. 저거 빠트리면, gnb가 들어가도 트리거가 X 모양으로 남아 있더라구요. 참고하시라고 넣었습니다.
Youngjae Choi
2020-11-20T09:55:58.416Z
댓글 2
좋아요 3
조회수 327
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
이번강의 보고 따라해봤는데 display: inline-block; 을 .item에 넣어도 옆으로 붙지를 않아서 한줄로 나오지를 않더라구요 뭘 잘못한건지 모르겠어서요 ㅠㅠ 뭐가 잘못된걸까요..?? <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>오버하면 상세설명 나타나는 상품목록</title> <style> .items { text-align: center; } .item { display: inline-block; width: 300px; height: 300px; border: 1px solid #ddd; position: relative; margin: 10px; } .caption { width: 300px; height: 300px; background-color: rgba(0, 0, 0, 0.7); position: absolute; top: 0; left: 0; color: #fff; padding: 20px; box-sizing: border-box; padding-top: 40px; opacity: 0; transition: 0.5s; } .caption a { color: #fff; background-color: teal; padding: 7px; border-radius: 3px; text-decoration: none; } .caption a:hover { background-color: #fff; color: #000; } .item:hover .caption { opacity: 1; } </style> </head> <body> <div class="items"> <div class="item"> <img src="1.jpg" alt=""> <div class="caption"> <h2>라이언인형</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing. </p> <p>Price : <s>$12</s> $10</p> <a href="#none">view detail</a> </div> </div> </div> <div class="items"> <div class="item"> <img src="1.jpg" alt=""> <div class="caption"> <h2>라이언인형</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing. </p> <p>Price : <s>$12</s> $10</p> <a href="#none">view detail</a> </div> </div> </div> <div class="items"> <div class="item"> <img src="1.jpg" alt=""> <div class="caption"> <h2>라이언인형</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing. </p> <p>Price : <s>$12</s> $10</p> <a href="#none">view detail</a> </div> </div> </div> </body> </html>
dbtjsal10
2020-08-13T05:02:14.362Z
댓글 2
좋아요 1
조회수 317
