index.html파일에서 style태그로 작성하면 돌고래 사진이 잘 나오는데 style.css에서 작성하면 백그라운드 컬러만 적용되고 사진이 표시되지 않습니다. 왜 이런가요?? 

오른쪽 사진 밑에 슬릭 dots 보이게 하고 싶은데 어떻게하면 될까요?같은 질문과 답변을 보았지만 해결이 안되어서 다시 질문드려요~위에 history는 dots 보이는데밑에 project photo 부분은 dots가 안보여요 히스토리에서 했던 것 처럼.history-slider .slick-arrow{ display: none !important; } .history-slider .slick-dots li button:before{ color: #fff; font-size: 40px; } .history-slider .slick-dots li { margin: 0; }이런 것 해줘야하나요?  강의 중 섹션 9 - PC 레이아웃 섹션 상세 퍼블리싱(Project Section) - #06(Slick.js 이미지 슬라이더) 마지막 파트입니다 

이런 화면만 나오는데요? css 연결 잘했는데 안돼요

<section class="news" id="news"> <div class="news-inner"> <div class="headline-share"> <h1>스타트메이트 최신 소식</h1> </div> <div class="news-content"> <div class="news-left"> <div class="news-big"> <img src="images/news-thum-big.jpg"> <div class="news-headline"> <h2>Merry Christmas 2020</h2> <p> 스타트업 CEO 여러분~ 지금은 사회적으로 힘든 시기를 보내고 있지만 우리는 이겨낼수 있습니다.<br> 스타트업메이트가 여러분을 응원합니다. <small class="date">Dec 24, 2020</small> </p> <a href="#none" class="btn-view">자세히 보기</a> </div> </div> </div> <div class="news-right"> <div class="news-items"> <div class="news-thum"> <div class="news-photo"> <img src="images/news-thum-small-01.jpg"> <span class="badge hot">hot issue</span> </div> <p> 스타트업 메이트 드디어 사무실이 확장 이전했습니다. <small class="date">Dec 11, 2020</small> </p> </div> <div class="news-thum"> <div class="news-photo"> <img src="images/news-thum-small-02.jpg"> <span class="badge new">new issue</span> </div> <p> 예상 고객의 요구사항 분석을 미리 알아보는 오프라인 CEO 프로젝트 <small class="date">Oct 21, 2020</small> </p> </div> </div> <div class="news-items"> <div class="news-thum"> <div class="news-photo"> <img src="images/news-thum-small-03.jpg"> <span class="badge hot">hot issue</span> </div> <p> 스타트업을 위한 앱 개발 유료서비스 플랫폼 서비스 오픈 <small class="date">Nov 12, 2020</small> </p> </div> <div class="news-thum"> <div class="news-photo"> <img src="images/news-thum-small-04.jpg"> <span class="badge new">new issue</span> </div> <p> 스타트업 CEO를 위한 사업 기획서 작성과 아이디어 도출 방법 <small class="date">Oct 16, 2020 </small> </p> </div> </div> </div> </div> <a href="#none" class="btn-readmore">read more news</a> </div> </section> //css .news { background-color: #f9f9f9; } .news-inner { width: 1300px; margin: auto; } .news-content { overflow: hidden; width: 95%; } .news-content > div { float: left; width: 50%; } .news-big { position: relative; width: 550px; height: 550px; margin: auto; } .news-big::before { content: ''; position: absolute; background-color: rgba(0, 0, 0, 0.6); width: 100%; height: 100%; top: 0; left: 0; transition: 0.3s; } .news-big:hover::before { background-color: rgba(0, 0, 0, 0.4); } .news-big img { width: inherit; height: inherit; object-fit: cover; } .news-headline { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; text-align: center; width: 90%; } .date { display: block; margin-top: 20px; font-size: 14px; } .btn-view { background-color: #000; padding: 5px 10px; border-radius: 5px; color: #fff; } .news-items { margin-bottom: 20px; } .news-items > div { display: inline-block; } .news-thum { width: 280px; } .news-thum:first-child { margin-right: 30px; } .news-thum:hover .news-photo img { transform: scale(1.1); } .news-thum p { margin-top: 0; } .news-photo { position: relative; display: inline-block; overflow: hidden; } .news-photo img { display: block; transition: 0.3s; } .badge { position: absolute; bottom: 0; left: 0; color: #fff; font-size: 14px; padding: 0 10px; } .badge.new { background-color: red; } .badge.hot { background-color: #000; } .news-thum .date { float: right; } .btn-readmore { background-color: #69acfe; color: #fff; width: 180px; text-align: center; padding: 5px; border-radius: 20px; text-transform: uppercase; font-weight: bold; font-size: 16px; display: block; margin: auto; margin-top: 30px; }제목 길이에 따라 date 위치가 바뀌는데 어떻게 수정해야 같은 위치로 놓을 수 있나요?

[다운로드]+Tailwind+CSS(v3.4.1)+이론+및+실전+예제+완성본.zip 파일을 다운로드 받았는데, 강의내용과 폴더안의 파일이 다른것같습니다. 확인부탁드립니다.

올려주신 드라이브 파일에서 sticky 관련 파일은 찾을 수가 없는데 누락된건가요? 제가 못찾은거라면 어느부분에 작성되어 있는 지 알 수 있을까요? +추가) 밑줄 없애는 css 코드도 따로 없는것 같은데 확인 부탁드립니다..!

강의에 대한 질문은 인프런 질문하기나 1:1 카카오톡 플러스 친구에서 문의하셔도 가능합니다.(카카오톡 플러스친구 주소 http://pf.kakao.com/_ckMyxj/chat) 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요 글 가져오기 파일.xml은 어디서 다운 받을 수 있나요? 이런 파일들도 하나하나 다 요청해야지 받을 수 있는건가요?

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

안녕하세요. 좋은 강의 감사합니다.센셕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