월 33,220원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
메뉴에 padding-top을 주면 계단식으로 변합니다.
.menu 부분에 padding-top 값을 부여하면 계단식으로 변하는데 어떤 부분이 잘못 되었을까요? 도움 주시면 감사하겠습니다 @charset 'utf-8'; body { margin: 0; background-color: #fff; color: #222328; font-size: 15px; } a { color: #222328; text-decoration: none; } .container {} .header-inner { border: 1px solid red; } header { height: 100px; width: 1200px; margin: auto; position: relative; z-index: 10; } header > div { height: 100px; } .header-logo { line-height: 130px; width: 200px; float: left; } .navi { width: 600px; float: right; margin-right: 20px; } .content-inner {} .slide { width: 1200px; margin: auto; margin-bottom: 20px; } .slide > div { border: 1px solid blue; height: 300px; } .items { width: 1200px; margin: auto; overflow: hidden; } .items > div { height: 200px; float: left; box-sizing: border-box; } .news { width: 425px; } .gallery { width: 425px; } .banner { width: 350px; } .banner img { width: 95%; } .footer-inner { border: 1px solid green; } footer{ width: 1200px; margin: auto; overflow: hidden; } footer > div { border: 1px solid yellow; height: 100px; float: left; box-sizing: border-box; } .copyright { width: 1000px; } .copyright div { border: 1px solid #000; height: 50px; } .family-site{ width: 200px; } /* Slide */ .slide { position: relative; height: 300px; width: 1200px; overflow: hidden; } .slide > div { width: 100%; width: 3600px; font-size: 0; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; } @keyframes slide { 0% { left: 0; } 30% { left: 0; } 35% { left: -1200px; } 65% { left: -1200px; } 70% { left: -2400px; } 95% { left: -2400px; } 100% { left: 0; } } /* News & Gallery */ .tab-inner { width: 95%; margin: auto; } .btn {} .btn span { border: 1px solid black; display: inline-block; width: 100px; text-align: center; padding: 5px; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -1px; background-color: #fff; } .tab1, .tab2 { border: 1px solid black; padding: 0 15px; height: 150px; } .tab1 a { display: block; padding: 5px; border-bottom: 1px solid black; } .tab1 a:last-child { border-bottom: none; } .tab1 a b { float: right; font-weight: normal; } .tab2 { text-align: center; } .tab2 img { width: 120px; padding-top: 25px; } /* Navigation */ .menu { list-style: none; padding: 0; padding-top: 55px; } .menu li { float: left; box-sizing: border-box; width: 25%; text-align: center; } .menu li > a { border: 1px solid #000; display: block; padding: 5px; } .sub-menu { border: 1px solid black; background-color: #fff; } .sub-menu a { display: block; padding: 5px; color: #fff; } .sub-back { width: 1200px; height: 140px; background-color: #000; position: absolute; left: 0; top: 100%; z-index: -1; }
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
시험전 궁금한 부분!
질문1) 공지사항 문안 뒷부분(날짜) 잘려서 보이는 이유 (아래 사진에 빨간색 동그라미 부분) 질문2) Copyright 문안 줄바꿈 기준 가로형 레이아웃의 경우는 .copyright 의 width가 넓어서 상관없는데 세로형 레이아웃의 경우 줄바꾸기가 사진과 같이 애매해지는데 아무데나 줄바꿈 해도 되는지 혹은 폰트사이즈를 줄여도 상관없는지 궁금해요! 폰트사이즈는 최소사이즈가 따로 정해져있을까요? (아래 사진에 파란색 동그라미 부분) 질문3) 혼자 한번 해보았는데 전체적으로 문제 없는지 궁금해요! 질문4) 곧 시험인데 추가로 주의할만한 사항 따로 있을까요? html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Vallery Festival</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> <div class="navi"> <ul class="menu"> <li> <a href="#none">축제소개</a> <div class="sub-menu"> <a href="#none">Festival소개</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> <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> </header> </div> <div class="right"> <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"> <span>공지사항</span> </div> <div class="tab1"> <a class="open-modal" href="#none"><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> </div> </div> <div class="gallery"> <div class="tab-inner"> <div class="btn"> <span>갤러리</span> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-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 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/logo-header.png" alt="footer-logo"></a> </div> <div class="copyright"> 상호 : (주)이스타컴퍼니 | 대표자 : 최종윤 | 개인정보관리책임자 : 이주현 부장<br> 사업장주소 : 인천광역시 중구 개항로 6층 (주)이스타컴퍼니 </div> <div class="familysite"> <select> <option value="">FamilySite</option> <option value="">여주군청 홈페이지</option> <option value="">한국관광공사</option> <option value="">여행자보험가입</option> </select> </div> </footer> </div> </div> <!-- Modal --> <div class="modal"> <div class="modal-content"> <h2>부여 가을연꽃축제 팸투어 모집</h2> <p> 예비 청년상인들을 위해 진행하는 부여에서 청춘의 미래를 디자인하다. 청년창업人부여 팸투어가 12월 05일 토요일 충청남도 부여에서 진행됩니다. <br><br> 팸투어는 전액 무료로 진행되며 참가비 없습니다. 이번 팸투어에서는 부여군상권활성화재단의 청년상인 육성프로젝트를 실제로 견학하며 확인해 보실 수 있는 좋은 기회이니 창업을 희망하는 많은 청년 분들의 관심 부탁드립니다. <br><br> 온라인 및 전화 또는 메일 등으로 사전 참가신청하실 수 있습니다! </p> <a class="close-modal" href="#none">닫기</a> </div> </div> <!-- Modal --> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> css @charset "utf-8"; body { margin: 0; background-color: #fff; color: #333; font-size: 15px; } a { color: #333; text-decoration: none; } .container { 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; } /* Navigation */ .menu { list-style: none; padding: 0; position: relative; 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: #000; color: #fff; } .sub-menu { border: 1px solid #000; position: absolute; top: -30px; left: 100%; width: 100%; height: 200px; background-color: #000; display: none; } .sub-menu a { display: block; padding: 5px; transition: 0.5s; color: #fff; } .sub-menu a:hover { background-color: #fff; color: #000; } /* Slide */ .slide { width: 800px; height: 350px; overflow: hidden; } .slide > div { width: 2400px; font-size: 0; animation: slide 10s linear infinite; } .slide > div a {} .slide > div a img {} @keyframes slide { 0% { margin-left: 0; } 30% { margin-left: 0; } 35% { margin-left: -800px; } 65% { margin-left: -800px; } 70% { margin-left: -1600px; } 95% { margin-left: -1600px; } 100% { margin-left: 0; } } .items { overflow: hidden; margin-top: 20px; } .items > div { height: 200px; float: left; box-sizing: border-box; } .news { width: 300px; } .gallery { width: 300px; } /* News & Gallery */ .tab-inner { width: 95%; margin: auto; } .tab-inner .btn {} .tab-inner .btn span { border: 1px solid #000; display: inline-block; width: 100px; padding: 5px; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -1px; background-color: #fff; text-align: center; } .tab1, .tab2 { border: 1px solid #000; height: 160px; padding: 0 10px; } .tab1 a { display: block; border-bottom: 1px solid #000; padding: 5px; overflow: hidden; } .tab1 a:last-child { border-bottom: none; } .tab1 a em, .tab1 a b { float: left; } .tab1 a em { font-style: normal; width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tab1 a b { float: right; font-weight: normal; width: 30%; text-align: right; } .tab2 { text-align: center; } .tab2 a {} .tab2 a img { padding-top: 40px; width: 80px; } .tab2 a img:hover { opacity: 0.6; } .shortcut { text-align: right; width: 200px; } .shortcut:hover { opacity: 0.6; } .shortcut img { width: 95%; } footer { overflow: hidden; } footer > div { height: 100px; float: left; box-sizing: border-box; text-align: center; } .footer-logo { width: 200px; line-height: 130px; } .copyright { width: 400px; padding-top: 20px; } .familysite { width: 200px; line-height: 100px; } /* Modal */ .modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.2); display: none; } .modal-content { width: 350px; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; border-radius: 10px; } .modal-content h2 {} .modal-content p {} .close-modal { border: 1px solid #000; float: right; padding: 5px 10px; } 제이쿼리 $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() }) $('.open-modal').click(function(){ $('.modal').fadeIn() }) $('.close-modal').click(function(){ $('.modal').fadeOut() })
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
IE에서 공지사항 갤러리탭이 안되요
active 준것이 IE환경에서 적용이 안되요 왜 안될까요 ??
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
주석처리
선생님 실기시험때 html이나 css 그리고 제이쿼리에 구분하려고 주석 넣으면 감점이 될까요? (예를들면 modal 이나 navigation 혹은 news & gallery 등이요!) 밑 사진에 Navigation 처럼 중간중간 주석들어가있으면 감점인지 궁금해용ㅜ!!
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
크로스브라우징 체크 질문
선생님 코드작성을 모두 완료하고 브라우저 창에서 하나씩 확인해보는중에 궁금한 사항이 있어 질문드립니다! 크롬으로 확인해가며 연습중인데 다 완료후에 일반 인터넷 익스플로어에서 확인시 조금씩 레이아웃이 틀어져있는데 이부분도 점수나 시험결과에 큰 문제가 있을까요? 그렇다하면 크롬 보다는 일반 인터넷 익스플로어를 기준으로 확인해가며 연습을 해야할까요? 조금씩 틀어지는 부분은 예를들어 아래 사진과 같습니다. (갤러리 이미지가 크롬에서는 정확하게 잘 나열되어 있으나 익스플로어에서는 그렇지 않은 배열이 틀어짐, .btn의 사이 간격 벌어짐 크롬에서는 딱 맞춤, .tab1 a b 문안이 짤림 크롬에서는 짤리지 않음.)
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
비주얼스튜디오코드 관련 질문
질문1) 비주얼스튜디오코드의 경우 !를 치면 에밋 설치여부와 관계없이 코드들이 나오는지 궁금해요! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> 만약 나오지 않는다면 저부분 다 외워서 입력해야되는걸까요? 질문2) 시험장소에서는 인터넷 사용이 안된다고 하셨는데 그러면 중간중간에 자동저장을 하여 인터넷 브라우저창을 켜서 확인하면서 작업이 불가능한건가요ㅠㅠ? 진행상황 아예 안보고 코드만 줄줄이 나열하고 다 완성이 된 이후에야 감독관 컴퓨터로 가서 확인이 되는건지 궁금해요.. 질문3) 비주얼스튜디오코드의 경우 코드 힌트는 별도의 설정이나 설치 없이 자동으로 나오나요? 블라켓처럼 비주얼스튜디오코드도 누군가 저 코드힌트를 임의로 끌수도있나요ㅠㅠ?
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
.tab-inner .btn span태그 box sizing: border box;
선생님 .tab-inner .btn span태그에 width:100px; 을 주고 padding:5px;을 주었으니 너비값이 padding으로 인해서 변하니 box sizing: border box;를 줘야되는거 아닐까요??
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
네비게이션 호버 관련
선생님 네비게이션 옆으로 보이게 하는 구성 연습중 막히는 부분이 있어 질문드립니다!! 캡쳐화면과 같이 마우스를 menu1에 올리면 sub-menu가 menu1 의 sub-menu가 아닌 menu4의 sub-menu가 나와요.. 제이쿼리 적용시에는 괜찮은데 이게 혹시 나중에 문제가 있을까 걱정이 되어서요ㅠㅠ html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Vallery Festival</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="logo-header"></a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#none">축제소개</a> <div class="sub-menu"> <a href="#none">Festival소개</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> <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> </header> </div> <div class="right"> <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"> <span>공지사항</span> </div> <div class="tab1"> <a class="open-modal" href="#none"><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> </div> </div> <div class="gallery"> <div class="tab-inner"> <div class="btn"> <span>갤러리</span> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-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 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/logo-header.png" alt="footer-logo"></a> </div> <div class="copyright"> 상호 : (주)린 | 대표자 : 최종윤 | 개인정보관리책임자 : 이주현 부장<br> 사업장주소 : 인천광역시 중구 개항로 6층 (주)이스타컴퍼니 </div> <div class="familysite"> <select> <option value="">familysite</option> <option value="">여주군청 홈페이지</option> <option value="">한국관광공사</option> <option value="">여행자보험가입</option> </select> </div> </footer> </div> </div> <div class="modal"> <div class="modal-content"> <h2>부여 가을연꽃축제 팸투어 모집</h2> <p>예비 청년상인들을 위해 진행하는 부여에서 청춘의 미래를 디자인하다. 청년창업人부여 팸투어가 12월 05일 토요일 충청남도 부여에서 진행됩니다. <br><br> 팸투어는 전액 무료로 진행되며 참가비 없습니다. 이번 팸투어에서는 부여군상권활성화재단의 청년상인 육성프로젝트를 실제로 견학하며 확인해 보실 수 있는 좋은 기회이니 창업을 희망하는 많은 청년 분들의 관심 부탁드립니다. <br><br> 온라인 및 전화 또는 메일 등으로 사전 참가신청하실 수 있습니다!</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> css @charset "utf-8"; body { margin: 0; background-color: #fff; color: #333; font-size: 15px; } a { text-decoration: none; color: #333; } .container { width: 1000px; } .container > div { /* border: 1px solid red; */ float: left; box-sizing: border-box; height: 600px; } .left { width: 200px; } .right { width: 800px; } header {} header > div {} .header-logo { height: 100px; line-height: 130px; } .navi {} /* Navigation */ .menu { position: relative; width: 90%; margin: auto; list-style: none; padding: 0; } .menu li { text-align: center; } .menu li > a { border: 1px solid #000; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a { background-color: #000; color: #fff; } .sub-menu { border: 1px solid #000; position: absolute; top: -30px; left: 100%; width: 100%; height: 200px; background-color: #000; /* display: none; */ } .sub-menu a { display: block; padding: 5px; color: #fff; transition: 0.5s; } .sub-menu a:hover { background-color: #fff; color: #000; } /* Slide Animation */ .slide { width: 800px; height: 350px; overflow: hidden; } .slide > div { width: 2400px; font-size: 0; animation: slide 10s linear infinite; } .slide a { } .slide a img {} @keyframes slide { 0% { margin-left: 0; } 30% { margin-left: 0; } 35% { margin-left: -800px; } 65% { margin-left: -800px; } 70% { margin-left: -1600px; } 95% { margin-left: -1600px; } 100% { margin-left: 0; } } .items { overflow: hidden; margin-top: 20px; } .items > div { /* border: 1px solid red; */ height: 200px; float: left; box-sizing: border-box; } /* Tab Content */ .tab-inner { width: 95%; margin: auto; } .tab-inner > div {} .tab-inner .btn {} .tab-inner .btn span { border: 1px solid #000; text-align: center; width: 100px; padding: 5px; box-sizing: border-box; display: inline-block; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -1px; background-color: #fff; } .tab1, .tab2 { border: 1px solid #000; height: 160px; } .tab1 { padding: 0 10px; } .tab1 a { display: block; border-bottom: 1px solid #000; padding: 5px; } .tab1 a:last-child { border-bottom: none; } .tab1 a b { float: right; font-weight: normal; } .tab2 { text-align: center; } .tab2 a {} .tab2 a img { padding-top: 30px; width: 85px; } /* css 깔끔하게 */ .tab1 a { overflow: hidden; } .tab1 em, .tab1 b { float: left; } .tab1 em { width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: normal; } .tab1 em b{} .news { width: 300px; } .gallery { width: 300px; } .shortcut { width: 200px; } .shortcut img { width: 95%; } footer { overflow: hidden; } footer > div { /* border: 1px solid red; */ height: 100px; float: left; box-sizing: border-box; text-align: center; } .footer-logo { width: 200px; line-height: 130px; } .copyright { padding-top: 30px; width: 400px; } .familysite { width: 200px; padding-top: 40px; } /* Modal */ .modal { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); } .modal-content { position: absolute; background-color: #fff; width: 400px; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 20px 30px; border-radius: 10px; } .modal-content h2 {} .modal-content p { line-height: 1.6em; } .close-modal { border: 1px solid #000; padding: 5px 10px; float: right; }
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
select 에 option태그 관련
선생님! option태그에 value="" 이부분은 그냥 공백으로 비워놔도 상관없는지 궁금해요
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
2022년 출제기준 웹디자인 기능사 실기시험 공개문제 완성본 파일
선생님! 완성본 파일이 A1, B4, C2뿐인데 나머지는 어디서 확인할수있을까요???
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
저 뭘 잘못한걸까요? index에 왜 안보이죠? ㅠㅠ
잘 되고 있었는데 갑자기 index에 표시가 안되는데.... 뭘 잘못한걸까요 ㅠ HTML > <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="/css/style.css"> </head> <body> <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="side"> <div></div> </div> <div class="items"> <div class="news"></div> <div class="benner"></div> <div class="shortcut"></div> </div> </div> <div class="footer-inner"> <footer> <div class="footer-logo"></div> <div class="copyright"></div> </footer> </div> </div> </body> </html> CSS > .container {} .header-inner { border: 1px solid red; } .content-inner {} .footer-inner {}
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
B4 결과 좀 부탁드립니다.!
혼자서 해봤는데 이정도로 만들면 몇 점 정도 받을 수 있을까요..? [HTML] <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>산업대학교</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="header_inner"> <header> <div class="header_logo"> <a href="#"><img src="images/logo-header.png" alt="header_img"></a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#">대학소개</a> <div class="sub_menu"> <a href="#">총장인사말</a> <a href="#">학교소개</a> <a href="#">홍보관</a> <a href="#">캠퍼스안내</a> </div> </li> <li> <a href="#">입학안내</a> <div class="sub_menu"> <a href="#">수시모집</a> <a href="#">정시모집</a> <a href="#">편입학</a> <a href="#">재외국민</a> </div> </li> <li> <a href="#">정보서비스</a> <div class="sub_menu"> <a href="#">대학정보알림</a> <a href="#">정보공개</a> <a href="#">정보서비스안내</a> </div> </li> <li> <a href="#">커뮤니티</a> <div class="sub_menu"> <a href="#">공지사항</a> <a href="#">참여게시판</a> <a href="#">자료실</a> </div> </li> </ul> <div class="sub_back"></div> </div> </header> </div> <div class="content_inner"> <div class="slide"> <div> <a href="#"><img src="images/slide-01.jpg" alt="slide1"></a> <a href="#"><img src="images/slide-02.jpg" alt="slide2"></a> <a href="#"><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="#">공지사항</a> </div> <div class="tab"> <a href="#"><span>산업대학교 동문회장배 자선골프대회 </span><b>2016-09-12</b></a> <a href="#"><span>개교 100주년 기념 야외 오페라 초청 </span><b>2016-09-10</b></a> <a href="#"><span>동문회장 및 운영위원장 후보자 추천 </span><b>2016-09-09</b></a> <a href="#"><span>진행위원회(정회원) 선발 결과 </span><b>2016-09-07</b></a> <a href="#"><span>산업대학교 동문회 개최일 변경 </span><b>2016-08-30</b></a> </div> </div> </div> <div class="gallery"> <div class="gallery_inner"> <div class="btn"> <a href="#">갤러리</a> <div class="tab"> <a href="#"><img src="images/gallery-01.jpg" alt="gallery_img1"></a> <a href="#"><img src="images/gallery-02.jpg" alt="gallery_img2"></a> <a href="#"><img src="images/gallery-03.jpg" alt="gallery_img3"></a> </div> </div> </div> </div> <div class="banner"> <a href="#"><img src="images/banner.jpg" alt="banner_img"></a> </div> </div> <div class="footer_inner"> <footer> <div class="copyright"> <div> <a href="#">법적고지</a> <a href="#">개인정보취급방침</a> <a href="#">개인정보처리방침</a> </div> <div> 상호명 : 산업대학교 대표자 : 송성훈 개인정보관리책임자 : 김보미 대리 사업장주소 : 서울특별시 중구 개항로 49 </div> </div> <div class="familysite"> <select> <option value="">산업대학교</option> <option value="">정보통신부</option> <option value="">과학기술연구원</option> </select> </div> </footer> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> --------------------------------------------------------- [CSS] @charset "utf-8"; body { margin: 0; font-size: 15px; background-color: #fff; color: #222328; } a { text-decoration: none; color: #222328; } .container {} .header_inner { background-color: #ddd; } header { width: 1200px; margin: auto; height: 100px; position: relative; } header>div { height: 100px; } .header_logo { width: 200px; float: left; line-height: 130px; } .navi { width: 600px; float: right; } .content_inner {} .slide { width: 1200px; margin: auto; margin-bottom: 10px; } .slide>div { height: 300px; } .items { width: 1200px; margin: auto; overflow: hidden; margin-bottom: 10px; } .items>div { height: 200px; float: left; } .news { width: 425px; } .gallery { width: 425px; } .banner { width: 350px; } .footer_inner { background-color: #ddd; } footer { width: 1200px; margin: auto; overflow: hidden; } footer>div { height: 100px; float: left; text-align: center; } .copyright { width: 1000px; } .copyright>div { line-height: 50px; height: 50px; } .familysite { line-height: 100px; width: 200px; } /* 슬라이드 */ .slide { overflow: hidden; } .slide div { font-size: 0; width: 3600px; animation: slide 10s linear infinite; } @keyframes slide { 0% { margin-left: 0; } 30% { margin-left: 0; } 35% { margin-left: -1200px; } 65% { margin-left: -1200px; } 70% { margin-left: -2400px; } 95% { margin-left: -2400px; } 100% { margin-left: -0px; } } /* 탭메뉴 */ .gallery_inner, .tab_inner { width: 90%; } .tab_inner .btn {} .gallery_inner .btn>a, .tab_inner .btn>a { 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: white; margin-bottom: -1px; } .gallery_inner .tab, .tab_inner .tab { border: 1px solid #000; padding: 6px 15px; height: 155px; } .tab_inner .tab a { display: block; padding: 5px; border-bottom: 1px solid #000; overflow: hidden; } .tab_inner .tab a span { width: 60%; float: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tab_inner .tab a b { width: 30%; float: right; text-align: right; } .tab_inner .tab a:last-child { border-bottom: none; } .gallery_inner .tab { text-align: center; } .gallery_inner .tab a img { margin-top: 20px; width: 110px; } /* 네비게이션 */ .navi { padding-right: 20px; } .menu { padding: 0; list-style: none; padding-top: 42px; } .menu li { float: left; text-align: center; width: 150px; margin-right: -1px; } .menu li>a { display: block; border: 1px solid #000; padding: 10px; transition: 0.5s; } .menu li:hover>a { background-color: black; color: white } .sub_menu { height: 150px; position: relative; z-index: 10000; display: none; } .sub_menu a { display: block; padding: 5px; color: white; transition: 0.5s; } .sub_menu a:hover { background-color: black; } .sub_back { position: absolute; background-color: rgba(20, 110, 5, 0.8); top: 100px; left: 0; width: 100%; height: 200px; display: none; } ---------------------------------- [jq] /* 네비 */ $('.menu li').mouseenter(function() { $('.sub_menu').stop().slideDown(); $('.sub_back').stop().slideDown(); }) $('.menu li').mouseleave(function() { $('.sub_menu').stop().slideUp(); $('.sub_back').stop().slideUp(); })
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
선생님 궁금해요~~
@charset 'utf-8'; 을 써주었는데 이전 강의들에서는 따로 기재없이 진행 했는데 이걸 꼭 써줘야하는 이유가 있을까요? 아래와 같이 html 안에 비슷한 구문?이 있는데 저거말고 추가로 css에 꼭 적어줘야 되는건지 궁금해요! 정리해서 질문드리자면 질문1) css에 @charset 'utf-8'; 기재하는 이유? 그리고 해당 구문 입력시 utf-8이 빨간색으로 떠요! 무슨 문제일까요? 질문2) html title태그안에 이름은 보통 수험번호를 적나요? <head> <meta charset="UTF-8"> <title>수험번호??</title> <link rel="stylesheet" href="css/style.css"> </head>
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
웹디자인기능사 공개문제
기출문제가 a1 ~ a4 b1 ~ b4 c1 ~ c4 가 있던데 강의에서는 a1, b4, c2 만 있더라구요 다른문제들 혼자서 해보려는데 각 문제에 해당하는 이미지, 텍스트 같은건 어디서 구하나요??
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
제공해주신 txt 파일 관련
선생님! 맥os의 경우 제공해주신 최종본 제작 파일 안에 txt파일이 모두 깨져서 안보이는데 어떻게 확인 할 방법이 있을까요ㅜㅜ?
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
제이쿼리 setInterval 관련 질문
css보다 코드는 간결한데 조금 헷갈려서 좀 더 명확히 이해하고자 질문드립니다ㅜ! 본문영상과 같은 상황일때 여기서 eq(1)이 가장 먼저 실행되고 eq(1)은 즉 이미지01 eq(2)은 이미지02 eq(0)이 가장 마지막에 실행되고 eq(0)은 이미지03 으로 보면 되는걸까요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
.sub_back의 헤더는 div.navi 아닌가요???
강의에서 부모요소는 header라 하시길래 만약 .sub_back의 header랑 div.navi 둘 다 된다면 무슨 차이인지 궁급합니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
세로2컬럼에 가로슬라이드 적용시 문제
가로 슬라이드를 세로2컬럼 레이아웃에 적용 해보는 연습 중 질문드립니다. 아래 사진과 같이 이미지 3개중 일부가 위로 못올라오는데 도무지 이유를 모르겠습니다ㅠㅠ 분명 .slide > div 에 width: 2400px; 와 font-size: 0;을 주었는데 이미지가 두개는 올라오고 한개는 밑에 머물러있어요.. (저와 같은 문제로 질문하신분 글을 보았는데 내용인즉 .slide div에 width:2400px을 지정해도 가로로 나열이 안된 것처럼 보이는게 container에 overflow:hidden을 지정했기에 그걸 가리니 제대로 작동이 된다 라고 하셨더라구요 하지만 저는 .container에 overflow: hidden;을 가려도 변화가 없이 이미지 세개가 다올라오지 않습니다 ..) css body { margin: 0; color: #222; font-size: 15px; } a { text-decoration: none; color: #222; } .container { width: 1000px; overflow: hidden; } .container > div { float: left; box-sizing: border-box; } .left { width: 200px; } header {} header > div { border: 1px solid #ddd; } .header-logo { height: 100px; text-align: center; line-height: 100px; } .navi { height: 400px; } .right { width: 800px; } /* Slide Animation */ .slide { position: relative; width: 800px; height: 300px; } .slide > div { width: 2400px; font-size: 0; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; } @keyframes slide { 0% { left: 0; } 30% { left: 0; } 35% { left: -800px; } 65% { left: -800px; } 70% { left: -1600px; } 95% { left: -1600px; } 100% { left: 0; } } .items { overflow: hidden; } .items > div { border: 1px solid #ddd; float: left; box-sizing: border-box; height: 200px; } .news { width: 300px; } .gallery { width: 250px; } .shortcut { width: 250px; text-align: center; line-height: 200px; } footer { overflow: hidden; } footer > div { border: 1px solid #ddd; height: 100px; float: left; box-sizing: border-box; } .footer-logo { width: 200px; } .footer-content { width: 600px; } .footer-content > div { border: 1px solid #ddd; height: 50px; } html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="left"> <header> <div class="header-logo">로고</div> <div class="navi">네비</div> </header> </div> <div class="right"> <!-- Slide Animation --> <div class="slide"> <div> <a href="#none"><img src="images/slide-01.jpg" alt="image1"></a> <a href="#none"><img src="images/slide-02.jpg" alt="image2"></a> <a href="#none"><img src="images/slide-03.jpg" alt="image3"></a> </div> </div> <!-- Slide Animation --> <div class="items"> <div class="news"></div> <div class="gallery"></div> <div class="shortcut">바로가기</div> </div> <footer> <div class="footer-logo"></div> <div class="footer-content"> <div></div> <div></div> </div> </footer> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html>
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
질문드려용!!
(*이 글에서 제가 참고한 완성본 파일은 강의 목록 모듈 제작 완성본 다운로드(슬라이드,네비게이션,레이아웃,레이어 팝업,탭 메뉴)에 있는 (탭메뉴) 안에 "공지사항,갤러리 별도로" 파일 입니다.) 질문 1) 강의에는 없는 것 같은데 선생님께서 주신 완성본 파일 확인시 궁금한점이 몇가지 생겨 질문드립니다. ( 주석처리한 부분 관련입니다. 학습참고용이라고 답변 주셨는데 궁금해서 질문드려요!!) (주석1️⃣ .slide 태그 안) .content-inner { width: 1200px; margin: auto; } .slide { /* width: 1200px; */ text-align: center; line-height: 300px; /* clear: both; */ } .slide에 clear: both;를 주었던 이유는 무엇인지 궁금합니다! (주석2️⃣ .tab-inner .tab, gallery-inner .tab 태그 안) .tab-inner, .gallery-inner { width: 97%; margin: auto; } .tab-inner .btn {} .tab-inner .btn span, .gallery-inner .btn span { border: 1px solid #000; display: inline-block; padding: 3px; width: 120px; 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: 160px; /* box-sizing: border-box; */ } .tab-inner .tab a { display: block; border-bottom: 1px solid #000; padding: 3px; } .tab-inner .tab a:last-child { border-bottom: none; } .tab-inner .tab a b { float: right; font-weight: normal; } .gallery .tab img { width: 110px; } .gallery .tab { text-align: center; padding-top: 25px; box-sizing: border-box; } box-sizing: border-box;를 .tab-inner .tab, .gallery-inner .tab 에 같이 주었던 이유가 궁금합니다!.gallery .tab 에서 padding-top: 25px을 주었기때문에 저는 .gallery-inner .tab에만 개별적으로 box-sizing: border-box 을 주었습니다 그런데! 확인해보니 제가 말한대로 .gallery-inner .tab에만 box-sizing: border-box를 주면 옆에 공지사항 박스가 갤러리 박스와 비교시 미세하게 박스크기의 높이부분이 차이가 나더라구요 이유를 알수있을까요ㅜㅜ? 질문 2) 이전 말씀 해주신 것처럼 position: relative;를 넣으면 밑에 줄이 사라져보이는데요 선생님 강의와 완성본 파일에는 position이 따로 없는데 어떻게 적용하신건지 궁금해요!! (아래 코드는 선생님께서 제공해주신 완성본파일입니다. 보시다시피 position: relative; 는 없어요! ) 선생님께서는 span태그를 사용하고 저는 div태그를 사용했기 때문에 발생한 이슈일까요? .tab-inner .btn span, .gallery-inner .btn span { border: 1px solid #000; display: inline-block; padding: 3px; width: 120px; text-align: center; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -1px; background-color: #fff; }
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
clear: both;를 줘야하는 이유?
items > div 이면 스페이스가 아닌 꺽세이기 때문에 자식태그만 float: left; 를 상속 받는게 아닌가요? 왜 밑에 따로 떨어져 있는 footer가 그 영향을 상속 받는건지 모르겠어요ㅜㅜ