영상 수업 소스 다운로드는 어디서 받을수 있나요?영상 수업 동일하게 코딩해도 오류가 나거나 정상적으로 출력되지 않아..

안녕하세요. 좋은 강의 감사합니다.센셕6번에서 스크롤트리거를 하셨잖아요. title를 fixed로 시키셨습니다..fromTo('.worklist' ,{margin:'0 auto'} ,{margin:'100vh auto 0', duration:'1',ease: "power3.out"},0)그런다 다시 올리면 버버벅 거리는 현상은 어쩔수 없는 현상일까요?margin-top가 올라가면 다시 0으로 돌아가면서 버벅거리는 현상같은데, 어쩔수 없는 현상인지 여쭤봅니다.혹시몰라 사진 첨부드려요~회신 주시면 너무 감사드릴겠습니다.항상 좋은 강의 많이 부탁드립니다.~

안녕하세요.강의 잘 보고있습니다.강의에 사용된 이미지등 자료들은 어디서 받을 수 있을까요?

메인 페이지 모바일로 변경하는 부분까지 수강 잘 마쳤습니다.자세히 잘 설명해주셔서 감사해요.그런데 모바일 버전에서 메뉴로 해당 위치로 이동했을 때, 상단 영역 때문에 화면 윗부분이 잘려보이는 부분은 어떻게 해결해야 할까요?조금 윗부분으로 이동하는 방법이 없을까요?(혹시 제가 아직 못본 뒷부분 강의에 나와있다면 다 보지 않고 질문드려 죄송합니다!)

header active가 실행하지 않습니다 오타가 있나 아무리 봐도 똑같이 코딩된 거 같은데 .. 왜그럴까요???

