월 33,220원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[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"> <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>공지사항</span> </div> <div class="tab"> <a href="#none">SNS 발송 서비스 개선작업<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> </div> <div class="gallery">갤러리</div> <div class="banner">배너</div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="sns"></div> </footer> </div> </body> </html> .container { border: 3px solid red; width: 1200px; margin: auto; } header { height: 100px; } header div { border: 1px solid blue; height: 100px; } .header-logo { width: 200px; float: left; } .navi { width: 660px; float: right; } .slide {} .slide div { border: 1px solid green; height: 300px; } .items { overflow: hidden; } .items div { height: 200px; float: left; box-sizing: border-box; } .news { width: 500px; background-color:brown; } .gallery { width: 350px; } .banner { width: 350px; } footer { overflow: hidden; } footer div { border: 1px solid yellow; height: 100px; float: left; box-sizing: border-box; } .footer-logo { width: 200px; } .copyright { width: 800px; } .sns { width: 200px; }현재 작업중인 html이랑 css부분 첨부했습니다.news 클래스쪽 span 공지사항 폰트는 잘 노출이 되는데div class=tab에 있는 a href 5개 문구가 나오지 않습니다.. 그리고 추가적으로 .news에 background-color를 없애고 .items div에 border를 설정하였는데이미지처럼 노출됩니다. 왜 이러는지 알 수 있을까요?
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
모듈 제작하기(레이아웃 관련 질문)
border로 레이아웃(가로고정형, 가로100%, 세로2컬럼) 배치방법이 편해서 그런데flex로 레이아웃 배치하는 방법까지 알아야할까요?아니면 패스해도 되는 부분인가요?웹디자인기능사 취득을 목적으로 강의를 듣고 있습니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
footer 부분이 요번엔 이상합니다. 무엇이 잘못 되었습니까?
footer 부분 전엔 잘 되었는데 요번엔 이상합니다. 무엇이 잘못 되었습니까? float: left; box-sizing: border-box; }했는데도 가로 배치가 되지 않습니다.index.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-header.png" alt="header-logo"> </a> </div> <div class="navi"></div> </header> <div class="slide"> <div></div> </div> <div class="items"> <div class="news"></div> <div class="banner"> <a href="#none"> <img src="images/banner-01.jpg" alt="banner"> </a> </div> <div class="shortcut"> <a href="#none"> <img src="images/banner-02.jpg" alt="shortcut"> </a> </div> </div> <footer> <div class="footer-logo"> <a href="#none"> <img src="images/logo-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"> <img src="images/sns-02.png" alt="sns2"> <img src="images/sns-03.png" alt="sns3"> </a> </div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html>style.css@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{ height: 100px; } header>div{ height: 100px; } .header-logo{ width: 200px; float: left; } .navi{ width: 600px; float: right; } .slide{} .slide>div{ height: 300px; } .items{ overflow: hidden; } .items>div{ height: 200px; float: left; box-sizing: border-box; } .news{ width: 500px; } .banner{ width: 350px; } .shortcut{ width: 350px; } footer{ overflow: hidden; } .footer>div{ height: 100px; float: left; box-sizing: border-box; } .footer-logo{ width: 200px; } .copyright{ width: 800px; } .sns{ width: 200px; } /* imges&text */ .header-logo,.footer-logo{ line-height: 120px; } .copyright{ padding-top: 30px; text-align: center; }
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
메뉴에 hover 했을 때 밑줄효과 유지하는 방법이요!
네비게이션바 연습중입니다.메인 메뉴에 hover했을 때 밑줄 나오게하는 거 까지 했어요.서브메뉴가 펼쳐져있는 상태에서 밑줄이 고정됐으면 좋겠는데어떻게 해야할지를 모르겠어요. <div class="gnb-outer"> <nav> <ul class="gnb"> <li> <a href="#none"></a> <div class="dropdown"> <a href="#none"></a> <a href="#none"></a> </div> </li> <li> <a href="#none"></a> </li> <li> <a href="#none"></a> </li> <li> <a href="#none"></a> </li> <li> <a href="#none"></a> <div class="dropdown"> <a href="#none">Q&A</a> <a href="#none">FAQ</a> </div> </li> <li> <a href="#none"></a> <div class="dropdown"> <a href="#none"></a> <a href="#none"></a> <a href="#none"></a> <a href="#none"></a> <a href="#none"></a> </div> </li> </ul> </nav> </div>.gnb li > a::after { content: " "; display: block; margin-top: 5px; width: 100%; border-bottom: 3px solid #146ebc; transform: scaleX(0); transition: 0.8s; } .gnb li > a:hover::after{ transform: scaleX(1);.gnb li > a::after { content: " "; display: block; margin-top: 5px; width: 100%; border-bottom: 3px solid #146ebc; transform: scaleX(0); transition: 0.8s; } .gnb li > a:hover::after{ transform: scaleX(1); 코드는 이렇게 짠 상태입니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
내부 스타일 서식 관련
index.html 작업 중인데 (강의 25번) 결과물을 봤을 때 container 밑에 있는 div style 서식이 먹히지 않습니다..(display:none;은 아직 보류)(div를 class로 이름을 줄 땐 잘 반영됩니다. 차라리 class로 이름을 줘서 반영하는 게 나을까요?)어디가 문제인지 확인해줄 수 있을까요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
body color는 무엇을 보고 입력해야 합니까?
강의에선 body{ margin: 0; font-size: 15px; background-color: #fff; color: #222328; } a{ color: #222328; text-decoration: none; }로 입력하라고 하셨는데 body color, a color 따로 시험지에 지정 되지 않고 이렇게 입력하면 됩니까?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
갤러리 이미지가 들어 가지 않습니다.?
갤러리 이미지가 들어 가지 않습니다. 어디가 문제?<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>01.최종본제작-가로-고정형(A1타입)</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="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="slide1"></a> <a href="#none"><img src="images/slide-02.jpg" alt="slide2"></a> <a href="#none"><img src="images/slide-03.jpg" alt="slide3"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <a href="#none">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tabs"> <div class="tab1"></div> <div class="tab2"> <a href="#none"> <img src="images/gallery-01.jpg" alt="gallery-01"> </a> </div> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner-01.jpg" alt="banner"></a> </div> <div class="shortcut"> <a href="#none"><img src="images/banner-02.jpg" alt="shortcut"></a> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/logo-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="페이스북"></a> <a href="#none"><img src="images/sns-02.png" alt="애플"></a> <a href="#none"><img src="images/sns-03.png" alt="sns-03"></a> </div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html>
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
참고자료 다운로드 '포토샵-이미지제작-A01(학생-실습용).zip' 파일에 이미지 원본 파일이 없습니다.
"실습파일을 먼저 다운로드 받고 압축을 풀어주세요.실습파일은 참고자료 다운로드에 '포토샵-이미지제작-A01(학생-실습용).zip' 파일을 받으시면 됩니다." 라고 되어 있는데 이미지 원본 파일이 없습니다. 어디서 구합니까?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
DIV에 넣는 것, 헷갈립니다.
.container{}에 작성할 것과 container>div{}에 작성할 것..items{}에 작성할 것과 .items>div{}에 작성할 것. 본 div에 적어야 할지 >div{}에 적어야 할지 헷갈리는 것이 있는데 어떻게 구분하면 됩니까?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
선생님 시험질문입니다.
시험에 font-size 15로 해라는 명령이 존재하나요? 글자 시험문 읽어보니까 글자 크기는 디자인과 형식에 맞게하라고만 되어있고 포인트 얼마로 하라는 명시는 안되어있는거 같은데요
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
전, 교재 받지 않았는데요?
강의 중에 "여러분이 받은 교재에"란 이야기가 자주 나오는데 전, 교재 받지 않았는데 왜?, 제가 수강 신청할 땐 교재 주지 않았습니까?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
이미지슬라드 작동이 안되요;;;
@charset "UTF-8" body{ margin: 0; background-color: #fff; color: #222328; font-size: 15px; } a { text-decoration: none; } .star{} /* headet */ .header-inner{ border: 1px solid red; } .header{ width: 1200px; margin: auto; height: 100px; /*오버플로 주지 않고 헤더는 무조건 높이값 준다.*/ } /*오버플로주면 navi에서 넘친배경 보이지 않게된다.*/ .header > div{ height: 100px; } .header-logo{ width: 200px; float: left; line-height: 130px; /*헤더로고 위에서 130 띄워놓기*/ font-size: 0; } .hnavi{ width: 600px; float: right; } /* content */ .content-inner{} /* silde */ .slide{ width: 1200px; /*슬라이드 가로구역 확보*/ margin: auto; /*슬라이드 구역 중앙배치*/ position: relative; height: 300px; /*포지션값을 주면 위치를 잃어버린다. 따라서 높이값 강제 설정*/ } .slide > div{ position: absolute; width: 3600px; /*이미지 3개 가로 구역 확보*/ font-size: 0; /*이미지 사이 공간 제거*/ top: 0; left: 0; animation: slide 10s linear infinite; } @keyframes slide { 0%{left: 0;} 30%{left: 0;} 35%{left: -1200;} 60%{left: -1200;} 70%{left: -2400;} 95%{left: -2400;} 100%{left: 0;} } .items{ width: 1200px; /*아이템스 가로구역 확보*/ margin: auto; /*구역 중앙 배치*/ overflow: hidden; /*자식요소에 float값 있으니 부모에 오버플로히든 준다*/ } .items > div{ border: 1px solid rebeccapurple; height: 200px; /*높이값 200*/ float: left; /*아래 설정된 구역 좌로 정렬*/ box-sizing: border-box; /*정렬된 박스를 구역내에 들어오게 함*/ } .news{ width: 500px; } .gallert{ width: 350px; } .banner{ width: 350px; } /* footer */ .footer-inner{ border: 1px solid red; } .footer{ width: 1200px; margin: auto; overflow: hidden; /*자식요소에 float값 있으니 부모에 오버플로히든 준다*/ } .footer > div{ border: 1px solid red; height: 100px; float: left; box-sizing: border-box; } .copy{ width: 1000px; } .copy div{ /*copy구엿을 2단으로 나누기 위해 높이값 50만 준다.*/ border: 1px solid red; height: 50px; } .family-site{ width: 200px; } <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>산업대학교</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="star"> <div class="header-inner"> <div class="header"> <div class="header-logo"> <a href="#none"><img src="images/logo-header.png" alt="로고"></a> </div> <div class="navi"></div> </div> </div> <div class="content-inner"> <div class="slide"> <div> <a href="#none"><img src="images/slide-01.jpg" alt="슬라이드01"></a> <a href="#none"><img src="images/slide-02.jpg" alt="슬라이드02"></a> <a href="#none"><img src="images/slide-03.jpg" alt="슬라이드03"></a> </div> </div> <div class="items"> <div class="news"></div> <div class="gallert"></div> <div class="banner"> <a href="#none"><img src="images/banner.jpg" alt="배너"></a> </div> </div> </div> <div class="footer-inner"> <div class="footer"> <div class="copy"> <div></div> <div></div> </div> <div class="family-site"></div> </div> </div> </div> <!-- scrips --> <script src="script/jquery-1.12.4.js"></script> <script src="script/script.js"></script> </body> </html>
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
각 회차 문제지 파일 어디서 다운 받습니까?
문제 출력해서 보고 하려고 하는데 각 회차 문제지 파일 어디서 다운 받습니까?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
float:left;와 display:flex; 사용법?
어떤 때 float:left;를 사용하고 어떨 때 display:flex;를 사용합니까? 두 중 아무 것이나 편한 것 아무 때나 사용해도 됩니까?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
선생님 슬라이드 위 공간이 자꾸 뜹니다;;;
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JUST쇼핑몰</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <!-- star --> <div class="star"> <!-- header --> <div class="header"> <div class="header-logo"> <a href="#none"><img src="images/logo-header.png" alt="logo-header"></a> </div> <div class="navi"></div> </div> <!-- slide --> <div class="slide"> <div> <a href="#none"><img src="images/slide-01.jpg" alt="slide01"></a> <a href="#none"><img src="images/slide-02.jpg" alt="slide02"></a> <a href="#none"><img src="images/slide-03.jpg" alt="slide03"></a> </div> </div> <!-- items --> <div class="items"> <div class="news"></div> <div class="banner"> <a href="#none"><img src="images/banner-01.jpg" alt="banner-01"></a> </div> <div class="now"> <a href="#none"><img src="images/banner-02.jpg" alt="banner-02"></a> </div> </div> <!-- footer --> <div class="footer"> <div class="footer-logo"> <a href="#none"><img src="images/logo-footer.png" alt="logo-footer"></a> </div> <div class="copy"> <p> 상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장 <br>사업장주소 : 서울특별시 강남구 테헤란로 123-56 </p> </div> <div class="sns"> <a href="#none"><img src="images/sns-01.png" alt="sns-01"></a> <a href="#none"><img src="images/sns-02.png" alt="sns-02"></a> <a href="#none"><img src="images/sns-03.png" alt="sns-03"></a> </div> </div> </div> <!-- script --> <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; } .star{margin: auto; border: 1px solid red; width: 1200px;} /* header */ .header{ height: 100px; } .header > div{ height: 100px; } .header-logo{ width: 200px; float: left; padding-top: 30px; } .navi{ width: 600px; background-color: aqua; float: right; } /* slide */ .slide{ position: relative; width: 1200px; height: 300px; overflow: hidden; /*하위메뉴에 위치값이 존재함으로 오버플로 준다*/ margin-bottom: 20px; /*items 부분의 윗부분 공간을 주기위해*/ } .slide > div{ height: 300px; top: 0; left: 0; position: absolute; font-size: 0; animation: slide 10s linear infinite; } @keyframes slide{ 0%{top: 0;} 30%{top: 0;} 35%{top: -300px;} 65%{top: -300px;} 70%{top: -600px;} 95%{top: -600px;} 100%{top: 0;} } /* items */ .items{overflow: hidden;} .items > div{ height: 200px; float: left; box-sizing: border-box; } .news{ width: 500px; background-color: brown; } .banner{width: 350px;} .now{width: 350px;} /* footer */ .footer{overflow: hidden;} .footer > div{ height: 100px; float: left; box-sizing: border-box; } .footer-logo{ width: 200px; padding-top: 30px; } .copy{ width: 800px; } .copy p{ text-align: center; padding: 0 30px; padding-top: 10px; } .sns{ width: 200px; padding-top: 30px; padding-left: 10px; }
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
네이게이션이 안보여요 쌤 ㅠㅠㅠ
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JUST쇼핑몰</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="star"> <!-- header --> <div class="header"> <div class="header-logo"> <a href="#none"><img src="images/logo-header.png" alt="헤더로고"></a> </div> <div class="navi"> <div></div> </div> </div> <!-- slide --> <div class="slide"> <div> <a href="#none"><img src="images/slide-01.jpg" alt="슬라이드01"></a> <a href="#none"><img src="images/slide-02.jpg" alt="슬라이드02"></a> <a href="#none"><img src="images/slide-03.jpg" alt="슬라이드03"></a> </div> </div> <!-- items --> <div class="items"> <div class="tab"> <div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner-01.jpg" alt="배너01"></a> </div> <div class="now"> <a href="#none"><img src="images/banner-02.jpg" alt="배너02"></a> </div> </div> <!-- footer --> <div class="footer"> <div class="footer-logo"> <a href="#none"><img src="images/logo-footer.png" alt="푸터로고"></a> </div> <div class="copy"> <p> 상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장<br> 사업장주소 : 서울특별시 강남구 테헤란로 123-56 </p> </div> <div class="sns"> <a href="#none"><img src="images/sns-01.png" alt="sns01"></a> <a href="#none"><img src="images/sns-02.png" alt="sns02"></a> <a href="#none"><img src="images/sns-03.png" alt="sns03"></a> </div> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "UTF-8"; .star{ width: 1200px; margin: auto; } .star div{} /* header */ .header{height: 100px;} .header > div{} .header-logo{ width: 200px; float: left; padding-top: 30px; } .navi{} .navi div{ width: 600px; float: right; background-color: black; } /* slide */ .slide{ position: relative; width: 1200px; height: 300px; } .slide div{ font-size: 0; } .slide div a{ animation: slide 10s linear infinite; position: absolute; top: 0; left: 0; } .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;} 5% {opacity: 1;} 35% {opacity: 1;} 40% {opacity: 0;} 100% {opacity: 0;} } /* items */ .items{overflow: hidden;} .items div{ height: 200px; float: left; box-sizing: border-box; } .tab{} .tab > div{ width: 500px; background-color: aqua; } .banner{ width: 350px; } .now{ width: 350px; } /* footer */ .footer{overflow: hidden;} .footer div{ height: 100px; float: left; box-sizing: border-box; } .footer-logo{ width: 200px; padding-top: 30px; } .copy{ width: 800px; text-align: center; padding-top: 7px; } .sns{ width: 200px; padding: 20px; } 왜죠
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
제이쿼리도 슬라이드 업만 되요 ㅠㅠㅠ
// navi $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').slideDown() }) $('menu li').mouseleave(function(){ $(this).children('.sub-menu').slideUp() })@charset "UTF-8"; .star{ width: 1000px; border: 1px solid red; margin: auto; overflow: hidden; } .star > div{ float: left; box-sizing: border-box; } .left{ width: 200px; } .right{ width: 800px; } .header{ height: 650px; border: 1px solid blue; } .header div{ } .header-logo{ width: 200px; height: 50px; background-color: aqua; } /* navi */ .navi{ width: 200px; } .menu{ padding: 0; list-style: none; } .menu li{ text-align: center; } .menu li > a{ border: 1px solid #000; display: block; padding: 5px; width: 90%; margin: auto; text-decoration: none; } .sub-menu{ border: 1px solid #000; padding: 5px; width: 90%; margin: auto; display: none; } .sub-menu a{ display: block; text-decoration: none;} .sub-menu a:hover{ background-color: #000; color: #fff; } .menu li > a:hover{ background-color: #000; color: #fff; } .slide{ height: 350px; width: 800px; background-color: bisque; } .items{ height: 200px; width: 800px; background-color: blue; } .footer{ height: 100px; width: 800px; background-color: black; } <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/com.css"> </head> <body> <div class="star"> <div class="left"> <div class="header"> <div class="header-logo"></div> <div class="navi"> <ul class="menu"> <li> <a href="#none">MENU-1</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">MENU-2</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">MENU-3</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">MENU-4</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> </ul> </div> </div> </div> <div class="right"> <div class="slide"></div> <div class="items"></div> <div class="footer"></div> <script src="script/jquery-1.12.4.js"></script> <script src="script/com.js"></script> </div> </div> </body> </html>
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
선생님 네비게이션 에 디스플레이 블럭이 안먹혀요 ㅠㅠ
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/com.css"> </head> <body> <div class="star"> <div class="left"> <div class="header"> <div class="header-logo"></div> <div class="navi"> <ul class="menu"> <li> <a href="#none">menu-1</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">menu-2</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">menu-3</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> <li> <a href="#none">menu-4</a> <div class="sub-menu"> <a href="#none">sub-menu1</a> <a href="#none">sub-menu2</a> <a href="#none">sub-menu3</a> <a href="#none">sub-menu4</a> </div> </li> </ul> </div> </div> </div> <div class="right"> <div class="slide"></div> <div class="items"></div> <div class="footer"></div> </div> </div> </body> </html>@charset "UTF-8"; .star{ width: 1000px; border: 1px solid red; margin: auto; overflow: hidden; } .star div{ float: left; box-sizing: border-box; } .left{ width: 200px; } .right{ width: 800px; } .header{ height: 650px; border: 1px solid blue; } .header div{ } .header-logo{ width: 200px; height: 50px; background-color: aqua; } .navi{ width: 200px; height: 550px; } .menu{ padding: 0; list-style: none; } .menu li{ text-align: center; } .menu li a{} .sub-menu{} .sub-menu a{ display: block; } .slide{ height: 350px; width: 800px; background-color: bisque; } .items{ height: 200px; width: 800px; background-color: blue; } .footer{ height: 100px; width: 800px; background-color: black; }왜 블럭이 안먹히나요;;; 실행하면 메뉴가 뒤죽박죽이 되는데요 ㅠㅠ
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
선생님 JS쿼리 수험자제공파일 없나요?
ㅠㅠ
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
탭메뉴 제이쿼리 실행이 안대요 ㅠㅠㅠ
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/com.css"> </head> <body> <div class="star"> <div class="header"> <div class="header-logo"></div> <div class="navi"></div> </div> <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="banner"></div> <div class="now"></div> <div class="footer"> <div class="footer-logo"></div> <div class="copy"></div> <div class="sns"></div> </div> </div> <script src="script/jquery-1.12.3.js"></script> <script src="script/com.js"></script> </body> </html> css @charset "UTF-8"; .star{ width: 1200px; border: 1px solid red; margin: auto; } .header{ overflow: hidden; } .header > div{ height: 100px; box-sizing: border-box; } .header-logo{ float: left; width: 200px; background-color: aqua; } .navi{ float: right; width: 600px; background-color: blue; } .slide{ } .slide > div{ height: 300px; background-color: blueviolet; } .items{ overflow: hidden; } .items > div{ height: 200px; float: left; box-sizing: border-box; } .news{ width: 400px; } .tab-inner{ width: 97%; margin: auto; } .btn span{ border: 1px solid #000; display: inline-block; width: 120px; text-align: center; padding: 3px; border-radius: 5px 5px 0 0; margin-right: -6px; background-color: #ddd; cursor: pointer; border-bottom: none; margin-bottom: -1px; } .btn span.active{ background-color: #fff; } .tabs{} .tabs div{ border: 1px solid #000; height: 155px; } .tab1{} .tab2{ display: none; } .banner{} .now{ width: 400px; background-color: black; } .footer{ overflow: hidden; } .footer > div{ height: 100px; float: left; box-sizing: border-box; } .footer-logo{ width: 200px; background-color: black; } .copy{ width: 800px; background-color: blueviolet; } .sns{ width: 200px; background-color: burlywood; } js $('.btn span:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('acvive') }) $('.btn span:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('active') $(this).siblings().removeClass('acvive') })