이벤트 강의를 듣고 나서 addEventListener를 이용하여 여러 장의 사진이 있으면 슬라이더처럼 하나씩 넘겨서 볼 수 있는 이벤트를 만들 수 있을 것 같아 혼자 코드를 직접 짜봤는데요, body 부분은 아래처럼 작성하고, <body> <div class="container"> <div class="slider" id="slider-01"></div> <div class="slider" id="slider-02"></div> <div class="slider" id="slider-03"></div> </div> </body> css는 아래처럼 작성했고, .container { position: relative; width: 660px; height: 440px; overflow: hidden; } .slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; transform: translateX(100%); } #slider-01 { background-image: url(./images/cat/cat-01.png); z-index: 3; } #slider-02 { background-image: url(./images/cat/cat-02.webp); z-index: 2; } #slider-03 { background-image: url(./images/cat/cat-03.webp); z-index: 1; } .sliderMove { transform: translateX(0%); transition: 1s; } js코드를 아래와 같이 작성했습니다. <script> window.addEventListener("load", function sliderHandler() { const sliderGroup = document.querySelectorAll(".slider"); let currentSlider; function activate(elem) { elem.classList.add("sliderMove"); currentSlider = elem; } function inactivate(elem) { elem.classList.remove("sliderMove"); } for (i = 0; i < sliderGroup.length; i++) { if (currentSlider) { inactivate(currentSlider); } activate(sliderGroup[i]); } }); </script> 후에 실행을 해보니 사진이 슬라이더처럼 작동이 안돼서요.. 작동이 안되는 이유와 어느 부분을 수정해야 하는지 알려주시면 감사하겠습니다! 혹 수업 내용과는 조금 벗어난 질문을 한 거라면 정말 죄송합니다ㅜㅜ..
tempYOffset을 통해서 스크롤 위치를 저장하고 있다가 총 100px을 이동하는 것으로 이해하였는데요. tempYOffset의 초기값, 즉 yOffset이 0으로 출력됩니다. 이게 바로 밑에 있는 window.addEventListener('scroll', () => { } 가 아직 실행되지 않아서 yOffset이 초기화 되지 않아 0으로 나오나? 라고 생각하였는데 막상 강의 코드는 딱히 그런 것을 고려하지 않고도 잘 나오는 것 같더라구요. 혹시 어떤 문제일지 알 수 있을까요? 일단 당장에는 window.scrollY를 사용해서 임시조치로 해결했습니다. // 새로고침 등으로 스크롤을 처음부터 하지 않는 경우 시작하는 경우 해결을 위해 window.addEventListener('load', () => { setLayout(); sceneInfo[0].objs.context.drawImage(sceneInfo[0].objs.videoImages[0], 0, 0); document.body.classList.remove('before-load'); // 특정 위치에서 새로 고침 하면 화면이 나오지 않는 문제를 해결 let tempYOffset = yOffset; let tempScrollCount = 0; // 스크롤 몇 번 했는지 저장 console.log(tempYOffset); console.log(yOffset); let siId = setInterval(() => { window.scrollTo(0, tempYOffset); tempYOffset += 5; tempScrollCount++; if (tempScrollCount > 20) { clearInterval(siId); } }, 20); // ..............
<div class="container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item box3">3</div> </div> 여기서 3번째 box만 class="flex-item box3" 하고 css 페이지에서 .box3이라고 해도 3번째 박스만 css적용이되는데 왜 이렇게 써야하는지 이해가 가지 않습니다. 왜 flex-item box3{ padding:30px}이라고 하지 않는것인가요? 이런 코드는 또 어떤 경우에 적용할 수 있나요?
챕터 Template 에서 영상 35:09초 상속작업관련 이해가 안가는게있습니다. 저는 base.html에 {% load static %}만 기입하고 자식인 blog_list.html에서는 기입을 안 했는데, 모든 태그(h1, h2)가 색상이 변경된 상태 입니다. 장고는 5.0.6인데 이게 업데이트가 된건가요?
안녕하세요 1분 코딩님. 영상에 6:10에 zMove 변수의 값을 설정할 때 0 - 1 의 비율이 너무 작은 수 이기 때문에 * 1000 을 해주신다고 하셨는데요. houseElem 요소가 0 - 1000vw 만큼 이동해야 하기 때문에 * 1000을 해주신것이 아닌지 여쭙습니다. 만약 0 - 1 로 가능하다면 배수로 사용해야 한다고 생각이들고 0- 100 으로 가능하다면 %로 사용할 수 있지 않을까 하는 생각에 질문합니다. 실제로 값을 작게 사용했을 때 조금밖에 움직여지지 않는 현상을 테스트 해봤습니다.
CRUD 실습 - 2 중 문의사항이 있어 작성합니다. 제가 실수로 이전 CREATE 에서 두번 실행하는 바람에 현재 제 DB에 데이터가 중복으로 들어갔습니다. 그리고 현재 UPDATE를 하였을 때 데이터가 한 건만 수정되는 것을 확인하였습니다. 원래대로라면 '김현수'라는 이름을 가진 데이터가 2건이기 때문에 2건 모두 바뀌어야 하는 거 아닐까요? 왜 1건만 변경되는 지 문의드립니다.
웹 애니메이션을 위한 GSAP 가이드 Part.02에 advence-start > 01.animation-control > pratice의 html을 실행하면 강의랑 다르게 파란색 길이 안나와서 당황했는데 강의를 들으면서 확인해보니까 해당 밑에꺼 3개 주석처리 하니까 시작 할 때랑 똑같이 나옵니다. 혹시 연습으로 먼저 해보실분들은 이거 3개 주석처리 하시고 시작하시면 될것같습니다. #emart .path { stroke-dasharray: 496; stroke-dashoffset: 496; } #medi .path { stroke-dasharray: 604; stroke-dashoffset: 604; } .pick { opacity: 0; }
안녕하세요 선생님! 웹디자이너로 취업하고 싶어 강의를 생각하다가 예전에 웹디자인기능사 실기도 선생님께 배웠고 해당 강의도 이미 구매했던 것이 기억이 나서 공부하는 중입니다 ㅎㅎ 웹디자이너도 퍼블리싱을 어느정도는 해야한다고 알고 있는데, 시즌1과 시즌2를 공부하면서 웹디자이너의 필수역량을 키울 수 있을까요? 아니면 해당 내용은 부수적인 역량일까요? 고민이 되어 여쭤봅니다!
■ 질문 남기실 때 꼭! 참고해주세요. 라이브실행시 계속 이렇게뜨는데 어떻게해야할까요 ??,, - 먼저 유사한 질문이 있었는지 검색해주세요. - 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다. - HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요. - 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
■ 질문 남기실 때 꼭! 참고해주세요. - 먼저 유사한 질문이 있었는지 검색해주세요. - 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다. - HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요. - 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Flex 레이아웃 이미지 어코디언 네비게이션</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul class="gallery"> <li> <div class="content"> <h2>Uploads made easy</h2> <p>Use Spotify for Artists to upload your releases. With previews and simple edits, you can control exactly how your music appears to divsteners. </p> <div class="sns"> <a href="#none"><i class="fa fa-facebook"></i></a> <a href="#none"><i class="fa fa-instagram"></i></a> <a href="#none"><i class="fa fa-linkedin"></i></a> <a href="#none"><i class="fa fa-google-plus"></i></a> </div> </div> </li> <li> <div class="content"> <h2>Uploads made easy</h2> <p>Use Spotify for Artists to upload your releases. With previews and simple edits, you can control exactly how your music appears to divsteners. </p> <div class="sns"> <a href="#none"><i class="fa fa-facebook"></i></a> <a href="#none"><i class="fa fa-instagram"></i></a> <a href="#none"><i class="fa fa-linkedin"></i></a> <a href="#none"><i class="fa fa-google-plus"></i></a> </div> </div> </li> <li> <div class="content"> <h2>Uploads made easy</h2> <p>Use Spotify for Artists to upload your releases. With previews and simple edits, you can control exactly how your music appears to divsteners. </p> <div class="sns"> <a href="#none"><i class="fa fa-facebook"></i></a> <a href="#none"><i class="fa fa-instagram"></i></a> <a href="#none"><i class="fa fa-linkedin"></i></a> <a href="#none"><i class="fa fa-google-plus"></i></a> </div> </div> </li> <li> <div class="content"> <h2>Uploads made easy</h2> <p>Use Spotify for Artists to upload your releases. With previews and simple edits, you can control exactly how your music appears to divsteners. </p> <div class="sns"> <a href="#none"><i class="fa fa-facebook"></i></a> <a href="#none"><i class="fa fa-instagram"></i></a> <a href="#none"><i class="fa fa-linkedin"></i></a> <a href="#none"><i class="fa fa-google-plus"></i></a> </div> </div> </li> <li> <div class="content"> <h2>Uploads made easy</h2> <p>Use Spotify for Artists to upload your releases. With previews and simple edits, you can control exactly how your music appears to divsteners. </p> <div class="sns"> <a href="#none"><i class="fa fa-facebook"></i></a> <a href="#none"><i class="fa fa-instagram"></i></a> <a href="#none"><i class="fa fa-linkedin"></i></a> <a href="#none"><i class="fa fa-google-plus"></i></a> </div> </div> </li> </ul> </body> </html> /* Google Web Font */ @import url('https://fonts.googleapis.com/css?family=Raleway&display=swap'); /* Fontawesome 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); body { font-family: 'Raleway', sans-serif; line-height: 1.5em; margin: 0; } a { text-decoration: none; color:#fff; } .gallery{ list-style: none; margin:0; padding:0; height: 100vh; display: flex; } .gallery li{ flex:1; background:center no-repeat; border-right:3px solid #000; position:relative; overflow: hidden; transition:0.5s; } .gallery li:last-child{ border-right:none; } .gallery li:nth-of-type(1){background-image: url(images/artistic-image-01.jpg);} .gallery li:nth-of-type(2){background-image: url(images/artistic-image-02.jpg);} .gallery li:nth-of-type(3){background-image: url(images/artistic-image-03.jpg);} .gallery li:nth-of-type(4){background-image: url(images/artistic-image-04.jpg);} .gallery li:nth-of-type(5){background-image: url(images/artistic-image-05.jpg);} .gallery li .content{ position:absolute; width: 100%; background-color:#000; height: 250px; left:0; bottom:-300px; color:#fff; text-align: center; padding:20px; padding-top: 40px; box-sizing: border-box; transition:0.5s; } .gallery li .content:before{ content:''; position:absolute; width: 100%; height: 50px; top:0; left:0; background-color:#000; transform: rotate(-3deg) scale(1.3); transform-origin: left bottom; } .gallery li:hover{ flex:3; filter: grayscale(1); } .gallery li:hover .content{ bottom:0; transition-delay: 0.5s; } transition-delay:0.5s를 .gallery li .content와 .gallery li:hover .content 중 어느쪽에 주느냐에 따라 차이가 있는데 왜 그런걸까요...ㅠㅠ .gallery li .content에 주면 li에 마우스가 벗어날때 .content박스가 사라지는것까지 보여버리는데 (.gallery li:hover .content에 주면 문제없이 잘 작동됩니다.) .gallery li .content와 .gallery li:hover .content에 각각 transition-delay를 주는게 어떤 차이때문에 다르게 보이는지 알고싶습니다.