@media (max-width:768px) { /* html { scroll-behavior: smooth; } */ /* Entire Layout */ .cd-section { height: auto; } .cd-section > div { height: auto; } .content { position: static; width: 100%; height: 100%; } /* Header */ header { transition: 0.5s; z-index: 100; } header.active { background-color: #fff; border-bottom: 1px solid #eee; } .menu { display: block; } .slogan { display: none; } .gnb { background-color: #fff; position: fixed; top: 0; right: -270px; width: 250px; height: 100vh; box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1); transition: 0.5s; } .gnb.active { right:0; } .menu { margin-top: 60px; line-height: 40px; } .menu a { display: block; text-align: right; padding-right: 20px; color: #000; font-size: 20px; } /* Trigger */ .trigger { display: block; width: 24px; height: 14px; position: absolute; top: 20px; right: 20px; } .trigger span { position: absolute; height: 1px; width: 100%; background-color: #000; transition: 0.5s; } .trigger span:nth-child(1) { top: 0; } .trigger span:nth-child(2) { top: 50%; width: 80%; } .trigger span:nth-child(3) { top: 100%; } .trigger.active span:nth-child(1) { top: 50%; transform: rotate(45deg); } .trigger.active span:nth-child(2) { top: 50%; width: 80%; opacity: 0; } .trigger.active span:nth-child(3) { top: 50%; transform: rotate(-45deg); } /* go to top */ .gototop { position: fixed; bottom: 20px; left: 20px; border: 1px solid #fff; display: block; width: 40px; height: 40px; border-radius: 50%; text-align: center; line-height: 50px; transform: translateY(0px); opacity: 0; } .gototop.active { opacity: 1; } .btn-hiring { right: 20px; bottom: 20px; } .cd-vertical-nav { display: none; } /* Show Hide Section */ /* #home, #about, #project, #plan, #awards, #location, #contact { display: none; } */ /* ############# section : Home ############# */ .home-inner { height: 100vh; } .welcome-text { transform: translate(-50%, -50%) scale(0.7); width: 100%; /* border: 2px solid red; */ } .home-heading { left: 20px; } .home-heading span { font-size: 50px; } }

/* Google Web Font : Montserrat */ @import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500&display=swap'); @import url('https://fonts.googleapis.com/css?family=Manrope:300,400,500,600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap'); /* FontAwesome CDN 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* source sans */ @import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@200;300;400;600&display=swap'); /* Overpass */ @import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap'); /* Reset CSS */ * { box-sizing: border-box; } ul { list-style: none; padding: 0; } a { text-decoration: none; } /* Default CSS */ body { font-family: 'Montserrat', sans-serif; color: #222; font-size: 15px; margin: 0; height: 100vh; background-color: #fff; } /* Entire Layout */ .cd-section { height: 100vh; } .cd-section > div { height:100%; position: relative; } .content { background-color: #ddd; position: absolute; width: calc(100% - 40px); height: calc(100% - 80px); left: 20px; bottom: 20px; overflow: hidden; } /* Header */ header { position: fixed; top:0; left:0; width: 100%; } .gnb-inner { /* border: 1px solid #000; */ width: calc(100% - 40px); margin: auto; height: 60px; line-height: 60px; } .logo { float: left; } .logo img { padding-top: 17px; } .gnb { float: right; } .menu { display: none; } .menu a {} .slogan { font-size: 16px; font-style: italic; } .trigger { display: none; } /* Hiring button */ .btn-hiring { position: fixed; right: 50px; bottom: 50px; color: #fff; background-color: #000; padding: 10px 20px; border-radius: 20px; box-shadow: 5px 5px 20px rgb(0, 0, 0, 0.3); transition: 0.5s; } .btn-hiring .fa-solid { transform: rotateY(180deg); margin-right: 5px; } .btn-hiring:active { transform: scale(0); } /* ############# section : Home ############# */ .home-inner { background-color: #fff; height: 100%; } .home-inner::before { content: ''; background-color: #000; position: absolute; width: 0; height: 100%; top: 0; left: 0; animation: overlay 1s 2.5s ease-in-out; /* display: none; */ } .welcome-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 50px; font-weight: 300; text-align: center; line-height: 1.2em; margin: 0; font-family: 'Source Sans 3', sans-serif; animation: slideup 2s linear; animation-fill-mode: both; /* display: none; */ } .welcome-text span { display: block; font-size: 26px; } .welcome-text span .fa { color: crimson; } .opacity-image { background: url('images/section-bg-01.jpg') no-repeat center center; background-size: cover; height: 100%; opacity: 0; animation: opacity-image 1s 3s ease-in both; /* display: none; */ } .home-heading { /* display: none; border: 1px solid red;*/ position: absolute; top: 50%; /* left: 40%; */ left: 300px; /* margin-left: 200px; */ transform: translateY(-50%); } .home-heading span { display: block; font-size: 115px; color: #fff; font-weight: 600; width: 0; overflow: hidden; animation: reveal 1s 3s ease-in-out both; } .home-heading span:nth-child(1) { animation-delay: 3s; } .home-heading span:nth-child(2) { animation-delay: 3.2s; } .home-heading span:nth-child(3) { animation-delay: 3.4s; } @keyframes slideup { 0% { opacity: 0; margin-top: 50px; } 20% { opacity: 1; margin-top: 0; } 80% { opacity: 1; margin-top: 0; } 100% { opacity: 0; } } @keyframes overlay { 0% { width: 0; left: 0; } 50% { width: 100%; left: 0; } 100% { width: 0; /* right: 0; */ left: 100%; } } @keyframes opacity-image { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes reveal { 0% { width: 0; } 100% { width: 100%; } }

/* document ready랑 같은거 = html을 다 읽은 후 실행해라고 표시 */ /* Trigger */ $(function(){ $('.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) }) /* chacng CSS with Scroll */ // 스크롤을 한 상태 if 스크롤을 안한상태 else $(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: true, speed: 300, slidesToShow: 4, slidesToScroll: 2, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 3, infinite: true, dots: true } }, { breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 2 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } } // You can unslick at a given breakpoint now by adding: // settings: "unslick" // instead of a settings object ] }) // slick.js project photo1 $('.project-photo').slick({ dots : true, infinite : true, speed : 500, fade : true, autoplay : true, autoplaySpeed : 2000, cssEase : 'linear' }) })

수업진행을 하는 과정에 있어서 제가 문제를 찾아볼려고 했는데 못찾아서 질문을 드립니다.PC에서 모바일 화면으로 전환되면 GNB메뉴가 항시 OPEN되어있는 상태로 화면이 보이게 되면서 계속 GNB메뉴를 닫아야하더라구요. 선생님께서는 그런 문제가 없어보여서요.선생님 소스를 복사해서 붙여넣기도 해봤는데요.. 제 쪽에서는 항시 OPEN되서 보이더라구요제가 문제해결을 하지 못해서 여쭈어봅니다. 소스는 많지만.. 아래와 같습니다.<!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> --> <title>DesignAgency SIYU Family</title> <link rel="icon" href="images/favicon.png"> <script src="/js/jquery-2.1.4.js"></script> <!-- <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 --> <script src="js/slick/slick.min.js"></script> <link rel="stylesheet" href="js/slick/slick-theme.css"> <link rel="stylesheet" href="js/slick/slick.css"> <!-- featherlight.js --> <script src="js/featherlight/featherlight.js"></script> <link rel="stylesheet" href="js/featherlight/featherlight.css"> <!-- custom Js & CSS --> <script src="custom.js"></script> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="responsive.css"> <!-- fontawesome --> <script src="https://kit.fontawesome.com/f7c955b0b1.js" crossorigin="anonymous"></script> </head> <!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax --> <body data-hijacking="on" data-animation="rotate"> <!-- S : container --> <div class="container"> <!-- S : Home --> <section class="cd-section visible" id="home"> <div> <div class="content"> <div class="home-inner"> <h3 class="welcome-text"> You can do it <span>with SIYU family <i class="fa fa-heart"></i></span> </h3> <div class="opacity-image"></div> <div class="home-heading"> <span>Creative</span> <span>Architecture</span> <span>Specialists</span> </div> </div> </div> </div> </section> <!-- E : Home --> <!-- S : header --> <header class="active"> <div class="gnb-inner"> <div class="logo"> <a href="/"> <img src="images/logo.png" alt="로고" /> </a> </div> <!-- S : gnb --> <div class="gnb active"> <div class="menu"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#project">Project</a> <a href="#plan">Plan & History</a> <a href="#awards">Awards</a> <a href="#location">Location</a> <a href="#contact">Contact</a> </div> <div class="slogan">We design places, not projects.</div> </div> <div class="trigger active"> <span></span> <span></span> <span></span> </div> <!-- E : gnb --> </div> </header> <!-- E : header --> </div> <!-- E : container --> <a href="#" class="gototop"> <img src="images/gototop.png" alt="맨 위로"> </a> <a href="hiring.html" class="btn-hiring" data-featherlight="iframe"> <i class="fa-solid fa-comment-dots"></i> Hiring </a> <nav> <ul class="cd-vertical-nav"> <li><a href="#0" class="cd-prev inactive">Next</a></li> <li><a href="#0" class="cd-next">Prev</a></li> </ul> </nav> </body> </html>

강사님 안녕하세요!워프 반응형 설명하실때 PC, 테블릿, 모바일 각각 설정을 다르게 변경해주시는데 저는 테블릿에서 설정을 바꾸면 그게 전체에 적용되어서 각각 설정이 안되고 전체 변경이 됩니다ㅠㅠ계속 이부분을 설명하시는데 방법이 없어서 질문드립니다...ㅠㅠ제가 설정을 잘못한걸까요?PC에서 저장하고 테블릿 부분 다르게 변경해도 동일하게 PC에도 해당 설정이 반영됩니다ㅠㅠ

안녕하세요~ 카페 24로 호스팅했다가 제한이 많이 강의내용 따라가기가어려워 다시 패스트코멧으로 호스팅을했습니다. 도메인도 호스팅케이알에서 받아 진행을하고, 이제 30시간 넘어 지났는데요 아직도 도메인 접근하면 호스팅이 연결이 되지않은것 같아, 강의보기를 더 진행을 못하고있습니다.혹시 도메인 연결되기전에 미리 워프를 설치하고 강의내용을 따라 설정을 해도 되나요? 아니면 다른 방법으로 진행하고, 나중에 다른 변경설정을 해야되는지 알고싶습니다. 설 연휴다보니.. 테마를 요청드리고 빨리 받아서 적용을 하고싶어서^^;; 문의드립니다. 감사합니다 : ) 

왜 그런걸까요? ;; 이것때문에 진도를 못나가고있어요 ~ㅠㅠ 파일을 똑같이 복사해서 동영상에서 이미지로 변경하면 선생님처럼 중심에서 애니메이션이 진행되네요...왜 동영상을 넣으면 우측하단에서 동영상이 진행될까요? 동영상 파일이 좀 크지만 선생님 메일에 보내볼게요~ ㅠㅠ

5차_업데이트(고정된 섹션에 하위 섹션 올라오는 인터렉티브)이 부분 캡쳐 보면서 코드 따라쳐도 오류가 나오네요 이부분 코드좀 전달주세요wssksms@naver.com

선생님 질문이있습니다. 스크롤라 제이에스를 $(document).ready(function(){ $(".animate").scrolla({ mobile:true, once:false })})작성하고,html 에 동일하게 넣었는데<section class="visual animate" data-animate="motion">클래스가 motion 이렇게 붙는게아니라.. 선생님과 다르게 animate__motion 이렇게 붙습니다 혹시..이유를 할수있을까요?

<모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기> 수업중에/* Trigger */ .trigger { display: block; width: 24px; height: 14px; position: absolute; right: 20px; top: 20px; } .trigger span { position: absolute; height: 1px; width: 100%; background-color: #000; transition: 0.5s; } .trigger span:nth-child(1) { top: 0; } .trigger span:nth-child(2) { top: 50%; width: 80%; } .trigger span:nth-child(3) { top: 100%; } 이미 .trigger 위치 잡을때 position: absolute를 썼기 때문에 추가로 relative 중복 설정이 불가하면, 어떻게 .trigger가 부모이고 .trigger span이 자식요소가 되서 span이 위치를 잡을 수 있나요? 

items에 div를 사용했기때문에 CSS작성시 그러한 것 때문에 이왕이면 다른 태그가 좋다고 하는 부분은 이해가 됐어요~혹시나 dl dt dd 태그를 이용을 안하신건 이유가 있으실까요?div를 사용해도 되고 어느것도 괜찮다고 하셨는데dl이 있는데 이용하지 않고 span태그와 h3를 이용하신 이유가 있을 것 같아서요.

섹션3 모바일 전체 레이아웃 및 네비게이션 퍼블리싱(모바일버전)의 3강 모바일트리거 GNB 보이기 감추기까지 관련하여서 제가 잘못한것 같아서 계속 동일한 강의를 3번이나 보고 잘못된게 없는지 확인했는데,선생님과 어떠한 점에서 코드가 다른지 찾을 수가 없습니다. 그래서 무엇이 잘못되었는지, 트리거가 작동은 하나 한번 닫은 후 햄버거메뉴가 보여야 하는데 gnb가 active되어있어도 머가 문제인지 모르겠습니다. 어째서 첫 로딩 후, 보이고, 닫기버튼을 누른 후, 햄버거 메뉴 자체가 안보일까요? 그래서 아래의 다른 학습자님의 글을 보고 추가도 해봤지만 안되네요. 제가 어떤걸 잘못했길래 보이지 않는걸까요?

안녕하세요 강의 잘 수강하고 있습니다.다름이 아니라 s1_list , s2_list 의 내용을 html에 목록 태그로 정의하고 css 디자인 입히셨는데요이 부분을 s1_list s2_list에 display:flex 속성을 주어서 정렬을 해도 괜찮을까요?flex 속성을 활용하여 만들어보고 싶어서 여쭤봅니다! 혹시나 이 속성을 적용하면 단점이라던지 불편한 점이나 불가능한 부분이 있을까요 pc 버전등에서 디자인이 변경될때 좀 더 용이한가 싶어서 이 부분을 수정해서 포폴에 활용해 볼까 합니다!

안녕하세요 강사님,Header & Welcome 섹션 #4까지 수강 중에 마우스 휠까지는 다 되는데 TypeIt - Welcome 부분만 적용이 안됩니다.제이쿼리 슬릭 슬라이더는 문제없이 잘 되는데 왜 typeit.min.js 파일만 제이쿼리 연결이 안되는 건지 잘 모르겠네요, 경로는 맞게 지정한거 같은데 이상하네요..em태그 안에 임으로 텍스트를 나오면 텍스트가 뜨기는 하는데 제이쿼리 연결하려고 다 지우면 안나옵니다.코드에는 이상이 없는거 같은데 어떻게 해결해야 될지 몰라서 질문 드립니다. 확인 한번 부탁드립니다, 감사합니다. [HTML 코드]<!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="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- Slick Slider --> <link rel="stylesheet" href="js/slick/slick-theme.css"> <link rel="stylesheet" href="js/slick/slick.css"> <script src="js/slick/slick.min.js"></script> <!-- TypeIt --> <script src="js/typeit.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> <div class="container"> <!-- Header --> <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> <!-- Section : ceo-access --> <section class="ceo-access"></section> <!-- Section : banner --> <section class="banner"></section> <!-- Section : feature --> <section class="feature"></section> <!-- Section : vision --> <section class="vision"></section> <!-- Section : faq --> <section class="faq"></section> <!-- Section : review --> <section class="review"></section> <!-- Section : focus --> <section class="focus"></section> <!-- Section : guide --> <section class="guide"></section> <!-- Section : news --> <section class="news"></section> <!-- Footer --> <footer></footer> </div> </div> </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:10; } .header-inner { /* border:1px solid #000; */ width: 1300px; margin:0 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; } .gnb a {} /* #################### section : welcome #################### */ .welcome { /* border:5px solid #000; */ height:90vh; position:relative; } .slidshow {} .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 {} .welcome-btns .btn { /* border:1px solid #000; */ display:inline-block; width: 160px; padding:8px; /* height: 70px; */ 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 { /* display:block; */ position:absolute; width: 4px; height: 15px; background-color: #fff; border-radius: 5px; left:12px; top:10px; animation:wheele 1s 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 img { outline:none; } [custom.js 코드]$(function(){ /* Slick Slider - Welcome*/ $('.slideshow').slick({ infinite: true, // 무한반복 dots: false, // 동그라미 네비게이션 사용안함 autoplay: true, // 자동 재생 autoplaySpeed: 2000, // 자동 재생 시 머무는 시간 fade: true, // 크로스 페이드 트랜지션 speed: 1000, // 자동 재생 트랜지션 시간 pauseOnHover: false // 마우스 오버될 때 멈춤 사용안함 }); }) /* TypeIt - Welcome */ $('#typing').typeIt({ strings: ["Business strategy.", "Innovation Plan.", "Creative Idea."], // 타이핑 텍스트 입력 speed: 100, // 알파벳 타이핑 속도 autoStart: true, // 자동 재생 사용 breakLines: false, // 줄 바꿈 사용안함 }); 

아래 처럼 css 적용하고 html도 강의데로 넣어줬는데...왜 애니메이션이 적용되지 않을까요.ltr { animation: ltr o.5s linear both; } .rtl { animation: rtl o.5s linear both; } .utd { animation: utd o.5s linear both; } @keyframes ltr { 0% { transform: translateX(-100px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } @keyframes rtl { 0% { transform: translateX(100px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } @keyframes utd { 0% { transform: translateY(-100px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }