묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
왼쪽개별 우측고정형 네비게이션 높이조절
안녕하세요.우측고정 네비게이션에서 'Sub-menu' 부분에 높이 200px을 줬는데크기 늘어나지 않아 문의 드립니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>C2_세로슬라이드, 네비(왼쪽개별우측고정)</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="left"> <header> <div class="header-logo"></div> <div class="navi"> <ul class="menu"> <li> <a class="open-modal" href="#none">협회소개</a> <div class="sub-menu"> <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> </div> </li> <li> <a href="#none">홍보마당</a> <div class="sub-menu"> <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">Q&A</a> <a href="#none">사진갤러리</a> <a href="#none">공지사항</a> </div> </li> </ul> </div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-items"> <a class="slide-item" href="#none"><img src="images/slide-01.jpg" alt="slide-01"></a> <a class="slide-item" href="#none"><img src="images/slide-02.jpg" alt="slide-02"></a> <a class="slide-item" href="#none"><img src="images/slide-03.jpg" alt="slide-03"></a> </div> </div> <div class="items"> <div class="news"></div> <div class="gallery"></div> <div class="shortcut"></div> </div> <footer> <div class="copyright"></div> <div class="footer-content"> <div class="sns"></div> <div class="family-site"></div> </div> </footer> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html>@charset "utf-8"; body { margin: 0; background-color: #fff; color: #333; font-size: 15px; } a { text-decoration: none; color: inherit; } /* Entire Layout */ .container { display: flex; } .container > div { border: 1px solid #000; } .left { width: 200px; } .right { width: 800px; } header { position: relative; z-index: 1000; } header > div { border: 1px solid red; } .header-logo { height: 100px; } .navi { height: 400px; } /* Slide */ .slide { position: relative; width: 800px; height: 350px; overflow: hidden; } .slide > div { border: 1px solid #000; height: 350px; } .slide-items { font-size: 0; position: absolute; top: 0; left: 0; } .items { display: flex; } .items > div { border: 1px solid #000; height: 200px; } .news { width: 300px; } .gallery { width: 250px; } .shortcut { width: 250px; } footer { display: flex; } footer > div { border: 1px solid #000; height: 100px; } .copyright { width: 600px; } .footer-content { width: 200px; } .footer-content div { border: 1px solid #000; height: 50px; } .sns {} .family-site{} /* Navigation */ .menu { width: 90%; margin: auto; list-style: none; padding: 0; padding-top: 10px; position: relative; } .menu li { text-align: center; border: 1px solid #000; } .menu li > a { padding: 5px; display: block; border: 1px solid #000; transition: 0.5s; } .menu li:hover > a { background-color: #000; color: #fff; } .sub-menu { display: none; width: 100%; height: 200px; position: absolute; top: 0; left: 100%; } .sub-menu a { padding: 6px; display: block; background-color: #000; color: #fff; transition: 0.5s; } .sub-menu a:hover { background-color: #fff; color: #000; }/* Slide */ // setInterval(콜백함수, 시간) // animate({속성값}, 콜백함수) setInterval(function(){ $('.slide-items').animate({top: '-350px'}, function(){ $('.slide-items').css({top: 0}) $('.slide-item:first-child').appendTo('.slide-items') }) }, 3000) /* Navigation */ $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() })
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
우측고정 네이게이션 작성 시 오류
안녕하세요.'왼쪽 개별 네비게이션' 완료 후 CSS만 변경해 '우측고정 네이게이션'을 만드는 와중에 잘 안되는게 있어 질문 드립니다. '세로 기본형' 일때는 호버가 잘 되었는데 CSS 변경 후 sub-menu 가 고정이 되지도 않고 호버도 되지 않아요... 영상 보면서 마크업 비교 해봐도(1시간째...ㅠㅠ) 틀린 부분이 없는데 작동되지 않아 답답합니다.뭐가 잘못 되었을까요? <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>D1</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="contaniner"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"></div> <div class="navi"> <!-- Navigation --> <ul class="menu"> <li> <a href="#none">MENU-1</a> <div class="sub-menu"> <a href="#none">SUB-MENU-1</a> <a href="#none">SUB-MENU-2</a> <a href="#none">SUB-MENU-3</a> <a href="#none">SUB-MENU-4</a> </div> </li> <li> <a href="#none">MENU-2</a> <div class="sub-menu"> <a href="#none">SUB-MENU-1</a> <a href="#none">SUB-MENU-2</a> <a href="#none">SUB-MENU-3</a> <a href="#none">SUB-MENU-4</a> </div> </li> <li> <a href="#none">MENU-3</a> <div class="sub-menu"> <a href="#none">SUB-MENU-1</a> <a href="#none">SUB-MENU-2</a> <a href="#none">SUB-MENU-3</a> <a href="#none">SUB-MENU-4</a> </div> </li> <li> <a href="#none">MENU-4</a> <div class="sub-menu"> <a href="#none">SUB-MENU-1</a> <a href="#none">SUB-MENU-2</a> <a href="#none">SUB-MENU-3</a> <a href="#none">SUB-MENU-4</a> </div> </li> </ul> <!-- Navigation --> </div> <div class="spot-menu"></div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-image"></div> <div class="slide-banner"></div> </div> <div class="items"> <div class="shortcut"></div> <div class="news-gallery"></div> </div> </div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="sns"></div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html>@charset "utf-8"; body { margin: 0; background-color: #fff; color: #333; } a { text-decoration: none; color: inherit; } /* Entire Layout */ .container {} .main-content { display: flex; } .main-content > div { border: 1px solid #000; } .left { width: 200px; } .right { width: calc(100% - 200px); } /* Header */ header {} header > div { border: 1px solid red; } .header-logo { height: 100px; } .navi { height: 400px; } .spot-menu { height: 50px; } /* Slide */ .slide { height: 400px; position: relative; } .slide-image { border: 1px solid #000; height: 400px; } .slide-banner { width: 150px; height: 300px; position: absolute; top: 0; right: 0; } /* shortcut */ .shortcut { border: 1px solid #000; height: 200px; } /* Nesw & gallery */ .news-gallery { border: 1px solid #000; height: 250px; } /* footer */ footer { display: flex; } footer > div { border: 1px solid #000; height: 100px; } .footer-logo { width: 200px; } .copyright { width: calc(100% - 430px); } .sns { width: 230px; } /* Navi gation */ .menu { padding: 0; list-style: none; width: 90%; margin: auto; margin-top: 15px; position: relative; } .menu li { 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; position: absolute; top: 0; left: 100%; width: 100%; height: 200px; background-color: #000; } .sub-menu a { display: block; padding: 5px; transition: 0.5s; color: #fff; } .sub-menu a:hover { background-color: #fff; color: #000; }/* Navigation */ $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() })
-
미해결
네비게이션 '왼쪽 개별 우측고정'형 제작시 오류
안녕하세요. '왼쪽 개별 네비게이션' 완료 후 CSS만 변경해 '우측고정 네이게이션'을 만드는 와중에 잘 안되는게 있어 질문 드립니다.'세로 기본형' 일때는 호버가 잘 되었는데 CSS 변경 후 sub-menu 가 고정이 되지도 않고 호버도 되지 않아요... 영상 보면서 마크업 비교 해봐도(1시간째...ㅠㅠ) 틀린 부분이 없는데 작동되지 않아 답답합니다.뭐가 잘못 되었을까요? <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>D1</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="contaniner"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"></div> <div class="navi"> <!-- Navigation --> <ul class="menu"> <li> <a href="#none">MENU-1</a> <div class="sub-menu"> <a href="#none">SUB-MENU-1</a> <a href="#none">SUB-MENU-2</a> <a href="#none">SUB-MENU-3</a> <a href="#none">SUB-MENU-4</a> </div> </li> <li> <a href="#none">MENU-2</a> <div class="sub-menu"> <a href="#none">SUB-MENU-1</a> <a href="#none">SUB-MENU-2</a> <a href="#none">SUB-MENU-3</a> <a href="#none">SUB-MENU-4</a> </div> </li> <li> <a href="#none">MENU-3</a> <div class="sub-menu"> <a href="#none">SUB-MENU-1</a> <a href="#none">SUB-MENU-2</a> <a href="#none">SUB-MENU-3</a> <a href="#none">SUB-MENU-4</a> </div> </li> <li> <a href="#none">MENU-4</a> <div class="sub-menu"> <a href="#none">SUB-MENU-1</a> <a href="#none">SUB-MENU-2</a> <a href="#none">SUB-MENU-3</a> <a href="#none">SUB-MENU-4</a> </div> </li> </ul> <!-- Navigation --> </div> <div class="spot-menu"></div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-image"></div> <div class="slide-banner"></div> </div> <div class="items"> <div class="shortcut"></div> <div class="news-gallery"></div> </div> </div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="sns"></div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html>@charset "utf-8"; body { margin: 0; background-color: #fff; color: #333; } a { text-decoration: none; color: inherit; } /* Entire Layout */ .container {} .main-content { display: flex; } .main-content > div { border: 1px solid #000; } .left { width: 200px; } .right { width: calc(100% - 200px); } /* Header */ header {} header > div { border: 1px solid red; } .header-logo { height: 100px; } .navi { height: 400px; } .spot-menu { height: 50px; } /* Slide */ .slide { height: 400px; position: relative; } .slide-image { border: 1px solid #000; height: 400px; } .slide-banner { width: 150px; height: 300px; position: absolute; top: 0; right: 0; } /* shortcut */ .shortcut { border: 1px solid #000; height: 200px; } /* Nesw & gallery */ .news-gallery { border: 1px solid #000; height: 250px; } /* footer */ footer { display: flex; } footer > div { border: 1px solid #000; height: 100px; } .footer-logo { width: 200px; } .copyright { width: calc(100% - 430px); } .sns { width: 230px; } /* Navi gation */ .menu { padding: 0; list-style: none; width: 90%; margin: auto; margin-top: 15px; position: relative; } .menu li { 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; position: absolute; top: 0; left: 100%; width: 100%; height: 200px; background-color: #000; } .sub-menu a { display: block; padding: 5px; transition: 0.5s; color: #fff; } .sub-menu a:hover { background-color: #fff; color: #000; }/* Navigation */ $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() })
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
네비게이션에 슬라이드 다운이 되지 않습니다.
오타도 없는데 슬라이드다운이 되지 않습니다. 내일이 시험인데 자꾸 같은 부분이 안되서 속상한 마음입니다... 자주 질문 드려서 죄송합니다. 네비게이션 관련 질문은 이번만 하고 하지 않겠습니다. 감사합니다... <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>산업대학교</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="header-inner"> <header> <div class="header-logo"> <a href="#none"><img src="images/logo-b4-header.png" alt="headerlogo"></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> </div> </li> <li> <a href="#none">커뮤니티</a> <div class="sub-menu"> <a href="#none">공지사항</a> <a href="#none">참여게시판</a> <a href="#none">자료실</a> </div> </li> </ul> <div class="sub-back"></div> </div> </header> </div> <div class="content-inner"> <div class="slide"> <div> <a href="#none"><img src="images/slide-b4-01.jpg" alt="slide1"></a> <a href="#none"><img src="images/slide-b4-02.jpg" alt="slide2"></a> <a href="#none"><img src="images/slide-b4-03.jpg" alt="slide3"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab1"> <a href="#none">산업대학교 동문회장배 자선골프대회<b>2016-09-12</b></a> <a href="#none">개교 100주년 기념 야외 오페라 초청<b>2016-09-10</b></a> <a href="#none">동문회장 및 운영위원장 후보자 추천<b>2016-09-09</b></a> <a href="#none">진행위원회(정회원) 선발 결과<b>2016-09-07</b></a> <a href="#none">산업대학교 동문회 개최일 변경<b>2016-08-30</b></a> </div> </div> </div> <div class="gallery"> <div class="tab-inner"> <div class="btn"> <span>갤러리</span> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-b4-01.jpg" alt="gallery1"></a> <a href="#none"><img src="images/gallery-b4-02.jpg" alt="gallery2"></a> <a href="#none"><img src="images/gallery-b4-03.jpg" alt="gallery3"></a> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner-b4-01.jpg" alt="banner"></a> </div> </div> <div class="footer-inner"> <footer> <div class="copyright"> <div></div> <div></div> </div> <div class="family-site"> <select> <option value=""></option> <option value=""></option> <option value=""></option> <option value=""></option> </select> </div> </footer> </div> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "utf-8"; body { margin: 0; background-color: #fff; color: #333333; font-size: 15px; } a { color: #333333; text-decoration: none; } .container {} .header-inner { border: 1px solid red; } header { width: 1200px; margin: auto; height: 100px; position: relative; z-index: 10; } header div { /* border: 1px solid yellowgreen; */ height: 100px; } .header-logo { width: 200px; float: left; line-height: 130px; } .navi { width: 600px; float: right; } .content-inner {} .slide { border: 1px solid green; width: 1200px; margin: auto; } .slide > div { height: 300px; } .items { /* border: 1px solid red; */ width: 1200px; margin: auto; overflow: hidden; margin-top: 20px; } .items > div { /* border: 1px solid pink; */ height: 200px; float: left; box-sizing: border-box; } .news { width: 425px; } .gallery { width: 425px; } .banner { width: 350px; } .footer-inner { border: 1px solid red; } footer { width: 1200px; margin: auto; overflow: hidden; } footer > div { border: 1px solid blue; height: 100px; float: left; box-sizing: border-box; } .copyright { width: 1000px; } .copyright div { border: 1px solid green; height: 50px; } .family-site { width: 200px; height: 100px; } /* slide */ .slide { width: 1200px; height: 300px; position: relative; overflow: hidden; } .slide > div { width: 3600px; font-size: 0; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; } @keyframes slide { 0% { left: 0; } 30% { left: 0; } 35% { left: -1200px; } 65% { left: -1200px; } 70% { left: -2400px; } 95% { left: -2400px; } 100% { left: 0; } } /* Navigation */ .menu { list-style: none; padding: 0; padding-top: 55px; } .menu li { float: left; box-sizing: border-box; width: 25%; 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 { color: #fff; display: block; padding: 5px; transition: 0.5s; } .sub-menu a:hover { background-color: #fff; color:#000; } .sub-back { background-color: #000; width: 1200px; height: 150px; position: absolute; left: 0; top: 100%; z-index: -1; display: none; } /* news & gallery */ .tab-inner { width: 95%; margin: auto; } .btn {} .btn span { border: 1px solid #000; width: 100px; display: inline-block; padding: 5px; background-color: #fff; text-align: center; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -2px; } .tab1, .tab2 { border: 1px solid #000; padding: 0 15px; height: 160px; } .tab1 a { display: block; padding: 5px; border-bottom: 1px solid #000; } .tab1 a:last-child { border-bottom: none; } .tab1 a b { float: right; font-weight: normal; } .tab2 { text-align: center; } .tab2 img { width: 120px; padding-top: 25px; } .banner img { width: 95%; } // Navigation $('.menu li').mouseenter(function(){ $('.sub menu').stop().slideDown() })
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
네비게이션 작성시 아래 슬라이드 밀림
네이게이션 만드는데 계속 슬라이드가 아래로 밀립니다. 계속 찾아봤는데 해결이 안되서 질문 올렸습니다. 자꾸 질문해서 죄송해요...ㅠㅠ 아직 연습이 많이 필요한 것 같습니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>산업대학교</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="header-inner"> <header> <div class="header-logo"> <a href="#none"><img src="images/logo-b4-header.png" alt="headerlogo"></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> </div> </li> <li> <a href="#none">커뮤니티</a> <div class="sub-menu"> <a href="#none">공지사항</a> <a href="#none">참여게시판</a> <a href="#none">자료실</a> </div> </li> </ul> <div class="sub-back"></div> </div> </header> </div> <div class="content-inner"> <div class="slide"> <div> <a href="#none"><img src="images/slide-b4-01.jpg" alt="slide1"></a> <a href="#none"><img src="images/slide-b4-02.jpg" alt="slide2"></a> <a href="#none"><img src="images/slide-b4-03.jpg" alt="slide3"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab1"> <a href="#none">산업대학교 동문회장배 자선골프대회<b>2016-09-12</b></a> <a href="#none">개교 100주년 기념 야외 오페라 초청<b>2016-09-10</b></a> <a href="#none">동문회장 및 운영위원장 후보자 추천<b>2016-09-09</b></a> <a href="#none">진행위원회(정회원) 선발 결과<b>2016-09-07</b></a> <a href="#none">산업대학교 동문회 개최일 변경<b>2016-08-30</b></a> </div> </div> </div> <div class="gallery"> <div class="tab-inner"> <div class="btn"> <span>갤러리</span> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-b4-01.jpg" alt="gallery1"></a> <a href="#none"><img src="images/gallery-b4-02.jpg" alt="gallery2"></a> <a href="#none"><img src="images/gallery-b4-03.jpg" alt="gallery3"></a> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner-b4-01.jpg" alt="banner"></a> </div> </div> <div class="footer-inner"> <footer> <div class="copyright"> <div></div> <div></div> </div> <div class="family-site"> <!-- <select> <option value=""></option> <option value=""></option> <option value=""></option> <option value=""></option> </select> --> </div> </footer> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "utf-8"; body { margin: 0; background-color: #fff; color: #333333; font-size: 15px; } a { color: #333333; text-decoration: none; } .container {} .header-inner { border: 1px solid red; } header { width: 1200px; margin: auto; height: 100px; position: relative; z-index: 10; } header div { /* border: 1px solid yellowgreen; */ /* height: 100px; */ } .header-logo { width: 200px; float: left; line-height: 130px; } .navi { width: 600px; float: right; } .content-inner {} .slide { border: 1px solid green; width: 1200px; margin: auto; } .slide > div { height: 300px; } .items { /* border: 1px solid red; */ width: 1200px; margin: auto; overflow: hidden; margin-top: 20px; } .items > div { /* border: 1px solid pink; */ height: 200px; float: left; box-sizing: border-box; } .news { width: 425px; } .gallery { width: 425px; } .banner { width: 350px; } .footer-inner { border: 1px solid red; } footer { width: 1200px; margin: auto; overflow: hidden; } footer > div { border: 1px solid blue; height: 100px; float: left; box-sizing: border-box; } .copyright { width: 1000px; } .copyright div { border: 1px solid green; height: 50px; } .family-site { width: 200px; height: 100px; } /* slide */ .slide { width: 1200px; height: 300px; position: relative; overflow: hidden; } .slide > div { width: 3600px; font-size: 0; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; } @keyframes slide { 0% { left: 0; } 30% { left: 0; } 35% { left: -1200px; } 65% { left: -1200px; } 70% { left: -2400px; } 95% { left: -2400px; } 100% { left: 0; } } /* navigation */ .menu { list-style: none; padding: 0; } .menu li { float: left; box-sizing: border-box; width: 25%; text-align: center; } .menu li > a { border: 1px solid #000; display: block; padding: 5px; } .sub-menu { border: 1px solid #000; background-color: #fff; } .sub-menu a { display: block; padding: 5px; } .sub-back { width: 500px; height: 200px; background-color: #000; } /* news & gallery */ .tab-inner { width: 95%; margin: auto; } .btn {} .btn span { border: 1px solid #000; width: 100px; display: inline-block; padding: 5px; background-color: #fff; text-align: center; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -2px; } .tab1, .tab2 { border: 1px solid #000; padding: 0 15px; height: 160px; } .tab1 a { display: block; padding: 5px; border-bottom: 1px solid #000; } .tab1 a:last-child { border-bottom: none; } .tab1 a b { float: right; font-weight: normal; } .tab2 { text-align: center; } .tab2 img { width: 120px; padding-top: 25px; } .banner img { width: 95%; }
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
Navigation 창이 내려오지 않습니다.
다른분이 질문 올릴거 봤는데 저도 네이게이션 창이 내려오지 않습니다. transition도 제대로 입력했고, js 파일도 잘 연결 한 것 같은데 아무리봐도 모르겠어서 여쭤보게 되었습니다. 왜이럴까요ㅠㅠ <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>산업대학교</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="header-inner"> <header> <div class="header-logo"> <a href="#none"><img src="images/logo-b4-header.png" alt="header 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> </div> </li> <li> <a href="#none">커뮤니티</a> <div class="sub-menu"> <a href="#none">공지사항</a> <a href="#none">참여게시판</a> <a href="#none">자료실</a> </div> </li> </ul> <div class="sub-back"></div> </div> </header> </div> <div class="content-inner"> <div class="slide"> <div> <a href="#none"><img src="images/slide-b4-01.jpg" alt="slide1"></a> <a href="#none"><img src="images/slide-b4-02.jpg" alt="slide2"></a> <a href="#none"><img src="images/slide-b4-03.jpg" alt="slide3"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab1"> <a href="#none">산업대학교 동문회장배 자선골프대회<b>2016-09-12</b></a> <a href="#none">개교 100주년 기념 야외 오페라 초청<b>2016-09-10</b></a> <a href="#none">동문회장 및 운영위원장 후보자 추천<b>2016-09-09</b></a> <a href="#none">진행위원회(정회원) 선발 결과<b>2016-09-07</b></a> <a href="#none">산업대학교 동문회 개최일 변경<b>2016-08-30</b></a> </div> </div> </div> <div class="gallery"> <div class="tab-inner"> <div class="btn"> <span>갤러리</span> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-b4-01.jpg" alt="gallery1"></a> <a href="#none"><img src="images/gallery-b4-02.jpg" alt="gallery2"></a> <a href="#none"><img src="images/gallery-b4-03.jpg" alt="gallery3"></a> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner-b4-01.jpg" alt="banner"></a> </div> </div> </div> <div class="footer-inner"> <footer> <div class="copyright"> <div></div> <div></div> </div> <div class="family-site"></div> </footer> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "utf-8"; body { margin: 0; background-color: #fff; color: #222328; font-size: 15px; } a { color: #222328; text-decoration: none; } .container {} .header-inner { border: 1px solid red; } header { height: 100px; width: 1200px; margin: auto; position: relative; z-index: 10; } header > div { /* border: 1px solid green; */ height: 100px; } .header-logo { width: 200px; float: left; line-height: 130px; } .navi { width: 600px; float: right; } .content-inner {} .slide { width: 1200px; margin: auto; } .slide > div { border: 1px solid blue; height: 300px; } .items { width: 1200px; margin: auto; overflow: hidden; margin-top: 20px; } .items > div { /* border: 1px solid pink; */ height: 200px; float: left; box-sizing: border-box; } .news { width: 425px; } .gallery { width: 425px; } .banner { width: 350px; } .footer-inner { border: 1px solid green; } footer { width: 1200px; margin: auto; overflow: hidden; } footer > div { border: 1px solid yellow; height: 100px; float: left; box-sizing: border-box; } .copyright { width: 1000px; } .copyright div { border: 1px solid #000; height: 50px; } .family-site { width: 200px; } /* slide */ .slide { position: relative; width: 1200px; height: 300px; overflow: hidden; } .slide > div { /* border: 1px solid red; */ width: 3600px; font-size: 0; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; } @keyframes slide { 0% { left: 0; } 30% { left: 0; } 35% { left: -1200px; } 65% { left: -1200px; } 70% { left: -2400px; } 95% { left: -2400px; } 100% { left: 0; } } /* Navigation */ .menu { list-style: none; padding: 0; padding-top: 55px; } .menu li { /* border: 1px solid blue; */ float: left; box-sizing: border-box; width: 25%; text-align: center; } .menu li > a { border: 1px solid #000; display: block; padding: 5px; transition: 0.5s; } /* .menu li > a:hover {} 꼭 li 옆에 hover 넣을 것 */ .menu li:hover > a { background-color: #000; color: #fff; } .sub-menu { border: 1px solid #000; display: none; } .sub-menu a { display: block; padding: 5px; color: #fff; transition: 0.5s; } .sub-menu a:hover { background-color: #fff; color: #222328; } .sub-back { background-color: #000; width: 1200px; height: 150px; position: absolute; left: 0; top: 100%; z-index: -1; display: none; } /* News & Gallery */ .tab-inner { width: 95%; margin: auto; } .btn {} .btn span { border: 1px solid #000; display: inline-block; width: 100px; text-align: center; padding: 5px; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -2px; background-color: #fff; } .tab1, .tab2 { border: 1px solid #000; padding: 0 15px; height: 160px; } .tab1 a { display: block; padding: 5px; border-bottom: 1px solid #000; } .tab1 a:last-child { border-bottom: none; } .tab1 a b { float: right; font-weight: normal; } .tab2 { text-align: center; } .tab2 img { width: 120px; padding-top: 25px; } .banner img { width: 95%; } $('.menu li').mouseenter(function(){ $('.sub-menu').stop().slideDwon() })
-
미해결UX/UI 시작하기 : Figma 입문 (Inflearn Original)
피그마 프로토타입 인터렉션에 관해 문의드려요
안녕하세요. 피그마 프로토타입 인터렉션에 관해 문의드려요. 피그마에서 프로토타입에서 특정 프레임이나 버튼 등의 이벤트에 관한 이동이나 화면전환 등의 애니메이션은 얼마든지가능한데.. 혹시 페이지내에 삽입한 지도같은 이미지위에서 지도 위치를 따라 가는 선 같은 라인들이 나타나는 모션 애니메이션( 네비게이션에서 길찾기 기능같이)을 구현하고싶은데, 그런 유사한 방법이 가능한가요? 그리고 하단에 나오는 정보 리스트들을 아래로 드래그할때 지도가 좌우로 드래그되다가 특정 리스트항목을 클릭하면 위에 지도가 특정 영역에 마커를 표시해주는 애니메이션도 가능할까요? ( 네이버지도 특정 장소찾기 기능과 유사) 질문이 다소 두서없는 듯 하여 죄송합니다만 답변 부탁드립니다. 감사합니다.
