묻고 답해요
169만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
모달팝업창이 height 100% 가 body 가 아닌 .container div 로 인식해서 올라갑니다
안녕하세요 선생님! 우선 좋은 강의 정말 잘 보고 있습니다!23년도 들어서 새로 출시된 유형도 빠르게 반영해주셔서 정말 좋습니다. 문제점: 모달팝업창에 height 100% 주고 position 속성도 .modal 과 body에 넣어주었는데,모달팝업이 높이를 .containter 에 맞춰지네요 (캡쳐본)--<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css"> <title>A-1 유형 복습. 탭 뭉쳐있는거</title> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#none"><img src="images/logo-a1-header.png" alt="logo"></a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#none">탑</a> <div class="sub-menu"> <a href="#none">블라우스</a> <a href="#none">티</a> <a href="#none">셔츠</a> <a href="#none">니트</a> </div> </li> <li> <a href="#none">아우터</a> <div class="sub-menu"> <a href="#none">자켓</a> <a href="#none">코트</a> <a href="#none">가디건</a> <a href="#none">머플러</a> </div> </li> <li> <a href="#none">팬츠</a> <div class="sub-menu"> <a href="#none">청바지</a> <a href="#none">짧은바지</a> <a href="#none">긴바지</a> <a href="#none">레깅스</a> </div> </li> <li> <a href="#none">악세서리</a> <div class="sub-menu"> <a href="#none">귀고리</a> <a href="#none">목걸이</a> <a href="#none">반지</a> <a href="#none">팔찌</a> </div> </li> </ul> </div> </header> <div class="content"> <div class="slide"> <div> <a href="#none"><img src="images/slide-01.jpg" alt="slide1"></a> <a href="#none"><img src="images/slide-02.jpg" alt="slide2"></a> <a href="#none"><img src="images/slide-03.jpg" alt="slide3"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <a class="active" href="#none">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a class='open-modal' href="#none">SMS 발송 모바일 서비스 개선작업 안내입니다.<b>2020.01.09</b></a> <a href="#none">휴대폰 인증 서비스 개선 작업 기간 연장합니다.<b>2020.01.07</b></a> <a href="#none">카드사 부분 무이자 할부 이벤트 2월 3일까지 혜택<b>2019.12.31</b></a> <a href="#none">올앳 시스템 작업 안내<b>2019.12.20</b></a> <a href="#none">휴대폰 결제 시스템 작업이 완료되었습니다.<b>2019.12.20</b></a> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-a1-01.jpg" alt="gallery1"></a> <a href="#none"><img src="images/gallery-a1-02.jpg" alt="gallery2"></a> <a href="#none"><img src="images/gallery-a1-03.jpg" alt="gallery3"></a> </div> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banne-a1-02.jpg" alt="banner"> </a> </div> <div class="shortcut"> <a href="#none"><img src="images/banner-a1-01.jpg" alt="shortcut"> </a> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"> <img src="images/logo-a1-footer.png" alt="footer-logo"> </a> </div> <div class="copyright"> <a href="#none">법적고지</a> <a href="#none">개인정보취급방침</a> <a href="#none">개인정보처리방침</a> <br><br> 상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장 <br> 사업장주소 : 서울특별시 강남구 테헤란로 123-56 </div> <div class="sns"> <a href="#none"><img src="images/sns-01.png" alt="facebook"></a> <a href="#none"><img src="images/sns-02.png" alt="twitter"></a> <a href="#none"><img src="images/sns-03.png" alt="instagram"></a> </div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>SNS비회원주문하기 종료 안내</h2> <p>안녕하세요, JUST 쇼핑몰 MD 홍길동입니다. 안타깝게도 SNS비회원 주문하기 서비스가 한달 뒤 종료될 예정입니다. <br><br> 회원가입없이 SNS계정을 이용해 그동안 제품주문을 하실수 있었는데, 금번 강화된 개인정보보호법 시행령 제 9조 (부칙 3조 3항)에 의거, SNS를 이용한 상품 주문/결제등이 근래에 많은 보안잇슈로 문제가 되고 있음에 다라 KISA의 권고조치의 일환으로 했습니다. 따라서, 한달뒤인 2019.03.10 이후 모든 비회원 고객님들께서는 회원가입으로 전환 후 실명인증이 되어야 하며, 이는 모든 쇼핑몰/오픈마켓등의 전자상거래서비스의 공통된 사항이라는 점을 안내해드립니다.</p> <a class="close-modal" href="#none">Close</a> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html>@charset "utf-8"; body { color: #333333; background-color: #fff; height: 100%; width: 100%; position: relative; } a { color: #333333; text-decoration: none; } .container { border: 1px solid red; width: 1200px; margin: auto; } header { height: 100px; position: relative; z-index: 1; } header > div { height: 100px; } .header-logo { float: left; width: 200px; } .navi { width: 600px; float: right; } .content { } .slide { height: 300px; border: 1px solid blue; } .items { height: 200px; display: flex; } .items > div { border: 1px solid #000; } .news { width: 500px; } .banner { width: 350px; } .shortcut { width: 350px; } footer { display: flex; } footer > div { border: 1px solid #000; height: 100px; } .footer-logo { width: 200px; } .copyright { width: 800px; } .sns { width: 200px; } /* Navigation */ .menu { list-style: none; padding: 0; margin-top: 66px; } .menu li { float: left; width: 25%; text-align: center; } .menu li > a { border: 1px solid #000; display: block; padding: 3px; transition: 0.5s; } .sub-menu { border-bottom: 1px solid black; } .menu li:first-child > .sub-menu { border-left: 1px solid black; } .menu li:last-child > .sub-menu { border-right: 1px solid black; } .sub-menu { background-color: #fff; display: none; } .sub-menu a { display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a { background-color: black; color: white; } .sub-menu a:hover { background-color: black; color: white; } /* Navigation */ /* Image Slide */ .slide { width: 1200px; height: 300px; position: relative; overflow: hidden; } .slide > div { font-size: 0; animation: slide 5s linear infinite; position: absolute; } @keyframes slide { 0% { top: 0; } 30% { top: 0; } 35% { top: -300px; } 65% { top: -300px; } 70% { top: -600px; } 95% { top: -600px; } 100% { top: 0; } } /* Image Slide */ /* Tab Menu */ .tab-inner { width: 96%; margin: auto; position: relative; } .btn { } .btn > a { border: 1px solid #000; display: inline-block; width: 100px; text-align: center; border-radius: 5px 5px 0 0; padding: 2px 6px; background-color: #ddd; margin-bottom: -1px; border-bottom: none; } .btn > a:nth-child(2) { margin-left: -6px; } .btn a.active { background-color: white; } .tabs { } .tabs > div { border: 1px solid #000; height: 165px; width: 100%; position: absolute; box-sizing: border-box; background-color: #fff; } .tab1 { } .tab1 a { display: block; padding: 5px; border-bottom: 1px solid black; } .tab1 a:last-child { border-bottom: none; } .tab1 a b { float: right; font-weight: normal; } .tab2 { text-align: center; padding-top: 20px; display: none; } .tab2 a { } .tab2 a img { width: 120px; } /* Tab Menu */ /* 모듈외 콘텐츠 */ .header-logo, .footer-logo, .sns { line-height: 130px; } .copyright { text-align: center; padding-top: 10px; box-sizing: border-box; } .copyright a:hover { color: dodgerblue; text-decoration: underline; } .sns { text-align: center; } /* 모듈외 콘텐츠 */ /* Modal */ .modal { background-color: rgba(0, 0, 0, 0.25); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 3; } .modal-content { background-color: #fff; width: 450px; height: 500px; padding: 25px; text-align: center; border-radius: 15px; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.418); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .modal-content h2 {} .modal-content p {} .modal-content a { float: right; border: 1px solid #000; padding: 2px 8px; border-radius: 5px; } /* Modal */
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
슬라이드가 안먹혀요 ㅠ
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/style8.css"></head><body><div class="cotainer"><div class="haeder-inner"><header><div class="header-logo"><a href="#"><img src="img/logo-header.png" alt=""></a></div><div class="navi"></div></header></div><div class="con-inner"><div class="slide"><div class="slide-items"><a href="#"><img src="img/slide-01.jpg" alt=""></a><a href="#"><img src="img/slide-02.jpg" alt=""></a><a href="#"><img src="img/slide-03.jpg" alt=""></a></div></div><div class="items"><div class="news"></div><div class="banner"></div><div class="shortcut"></div></div></div><div class="footer-inner"><footer><div class="right"><div class="copy"></div><div class="copy-2"></div></div><div class="family-site"><select><option value="">family site</option><option value="">family site2</option><option value="">family site3</option><option value="">family site4</option></select></div></footer></div></div><script src="script/jquery-1.12.4.js"></script><script src="script/custum8.js"></script></body></html> @charset "utf-8";body{ background-color: #fff; color: #333; padding: 0; margin: 0;}a{ text-decoration: none; color: #333;}ul{ list-style: none;}.cotainer{ width: 100%; margin: auto;}.haeder-inner{ width: 100%; background-color: antiquewhite; height: 100px;}header{ width: 1200px; margin: auto; height: 100px;}header>div{ height: 100px;}.header-logo{ width: 200px; float: left; line-height: 130px;}.navi{ width: 600px; float: right;}.slide{ margin: auto; overflow: hidden; height: 300px; width: 1200px; position: relative;}.slide-items{ width: 3600px; position: absolute; top: 0; left: 0; height: 200px; font-size: 0;}.items{ width: 1200px; margin: auto; overflow: hidden;}.items>div{ border: 1px solid red; height: 200px; float: left; box-sizing: border-box;}.news{ width: 450px;}.banner{ width: 450px;}.shortcut{ width: 300px;}.footer-inner{ width: 100%; height: 100px; background-color: bisque;}footer{ width: 1200px; margin: auto; overflow: hidden;}footer>div{ height: 100px; border: 1px solid red; width: 1200px; float: left; box-sizing: border-box;}.right{ width: 1000px; overflow: hidden;}.right>div{ height: 50px; border: 1px solid red;}.family-site{ width: 200px; line-height: 100px; text-align: center;}.copy{}.copy-2{} setInterval(function(){ $('.slide-items').animate({left: '-1200px'}, function(){ $('.slide-items').css({left: 0}); $('.slide-item:first-child').appendTo('.slide-items'); }); }, 3500);
-
미해결부트스트랩 5(Bootstrap 5) - 기초부터 웹 프로젝트 만들기
게시판을 추가할 수 있는 방법이 있을까요?
좋은 강의 감사 드립니다.홈페이지 기능은 이제 이해가 되었습니다.저는 게시판 기능을 추가하고 싶은데요.무료로 제공되는 게시판이나 추천해 주실 수 있는 게시판이 있을까요?아님 네이버 모두에 있는 무료게시판을 연동할수 있을까요?감사합니다.
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
공지사항 갤러리가 안먹혀요 ㅠ
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/style8.css"></head><body><div class="container"><div class="left"><header><div class="header-logo"><a href="#"><img src="images/logo-header.png" alt=""></a></div><div class="navi"><ul class="menu"><li><a href="#">menu</a><div class="sub-menu"><a href="#">sub-menu</a><a href="#">sub-menu</a><a href="#">sub-menu</a><a href="#">sub-menu</a></div></li><li><a href="#">menu</a><div class="sub-menu"><a href="#">sub-menu</a><a href="#">sub-menu</a><a href="#">sub-menu</a><a href="#">sub-menu</a></div></li><li><a href="#">menu</a><div class="sub-menu"><a href="#">sub-menu</a><a href="#">sub-menu</a><a href="#">sub-menu</a><a href="#">sub-menu</a></div></li><li><a href="#">menu</a><div class="sub-menu"><a href="#">sub-menu</a><a href="#">sub-menu</a><a href="#">sub-menu</a><a href="#">sub-menu</a></div></li></ul></div></header></div><div class="right"><div class="slide"><div><a href="#"><img src="images/slide-01.jpg" alt=""></a><a href="#"><img src="images/slide-02.jpg" alt=""></a><a href="#"><img src="images/slide-03.jpg" alt=""></a></div></div><div class="items"><div class="news"><div class="tab-inner"><div class="btn"><a href="#">공지사항</a></div><div class="tab1"><a href="#">운영위원장 후보자 추천을 받고 있습니다.<b>2020.01.09</b></a><a href="#">홈커밍데이 진행위원회 결과를 다운로드 받으세요.<b>2020.01.07</b></a><a href="#">카드결제 무이자 이벤트 한시적 10월 20일까지<b>2019.12.31</b></a><a href="#">보안강화 시스템 작업 안내 공지<b>2019.12.20</b></a><a href="#">부여 가을연꽃축제 10주년 콘서트 축제<b>2019.12.20</b></a></div></div></div><div class="gallery"><div class="tab-inner"><div class="btn"><a href="#">갤러리</a></div><div class="tab2"><a href="#"><img src="images/gallery-01.jpg" alt=""></a></div></div></div><div class="shortcut"><a href="#"><img src="images/shortcut.jpg" alt=""></a></div></div><footer><div class="copy">(주)이스타컴퍼니 | 대표자 : 최종윤 | 개인정보관리책임자 : 이주현 부장<br> 사업장주소 : 인천광역시 중구 개항로 6층 (주)이스타컴퍼니</div><div class="sns"><div><a href="#"><img src="images/sns-01.png" alt=""></a><a href="#"><img src="images/sns-02.png" alt=""></a><a href="#"><img src="images/sns-03.png" alt=""></a></div><div><select><option value="">여주군청 홈페이지</option><option value="">한국관광공사</option><option value="">여행자보험가입</option></select></div></div></footer></div></div><script src="script/jquery-1.12.4.js"></script><script src="script/custum8.js"></script></body></html> @charset "utf-8";body{font-size: 15px;}a{color: #000;text-decoration: none;}.container{}.container>div{ height: 650px; float: left;}.left{ width: 200px;}.right{ width: 800px;}header{}header>div{}.header-logo{ height: 100px; line-height: 130px;}.navi{ margin-top: 30px;}.menu{ padding: 0; width: 90%; margin: auto;}.menu li{ list-style: none; text-align: center; }.menu li>a{ border: 1px solid #000; display: block; padding: 5px; transition: 0.5s;}.menu li:hover>a{ background-color: #000; color: #fff;}.sub-menu{ border: 1px solid #000; display: none;}.sub-menu a{ display: block; padding: 5px; transition: 0.5s;}.sub-menu a:hover{ background-color: #000; color: #fff;}.slide{ width: 800px; position: relative; height: 350px; }.slide>div{ font-size: 0;}.slide>div a{ position: absolute; top: 0; left: 0; opacity: 0; animation: slide 10s linear infinite;}.slide>div a:nth-child(1){ animation-delay: 0;}.slide>div a:nth-child(2){ animation-delay: 3.5s;}.slide>div a:nth-child(3){ animation-delay: 7s;}@keyframes slide{ 0%{opacity: 0;} 5%{opacity: 1;} 35%{opacity: 1;} 40%{opacity: 0;} 100%{opacity: 0;}}.items{ overflow: hidden;}.items div{ height: 200px; float: left; box-sizing: border-box;}.news{ width: 300px;}.tab-inner{}.btn{}.btn>a{ border: 1px solid #000; display: inline-block; padding: 5px; width: 130px; text-align: center; border-radius: 5px 5px 0 0;}.tab1, .tab2{ border: 1px solid #000; height: 160px;}.tab1 a{ display: block;}.tab2 img{ width: 100px;}.gallery{ width: 300px;}.shortcut{ width: 200px;}footer{ overflow: hidden;}footer>div{ height: 100px; float: left; box-sizing: border-box;}.copy{ width: 600px; text-align: center; padding-top: 30px;}.sns{ width: 200px;}.sns div{ text-align: center;}.sns div:first-child{ padding-top: 5px; }.sns div:last-child{ text-align: center; line-height: 35px;}
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
box-sizing을 전체선택자에 주면 안되나요
다음과 같이 box-sizing을 전체선택자에 줄경우크롬에선 적용이 되고엣지에선 적용이 안되는데*{ margin: 0; padding: 0; box-sizing: border-box; }(각 div 영역에 box-sizing:border-box줄때는 됩니다.) 웹디자인 기능사에선 크롬,엣지,익스플로러(이제 익스플로러는 퇴출이겠지만..?) 동일하게 출력되어야 할거 같은데.... 결론적으로 전체선택자에 box-sizing:border-box를 주면 안되는걸까요?아래 캡처화면은 크롬과 엣지에서 실행시킨 결과입니다.엣지 화면 크롬 화면 전체 코드입니다.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="logo"> </div> <nav> <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> <li>menu4</li> </ul> </nav> </header> <div class="slide"> <div></div> </div> <div class="items"> <div class="notice"> </div> <div class="banner"> </div> <div class="link"> </div> </div> <footer> <div class="logo2"> </div> <div class="copyright"> </div> <div class="sns"> </div> </footer> </div> <!-- <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script> --> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> *{ margin: 0; padding: 0; box-sizing: border-box; } .container{ border: 1px solid hotpink; width: 1200px; height: 700px; margin: auto; } header{ width: 1200px; height: 100px; border: 1px solid green; } header .logo{ width: 200px; height: 100px; border: 1px solid yellow; float: left; } header nav{ width: 600px; height: 100px; border: 1px solid blue; float: right; } header nav ul { } .slide{ } .slide div{ border: 1px solid green; height: 300px; } .items{ overflow: hidden; } .items div{ border: 3px solid purple; height: 200px; float: left; box-sizing: border-box; } .notice{ width: 500px; } .banner{ width: 350px; } .link{ width: 350px; } footer{} footer div{ border: 2px solid blue; height: 100px; float: left; box-sizing: border-box; } .logo2{ width: 200px; } .copyright{ width: 800px; } .sns{ width: 200px; }
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
프레임과 분리되는 현상
안녕하세요, 에릭님!강의를 듣다가 질문이 생겨 문의드립니다:간혹 프레임 안에서 작업을 하다가, 어느순간 프레임을 움직일 때 안에 놓았던 개체들이 프레임과 분리되어 같이 움직이지 않는 경우가 생깁니다.이렇게 프레임 안에서 잘 꾸미고 있다보면 가끔 어느 순간,2. 프레임을 움직일 떄, 아래와 같이 프레임과 개체들이 분리되어 있습니다.어떤 경우에 이렇게 되어버리는지와 다시 합칠 수 있는 방법을 알 수 있을까하여 문의드립니다. 강의가 도움이 정말 많이 되고 있습니다. 항상 정말 감사합니다.
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
스타일 및 텍스트박스 관련 문의드립니다.
안녕하세요 에릭님! 수업을 듣다 질문이 있어 문의남깁니다.오랫만에 다시 들으며 질문이 생겨서 남기는것인데, 혹시 다른 강의에서 설명해주셨던 부분이면 죄송합니다^^;우선 첫번째로는, 아래 첨부한 이미지와 같이 텍스트를 입력하고 여백을 잴 때 텍스트박스 기준으로 사이즈를 재게 되는데, out stroke처리를 하는것과 텍스트박스 크기를 조정하는것에서 여백 차이가 발생합니다.이럴때 처음에는 텍스트 박스로 작업을 하더라도, 최종 개발자에게 넘겨주기 전에는 스트로크 처리를 한 뒤에 여백이나 정렬을 다시 정리해야 하는걸까요?두번째 질문은, 스타일 가이드를 잡을 때 보통 몇개정도의 스타일 가이드를 잡고 진행하는것이 좋을까요?예를들어서 같은 26사이즈에, bold와 26사이즈 light가 있으면 각각 스타일을 등록해놔야 하는것인지그리고 버튼에 들어가는 텍스트 스타일은 Heading이나 Body외에 Button으로 별도 스타일 네이밍을 해야하는것인지 궁금합니다. 같은 사이즈나 굵기여도, 글씨체가 달라진다면 그것도 별도 스타일로 지정해야하나요? 마지막으로 개발자에게 작업 시안을 넘길 때 현업에서 필수로 넘기는 정보가 있을까요? 예를들어 padding, margin값을 알 수 있는지 문의가 들어왔었는데, 이런것 외에도 색상코드나 텍스트 사이즈같은걸 사전에 스타일로 잡으면서 값을 다 정리해놓고 개발자분에게 전달해야하는것인지..? 궁금합니다. ^^처음에 강의를 들을땐 다 알것만 같았는데, 다시 실제 실습이나 작업을 해보며 강의를 재수강하니 까먹었던것이나 당시에 100%이해하지 못하고 넘어갔던것을 다시 학습하게 되어 좋기도 하고, 귀찮게 질문드려 죄송한 마음도 드네요.좋은 강의와 답변에 늘 감사한 마음드립니다. 감사합니다!!
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
오토 레이아웃 질문입니다
오토 레이아웃은 각 아이템의 크기가 동일해야 사용할수있나요?여러개의 버튼을 만들고 오토 레이아웃으로 정렬을 하려고 했는데 두개를 같이 묶을땐 오른쪽에 오토 레이아웃이 활성화되는데 세개나 그이상을 묶으면 사라져버립니다, 개수나 형식에 따라 제한이 있는지요?+아래 질문글에 올려주신 예제파일에서 메인버튼 5개를 묶으니 오토레이아웃이 뜨는데 제가 도형으로 만든 버튼은 안뜨네요
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
네비 상단
안녕하세요 선생님:)상단 네비 전체드롭다운에사이사이 선들을 어떤방법으로 제거해야하나요? <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/style3.css"></head><body><div class="container"><header><div class="header-logo"><a href="#"><img src="img/logo.png" alt=""></a></div><div class="navi"><ul class="menu"><li><a href="#">탑</a><div class="sub-menu"><a href="#">블라우스</a><a href="#">티</a><a href="#">셔츠</a><a href="#">니트</a></div></li><li><a href="#">아우터</a><div class="sub-menu"><a href="#">자켓</a><a href="#">코트</a><a href="#">가디건</a><a href="#">머플러</a></div></li><li><a href="#">팬츠</a><div class="sub-menu"><a href="#">청바지</a><a href="#">짧은바지</a><a href="#">긴바지</a><a href="#">레깅스</a></div></li><li><a href="#">악세서리</a><div class="sub-menu"><a href="#">귀고리</a><a href="#">목걸이</a><a href="#">반지</a><a href="#">팔찌</a></div></li></ul></div></header><div class="slide"><div><a href="#"><img src="img/slide1.jpg" alt=""></a><a href="#"><img src="img/slide2.jpg" alt=""></a><a href="#"><img src="img/slide3.jpg" alt=""></a></div></div><div class="items"><div class="news"><div class="tab-inner"><div class="btn"><a href="#" class="actvie">공지사항</a><a href="#">갤러리</a></div><div class="tabs"><div class="tab1"><a class="open-modal" href="#">3월 재입고 품목을 알려드립니다.<b>2020.03.14</b></a><a href="#">반품/환불 규정에 대해 알려드립니다.<b>2020.03.14</b></a><a href="#">S/S 시즌 신규 의류 신상품 안내<b>2020.03.14</b></a><a href="#">신규회원 대상 할인 이벤트 안내<b>2020.03.14</b></a><a href="#">신규회원 대상 할인 이벤트 안내<b>2020.03.14</b></a></div><div class="tab2"><img src="img/gallery1.jpg" alt=""><img src="img/gallery2.jpg" alt=""><img src="img/gallery3.jpg" alt=""></div></div></div></div><div class="banner"><a href="#"><img src="img/banner_img.jpg" alt=""></a></div><div class="shortcut"><a href="#"><img src="img/shortcut_img.jpg" alt=""></a></div></div><footer><div class="footer-logo"><a href="#"><img src="img/logo2.png" alt=""></a></div><div class="copy"> COPYRIGHTⓒ by JUST Shop. ALL RIGHTS RESERVED</div><div class="sns"><a href="#"><img src="img/sns1.png" alt=""></a><a href="#"><img src="img/sns2.png" alt=""></a><a href="#"><img src="img/sns3.png" alt=""></a></div></footer></div> <div class="modal"> <div class="modal-con"> <h3>이벤트 안내</h3> <p>안녕하세요! JUST쇼핑몰입니다. 고객님들의 성원에 보답하는 JUST쇼핑몰이 되고자 신규회원 20% 할인 이벤트를 실시하고 있습니다. 웹과 모바일 가입회원 대상이며, 서비스만족을 위해 꾸준히 노력하겠습니다.</p> <a class="close-madal" href="#">x 닫기</a> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script></body></html> @charset "utf-8";body{background-color: #fff;color: #333;}a{text-decoration: none;color: #333;}.container{width: 1200px;margin: auto;}header{ height: 100px; position: relative; z-index: 1;}header>div{ height: 100px; /* border: 1px solid #000; /}.header-logo{ float: left; width: 200px; line-height: 130px;}.navi{ width: 600px; float: right;}.menu{ / border: 1px solid #000; / padding: 0; list-style: none;}.menu>li{ / border: 1px solid #000; / float: left; width: 25%; box-sizing: border-box; text-align: center; margin-top: 15px;}.menu>li>a{ border: 1px solid #000; display: block; padding: 5px; transition: 0.5s;}.menu>li>a:hover{ background-color: #000; color: #fff;}.sub-menu{ border: 1px solid #000; background-color: #fff; display: none;}.sub-menu>a{ display: block; padding: 5px; transition: 0.5s;}.sub-menu>a:hover{ background-color: #000; color: #fff;}.slide{ position: relative; height: 300px; width: 1200px; / border: 1px solid #000; / overflow: hidden;}.slide>div{ position: absolute; top: 0; left: 0; font-size: 0; animation: slide 10s linear infinite;}@keyframes slide{ 0% {top: 0;} 30% {top: 0;} 35% {top: -300px;} 65% {top: -300px;} 70% {top: -600px;} 95% {top: -600px;} 100% {top: 0;}}.items{ overflow: hidden;}.items>div{ height: 200px; / border: 1px solid #000; / float: left; width: 400px; box-sizing: border-box;}.news{}.tab-inner{ width: 95%; margin: auto; padding: 6px;}.btn{}.btn>a{ border: 1px solid #000; display: inline-block; width: 120px; padding: 5px; border-radius: 5px 5px 0 0; background-color: #ddd; margin-right: -5px; border-bottom: none; margin-bottom: -1px;}.btn>a.actvie{ background-color: #fff;}.tabs{}.tabs>div{ border: 1px solid #000; height: 160px; padding: 0 10px;}.tab1{ }.tab1 a{ border-bottom: 1px solid #000; display: block; padding: 6px;}.tab1 a:last-child{ border-bottom: none;}.tab1 a b{ float: right; font-weight: normal;}.tab2{ display: none; text-align: center;}.tab2 img{ width: 100px; padding-top: 30px;}.banner{}.shortcut{}footer{}footer>div{ height: 100px; / border: 1px solid #000; / float: left; box-sizing: border-box;}.footer-logo{ width: 200px; line-height: 130px;}.copy{ width: 800px; line-height: 100px; text-align: center;}.sns{ width: 200px; line-height: 140px; text-align: center;}.modal{ background-color: #000; position: absolute; / 너비값 잃음 */ top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); display: none;}.modal-con{ background-color: #fff; width: 400px; padding: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 15px;}.modal-con h3{ background-color: #000; color: #fff; padding: 5px;}.modal-con p{ line-height: 1.6em;}.modal-con a{ border: 1px solid #000; padding: 5px; float: right;} $('.menu>li').mouseover(function(){ $('.sub-menu').stop().slideDown()})$('.menu>li').mouseout(function(){ $('.sub-menu').stop().slideUp()})$('.btn>a:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('actvie') $(this).siblings().removeClass('actvie')})$('.btn>a:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('actvie') $(this).siblings().removeClass('actvie')})$('.open-modal').click(function(){ $('.modal').fadeIn()})$('.close-madal').click(function(){ $('.modal').fadeOut()})
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
탭메뉴가 실행이 안됩니다 ㅠ
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/style2.css"></head><body><div class="container"><header><div class="header-logo"><a href="#"><img src="img/logo.png" alt=""></a></div><div class="navi"><ul class="menu"><li><a href="#">MENU-1</a><div class="sub-menu"><a href="#">sun-menu1</a><a href="#">sun-menu2</a><a href="#">sun-menu3</a><a href="#">sun-menu4</a></div></li><li><a href="#">MENU-2</a><div class="sub-menu"><a href="#">sun-menu1</a><a href="#">sun-menu2</a><a href="#">sun-menu3</a><a href="#">sun-menu4</a></div></li><li><a href="#">MENU-3</a><div class="sub-menu"><a href="#">sun-menu1</a><a href="#">sun-menu2</a><a href="#">sun-menu3</a><a href="#">sun-menu4</a></div></li><li><a href="#">MENU-4</a><div class="sub-menu"><a href="#">sun-menu1</a><a href="#">sun-menu2</a><a href="#">sun-menu3</a><a href="#">sun-menu4</a></div></li></ul></div></header><div class="slide"><div><a href="#"><img src="img/slide1.jpg" alt=""></a><a href="#"><img src="img/slide2.jpg" alt=""></a><a href="#"><img src="img/slide3.jpg" alt=""></a></div></div><div class="items"><div class="news"><div class="tab-inner"><div class="btn"><span class="active">공지사항</span><span>갤러리</span></div><div class="tabs"><div class="tab1">공지사항</div><div class="tab2">갤러리</div></div></div></div><div class="banner"><a href="#"><img src="img/banner_img.jpg" alt=""></a></div><div class="shortcut"><a href="#"><img src="img/shortcut_img.jpg" alt=""></a></div></div><footer><div class="footer-logo"><a href="#"><img src="img/logo2.png" alt=""></a></div><div class="copy"> COPYRIGHTⓒ by JUST Shop. ALL RIGHTS RESERVED</div><div class="sns"><a href="#"><img src="img/sns1.png" alt=""></a><a href="#"><img src="img/sns2.png" alt=""></a><a href="#"><img src="img/sns3.png" alt=""></a></div></footer></div><script src="script/jquery-1.12.4.js"></script><script src="script/custom.js"></script></body></html> @charset "utf-8";.container{ width: 1200px; margin: auto;}a{ text-decoration: none; color: #333;}header{ height: 100px; position: relative; z-index: 1;}header>div{ height: 100px; /* border: 1px solid red; /}.header-logo{ width: 200px; float: left;}.navi{ width: 800px; float: right;}.menu{ margin-top: 30px; list-style: none; / border: 1px solid #000; / padding: 0;}.menu>li{ / border: 1px solid #000; / float: left; width: 25%; box-sizing: border-box; text-align: center;}.menu>li>a{ border: 1px solid #000; display: block; padding: 5px; transition: 0.5s;}.menu>li:hover>a{ background-color: #000; color: #fff;}.sub-menu{ border: 1px solid #000; background-color: #fff; display: none;}.sub-menu>a{ display: block; padding: 5px; transition: 0.5s;}.sub-menu>a:hover{ background-color: #000; color: #fff;}.slide{ position: relative; height: 300px; width: 1200px; / border: 1px solid red; / overflow: hidden;}.slide>div{ position: absolute; top: 0; left: 0; font-size: 0; animation: slide 10s linear infinite;}@keyframes slide { 0% {top: 0;} 30% {top: 0;} 35% {top: -300px;} 65% {top: -300px;} 70% {top: -600px;} 95% {top: -600px;} 100% {top: 0;}}.items{ overflow: hidden;}.items>div{ height: 200px; float: left; / border: 1px solid red; / box-sizing: border-box;}.news{ width: 400px;}.tab-inner{ width: 95%; margin: auto;}.btn{}.btn>span{ border: 1px solid #000; padding: 5px; width: 130px; display: inline-block; text-align: center; border-radius: 5px 5px 0 0; background-color: #ddd; margin-right: -5px; border-bottom: none; margin-bottom: -1px; cursor: pointer;}.btn>span:active{ background-color: #fff;}.tabs{}.tabs>div{ border: 1px solid #000; height: 160px;}.tab1{}.tab2{ display: none;}.banner{ width: 400px;}.shortcut{ width: 400px;}footer{}footer>div{ height: 100px; / border: 1px solid red; */ float: left; box-sizing: border-box;}.footer-logo{ width: 200px; line-height: 130px;}.copy{ width: 800px; line-height: 100px; text-align: center;}.sns{ width: 200px; line-height: 140px; text-align: center;} $('.menu>li').mouseover(function(){ $(this).children('.sub-menu').stop().slideDown()})$('.menu>li').mouseout(function(){ $(this).children('.sub-menu').stop().slideUp()})$('.btn span:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active')})$('.btn span:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('active') $(this).siblings().removeClass('active')})
-
미해결애플 웹사이트 인터랙션 클론!
마지막 강의 js파일로 바꿀 시 스크롤 프레임 렉? 버벅임?
마지막 강의에서 올리신 js파일로 바꾸니 애니메이션이 들어가있는 section 0, 2에서 터치패드로 스크롤 시 멈추는 부분에서 몇프레임 앞뒤 왔다갔다 하는 현상이 좀 심하게 발생합니다. 이전만큼 부드럽게 진행이 되지 않고 좀 간격이 넓게 스크롤 되는 느낌입니다. 이미지 로딩 후 정렬 때문에 이렇게 되는건가요? 아니라면 혹시 팁을 좀 주실 수 있나요?다시 확인해본 바 새로고침을 하면 이러한 문제가 사라지긴 합니다만 원인을 잘 모르겠네요. 좀 더 알아보겠습니다. 제가 진행한 파일입니다!https://leealvinlee.github.io/Leeum_Maurizio_Catellan/
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
2. 왼쪽 드롭다운 네비게이션(2가지 타입) - HTML+CSS+JQUERY 완성본 어디서 다운 가능합니까?
2. 왼쪽 드롭다운 네비게이션(2가지 타입) - HTML+CSS+JQUERY 완성본 어디서 다운 가능합니까?
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
슬라이드
안녕하세요 슬라이드가 안되서 확인 부탁드립니다<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/style2.css"> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#"><img src="images/logo.png" alt="로고"></a> </div> <div class="navi"></div> </header> <div class="slide"> <a href="#"><img src="images/img1.png" alt="img1"></a> <a href="#"><img src="images/img2.png" alt="img2"></a> <a href="#"><img src="images/img3.png" alt="img3"></a> </div> <div class="items"> <div class="news"></div> <div class="banner"> <a href="#"><img src="images/banner.jpg" alt="배너"></a> </div> <div class="shortcut"> <a href="#"><img src="images/shortcut.jpg" alt=""></a> </div> </div> <footer> <div class="footer-logo"> <a href="#"><img src="images/logo.png" alt="로고"></a> </div> <div class="copy"> <span>COPYRIGHTⓒ by JUST Shop. ALL RIGHTS RESERVED</span> </div> <div class="sns"> <a href="#"><img src="images/sns1.jpg" alt="sns1"></a> <a href="#"><img src="images/sns2.jpg" alt="sns2"></a> <a href="#"><img src="images/sns3.jpg" alt="sns3"></a> </div> </footer> </div> </body> </html>@charset "utf-8"; .container{ width: 1200px; margin: auto; border: 1px solid red; } header{ height: 100px; } header>div{ height: 100px; } .header-logo{ width: 200px; float: left; } .navi{ width: 600px; float: right; } .slide{ height: 300px; position: relative; overflow: hidden; } .slide>div{ font-size: 0; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; } @keyframes slide { 0% {top: 0;} 30% {top: 0;} 35% {top: -300px;} 65% {top: -300px;} 70% {top: -600px;} 95% {top: -600px;} 100% {top: 0;} } .items{ overflow: hidden; } .items>div{ height: 200px; float: left; width: 400px; box-sizing: border-box; } .news{} .banner{} .shortcut{} footer{ overflow: hidden; } footer>div{ height: 100px; float: left; box-sizing: border-box; } .footer-logo{ width: 200px; } .copy{ width: 800px; line-height: 100px; text-align: center; } .sns{ width: 200px; line-height: 140px; text-align: center; }그리고 푸터 부분에텍스트는 line-height할때 높이값을 기존 높이와 동일한 사이즈로 하면되는데 이미지는 왜 기존 높이 사이즈로 하면 안되는걸까요??
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
텍스트박스 크기변경할때
안녕하세요.1번과 같이 텍스트박스를 선택하고옵션+쉬프트키를 누르고 크기를 조절하려고 하면텍스트박스가 자꾸 저렇게 됩니다ㅠㅠ고정을 센터로 했는데 어떤문제일까요?
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
슬라이드
슬라이드가 되지 않습니다 ㅠ 어디부분이 잘못되었는지 확인부탁드립니다!<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/style.css"></head><body><div class="container"><header><div class="header-logo"><a href="#"><img src="img/logo.png" alt=""></a></div><div class="nav"></div></header><div class="slide"><a href="#"><img src="img/slide1.jpg" alt=""></a><a href="#"><img src="img/slide2.jpg" alt=""></a><a href="#"><img src="img/slide3.jpg" alt=""></a></div><div class="items"><div class="news"></div><div class="banner"><a href="#"><img src="img/banner_img.jpg" alt=""></a></div><div class="shortcut"><a href="#"><img src="img/shortcut_img.jpg" alt=""></a></div></div><footer><div class="footer-logo"><a href="#"><img src="img/logo2.png" alt=""></a></div><div class="copy">서울특별시 동대문구 장안벚꽃로 279 한국산업인력공단 서울지역본부<br> 전화번호: 1644-8000 동대문구 휘경동 전동중학교 건너편. </div> <div class="sns"> <a href="#"><img src="img/sns1.png" alt=""></a> <a href="#"><img src="img/sns2.png" alt=""></a> <a href="#"><img src="img/sns3.png" alt=""></a> </div> </footer> </div> <script src="script/jquery-1.12.4.js "></script> <script src="script/custom.js"></script></body></html> @charset "utf-8";.container{ width: 1200px; border: 1px solid red;}header{ height: 100px;}header>div{ height: 100px; }.header-logo{ width: 200px; line-height: 130px; float: left;}.nav{ width: 800px; border: 1px solid wheat; float: right;}.slide{ position: relative; width: 1200px; height: 300px;}.slide>div{ position: absolute; top: 0; left: 0; animation: slide 10s linear infinite;}@keyframes slide { 0% { top: 0; } 30% { top: 0; } 35% { top: -300px; } 65% { top: -300px; } 70% { top: -600px; } 95% { top: -600px; } 100% { top: 0; }}.items{ overflow: hidden;}.items>div{ height: 200px; float: left; border: 1px solid darkmagenta; box-sizing: border-box;}.news{ width: 400px; border: 1px solid darkorange;}.banner{ width: 400px; }.shortcut{ width: 400px;}footer{ overflow: hidden;}footer>div{ height: 100px; float: left; box-sizing: border-box;}.footer-logo{ width: 200px; padding-top: 28px;}.copy{ width: 800px; text-align: center; padding-top: 29px;}.sns{ width: 200px; line-height: 140px; padding-left: 11px;}
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
하단 홈바 픽스드포지션 할 때
하단 홈바 픽스트포지션 할 때 안에 있는 오브젝트들(홈,카테고리 등 텍스트와 아이콘)은 픽스드포지션을 하지 않아도 탭바 사각형을 따라서 고정이 되는걸가요?
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
도형을 축소할때 도형내부요소들도 같은 비율로 축소가 가능한가요?
안녕하세요첨부된 그림과 같이 흰색배경의 그래프 배경을 그리고 그 안에 펜툴로 그래프를 그렸습니다정밀한 작업을 위해 처음에 그래프를 크게 그리고 그 다음 실제 UI디자인 크기에 맞춰 축소시켜 사용하려고 하는데요 이때 그래프 배경은 의도대로 축소되었지만 그래프 내부 요소들은 축소되지 않고 그대로 남아있습니다그래프 배경과 그래프 내부요소들이 원래와 같은 비율을 유지하면서 동시에 축소시킬 수 있는 방법이 있을까요? 감사합니다
-
미해결애플 웹사이트 인터랙션 클론!
선생님 이해가 잘 안가는 문구가 있어서 질문 드립니다.
setLayout 함수 끝에 들어가는${sceneInfo[i].scrollHeight}px;부분에서 따옴표로 잘못 작성해서 좀 해맸었습니다 ㅎㅎ;${}부분을 풀어 쓰면 정확하게 어떤식으로 표기가 되는건지.. 궁금합니다.제 예상으로는 for문 안에 따로 변수를 선언하지 않고, 계산된 값을 바로 가져오기 위해 사용한 것 같은데 맞을까요..??
-
미해결부트스트랩 5(Bootstrap 5) - 기초부터 웹 프로젝트 만들기
프로젝트 2 이미지 깨짐 현상
강사님이 올려주신 파일 그대로 열었는데 이런식으로 깨집니다.어떻게 해결해야하나요?<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="/assets/css/app.css"> <title>My Second Web</title> </head> <body> <header id="header" class="wrapper"> <section id="navTop" class="nav-top py-2 d-none d-md-block"> <div class="container"> <div class="row align-items-center justify-content-center"> <div class="col-3 text-start lead fast-counsel"> <a href="#" class="btn btn-outline-dark">Contact</a> </div> <div class="col-4 logo"> <a href="index.html" class="navbar-brand d-flex"> <img src="/assets/images/dummy-logo.png" alt="" class="img-fluid ms-auto" width="200px" data-bs-toggle="tooltip" data-bs-placement="bottom" title="My amazing website!!"> </a> </div> <div class="col-5 text-end socials"> <a href="#" class="mx-1 text-decoration-none"> <img src="/assets/images/icon-phone.png" alt="Phone" width="40px" class="shadow-box"> </a> <a href="#" class="mx-1 text-decoration-none"> <img src="/assets/images/icon-kakao-channel.png" alt="Kakao Channel" width="40px" class="shadow-box"> </a> <a href="#" class="mx-1 text-decoration-none"> <img src="/assets/images/icon-facebook.png" alt="Facebook" width="40px" class="shadow-box"> </a> <a href="#" class="mx-1 text-decoration-none"> <img src="/assets/images/icon-twitter.png" alt="Twitter" width="40px" class="shadow-box"> </a> <a href="#" class="mx-1 text-decoration-none"> <img src="/assets/images/icon-youtube.png" alt="Youtube" width="40px" class="shadow-box"> </a> </div> </div> </div> </section> <nav id="navPrimary" class="navbar navbar-expand-md navbar-dark"> <div class="container-xxl"> <a class="navbar-brand d-block d-md-none" href="index.html"> <img src="/assets/images/dummy-logo.png" alt="Logo" class="img-fluid"> </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navPrimaryContent"> <ul class="navbar-nav mx-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="index.html">Home</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Intro </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="page.html">About us</a></li> <li><a class="dropdown-item" href="page.html">Find us</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Documents</a> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Gallery</a> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Blog</a> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Events</a> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Reviews</a> </li> <li class="nav-item"> <a class="nav-link" href="page.html">Reservation</a> </li> <li class="nav-item"> <a class="nav-link btn btn-outline-secondary" href="#"><i class="fa fa-search"></i></a> </li> </ul> </div> </div> </nav> </header> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script> <!-- Kakao map appkey here --> <script src="/assets/js/app.js"></script> </body> </html>
-
미해결애플 웹사이트 인터랙션 클론!
영상 속 코드와 배포하신 소스 코드가 다르네요.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { height: 500vh; } .sample-video { position: fixed; top: 0; left: 0; width: 100%; } </style> </head> <body> <div class="container"> <!-- <video class="sample-video" src="../video/sample-low.mp4" muted></video> --> <video class="sample-video" src="../video/sample-high.mp4" muted></video> </div> <script> const videoElem = document.querySelector('.sample-video'); let videoDuration; videoElem.addEventListener('loadeddata', function() { console.log('비디오 로드 완료'); videoDuration = videoElem.duration; init(); }) let progress; let currentFrame; function init() { window.addEventListener('scroll', function () { progress = pageYOffset / (document.body.offsetHeight - window.innerHeight); console.log(progress); if (progress < 0) progress = 0; if (progress > 1) progress = 1; requestAnimationFrame(function() { videoElem.currentTime = videoElem.duration * progress; }) }); } </script> </body> </html>복붙해서 사용하세요.
