월 33,220원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
제이쿼리슬라이드제작
css로 슬라이드제작은 그래도 따라갈만한데 제이쿼리는 도통어렵네요,,, d형e형도 css로 슬라이드작업을하면 안되는걸까요 ?? d형e형 레이아웃강의도못들었는데 갑자기 d형으로 넘어가서 당황했어요 ,,, 어떤거부터 들어야하는게 좋을까요 ,,,? 그리고 시험장에가서도 css로 슬라이더 작업하면 안되는걸까요 ??
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
html과 css 구문 모두 똑같은데 sub-menu가 슬라이드 뒤에 숨어요ㅠ
해당 부분 html-<header> <article class="header-logo">로고</article> <article class="navi"> <ul class="menu"> <li> <a href="#none">MENU-1</a> <div class="sub"> <a href="#none">sub-1</a> <a href="#none">sub-2</a> <a href="#none">sub-3</a> <a href="#none">sub-4</a> </div> </li> <li> <a href="#none">MENU-2</a> <div class="sub"> <a href="#none">sub-1</a> <a href="#none">sub-2</a> <a href="#none">sub-3</a> <a href="#none">sub-4</a> </div> </li> <li> <a href="#none">MENU-3</a> <div class="sub"> <a href="#none">sub-1</a> <a href="#none">sub-2</a> <a href="#none">sub-3</a> <a href="#none">sub-4</a> </div> </li> <li> <a href="#none">MENU-4</a> <div class="sub"> <a href="#none">sub-1</a> <a href="#none">sub-2</a> <a href="#none">sub-3</a> <a href="#none">sub-4</a> </div> </li> </ul> </article> </header>해당 부분 css-.menu { padding: 0; list-style: none; width: 90%; margin: auto; margin-top: 10px; position: relative; } .menu li { text-align: center; } .menu li > a { border: 1px solid #000; display: block; padding: 5px; color: #000; transition: 0.3s; } .menu li:hover > a { background-color: #000; color: #fff; } .sub { border: 1px solid #000; position: absolute; top: 0; left: 100%; width: 100%; height: 200px; background-color: #000; /* display: none; */ } .sub > a { display: block; color: #fff; padding: 5px; transition: 0.3s; } .sub a:hover { background-color: #000; color: #fff; }인터넷 찾아보고 z-index도 넣어봤는데 소용이 없습니다ㅠㅠ
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
body 구문 형식 어떻게 작성해야 합니까?
[2. 레이어 팝업 제작 HTML+CSS 구조 만들기, 레이어 팝업 제이쿼리] 과정에서 body 구분 형식과 다른 강의 가로 고정형 레이아웃 HTML+CSS 구조만들기 등에서의 body 구문 형식이 조금 다른데 body 구문 어떤 식으로 작성해야 합니까?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
D3 유형 우측 메가 메뉴 질문
안녕하세요저는 전에 배우던 스타일이 있어서메뉴 만들때.menu를 .gnb로 하고.sub-menu를 div로 대신 ul로 해서 .lnb로 만듭니다.이대로 스타일 적용하고 메가 메뉴 만들 때 혹시 주의 사항이 있는지, 시험 때 이대로 풀어도 되는지 궁금합니다.이대로 적용했을 때는 브라우저에 결과는 잘 나왔었습니다. html css js 저는 와이어프레임 만들 때 border를 사용하지 않고background-color로 사용하였습니다. 혹시 문제가 있는지 여쭈어봅니다. 코드 복사해서 수정합니다. html<div class="navi"> <ul class="gnb"> <li><a href="#">OnSale</a> <ul class="lnb"> <li><a href="#">할인행사</a></li> <li><a href="#">덤증정</a></li> </ul> </li> <li><a href="#">기획전</a> <ul class="lnb"> <li><a href="#">봄 먹거리</a></li> <li><a href="#">여름 먹거리</a></li> <li><a href="#">가을 먹거리</a></li> <li><a href="#">겨울 먹거리</a></li> </ul> </li> <li><a href="#">푸른마을 레시피</a> <ul class="lnb"> <li><a href="#">메인요리</a></li> <li><a href="#">밑반찬</a></li> <li><a href="#">간식</a></li> <li><a href="#">브런치</a></li> </ul> </li> <li><a href="#">매장안내</a> <ul class="lnb"> <li><a href="#">신규매장</a></li> <li><a href="#">추천매장</a></li> <li><a href="#">공지사항</a></li> </ul> </li> </ul> </div>css.navi { width: 90%; margin: 20px auto; background-color: greenyellow; } .gnb {} .gnb>li { text-align: center; position: relative; } .gnb>li>a { display: block; padding: 5px; border: 1px solid black; background-color: #fff; transition: 0.5s; } .gnb>li:hover>a { background-color: gray; } .lnb { display: none; position: absolute; top: 0; left: 100%; width: calc(100vw - 210px); padding: 6px; background-color: rgba(0, 0, 0, 0.5); } .lnb>li { float: left; } .lnb>li>a { display: inline-block; width: 120px; transition: 0.5s; } .lnb>li>a:hover { color: white; background-color: gray; }js$('.gnb>li').mouseenter(function(){ $('.lnb').stop().fadeIn() }); $('.gnb>li').mouseleave(function(){ $('.lnb').stop().fadeOut() });
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
저는 잘 만들었다고 생각했는데 Tab키로 옵젝전환을 시켜보니..
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JUST 쇼핑몰</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#none"><img src="images/logo-header.png" alt="headerlogo 1"></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> </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> </div> <div class="sub-back"></div> </header> <div class="slide"> <div> <a href="#none"><img src="images/slide-01.jpg" alt="slide 1"></a> <a href="#none"><img src="images/slide-02.jpg" alt="slide 2"></a> <a href="#none"><img src="images/slide-03.jpg" alt="slide 3"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <span>공지사항</span> <div class="tab1"> <a class="open-modal" href="#none"><em>SMS 발송 모바일 서비스 개선작업 안내입니다.</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> </div> </div> <div class="gallery"> <div class="tab-inner"> <span>갤러리</span> <div class="tab2"> <a href="#none"><img src="images/gallery-01.jpg" alt="gallery 1"></a> <a href="#none"><img src="images/gallery-02.jpg" alt="gallery 2"></a> <a href="#none"><img src="images/gallery-03.jpg" alt="gallery 3"></a> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner-01.jpg" alt="banner 1"></a> <a href="#none"><img src="images/banner-02.jpg" alt="banner 2"></a> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/logo-footer.png" alt="footerlogo 1"></a> </div> <div class="copyright"> <a href="#none">법적고지</a> <a href="#none">개인정보취급방침</a> <a href="#none">개인정보처리방침</a> <p> 상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장<br> 사업장주소 : 서울특별시 강남구 테헤란로 123-56 </p> </div> <div class="familysite"> <select> <option value="">Familysite</option> <option value="">연습용입니다</option> <option value="">이쪽도 재밌어요</option> <option value="">저쪽은 낭떠러지</option> </select> </div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>SNS비회원주문하기 종료 안내</h2> <p> 안녕하세요, JUST 쇼핑몰 MD 홍길동입니다. 안타깝게도 SNS비회원 주문하기 서비스가 한달 뒤 종료될 예정입니다.<br> 회원가입없이 SNS계정을 이용해 그동안 제품주문을 하실수 있었는데, 금번 강화된 개인정보보호법 시행령 제 9조 (부칙 3조 3항)에 의거, SNS를 이용한 상품 주문/결제등이 근래에 많은 보안잇슈로 문제가 되고 있음에 다라 KISA의 권고조치의 일환으로 했습니다.<br> 따라서, 한달뒤인 2019.03.10 이후 모든 비회원 고객님들께서는 회원가입으로 전환 후 실명인증이 되어야 하며, 이는 모든 쇼핑몰/오픈마켓등의 전자상거래서비스의 공통된 사항이라는 점을 안내해드립니다. </p> <a class="close-modal" href="#none">닫기</a> </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 { text-decoration: none; color: #333333; } .container { margin: auto; /* border: 1px solid red; */ width: 1200px; } header { height: 100px; position: relative; z-index: 10; } header > div { height: 100px; /* border: 1px solid green; */ } .header-logo { width: 200px; float: left; } .header-logo > a { line-height: 130px; } .navi { width: 600px; float: right; } .menu { padding: 0; width: 600px; } .menu li { text-align: center; list-style: none; float: left; width: 25%; padding-top: 55px; } .menu li > a{ border: 1px solid black; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a { background-color: #000; color: #fff; } .sub-menu { position: relative; display: none; } .sub-menu > a{ display: block; padding: 8px; transition: 0.5s; color: #fff; } .sub-menu > a:hover { background-color: #fff; color: #333333; } .sub-back { display: none; width: 100%; height: 150px; top: 100%; left: 0; background-color: #000; position: absolute; z-index: -1; } .slide { height: 300px; width: 1200px; position: relative; overflow: hidden; } .slide > div { position: absolute; width: 3600px; /* border: 1px solid black; */ left: 0; top: 0; height: 300px; font-size: 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; } } .items { overflow: hidden; margin-top: 10px; } .items > div { /* border: 1px solid blue; */ height: 200px; float: left; box-sizing: border-box; } .news { width: 425px; } .gallery { width: 425px; } .tab-inner { width: 95%; margin: auto; } .tab-inner span { border: 1px solid black; border-radius: 5px 5px 0 0; display: inline-block; width: 80px; padding: 8px; text-align: center; background-color: #fff; border-bottom: 0; } .tab1 { border: 1px solid black; padding: 0 4px; height: 150px; background-color: #fff; margin-top: -2px; } .tab1 em { width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: normal; position: relative; } .tab1 b { float: right; } .tab1 a { display: block; border-bottom: 1px solid black; padding: 2.5px; } .tab1 a:last-child { border-bottom: 0px; } .tab1 a b{ font-weight: normal; } .tab2 { background-color: #fff; margin-top: -2px; border: 1px solid black; text-align: center; padding-top: 20px; height: 130px; } .tab2 img { width: 120px; } .banner { width: 350px; } footer { overflow: hidden; } footer > div { height: 100px; float: left; box-sizing: border-box; } .footer-logo { width: 200px; } .footer-logo > a { line-height: 130px; } .copyright { width: 800px; text-align: center; padding-top: 10px; overflow: hidden; } .copyright > a { box-sizing: border-box; } .copyright > p { padding-bottom: 10px; } .familysite { width: 200px; text-align: center; padding-top: 35px; } .modal { position: absolute; background-color: #00000049; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: none; } .modal-content { position: absolute; transform: translate(-50%,-50%); width: 350px; background-color: #fff; top: 50%; left: 50%; padding: 20px; border-radius: 5px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.356); } .modal-content span { } .close-modal { float: right; border: 1px solid black; padding: 5px; } $('.menu li').mouseenter(function(){ $('.sub-menu,.sub-back').stop().slideDown() }); $('.menu li').mouseleave(function(){ $('.sub-menu,.sub-back').stop().slideUp() }); $('.open-modal').click(function(){ $('.modal').fadeIn() }); $('.close-modal').click(function(){ $('.modal').fadeOut() });이게 이렇게해서 Html, css ,jQuery 3개 잘 만들어 보았으나, 직접 웹 페이지에서 탭키로 누르려고하면 아이템 부분의 공지사항이랑 갤러리가 없어져버립니다.. 왜 이렇게 되는걸까요!..
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
A1타입 최종본 만들기
최종본 만들때 슬라이드 안에 있는 사진 사이즈와 텍스트는 포토샵으로 만든건가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
모달 닫기 버튼
모달 창 만들 때 X 닫기 를 a태그로 사용하셨는데 button 태그로 사용하면 안되나요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
vscode emmet 핵심 단축키 파일 관련
안녕하세요!vscode에서 emmet 사용법 강좌 끝에 보면 첨부파일에 핵심 단축키 정리된 파일을 다운로드 받으라고 되어 있는데, 아무리 찾아도 다운로드할 파일을 찾지 못하여... 제가 못찾는건지, 다운이 안되는 상황인건지 문의드립니다!
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
모달창이 안되는데 뭐가문제인걸까요 ,,,??
<!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"></div> <div class="navi"></div> </header> <div class="slide"> <div></div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <a href="#none"class="active">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a class="open-madal" href="#none">핸드폰수리일정안내입니다.<b>2022.07.24</b></a> <a href="#none">핸드폰 택배일정 안내입니다.<b>2022.07.24</b></a> <a href="#none">핸드폰 현금영수증안내입니다.<b>2022.07.24</b></a> <a href="#none">핸드폰 주문시안내입니다.<b>2022.07.24</b></a> <a href="#none">핸드폰 환불및교환 안내입니다.<b>2022.07.24</b></a> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-01.jpg" alt="gallery1"></a> <a href="#none"><img src="images/gallery-02.jpg" alt="gallery2"></a> <a href="#none"><img src="images/gallery-03.jpg" alt="gallery3"></a> </div> </div> </div> </div> <div class="gallery"></div> <div class="shortcut"></div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="sns"></div> </footer> </div> <!--modal--> <div class="modal"> <div class="modal-content"> <h2>sns비회원주문하기 종료 안내</h2> <p>안녕하세요 just쇼핑몰 md 홍길동입니다.안타깝게도 비회원주문하기서비스가 한달뒤 종료될 예정입니다 회원가입없이 sns계정을 이용해 그동안 제품주문을 하실수있엇는데 금번 강화된 개인정보보호법 시행령 제 9조 의거, sns를 이용한상품주문/ 결제등이 근래에 많은 부안잇슈로 문제가 되고 있음에 따라 kisa의 권교조치의 일환으로 했습니다 따라서 한달뒤인 2022.05.07일 이후 모든 비회원 고객님들께서는 회원가입으로 전환후 실명인증 하여야하며 모든쇼핑몰 오픈마켓등의 전자상거래서비스의 공통된 사항이라는점 안내해드립니다. </p> <a class=close-modal href="#none">x 닫기</a> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "UTF-8"; .container{ border: 1px solid #000; width: 1200px; margin: auto; } header{ display: flex; justify-content: space-between; } header >div{ border: 1px solid #000; height: 100px; } .header-logo{ width: 200px; } .navi{ width: 600px; } .slide{} .slide >div{ border: 1px solid #000; height: 300px; } .items{ display: flex; } .items >div{ border: 1px solid #333; height: 200px; } .news{ width: 500px; } .gallery{ width: 350px; } .shortcut{ width: 350px; } footer{ display: flex; } footer >div{ border: 1px solid #333; height: 100px; } .footer-logo{ width: 200px; } .copyright{ width: 800px; } .sns{ width: 200px; } /*tab-inner*/ .tab-inner{ width: 95%; margin: auto; } .btn{} .btn a{ display: inline-block; border: 1px solid #000; width: 120px; text-align: center; border-radius: 5px 5px 0 0; padding: 5px; margin-right: -6px; border-bottom: none; margin-bottom: -1px; background-color: #ddd; cursor: pointer; } .btn a.active{ background-color: #fff; } .tabs{} .tabs div{ border: 1px solid #000; height: 155px; padding: 0 10px; } .tab1{ } .tab1 a{ display: block; color: #000; text-decoration: none; border-bottom: 1px solid #333; padding: 4px; } .tab1 a:last-child{ border-bottom: none; } .tab1 a b{ float: right; font-weight: normal; } .tab2{ display: none; text-align: center; } .tab2 img{ width: 120px; margin-top: 20px; } /*modal*/ .modal{ background-color:rgba(0, 0, 0, 0.9)); position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: none; } .modal-content{ background-color: #fff; width: 350px; padding: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 10px; } .modal-content h2{ background-color: #000; color: #fff; padding: 5px; text-align: center; } .modal-content p{ line-height: 1.5em; } .close-modal{ border: 1px solid#000; padding: 3px 7px; float: right; } /*modal*/ $('.open-modal').click(function(){ $('.modal').show() $('.close-modal').click(function(){ $('.modal').hide() }) })모달창이 안떠서요 ,,,뭐때매안뜨는지 아무리 봐도 모르겠서요..,.,.ㅜㅜㅠ
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
추가영상에서 span을 a태그로변경하라하셔서 했는데 이렇케 뜨는게 맞을까요?
<!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"></div> <div class="navi"></div> </header> <div class="slide"> <div></div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <a href="#none"class="active">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a href="#none">핸드폰수리일정안내입니다.<b>2022.07.24</b></a> <a href="#none">핸드폰 택배일정 안내입니다.<b>2022.07.24</b></a> <a href="#none">핸드폰 현금영수증안내입니다.<b>2022.07.24</b></a> <a href="#none">핸드폰 주문시안내입니다.<b>2022.07.24</b></a> <a href="#none">핸드폰 환불및교환 안내입니다.<b>2022.07.24</b></a> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-01.jpg" alt="gallery1"></a> <a href="#none"><img src="images/gallery-02.jpg" alt="gallery2"></a> <a href="#none"><img src="images/gallery-03.jpg" alt="gallery3"></a> </div> </div> </div> </div> <div class="gallery"></div> <div class="shortcut"></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"; .container{ border: 1px solid #000; width: 1200px; margin: auto; } header{ display: flex; justify-content: space-between; } header >div{ border: 1px solid #000; height: 100px; } .header-logo{ width: 200px; } .navi{ width: 600px; } .slide{} .slide >div{ border: 1px solid #000; height: 300px; } .items{ display: flex; } .items >div{ border: 1px solid #333; height: 200px; } .news{ width: 500px; } .gallery{ width: 350px; } .shortcut{ width: 350px; } footer{ display: flex; } footer >div{ border: 1px solid #333; height: 100px; } .footer-logo{ width: 200px; } .copyright{ width: 800px; } .sns{ width: 200px; } /*tab-inner*/ .tab-inner{ width: 95%; margin: auto; } .btn{} .btn a{ display: inline-block; border: 1px solid #000; width: 120px; text-align: center; border-radius: 5px 5px 0 0; padding: 5px; margin-right: -6px; border-bottom: none; margin-bottom: -1px; background-color: #ddd; cursor: pointer; } .btn a.active{ background-color: #fff; } .tabs{} .tabs div{ border: 1px solid #000; height: 155px; padding: 0 10px; } .tab1{ } .tab1 a{ display: block; color: #000; text-decoration: none; border-bottom: 1px solid #333; padding: 4px; } .tab1 a:last-child{ border-bottom: none; } .tab1 a b{ float: right; font-weight: normal; } .tab2{ display: none; text-align: center; } .tab2 img{ width: 120px; margin-top: 20px; } /*tab content*/ $('.btn a:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.btn a:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('active') $(this).siblings().removeClass('active') })추가영상에서 span을 a태그로변경하라하셔서 했는데 브라우저에 공지사항 갤러리 밑에 밑줄이 표시되는데 이렇케 뜨는게 맞을까요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
js작동이 안되는데 머가문제일까요 ㅠㅠ
<!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"></div> <div class="navi"></div> </header> <div class="slide"> <div></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">tab1</div> <div class="tab2">tab2</div> </div> </div> </div> <div class="gallery"></div> <div class="shortcut"></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"; .container{ border: 1px solid #000; width: 1200px; margin: auto; } header{ display: flex; justify-content: space-between; } header >div{ border: 1px solid #000; height: 100px; } .header-logo{ width: 200px; } .navi{ width: 600px; } .slide{} .slide >div{ border: 1px solid #000; height: 300px; } .items{ display: flex; } .items >div{ border: 1px solid #333; height: 200px; } .news{ width: 500px; } .gallery{ width: 350px; } .shortcut{ width: 350px; } footer{ display: flex; } footer >div{ border: 1px solid #333; height: 100px; } .footer-logo{ width: 200px; } .copyright{ width: 800px; } .sns{ width: 200px; } /* tab-content */ .tab-inner{ width: 95%; margin: auto; } .btn{} .btn span{ border: 1px solid #000; display: inline-block; padding: 10px; border-radius: 5px 5px 0 0; margin-right: -6px; background-color: #ddd; width: 100px; border-bottom: none; margin-bottom: -1px; cursor: pointer; } .btn span.active{ background-color: #fff; } .tabs{} .tabs div{ border: 1px solid #000; height: 150px; } .tab1{} .tab2{ display: none; }/*tab content*/ $('.btn span:frist-child').click(function(){ $('.tab1').show() $('.tab2').hide() }) $('.btn span:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() })js가작동이안되는거같아요 ,,, 일단 따라하고있는데 script 소스가 문제인걸까요 ??
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
텝메뉴 색상이 변경이 이상합니당 ㅠㅠ
처음 화면에는 이렇게 잘 뜨는데,갤러리를 누르면 두개 다 흰색으로변경되고 이후에 쭉두 메뉴 모두 흰색텝으로만 뜨는데 왜이러는걸가용?ㅠㅠ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <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="header-logo"> <a href="#none"><img src="images/header-logo.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> <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="slide"> <div> <a href="#none"><img src="images/slide-01.jpg" alt="slide-01"> </a> <a href="#none"><img src="images/slide-02.jpg" alt="slide-02"></a> <a href="#none"><img src="images/slide-03.jpg" alt="slide-03"></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="tab"> <div class="tab1"> <a href="#none">SMS 발송 모바일 서비스 개선작업 <b>2020.01.09</b></a> <a href="#none">휴대폰 인증 서비스 개선 작업 <b>2020.01.07</b></a> <a href="#none">카드사 부분 무이자 할부 이벤트 <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-01.jpg" alt="gallery-01"></a> <a href="#none"><img src="images/gallery-02.jpg" alt="gallery-02"></a> <a href="#none"><img src="images/gallery-03.jpg" alt="gallery-03"></a> </div> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner.jpg" alt="banner"></a> </div> <div class="shortcut"> <a href="#none"><img src="images/shortcut.jpg" alt="shortcut"></a> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/footer-logo.png" alt="footer-logo"> </a> </div> <div class="copy"> 상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장 <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> <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: #333333; margin: 0; font-size: 15px; } a { color: #333333; text-decoration: none; } /* 기본구도잡기 */ .container { /* border: solid 1px red; */ width: 1200px; margin: auto; } header { height: 100px; } header > div { /* border: 1px solid blue; */ height: 100px; } .header-logo { width: 200px; float: left; } .navi { width: 600px; float: right; } .slide {} .slide > div { /* border: 1px solid green; */ height: 300px; } .items { overflow: hidden; } .items > div { /* border: 1px solid pink; */ height: 200px; float: left; box-sizing: border-box; } .news { width: 500px; } .banner { width: 350px; } .shortcut { width: 350px; } footer { overflow: hidden; } footer > div { /* border: 1px solid purple; */ height: 100px; float: left; box-sizing: border-box; } .footer-logo { width: 200px; } .copy { width: 800px; } .sns { width: 200px; } /* 이미지와 텍스트 */ header { position: relative; z-index: 10; } .header-logo { line-height: 130px; } .slide { margin-bottom: 20px; } .footer-logo { line-height: 130px; } .copy { text-align: center; padding-top: 30px; } .sns { padding-top: 20px; text-align: center; } /* 슬라이드 */ .slide { position: relative; width: 1200px; height: 300px; overflow: hidden; } .slide > div { position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; font-size: 0; } @keyframes slide { 0% { top: 0; } 30% { top: 0; } 35% { top: -300px; } 65% { top: -300px; } 70% { top: -600px; } 95% { top: -600px; } 100% { top: 0; } } /* 네비게이션 */ .menu { list-style: none; padding: 0; padding-top: 20px; /* border: 1px solid red; */ } .menu li { /* border: 1px solid #000; */ float: left; width: 25%; box-sizing: border-box; text-align: center; } .menu li > a { border: 1px solid black; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a { background-color: #000; color: #fff; } .sub-menu { background-color: #fff; border: 1px solid black; display: none; } .sub-menu a { display: block; padding: 5px; transition: 0.5s; } .sub-menu a:hover { background-color: #000; color: #fff; } /* 뉴스와 갤러리 텝메뉴 */ .tab-inner { width: 95%; margin: auto; } .btn {} .btn a { border: 1px solid #000; display: inline-block; width: 100px; text-align: center; padding: 5px; border-radius: 5px 5px 0 0; margin-right: -6px; border-bottom: none; margin-bottom: -1px; background-color: #ddd; } .btn a.active { background-color: #fff; } .tab {} .tab1 { border: 1px solid #000; padding: 0 10px; /* display: none; */ } .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 { border: 1px solid #000; height: 169px; text-align: center; padding-top: 20px; box-sizing: border-box; display: none; } .tab2 img { width: 130px; } // 네비게이션 $('.menu li').mouseenter(function(){ $('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $('.sub-menu').stop().slideUp() }) // $('.menu li').mouseenter(function(){ // $(this).children('.sub-menu').stop().slideDown() // }) // $('.menu li').mouseleave(function(){ // $(this).children('.sub-menu').stop().slideUp() // }) // 텝메뉴 $('.btn a:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).sliblings().removeClass('active') }) $('.btn a:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('active') $(this).sliblings().removeClass('active') })
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
선생님처럼 했는데 창이이상하게 그림이 계속 떨어지네요 ,,,
/*tab-inner*/ .tab-inner, .gallery-inner{ width: 95%; margin: auto; } .tab-inner .btn{} .tab-inner .btn span, .gallery-inner .btn span{ border: 1px solid #000; display: inline-block; width: 100px; padding: 5px; text-align: center; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -1px; background-color: #fff; } .tab-inner .tab, .gallery-inner .tab{ border: 1px solid #000; padding: 0 10px; height: 155px; } .tab-inner .tab a { display: block; text-decoration: none; color: #000; border-bottom: 1px solid #333; padding: 4px; } .tab-inner .tab a:last-child{ border-bottom: none; } .tab-inner .tab a b { float: right; font-weight: normal; } .gallery .tab img{ width: 100px; } .gallery .tab{ text-align: center; padding-top: 30px; box-sizing: border-box; }소스는 똑같이한거같은데 사진이 문제인가 저렇케 내려와서요 뭐가 문제일까요 /...???
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
제이쿼리가 작동하지 않는데 이유를 모르겠어요ㅠㅠ
제이쿼리가 작동하지 않는데 이유를 못찾겠습니다 ㅠㅠㅠㅠ... 밑에 누르면 이런게 뜨는데 이거랑 연관이 있는걸까요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
브라켓에서는 a 태그 #none을 해노면 안되는데 비주얼코드에서는 none이안먹히는거같아서요..
사진처럼 링크 된거처럼 보이는데 비주얼코드에서는 #none 해놓으면 안먹히는거같은데 ,,아닌가요 ? 저런경우에는text-decoration:none 을 해야할까요 ? ㅠ
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
beauty 익스텐션이 설치가 안됩니다.
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.질문 하실 때 어떤 유형인지 말씀해주세요. 첨부와같이 나오는데 설치가 안되어도 하나씩 입력하면 되기는 하지만 설치가 안되어도 상관없겠죠?아니면 대체하는 익스텐션이 있는걸까요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
교재와 강의 순서 매치오류
코딩웍스 교수님 안녕하세요!필기시험 합격후 실기 시험 대비하여 수업을 듣고 있는 수강생입니다.저는,섹션 00. 부터 시작해서 섹션01.섹션02.를 수강하고 있는데요.수강하기 전에 미리 섹션13.에 있는 핵심이론 PDF교재를출력해서 준비한 후에 섹션02.수업을 듣고있습니다.그런데 강의 순서와 교재 순서도 맞지 않고,,HTML교재에는 이미지맵, 유튜브다운로드, 멀티미디어, 표만들기, 폼 요소등 더 많은 내용이 실려있는데강의목록에는 보이지않고... 다루지 않는 것 같아서의문이 생겨 질문 남깁니다.교재에는 있지만 강의목록에는 없는 부분들은혼자서 독학해야되는 부분인건가요? 비전공자라서 아예 처음이라 이 강의를 큰맘먹고 결제 후 차근차근 따라가며 실기준비를 하고자했는데강의에서는 다 다루지않아서....어떻게 준비를 해야되는건지 막막합니다. 그리고수업순서는 섹션00부터 차례대로 수강해나가면서실습을 같이 따라하면서 준비하면 실기 합격과 가까워지는 것은 맞는걸까요?? 바쁘신 와중에 질문 읽어주셔서 감사합니다.답변 부탁드립니다. 감사합니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
코딩암기?하는건가요?
웹디자인실기를 보려고하는데요 강의의 코딩하는것들을 여러 유형별로 암기하는건가요?제작하는 과정을 외워질때까지 몇번이고 만들어보면 될까요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
footer에 사진처럼 일자로 되어있는데 똑같이 따라했는데 뭐가문제일까요 ,,
푸터부분에 일자로 되어서 강의처럼 안되는데 뭐가문제일까요 ,,선생님이 하신대로따라했는데 계속 저부분이 안되서 문의드립니다 ...ㅠㅠㅠㅠ
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
필수함수종류에서 마우스엔터대신
■ 질문 남기실 때 꼭! 참고해주세요.마지막이론부분에 필수함수종류에 마우스엔터 마우스리버라고했는데. 마우스오버,마우스아웃으로도 적어도 별다른문제가 생길까요..¿¿- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다.