월 33,220원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
선생님 ㅜ 아무리 해도 페밀리 사이트 보더가 안뜹니다ㅠㅠ
똑같이 따라했는데도 자꾸 안떠요ㅠ 어떻게 해야할까요 <div class="container"> <div class="header-inner"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> </div> <div class="content-inner"> <div class="slide"> <div></div> </div> <div class="items"> <div class="news"></div> <div class="gallery"></div> <div class="banner"></div> </div> </div> <div class="footer-inner"> <footer> <div class="copyright"> <div></div> <div></div> <div class="family-site"></div> </div> </footer> </div> </div> @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 black; background-color: #eee; } header { height: 100px; width: 1200px; margin: auto; } header > div { height: 100px; } .header-logo { background-color: #333; width: 200px; float: left; } .navi { background-color: #333; width: 600px; float: right; } .content-inner {} .slide { width: 1200px; margin: auto; height: 300px; background-color: #ccc; } .slide > div {} .items { width: 1200px; margin: auto; } .items > div { height: 200px; float: left; } .news { width: 500px; background-color: #bbb; } .gallery { width: 350px; background-color: #666; } .banner { width: 350px; background-color: #888; } .footer-inner { background-color: #eee; clear: both; } footer { width: 1200px; margin: auto; overflow: hidden; } footer > div { height: 100px; float: left; } .copyright { width: 1000px; background-color: #777; } .copyright div { /* border: 1px solid #fff;*/ height: 50px; } .family-site { width: 200px; background-color: #000; }
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
모달 레이어팝업과 레이어팝업
공개된 실기시험문제 종류중에 모달레이어팝업과 레이어팝업이 있는데PDF이미지도 명암이 달라서 질문합니다. 다른거 손댈필요없이 CSS .modal 에서 배경색만 빼주면 될까요?? 그리고 CSS link건 다음 type="text/css" 꼭 넣어줘야 하는지 궁금합니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
블라켓츠 바탕화면
블라켓츠에서 바탕화면 어둡게 변경은 어떻게 해야되나요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
긴급 질문 - css 유효성 검사 오류
다음과 같이 에러가 생기는데 괜찮은 건지 확인부탁드립니다. <style.css> 소스입니다. @charset 'utf-8'; body{ margin:0; background-color: #fff; color:#222328; font-size:15px; } a{ color:#222328; text-decoration: none; } .container{ width:1000px; } .container > div{ float:left; box-sizing: border-box; } .left{ width:200px; } header{ position:relative; z-index:10; } header > div { } .header-logo{ height:100px; line-height: 130px; } .navi{ height:450px; } .right{ width:800px; } .right > div{ } .slide{ } .slide > div{ height:350px; } .items{ overflow:hidden; } .items > div{ border:1px solid pink; height:200px; float:left; box-sizing: border-box; } .content{ width:300px; } .gallery{ width: 300px; } .banner{ width: 200px; } footer{} footer > div{ float:left; box-sizing: border-box; height:100px; } .copyright{ width:600px; text-align: center; padding-top:40px; } .footer-inner{ width:200px; } .footer-inner div { height: 50px; box-sizing: border-box; text-align: center; } .footer-inner div:nth-child(1){ padding-top: 10px; } .footer-inner div:nth-child(2){ padding-top: 5px; } /* Nabigation */ .menu{ padding:0; list-style: none; position:relative; width:90%; margin: auto; text-align: center; /*왼쪽여백 줘야하는데...margin:auto; */ /*메뉴 밑 부분에 여백이 없어야하는데 */ } .menu li{ box-sizing: border-box; } .menu li > a{ display:block; padding:10px; border:1px solid black; } .menu li:hover > a{ background-color: #000; color:#fff; } .submenu{ border:1px solid black; margin: auto; display:none; position:absolute; top:0; left:100%; width:100%; height:200px; background-color: #fff; } /*넓어야되는데 padding:5px;*/ .submenu > a { display:block; background-color: #fff; padding:5px; } .submenu > a:hover{ background-color: #000; color:#fff; } /* slide */ .slide{ position:relative; } .slide > div a{ position:absolute; left:0; top: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;} 5%{opacity:1;} 35%{opacity:1;} 40%{opacity:0;} 100%{opacity:0;} } /* 공지사항 & gallery */ .tab-inner{ width:97%; margin:auto; } .btn{} .btn span{ border:1px solid pink; display:inline-block; width:100px; text-align: center; border-radius:5px 5px 0 0; border-bottom:none; margin-bottom: -1px; background-color: #fff; } .tab1{ border:1px solid black; padding-bottom: 10px; } .tab2 { border:1px solid black; padding-bottom: 40px; } .tab1 a{ display:block; border-bottom: 1px solid black; } .tab1 a:last-child{ border-bottom: none; } .tab1 a em { font-style: normal; } .tab1 a b{ float:right; font-weight:normal; } .tab2{} .tab2 a{ display:inline-block; } .tab2 a img{ width:90px; padding-top:40px; text-align: center; } /* Modal */ .modal{ position:absolute; width:100%; height:100%; left:0; top:0; background-color: rgba(0, 0, 0, 0.42); display:none; } .modal-content{ position:absolute; left:50%; top:50%; width:400px; height:450px; transform:translate(-50%,-50%); background-color: #fff; border-radius:10px; padding:20px; } .modal-content h2{ background-color: #000; color:#fff; text-align: center; font-weight:normal; padding:5px 10px; } .modal-content p{} .close-modal{ float:right; border:1px solid black; width:60px; height:30px; text-align: center; padding:5px 10px; font-size:13px; }
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
선생님 ㅜ 슬라이드 위에 알수없는 마진이 남습니다
사진에 보이는것처럼 위쪽에 마진이 남아요ㅠ 왜 이런걸까요 <div class="container"> <header> <div class="header-logo"> <a href="#none"><img src="images/logo-a1-header.png" alt="header logo"></a> </div> <div class="navi"> <div class="tab-inner"></div> </div> </header> <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> <div class="banner"> <a href="#none"><img src="images/banner-a1-01.jpg" alt="banner"></a> </div> <div class="shortcut"> <a href="#none"><img src="images/banne-a1-02.jpg" alt="shortcut"></a> </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"> 상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장 <br>사업장주소 : 서울특별시 강남구 테헤란로 123-56 </div> <div class="sns"> <a href="#none"><img src="images/sns-01.png" alt="sns1"></a> <a href="#none"><img src="images/sns-02.png" alt="sns2"></a> <a href="#none"><img src="images/sns-03.png" alt="sns3"></a> </div> </footer> </div> @charset 'utf-8'; .container { border: 1px solid #000; width: 1200px; margin: auto; } header { height: 100px; } header > div { height: 100px; } .header-logo { /* background-color: #bbb;*/ width: 200px; float: left; } .navi { background-color: #ccc; width: 600px; float: right; } .slide { height: 300px; } .slide > div { height: 300px; /* background-color: #ccc;*/ } .items {} .items > div { height: 200px; float: left; } .news { width: 500px; background-color: gray; } .banner { width: 350px; background-color: #333; } .shortcut { width: 350px; background-color: gray; } footer { height: 100px; clear: both; } footer > div { height: 100px; float: left; } .footer-logo { width: 200px; /* background-color: #444;*/ } .copyright { width: 750px; /* background-color: #ccc;*/ } .sns { width: 250px; /* background-color: #555;*/ } /* 이미지랑 텍스트 */ .header-logo, .footer-logo { margin-top: 30px; } .copyright { text-align: center; margin-top: 30px; } .sns { line-height: 130px; 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; } 60% { top: -300px; } 70% { top: -600px; } 95% { top: -600px; } 100% { top: 0; } }
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
공지사항 밑줄이 뭉치는 현상
말줄임표 때문에 a를 em이랑 b로 나눴는데 갑자기 border-bottom이 이렇게 뭉쳐서 뜨네요ㅠㅠ
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
크로스브라우징 체크
수험장에서는 크로스브라우징을 수험자 자리에서 못하고 감독관 자리에서 같이 확인해야 하죠~?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
웹디자인기능사 실기 요구사항 질문
요구사항중에 웹페이지를 제작 후 5mb 용량이 초과되면 실격처리가 된다고 하셨는데, 제작한 index.html의 용량을 뜻하는건가요? 아니면 index.html을 포함한 만든 이미지파일, 스크립트파일,css파일 전부 합쳐서 5mb를 넘으면 안되는건가요~?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
font-size: 0 ; CSS 적용이 안될때 확인해야되는부분은 어떤 것인가요?
안녕하세요 폰트사이즈 0 CSS 적용이 안되는 이유는 무엇인가요?? @charset 'utf-8'; body { margin: 0; font-size: 12px; color: #222; line-height: 1.6em; background-color: #fff; } a { text-decoration: none; color: #222; } .container { border: 1px solid red; width: 1200px; margin: auto; } header { /*overflow: hidden;*/ height: 100px; position: relative; width: 1200px; } 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; } .items { overflow: hidden; } .items > div { border: 1px solid pink; height: 200px; float: left; box-sizing: border-box; } .news { width: 400px; } .gallery { width: 400px; } .shortcut { width: 400px; } footer { overflow: hidden; } footer > div { border: 1px solid blue; height: 100px; float: left; box-sizing: border-box; } .family-site { width: 200px; } .copyright { width: 1000px; } .copyright div { border: 1px solid green; height: 50px; } /*탭콘텐츠*/ .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; text-align: center; padding: 5px; border-radius: 5px 5px 0 0; border-bottom: none; background-color: #fff; margin-bottom: -1px; } .tab-inner .tabs, .gallery-inner .tabs{ border: 1px solid #000; padding: 0 5px; height: 150px; } .tab-inner .tabs a{ display: block; padding: 2px; border-bottom: 1px solid #333; } .tab-inner .tabs a:last-child{ border-bottom: none; } .tab-inner .tabs a b{ float: right; font-weight: normal; } .gallery .tabs { text-align: center; padding-top: 20px; box-sizing: border-box; } .gallery .tabs img{ width: 110px; } /*네비*/ .menu{ list-style: none; padding: 0; margin-top: 50px; } .menu li{ width: 25%; float:left; text-align: center; box-sizing: border-box; } .menu li > a { border: 1px solid #000; display: block; padding: 5px; background-color: #fff; transition: 0.5s; color: #000; } .menu li:hover > a{ background-color: #000; color: #fff; } .sub-menu{ display: none; } .sub-menu a{ display: block; padding: 5px; transition: 0.5s; color: #fff; background-color: #000; } .sub-menu a:hover{ background-color: #fff; color: #000; } .sub-back { background-color: #000; height: 150px; width: 1200px; position: absolute; right: 0; top: 100%; z-index: -1; display: none; } /*세로 슬라이드*/ .slide{ position: relative; width: 1200px; height: 300px; } .slide div{ border: 5px solid red; position: absolute; font-size: 0; top: 0; left: 0; } @keyframes slide { 0%{} 30%{} 35%{} 65%{} 70%{} 95%{} 100%{} }
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
웹디자인기능사 공개문제 질문
웹디자인기능사 실기 공개문제를 읽어보다가 궁금한 점이 생겨서 질문드립니다 폴더에 제공된 로고를 포토샵을 통해 컬러를 변경해서 넣어야 하는건 이해가 되는데요, 가로세로 비율을 유지해야한다는 내용이 이해가 잘 안가서요..! 200x40 크기로 만들면 안되는건가요..?
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
크로스 브라우징 체크
혹시 시험장에 인터넷이 안되는걸로 알고있는데 체크가 가능할까요??
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
선생님 혹시 지금 쓰고계신 이미지 어디서 다운받나요?
이미지가 없어서 못하고있는데 이미지는 어디서 다운받을수 있을까요?ㅠ
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
CSS 방식 / 제이쿼리 방식
유의사항을 보면 Javascript(jQuery), CSS 중 하나 이상의 방법을 이용하여 제작하라고 되어 있는데 제이쿼리 안 쓰고 이전 강의들에서 가르쳐주신 것처럼 CSS만 사용해서 만들어도 괜찮은 거 맞나용?? 둘 중 어느 방식이 더 좋은지 궁금합니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
왼쪽드롭다운네비게이션
삭제된 글입니다
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
공지사항 텍스트 넘침 & items영역 바로가기 줄바뀜
우선 contents라고 이름 붙인 공지사항, 갤러리, 바로가기 영역에서 바로가기 부분이 사진처럼 아래칸으로 내려갔는데 이유를 모르겠어요.(footer도 사라진 것 같아요.) 두번째로, 공지사항 텍스트가 길어서 중간에 자르는 코드를 강의 따라 썼는데, 제대로 되지 않습니다 ㅜㅜ
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
사진처럼 되는 이유
영상에서는 메뉴에 있는 흰색 배경에 맞춰서 검은색 선이 생기던데 빨간 표시한 부분에 검은색 선이 흰 배경에 가려지고 있는 이유가 뭘까요? (코드는 댓글 첨부)
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
문제점이 보이지않습니다..ㅜㅜ
미리보기 화면에는 탭안에 a태그한 텍스트가 보이지않는데 왜그런걸까요.. 두세번 다시봐도 오류를 찾지못해서 글올립니다 감사합니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
서브메뉴 a 개수가 다를 때 서브메뉴의 크기 지정해주는 방법이 궁금합니다.
대한은행이나 유진건설같은 문제의 경우 서브메뉴의 개수가 다를 때에는 코드를 작성하면 위처럼 개수가 부족한 부분이 배경이 채워지지 않는데 혹시 이 부분을 해결할 수 있는 방법이 있을까요? sub-back을 주는 방법도 생각해봤는데 더 간단한 방법이 있는지 궁금합니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
css 오류났는데 이유를 모르겠습니다...ㅜㅜ
컨텐츠이너에 잡혀야 할 .items 가 자꾸 푸터이너에 잡힙니다...ㅜhtml 확인해봤는데 문제는 없었고css에 문제가 있는것 같은데 저는 모르겠어요.. 확인해주세요ㅠ 밑에 달겠습니다
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
모달이 작동이 안됩니다..ㅠㅠ
html <!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.jpg" alt="header.lg"></a></div> <div class="navi"> <div 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> </div> </div> </header> <div class="slide"> <div> <a href="#none"><img src="images/Slide01.jpg" alt="slide01"></a> <a href="#none"><img src="images/Slide02.jpg" alt="slide02"></a> <a href="#none"><img src="images/Slide03.jpg" alt="slide03"></a> </div> </div> <div class="contents"> <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-modal" href="#none">SMS 발송 모바일 서비스 개선작업 안내입니다.<b>2020.01.09</b></a> <a href="#none">휴대폰 인증 서비스 개선 작업 기간 연장합니다.<b>2020.01.09</b></a> <a href="#none">카드사 부분 무이자 할부 이벤트 2월 3일까지 혜택<b>2020.01.09</b></a> <a href="#none">올앳 시스템 작업 안내<b>2020.01.09</b></a> <a href="#none">휴대폰 결제 시스템 작업이 완료되었습니다.<b>2020.01.09</b></a> </div> <div class="tab2">tab~~~2</div> </div> </div> </div> <div class="banner"></div> <div class="shortcut"></div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/f-logo.jpg" alt="footer-logo"></a> </div> <div class="copy"></div> <div class="sns"> <a href="#none"><img src="images/sns1.jpg" alt="face book"></a> <a href="#none"><img src="images/sns2.jpg" alt="twt"></a> <a href="#none"><img src="images/sns3.jpg" alt="instagram"></a> </div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>SNS비회원주문하기 종료 안내</h2> <br> <p>안녕하세요, JUST 쇼핑몰 MD 홍길동입니다. 안타깝게도 SNS비회원 주문하기 서비스가 한달 뒤 종료될 예정입니다. 회원가입없이 SNS계정을 이용해 그동안 제품주문을 하실수 있었는데, 금번 강화된 개인정보보호법 시행령 제 9조 (부칙 3조 3항)에 의거, SNS를 이용한 상품 주문/결제등이 근래에 많은 보안잇슈로 문제가 되고 있음에 다라 KISA의 권고조치의 일환으로 했습니다. 따라서, 한달뒤인 2019.03.10 이후 모든 비회원 고객님들께서는 회원가입으로 전환 후 실명인증이 되어야 하며, 이는 모든 쇼핑몰/오픈마켓등의 전자상거래서비스의 공통된 사항이라는 점을 안내해드립니다.</p> <a class="close-modal" href="#none">닫기</a> </div> </div> <script src="script/jquery-3.6.0.min.js"></script> <script src="script/custom.js"></script> </body> </html> css *{ margin: 0; text-decoration: none; list-style: none; color: #000; } /*layout*/ .container{ width: 1200px; /* border: 1px solid #000;*/ margin: auto; box-sizing: border-box; } .container > div{} header{ height: 100px; box-sizing: border-box; position: relative; z-index: 10; } header > div{ float: left; height: 100px; box-sizing: border-box; } .header-logo{ width: 200px; border: 1px solid #000; line-height: 8; } .navi{ width: 1000px; border: 1px solid #000; } .slide{ height: 300px; border: 1px solid #000; } .slide > div{} .contents{ overflow: hidden; } .contents > div { height: 200px; float: left; border: 1px solid #000; box-sizing: border-box; } .news{ width: 500px; } .banner{ width: 350px; } .shortcut{ width: 350px; } footer{ overflow: hidden; } footer > div{ height: 100px; float: left; border: 1px solid #000; box-sizing: border-box; padding:30px 0 0 15px; } .footer-logo{ width: 200px; } .footer-logo img{ margin-left: -15px; } .copy{ width: 800px; } .sns{ width: 200px; } /*layout*/ /*slide*/ .slide{ height: 300px; position: relative; overflow: hidden; } .slide > div{ position: absolute; font-size: 0; 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;} 0%{top: 0;} } /*slide*/ /*navi*/ .menu{ padding-top: 30px; border: 1px solid #000; width: 600px; float: right; box-sizing: border-box; } .menu li{ width: 25%; float: left; text-align: center; } .menu li > a{ display: block; border: 1px solid #000; width: 100%; font-size: 18px; padding: 5px 0 5px 0; transition: 0.5s; } .menu li:hover > a{ background-color: #000; color: #fff; } .sub-menu{ display: none; } .sub-menu a{ display: block; padding: 5px; background-color: #fff; transition: 0.5s; } .sub-menu a:hover{ background-color: #000; color: #fff; } /*navi*/ /*modal*/ .modal{ background-color: rgba(0, 0, 0, 0.15); position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; } .modal-content{ padding: 20px; width: 350px; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .close-modal{ float: right; padding: 10px; font-weight: 600; } /*modal*/ /*tab contents*/ .tab-inner{} .btn{ } .btn a.active{ background-color: #fff; } .btn a{ border: 1px solid #000; display: inline-block; width: 150px; padding: 5px; text-align: center; margin-left: -6px; background-color: #ddd; border-radius: 10px 10px 0 0; margin-bottom: -1px; border-bottom: none; } .btn a:nth-child(1){ margin-left: 1px; } .tabs{} .tabs > div{ height: 160px; border: 1px solid #000; } .tab1{ } .tab1 a{ display: block; padding: 5px; } .tab1 b{ float: right; } .tab2{ display: none; } /*tab contents*/ js /*navi*/ $('.menu li').mouseenter(function(){ $('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $('.sub-menu').stop().slideUp() }) /*navi*/ /*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') }) /*tab content*/ /*modal*/ $('.open-modal').click(function(){ ('.modal').fadeIn() }) $('.close-modal').click(function(){ ('.modal').fadeout() }) /*modal*/