월 33,220원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
A3 강원천문대 코드리뷰 부탁드립니다
A3 강원천문대 코드리뷰 부탁드립니다 나름대로 하기는 했는데..... 선생님이 보시고 뭔가 아쉽거나 잘못된거 있으면 지적 부탁드립니다. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>강원 천문대</title> <link href="css/style.css" rel="stylesheet"> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#none"> <img src="images/logo-header.png" alt="header logo"> </a> </div><!--.header-logo--> <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> </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">공지사항</a> <a href="#none">방문후기</a> <a href="#none">자유게시판</a> </div> </li> </ul><!--.menu--> </div><!--.navi--> </header> <div class="slide"> <div> <a href="#none"> <img src="images/slide-01.jpg" alt="slide images1"> </a> <a href="#none"> <img src="images/slide-02.jpg" alt="slide images2"> </a> <a href="#none"> <img src="images/slide-03.jpg" alt="slide images3"> </a> </div> </div><!--.slide--> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <a href="#none" class="active">공지사항</a> <a href="#none">갤러리</a> </div><!--.btn--> <div class="tabs"> <div class="tab1"> <a href="#none" class="open-modal"><em>제1회 별사진 공모전 개회됩니다.</em><b>2020.01.09</b></a> <a href="#none"><em>하계기간 야간 연장운영합니다.</em><b>2020.01.07</b></a> <a href="#none"><em>청소년 대상 천문교실 안내</em><b>2019.12.31</b></a> <a href="#none"><em>올앳 시스템 작업 안내</em><b>2019.12.20</b></a> <a href="#none"><em>강원천문대에서 연구원을 모집합니다.</em><b>2019.12.20</b></a> </div><!--.tab1--> <div class="tab2"> <a href="#none"> <img src="images/gallery-01.jpg" alt="gallery image1"> <img src="images/gallery-02.jpg" alt="gallery image2"> <img src="images/gallery-03.jpg" alt="gallery image3"> </a> </div><!--.tab2--> </div><!--.tabs--> </div> </div><!--.news--> <div class="banner"> <a href="#none"> <img src="images/banner-01.jpg" alt="banner"> </a> </div><!--.banner--> <div class="shortcut"> <a href="#none"> <img src="images/banner-02.jpg" alt="shortcut"> </a> </div><!--.shortcut--> </div><!--.items--> <footer> <div class="footer-logo"> <a href="#none"> <img src="images/logo-footer.png" alt="footer logo"> </a> </div><!--.logo--> <div class="info"> <div class="footer-menu"> <a href="#none">개인정보 처리방침</a> <a href="#none">영상정보처리기기 운영방침</a> <a href="#none">저작권정책</a> <a href="#none">RSS</a> <a href="#none">고객헌장오시는길</a> </div><!--.footer-menu--> <div class="copyright"> Copyright (C) Gangwon Astronomy and Space Science Institute. All Rights Reserved. </div><!--.copyright--> </div><!--.info--> </footer> </div><!--.container--> <div class="modal"> <div class="modal-content"> <h2>하늘과 바람과 별과 詩 사생대회</h2> <p> 윤동주 시인의 시집 <하늘과 바람과 별과 詩> 출간 72주년을 맞이하여 천문대에서 개최하는 사생대회가 열립니다. 별 하나에 추억, 사랑, 쓸쓸함, 동경 그리고 시와, 어머니를 그렸던 시인처럼 별같은 마음을 가진 분들은 참여해주세요. </p> <a href="#none" class="close-modal">닫기</a> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/script.js"></script> </body> </html> @charset "utf-8"; body { margin: 0; font-size: 15px; background-color: #fff; color: #222328; } a { color: #222328; text-decoration: none; } .container{ width:1200px; margin: auto; } header{ position: relative; z-index: 10; } header > div{ height: 100px; } .header-logo{width:20%; float:left;line-height: 130px;} .navi{ width:60%; float:right; } .menu{ text-align: center; background-color: #fff; list-style: none; text-decoration: none; } .menu li{ width:25%; height: 40px; line-height: 40px; float: left; box-sizing: border-box; } .menu li > a{ display: block; background-color:#0066ad; color:#fff; } .menu li:hover > a{ background-color:#0066ad; color:#fff; transition: 0.5s; } .sub-menu{ background-color: #fff; border: 1px solid #0066ad; display: none; } .sub-menu a{ display: block; padding: 5px; transition: 0.5s; } .sub-menu a:hover{ background-color:#ababab; color:#fff; } .slide{ position: relative; width:1200px; height:300px; overflow: hidden; } .slide > div{ /*position: absolute;를 여기에다가 주는게 아니라 .slide > div a{}안에 주어야함*/ 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: 0s; } .slide > div a:nth-child(2){ animation-delay: 3.5s; } .slide > div a:nth-child(3){ animation-delay: 7s; } @keyframes slide{ 0%{ opacity: 0; visibility: hidden; /*visibility: hidden;*/ } 5%{ opacity: 1; } 35%{ opacity: 1; } 40%{ opacity: 0; } 100%{ opacity: 0; } } .items{ overflow: hidden; } .items > div{ height: 200px; box-sizing: border-box; float: left; } .news{ width:500px; } .news .tab-inner{ width:95%; margin: auto; } .news .tab-inner .btn{} .btn a{ border: 1px solid #0066ad; display: inline-block; width:100px; text-align: center; color:#fff; background:#0066ad; padding: 5px; border-radius: 5px 5px 0 0 ; margin-right:-6px; margin-bottom: -1px; } .btn a.active{ background-color:#ababab; color:#fff; border: 1px solid #ababab; } .news .tab-inner .tabs{} .news .tab-inner .tabs > a{} .news .tab-inner .tabs > div{} .tab1 { border: 1px solid #0066ad; padding:0 10px; } .tab1 a{ display: block; padding:5px; border-bottom: 1px solid #0066ad; } .tab1 a:last-child{ border-bottom: none; } .tab1 a em{ font-style: normal; } .tab1 a b{ float: right; font-style: normal; } .tab2{ border: 1px solid #0066ad; height: 165px; padding-top: 20px; box-sizing: border-box; text-align: center; display: none; } .tab2 img{ width:130px; } .banner{ width:350px; } .shortcut{ width:350px; } footer{ width:100%; } footer > div{ height:100px; box-sizing: border-box; float: left; } .footer-logo{ width:300px; line-height: 130px; } .footer-logo img{ } .info{ width:900px; } .info > div{ height:50%; box-sizing: border-box; } .footer-menu{ text-align: center; line-height: 50px; } .copyright{ line-height: 50px; text-align: center; } .modal{ width:100%; height:100%; top:0; left:0; background: rgba(0, 0, 0, 0.466); position: absolute; z-index: 100; display: none; } .modal-content{ width:350px; background-color: #fff; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); border-radius: 10px; padding: 20px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.13); } .close-modal{ float:right; border: 1px solid #000; padding:5px 10px; } /* Nevigation */ $('.navi li').mouseenter(function(){ $(this).find('.sub-menu').stop().slideDown(500);}); $('.navi li').mouseleave(function(){ $(this).find('.sub-menu').stop().slideUp(500); }); /* Tab menu */ $('.btn a:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }); $('.btn a:last-child').click(function(){ $('.tab1').hide() $('.tab2').show() $(this).addClass('active') $(this).addClass('active') $(this).siblings().removeClass('active') }); /* modal */ $('.open-modal').click(function(){ $('.modal').fadeIn() }); $('.close-modal').click(function(){ $('.modal').fadeOut() });
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
선생님 헤드영역의 레이아웃 자체가 틀어지는데 왜 그런지 검토부탁드립니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>네비게이션-상단-03-개별(완성)</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="header-inner"> <header> <article class="header-logo">로고</article> <article class="navi"> <!--Navigasion--> <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> <!--Navigasion--> </article> </header> </div> <div class="content-inner"> <section class="slide"> <article>이미지 슬라이드</article> </section> <section class="items"> <article class="news">공지사항(C.1)</article> <article class="banner">갤러리(C.2)</article> <article class="shortcut">바로가기(C.3)</article> </section> </div> <div class="footer-inner"> <footer> <article class="footer-logo">Copyright</article> <article class="footer-content"> <div>SNS</div> <div>패밀리 사이트</div> </article> </footer> </div> </div> <script type="text/javascript" src="script/jquery-1.12.4.js"></script> <script type="text/javascript" src="script/custom.js"></script> </body> </html>
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
slide animation css 부분
슬라이드 애니메이션 css 부분에서 가로와 세로로 만드는 부분은 .sldie div{ }에 설정값을 주셨고, 크로스 페이드에는 .slide div a {}에 설정값을 주셨는데 왜 그런거죠? 가로 .slide { /*position: relative;*/ width: 1200px; height: 300px; overflow: hidden; } .slide > div { width: 3600px; font-size: 0; /*position: absolute;*/ /*top: 0; left: 0;*/ animation: slide 10s linear infinite;세로 .slide { /*position: relative;*/ width: 1200px; height: 300px; overflow: hidden; } .slide > div { /*position: absolute; top: 0; left: 0;*/ font-size: 0; animation: slide 10s linear infinite; }크로스페이드 .slide { position: relative; width: 1200px; height: 300px; } .slide div { font-size: 0; } .slide div a { position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; /*opacity: 0;*/ visibility: hidden; }
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
22강 제이쿼리 기본구문 만들기 질문
선생님 안녕하세요 제이쿼리 구문을 넣으면 아래처럼 오류가 뜨는데 제가 뭘 잘못한건가요? ㅜㅜ
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
선생님!.open-modal을 눌러도 모달이 안열려요 그리고, btn에 background-color: #fff;해도 선이 사라지지 않네요
선생님!.open-modal을 눌러도 모달이 안열려요 그리고, btn에 background-color: #fff;해도 선이 사라지지 않네요 ㅠㅠ 제가 뭘 잘못한걸까요 <!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="left"> <header> <div class="header-logo"> <a href="#none"> <img src="images/logo-header.png" alt="header-logo"> </a> </div><!--.header-logo--> <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><!--.sub-menu--> </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><!--.sub-menu--> </li> <li> <a href="#none">홍보마당</a> <div class="sub-menu"> <a href="#none">축제소식</a> <a href="#none">보도자료</a> <a href="#none">음식레시피</a> </div><!--.sub-menu--> </li> <li> <a href="#none">참여마당</a> <div class="sub-menu"> <a href="#none">참가후기</a> <a href="#none">연꽃갤러리</a> <a href="#none">포토갤러리</a> </div><!--.sub-menu--> </li> </ul> </div><!--.navi--> </header> </div><!--.left--> <div class="right"> <div class="slide"> <div> <a href="#none"> <img src="images/slide-01.jpg" alt="slide image1"> </a> <a href="#none"> <img src="images/slide-02.jpg" alt="slide image2"> </a> <a href="#none"> <img src="images/slide-03.jpg" alt="slide image3"> </a> </div> </div><!--.slide--> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div><!--.tab-inner--> <div class="tab"> <a href="#none" class="open-modal"><em>운영위원장 후보자 추천을 받고 있습니다.</em><b>2020.01.09</b></a> <a href="#none"><em>홈커밍데이 진행위원회 결과를 다운로드 받으세요.</em><b>2020.01.07</b></a> <a href="#none"><em>카드결제 무이자 이벤트 한시적 10월 20일까지</em><b>2019.12.31</b></a> <a href="#none"><em>보안강화 시스템 작업 안내 공지</em><b>2019.12.20</b></a> <a href="#none"><em>부여 가을연꽃축제 10주년 콘서트 축제</em> <b>2019.12.20</b></a> </div><!--.tab--> </div><!--.tab-inner--> </div><!--.news--> <div class="gallery"> <div class="gallery-inner"> <div class="btn"> <span>갤러리</span> </div><!--.tab-inner--> <div class="tab"> <a href="#none"> <img src="images/gallery-01.jpg" alt="gallery images1"> </a> <a href="#none"> <img src="images/gallery-02.jpg" alt="gallery images2"> </a> <a href="#none"> <img src="images/gallery-03.jpg" alt="gallery images3"> </a> </div><!--.tab--> </div><!--.tab-inner--> </div><!--.gallery--> <div class="shortcut"> <a href="#none"> <img src="images/shortcut.jpg" alt="shortcut"> </a> </div><!--.shortcut--> </div><!--.items--> <footer> <div class="copyright"> (주)이스타컴퍼니 | 대표자 : 최종윤 | 개인정보관리책임자 : 이주현 부장 사업장주소 : 인천광역시 중구 개항로 6층 (주)이스타컴퍼니 </div><!--.copyright--> <div class="sns"> <div> <a href="#none"> <img src="images/sns-01.png" alt="facebook"> </a> <a href="#none"> <img src="images/sns-02.png" alt="tweeter"> </a> <a href="#none"> <img src="images/sns-03.png" alt="instagram"> </a> </div> <div> <select> <option value=""> Family Site </option> <option value=""> 여주군청 홈페이지 </option> <option value=""> 한국관광공사 </option> <option value=""> 여행자보험가입 </option> </select> </div> </div><!--.sns--> </footer> </div><!--.right--> </div> <div class="modal"> <div class="modal-content"> <h2>부여 가을연꽃축제 팸투어 모집</h2> <p> 예비 청년상인들을 위해 진행하는 부여에서 청춘의 미래를 디자인하다. 청년창업人부여 팸투어가 12월 05일 토요일 충청남도 부여에서 진행됩니다.<br> 팸투어는 전액 무료로 진행되며 참가비 없습니다. 이번 팸투어에서는 부여군상권활성화재단의 청년상인 육성프로젝트를 실제로 견학하며 확인해 보실 수 있는 좋은 기회이니 창업을 희망하는 많은 청년 분들의 관심 부탁드립니다.<br> 온라인 및 전화 또는 메일 등으로 사전 참가신청하실 수 있습니다! </p> <a href="#none" class="close-modal">닫기</a> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "utf-8"; a{ color:#222328; list-style: none; text-decoration: none; } body{ margin:0; background-color: #fff; color:#222328; font-size: 15px; } .container{ width:1000px; } .container > div{ float: left; box-sizing: border-box; } .left{ width:200px; } .right{ width:800px; } header{ position: relative; z-index: 10; } header > div{} .header-logo{ height: 100px; line-height: 130px; } .navi{ height: 400px; } .slide > div{ height: 350px; } .items{ overflow: hidden; } .items > div{ height: 200px; float: left; box-sizing: border-box; } .news{ width: 300px; } .gallery{ width: 300px; } .shortcut{ width: 200px; } footer{ overflow: hidden; } footer > div{ height: 100px; float:left; box-sizing: border-box; text-align: center; } .copyright{ width:600px; padding-top: 30px; } .sns{ width:200px; } .sns div{ height: 50px; box-sizing: border-box; } .sns div:nth-child(1){ padding-top: 15px; } .sns div:nth-child(2){ padding-top: 10px; } /* slide */ .slide{ position: relative; } .slide > div{ /*position: absolute;를 여기에다가 주는게 아니라 .slide > div a{}안에 주어야함*/ } .slide > div a{ position: absolute; top:0; left:0; opacity: 0; animation: slide 10s linear infinite; } .slide > div a:nth-child(1){ animation-delay: 0s; } .slide > div a:nth-child(2){ animation-delay: 3.5s; } .slide > div a:nth-child(3){ animation-delay: 7s; } @keyframes slide{ 0%{ opacity: 0; visibility: hidden; /*visibility: hidden;*/ } 5%{ opacity: 1; } 35%{ opacity: 1; } 40%{ opacity: 0; } 100%{ opacity: 0; } } /* Nevigation */ .menu{ padding: 0; width: 90%; margin: auto; position: relative; } .menu li{ text-align: center; list-style: none; text-decoration: none; } .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; position: absolute; background-color: #000; width:100%; top:0; left:100%; height: 200px; display: none; /* */ } .sub-menu a{ display: block; padding: 5px; transition: 0.5s; color:#fff; } .sub-menu a:hover{ background-color: #000; color:#fff; } /* Tab Content */ .tab-inner, .gallery-inner{ width:95%; margin:0; } .tab-inner .btn{} .tab-inner .btn span, .gallery-inner .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; box-sizing: border-box; } .tab-inner .tab{ padding:5px; } .tab-inner .tab, .gallery .tab{ border: 1px solid #000; height: 150px; box-sizing: border-box; } .tab-inner .tab a{ display: block; padding: 3px; border-bottom: 1px solid #333; overflow: hidden; } .tab-inner .tab a:last-child{ border-bottom: none; } .tab-inner .tab a em{ width:60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; float:left; font-style: normal; } .tab-inner .tab a b{ width:30%; float: right; font-weight: normal; } .gallery .tab img{ width:85px; } .gallery-inner .tab{ text-align: center; padding-top: 20px; } /* Modal */ .modal{ background-color: rgba(0, 0, 0, 0.5); position: absolute; top:0; left:0; width:100%; height: 100%; z-index: 100; display: none; } .modal-content{ width:350px; background-color: #fff; top:50%; left:50%; position: absolute; transform: translate(-50%, -50%); padding:20px; border-radius: 10px; } .close-modal{ float: right; border: 1px solid #000; padding: 5px 10px; } /* Navigation */ $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }); $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() }); /* modal */ $('.open-modal').click(function(){ $('modal').fadeIn() }); $('.close-modal').click(function(){ $('modal').fadeOut() });
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
navi 옆으로 서브메뉴할 때 left:100%
옆으로 서브메뉴 할때 사진처럼 menu에 부모 sub-menu에 자식요소 주고 left:100% 했는데 이렇게 사이에 공간이 생겨요.뭐 때문일까요?
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
.menu나 .sub-menu에 hover하면 검정색배경에 흰색글씨로 바뀌어야 하는데 안되네요 코드에 어떤 문제가 있나요?
.menu나 .sub-menu에 hover하면 검정색배경에 흰색글씨로 바뀌어야 하는데 안되네요 코드에 어떤 문제가 있나요? <!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="left"> <header> <div class="header-logo"> <a href="#none"> <img src="images/logo-header.png" alt="header-logo"> </a> </div><!--.header-logo--> <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><!--.sub-menu--> </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><!--.sub-menu--> </li> <li> <a href="#none">홍보마당</a> <div class="sub-menu"> <a href="#none">축제소식</a> <a href="#none">보도자료</a> <a href="#none">음식레시피</a> </div><!--.sub-menu--> </li> <li> <a href="#none">참여마당</a> <div class="sub-menu"> <a href="#none">참가후기</a> <a href="#none">연꽃갤러리</a> <a href="#none">포토갤러리</a> </div><!--.sub-menu--> </li> </ul> </div><!--.navi--> </header> </div><!--.left--> <div class="right"> <div class="slide"> <div> <a href="#none"> <img src="images/slide-01.jpg" alt="slide image1"> </a> <a href="#none"> <img src="images/slide-02.jpg" alt="slide image2"> </a> <a href="#none"> <img src="images/slide-03.jpg" alt="slide image3"> </a> </div> </div><!--.slide--> <div class="items"> <div class="news"></div><!--.news--> <div class="gallery"></div><!--.gallery--> <div class="shortcut"></div><!--.shortcut--> </div><!--.items--> <footer> <div class="copyright"> (주)이스타컴퍼니 | 대표자 : 최종윤 | 개인정보관리책임자 : 이주현 부장 사업장주소 : 인천광역시 중구 개항로 6층 (주)이스타컴퍼니 </div><!--.copyright--> <div class="sns"> <div> <a href="#none"> <img src="images/sns-01.png" alt="facebook"> </a> <a href="#none"> <img src="images/sns-02.png" alt="tweeter"> </a> <a href="#none"> <img src="images/sns-03.png" alt="instagram"> </a> </div> <div> <select> <option value=""> Family Site </option> <option value=""> 여주군청 홈페이지 </option> <option value=""> 한국관광공사 </option> <option value=""> 여행자보험가입 </option> </select> </div> </div><!--.sns--> </footer> </div><!--.right--> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset 'utf-8'; *{ padding: 0; list-style: none; text-decoration: none; } a{ color:#222328; } body{ margin:0; background-color: #fff; color:#222328; font-size: 15px; } .container{ border: 1px solid red; width:1000px; } .container > div{ float: left; box-sizing: border-box; } .left{ width:200px; } .right{ width:800px; } header{ } header > div{} .header-logo{ height: 100px; line-height: 130px; } .navi{ height: 400px; } .slide > div{ border: 1px solid green; height: 350px; } .items{ overflow: hidden; } .items > div{ border: 1px solid pink; height: 200px; float: left; box-sizing: border-box; } .news{ width: 300px; } .gallery{ width: 300px; } .shortcut{ width: 200px; } footer{ overflow: hidden; } footer > div{ height: 100px; float:left; box-sizing: border-box; text-align: center; } .copyright{ width:600px; padding-top: 30px; } .sns{ width:200px; } .sns div{ height: 50px; box-sizing: border-box; } .sns div:nth-child(1){ padding-top: 15px; } .sns div:nth-child(2){ padding-top: 10px; } /* slide */ .slide{ position: relative; } .slide > div{ /*position: absolute;를 여기에다가 주는게 아니라 .slide > div a{}안에 주어야함*/ } .slide > div a{ position: absolute; top:0; left:0; opacity: 0; animation: slide 10s linear infinite; } .slide > div a:nth-child(1){ animation-delay: 0s; } .slide > div a:nth-child(2){ animation-delay: 3.5s; } .slide > div a:nth-child(3){ animation-delay: 7s; } @keyframes slide{ 0%{ opacity: 0; visibility: hidden; /*visibility: hidden;*/ } 5%{ opacity: 1; } 35%{ opacity: 1; } 40%{ opacity: 0; } 100%{ opacity: 0; } } /* Nevigation */ .menu{ padding: 0; width: 90%; margin: auto; } .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: #fff; color:#000; } .sub-menu{ border: 1px solid #000; } .sub-menu a{ display: block; padding: 5px; transition: 0.5s; } .sub-menu a:hover{ background-color: #fff; color:#000; }
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
menu에 hover하면 배경색이 검은색되고 글씨가 흰색이 되야하는데 안되요....sub-menu도요
menu에 hover하면 배경색이 검은색되고 글씨가 흰색이 되야하는데 안되요....sub-menu도요 코드에 어떤 문제가 있는걸까요? <!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="left"> <header> <div class="header-logo"> <a href="#none"> <img src="images/logo-header.png" alt="header-logo"> </a> </div><!--.header-logo--> <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><!--.sub-menu--> </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><!--.sub-menu--> </li> <li> <a href="#none">홍보마당</a> <div class="sub-menu"> <a href="#none">축제소식</a> <a href="#none">보도자료</a> <a href="#none">음식레시피</a> </div><!--.sub-menu--> </li> <li> <a href="#none">참여마당</a> <div class="sub-menu"> <a href="#none">참가후기</a> <a href="#none">연꽃갤러리</a> <a href="#none">포토갤러리</a> </div><!--.sub-menu--> </li> </ul> </div><!--.navi--> </header> </div><!--.left--> <div class="right"> <div class="slide"> <div> <a href="#none"> <img src="images/slide-01.jpg" alt="slide image1"> </a> <a href="#none"> <img src="images/slide-02.jpg" alt="slide image2"> </a> <a href="#none"> <img src="images/slide-03.jpg" alt="slide image3"> </a> </div> </div><!--.slide--> <div class="items"> <div class="news"></div><!--.news--> <div class="gallery"></div><!--.gallery--> <div class="shortcut"></div><!--.shortcut--> </div><!--.items--> <footer> <div class="copyright"> (주)이스타컴퍼니 | 대표자 : 최종윤 | 개인정보관리책임자 : 이주현 부장 사업장주소 : 인천광역시 중구 개항로 6층 (주)이스타컴퍼니 </div><!--.copyright--> <div class="sns"> <div> <a href="#none"> <img src="images/sns-01.png" alt="facebook"> </a> <a href="#none"> <img src="images/sns-02.png" alt="tweeter"> </a> <a href="#none"> <img src="images/sns-03.png" alt="instagram"> </a> </div> <div> <select> <option value=""> Family Site </option> <option value=""> 여주군청 홈페이지 </option> <option value=""> 한국관광공사 </option> <option value=""> 여행자보험가입 </option> </select> </div> </div><!--.sns--> </footer> </div><!--.right--> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset 'utf-8'; *{ padding: 0; list-style: none; text-decoration: none; } a{ color:#222328; } body{ margin:0; background-color: #fff; color:#222328; font-size: 15px; } .container{ border: 1px solid red; width:1000px; } .container > div{ float: left; box-sizing: border-box; } .left{ width:200px; } .right{ width:800px; } header{ } header > div{} .header-logo{ height: 100px; line-height: 130px; } .navi{ height: 400px; } .slide > div{ border: 1px solid green; height: 350px; } .items{ overflow: hidden; } .items > div{ border: 1px solid pink; height: 200px; float: left; box-sizing: border-box; } .news{ width: 300px; } .gallery{ width: 300px; } .shortcut{ width: 200px; } footer{ overflow: hidden; } footer > div{ height: 100px; float:left; box-sizing: border-box; text-align: center; } .copyright{ width:600px; padding-top: 30px; } .sns{ width:200px; } .sns div{ height: 50px; box-sizing: border-box; } .sns div:nth-child(1){ padding-top: 15px; } .sns div:nth-child(2){ padding-top: 10px; } /* slide */ .slide{ position: relative; } .slide > div{ /*position: absolute;를 여기에다가 주는게 아니라 .slide > div a{}안에 주어야함*/ } .slide > div a{ position: absolute; top:0; left:0; opacity: 0; animation: slide 10s linear infinite; } .slide > div a:nth-child(1){ animation-delay: 0s; } .slide > div a:nth-child(2){ animation-delay: 3.5s; } .slide > div a:nth-child(3){ animation-delay: 7s; } @keyframes slide{ 0%{ opacity: 0; visibility: hidden; /*visibility: hidden;*/ } 5%{ opacity: 1; } 35%{ opacity: 1; } 40%{ opacity: 0; } 100%{ opacity: 0; } } /* Nevigation */ .menu{ padding: 0; width: 90%; margin: auto; } .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: #fff; color:#000; } .sub-menu{ border: 1px solid #000; } .sub-menu a{ display: block; padding: 5px; transition: 0.5s; } .sub-menu a:hover{ background-color: #fff; color:#000; }
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
왜 sns가 오른쪽으로 안가고 밑으로 쳐지는지 모르겠어요
<!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="left"> <header> <div class="header-logo"></div><!--.header-logo--> <div class="navi"></div><!--.navi--> </header> </div><!--.left--> <div class="right"> <div class="slide"> <div></div> </div><!--.slide--> <div class="items"> <div class="news"></div><!--.news--> <div class="gallery"></div><!--.gallery--> <div class="shortcut"></div><!--.shortcut--> </div><!--.items--> <footer> <div class="copyright"> </div><!--.copyright--> <div class="sns"> <div></div> <div></div> </div><!--.sns--> </footer> </div><!--.right--> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset 'utf-8'; *{ padding: 0; list-style: none; text-decoration: none; } body{ margin:0; background-color: #fff; color:#222328; font-size: 15px; } .container{ border: 1px solid red; width:1000px; } .container > div{ border: 1px solid blue; float: left; box-sizing: border-box; } .left{ width:200px; } .right{ width:800px; } header{ } header > div{} .header-logo{ border: 1px solid green; height: 100px; } .navi{ border: 1px solid red; height: 400px; } .slide{} .slide > div{ border: 1px solid green; height: 350px; } .items{ overflow: hidden; } .items > div{ border: 1px solid pink; height: 200px; float: left; box-sizing: border-box; } .news{ width: 400px; } .gallery{ width: 250px; } .shortcut{ width: 250px; } footer{ overflow: hidden; } footer > div{ border: 1px solid blue; height: 100px; float:left; box-sizing: border-box; } .copyright{ width:600px; } .sns{ width:200px; } .sns div{ border: 1px solid #000; height: 50px; }
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
포지션속성 주는 이유?
크로스페이드 슬라이드 만들때 포지션 속성은 왜 줘야 하는거예요?
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
custom.js 만들기 중 오류 문의입니다.
/*모달 동작*/ 1번) $('.open-modal').click(function(){ $('.modal').show() }) 2번) $('.close-modal').click(function(){ $('.modal').hide() }) 모달 만들기에서 1번 과정을 적은후 복사해서 2번으로 수정할 때 실수로 $('.open-modal').click(function(){ $('.modal').show() })$('.close-modal').click(function(){ $('.modal').hide() }) 이렇게 윗줄로 올려서 복사했더니 모달js 뿐 아니라 네비게이션이랑 탭메뉴 잘 실행되다가 같이 안되어 버리는 문제가 발생했습니다. 윗줄로 올린거 뿐인데 왜 이런 문제가 발생하나요? 오류는 찾아서 고쳐서 잘 실행되는데 왜 그런지 이유가 궁금합니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
[2021년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY) 수업 PDF 자료
안녕하세요 선생님! 웹디자인기능사 실기시험 강좌를 이제 막 수강 시작하려고 하는 학생인데요, 강의 소개에 있는 PDF는 혹시 어떻게 제공되는 건지 여쭤도 될까요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
하단메뉴 수업이 안보여요
하단메뉴1 하단메뉴2 하단메뉴3 이런 메뉴를 li와 a를 사용해서 만들어야 할까요?아님 그냥 a태그만 이용해서 메뉴 만들어도 되나요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
상단 네비게이션 만들고 애니메이션만든후
코딩웍스님 상단 네비게이션 타입 중 서브백타입 만들고 그위에 가로 슬라이드 연습햇는데 서브백이랑 서브메뉴가 가로 슬라이드에 가려서 안보이는데 여기서도 z-index 사용해야하는건가요??
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
.btn span에서 border-bottom 없애는 부분이랑 네비게이션 질문있습니다.
.btn span에서 밑에 보더를 없애려고 border-bottom: none; background-color: #fff; margin-bottom: -1px;은 줬는데 display: block; 으로 하면 밑에 보더가 안없어지고 inline-block으로 해야 없어지더라구요. 강의 영상에서는 block으로 해도 된다고 하셨는데... 어떤 차이가 있는 건가요..? 그냥 제가 css 입력을 잘못한걸까요...? css도 같이 첨부합니다. (밑에 css에서는 span이 아니라 a태그로 되어있습니다.) 두번째로 네비게이션의 .li > a 부분에 마우스가 올라가면 서브메뉴가 나와야 하는데 서브메뉴가 내려오는 부분에만 마우스가 올라가도 바로 내려와버립니다. 뭐가 문제인지 모르겠어요... 사진 첨부합니다.. @charset "utf-8"; /*background*/ body { background-color: #ffffff; color: #222328; margin: 0; font-size: 15px; } a { text-decoration: none; color: #000; } /*inner-set*/ .container {} .header-inner { background-color: #ddd; } .content-inner {} .footer-inner { background-color: #ddd; overflow: hidden; } /*header*/ header { width: 1200px; margin: auto; height: 100px; position: relative; } header > div { height: 100px; } .header-logo { width: 200px; float: left; line-height: 130px; } /*navigation*/ .navi { width: 600px; float: right; } .menu { list-style: none; padding: 0; margin-top: 68px; } .menu li { float: left; width: 25%; text-align: center; height: 180px; box-sizing: border-box; } .menu li > a { border: 1px solid black; padding: 5px; display: block; transition: 0.5s; } .menu li:hover > a { background-color: black; color: white; } .sub-menu { border: 1px solid black; display: none; } .sub-menu a { color: white; display: block; padding: 5px; transition: 0.5s; } .sub-menu a:hover { background-color: white; color: black; } .sub-back { background-color: black; width: 100%; height: 170px; position: absolute; right: 0; top: 100%; z-index: -1; display: none; } /*slide*/ .slide { width: 1200px; margin: auto; height: 300px; position: relative; overflow: hidden; z-index: -2; } .slide div { /* height: 300px;*/ width: 3600px; font-size: 0; position: absolute; animation: slide 10s linear infinite; top: 0; left: 0; } @keyframes slide { 0% {left: 0;} 30% {left: 0;} 35% {left: -1200px;} 65% {left: -1200px;} 70% {left: -2400px;} 95% {left: -2400px;} 100% {left: 0;} } /*items*/ .items { width: 1200px; margin: auto; overflow: hidden; } .items > div { box-sizing: border-box; height: 200px; float: left; } /*news*/ .news, .gallery { width: 430px; padding: 10px; } .btn {} .btn a { border: 1px solid black; display: inline-block; width: 100px; padding: 5px; text-align: center; border-radius: 5px 5px 0 0; border-bottom: none; background-color: #fff; margin-bottom: -1px; } .tab1, .tab2 { border: 1px solid black; border-radius: 0 5px 5px 5px; padding: 5px; padding-top: 5px; height: 135px; background-color: white; } .tab1 a { display: block; padding: 3px; border-bottom: 1px solid black; } .tab1 a:last-child { border-bottom: none; } .tab1 a em { font-style: normal; } .tab1 a b { font-weight: normal; float: right; } .tab2 { text-align: center; } .tab2 img { padding-top: 8px; width: 120px; } /*banner*/ .banner { width: 340px; padding: 10px; } .banner img { width: 100%; } /*footer*/ footer { width: 1200px; margin: auto; overflow: hidden; } footer > div { height: 100px; } .footer-menu { float: left; } .footer-menu > div { height: 50px; width: 1000px; text-align: center; box-sizing: border-box; } .bottom-menu { line-height: 50px; } .copyright { line-height: 20px; } .family-site { float: right; width: 200px; } /*modal*/ .modal { background-color: rgba(0, 0, 0, 0.2); width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; } .modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; border-radius: 10px; padding: 30px; width: 400px; height: 450px; } .modal h2 { text-align: center; } .modal p { padding: 10px; margin-top: 30px; } .close-modal { float: right; background-color: black; color: white; padding: 7px; border-radius: 5px; margin: 10px; margin-top: 20px; cursor: pointer; } 제이쿼리 $('.menu li').mouseenter(function(){ $('.sub-menu, .sub-back').stop().slideDown() }) $('.menu li').mouseleave(function(){ $('.sub-menu, .sub-back').stop().slideUp() })
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
제공 텍스트가 깨져서 나와요
이렇게 나오는데 해결방법 있을까요? ㅠㅠ
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
공지사항 칸
C2타입 공지사항 부분 하고 있는데, items 부분 총 800px을 300,300,200으로 나눴거든요! 근데 글이랑 날짜가 한 줄에 다 안들어오고 내려가요ㅠㅠ 칸이 적어서 그런거 같은데.. 이런 경우는 폰트사이즈를 조절해야 할까요? 아니면 300px보다 늘려서 400px로 하면 한줄로 다 들어오긴 하는데, 이렇게 되면 공지사항 부분하고 갤러리 부분하고 width값이 보통 같게 하는데 400,400,0 이 돼서 안될거같은데.. 이런 경우에는 어떻게 해야되나요?!
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
제이쿼리 오류
제이쿼리 구문이랑 html에 제이쿼리도 연결 했는데 제이쿼리 구문에 빨간색 동그라미로 X 뜨는건 왜 그런건가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
갤러리 탭에서 패딩 탑줄때
갤러리 탭에서 이미지에 패딩탑 값줄때 .gallery .tab말고 .gallery .tab img에 padding 값 주면 안되나요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
A타입 와이어프레임만들고 공지사항,갤러리 구성
삭제된 글입니다