월 33,220원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
슬라이드 위아래 이상하게 나오는데 뭐가 잘못된건지 모르겠습니다 ㅠㅠ
슬라이드 가로-> 세로를 잘 연습해서위 -> 아래로 제작 했는데 이거는 이상하게 나오는데 뭐가 잘못된건지 모르겠습니다 ㅠㅠ
- 미해결[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"> <div class="main-content"> <div class="left"> <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> <div class="center"> <div class="items"> <div class="shortcut"> <img class="shortcut-image" src="images/shortcut-01.png" alt="shortcut image"> <div class="shortcut-content"> <h3>얼리버드 선착순 할인 이벤트</h3> <p> 12월은 사랑의 달~ 코딩웍스에서 여러분께 사랑을 뿌려요~<br> 12월 개강반을 12월 06일까지 접수하는 분들께는 15%~ 20% 의 얼리버드 할인을 제공합니다.<br> 기간: 2022년 12월 18일~ 12월 25일 </p> </div> <a href="#none"><img src="images/shortcut-02.png" alt="shortcut link"></a> </div> <div class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab1"> <a class="open-modal" href="#none"><em>스트리밍 서버 이전 작업으로 2시간 서비스 중지</em><b>2022.12.20</b></a> <a href="#none"><em>얼리버드 선착순 할인 이벤트 최대 50% 할인</em><b>2022.10.13</b></a> <a href="#none"><em>내 집 마련의 꿈을 꿈이 아닌 현실로 만드는 진짜 방법</em><b>2022.11.31</b></a> <a href="#none"><em>외국인과 영어로 네이티브처럼 대화하는 노하우</em><b>2022.08.09</b></a> <a href="#none"><em>월 500만원 매출을 내는 블로그 운영하는 노하우</em><b>2022.07.07</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.png" alt="gallery1"><span>퍼블리셔 취업 가이드</span></a> <a href="#none"><img src="images/gallery-02.png" alt="gallery2"><span>전문가가 되는 사진촬영</span></a> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner-01.png" alt="banner1"></a> <a href="#none"><img src="images/banner-02.png" alt="banner2"></a> <a href="#none"><img src="images/banner-03.png" alt="banner3"></a> <a href="#none"><img src="images/banner-04.png" alt="banner4"></a> </div> </div> </div> <div class="right"> <div class="slide"> <div class="slide-image"> <div class="slide-image-inner"> <a href="#none"><img src="images/slide-e-01.jpg" alt="slide1"></a> <a href="#none"><img src="images/slide-e-02.jpg" alt="slide2"></a> <a href="#none"><img src="images/slide-e-03.jpg" alt="slide3"></a> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/footer-logo.png" alt="footer logo"></a> </div> <div class="footer-content"> <div class="footer-link"> <a href="#none">기업소개 제휴 및 입점 문의</a> <a href="#none">이용약관</a> <a href="#none">개인정보처리방침</a> <a href="#none">이메일무단수집거부</a> <a href="#none">사이트맵</a> <a href="#none">인재채용</a> </div> <div class="copyright"> 상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스 </div> </div> <div class="family-site"> <select> <option value="">패밀리 사이트</option> <option value="">코딩웍스 커뮤니티</option> <option value="">코딩웍스 쇼핑몰</option> <option value="">코딩웍스 재단</option> </select> </div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>스트리밍 서버 이전으로 서비스 장애</h2> <p> 스트리밍 서버 이전 작업으로 2시간 서비스 중지됩니다.<br> <br> 주요 작업 내용은 아래와 같습니다.<br> 1. 서버 이전에 따른 DNS 이전으로 기존 호스팅 서비스 대체<br> 2. 문자셋을 utf-8로 변경 후 모바일 등에 대처하기 위해 미리 조치<br> 3. 스트리밍 서버 CDN과 연동 후 멀티미디어 이러닝 서비스가 제공<br> <br> 위 내용을 보시면 제법 큰 작업이었음을 알 수 있습니다.<br> 특히 문자셋의 변경에 따라 기존의 DB, data, 웹사이트 솔루션 등의 커스트마이징 등에 상당한 어려움이 있었고, 이에 따른 일부 접속 오류가 있을 수 있었음에 양해를 구합니다.<br> 특히 인터넷익스플로러 11로 접속하셨을 경우 일부 문제은행 목차가 출력되지 않았을 수도 있습니다.<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> @charset "UTF-8"; body { margin: 0; background-color: #fff; color: #333; font-size: 15px; } a { color: #333; text-decoration: none; } .container {} .main-content { display: flex; } .main-content > div { /* border: 1px solid black; */ /* height: 800px; */ } .left { width: 200px; background-color: rgb(201, 163, 124); } .center { width: 400px; background-color: ivory; } .right { flex: 1; } header { position: relative; z-index: 10; } header > div { /* border: 1px solid red; */ } .header-logo { height: 100px; display: flex; align-items: center; } .navi { height: 400px; } /* Navigation */ .menu { list-style: none; padding: 0; width: 90%; margin: auto; margin-top: 10px; } .menu li { text-align: center; position: relative; } .menu li > a { border: 1px solid #000; display: block; padding: 5px; transition: 0.1s; background-color: beige; } .menu li:hover > a { background-color: lightskyblue; color: #fff; } .sub-menu { border: 1px solid #000; position: absolute; top: 0; left: 100%; width: 100%; height: 120px; display: none; } .sub-menu a { display: block; padding: 5px; transition: 0.1s; background-color: lightskyblue; } .sub-menu a:hover { background-color: navy; color: #fff; } .items {} .items > div { /* border: 1px solid blue; */ } .shortcut { height: 150px; display: flex; align-items: center; box-sizing: border-box; font-size: 12px; padding: 5px; gap: 10px; } .shortcut .shortcut-image { height: 50%; } .news { height: 250px; } .gallery { height: 250px; } /* news & gallery */ .tab-inner { width: 95%; margin: auto; margin-top: 25px; } .btn {} .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; margin-bottom: -1px; background-color: lightskyblue; } .tab1 { border: 1px solid #000; height: 170px; box-sizing: border-box; padding: 10px 15px; } .tab1 a { display: block; padding: 5px; border-bottom: 1px solid #000; overflow: hidden; } .tab1 a:last-child { border-bottom: none; } .tab1 a em { display: block; float: left; font-style: normal; width: 75%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tab1 a b { float: right; font-weight: normal; } .tab2 { border: 1px solid #000; height: 170px; text-align: center; box-sizing: border-box; padding-top: 17px; } .tab2 a { display: inline-block; text-align: center; } .tab2 a img { height: 115px; border-radius: 10px; } .tab2 a span { display: block; } .banner { /* height: 150px; */ display: flex; align-items: center; } .banner a img { width: 98%; } .slide {} .slide > div { /* border: 1px solid green; */ } .slide-image { height: calc(100vh - 120px); overflow: hidden; position: relative; } .slide-image-inner { font-size: 0; height: inherit; width: 300%; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; } .slide-image-inner a { height: inherit; display: inline-block; width: calc(100% / 3); } .slide-image-inner a img { height: inherit; width: 100%; object-fit: cover; } @keyframes slide { 0% { left: 0; } 30% { left: 0; } 35% { left: -100%; } 65% { left: -100%; } 70% { left: -200%; } 95% { left: -200%; } 100% { left: 0; } } footer { display: flex; height: 120px; align-items: center; background-color: rgb(211, 211, 211, 0.3); } footer > div { /* border: 1px solid red; */ } .footer-logo { width: 200px; } .footer-content { flex: 1; } .footer-content div { /* border: 1px solid red; */ /* height: 60px; */ padding: 10px 20px; } .footer-link {} .footer-link a { color: blue; } .footer-link a::after { content: '|'; margin-left: 5px; } .footer-link a:last-child::after { display: none; } .footer-link a:hover { text-decoration: underline; } .copyright {} .family-site { width: 230px; text-align: center; } .family-site select { padding: 5px; border-radius: 3px; } /* modal */ .modal { background-color: #00000077; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: none; } .modal-content { background-color: #fff; width: 470px; padding: 30px; border-radius: 10px; box-shadow: inset 0 0 10px #000; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .modal-content h2 { text-align: center; } .close-modal { float: right; border: 1px solid #000; padding: 5px 10px; } /* Navigation */ $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() }) /* modal */ $('.open-modal').click(function(){ $('.modal').fadeIn() }) $('.close-modal').click(function(){ $('.modal').fadeOut() }).menu li 에 background-color를 넣어야 하나요?.menu li > a 에 background-color를 넣어야 하나요?.sub-menu 에 background-color를 넣어야 하나요?.sub-menu a 에 background-color를 넣어야 하나요?그리고 최종점검 부탁드립니다.
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
네비게이션 상단 3번 제작 중 오류가 있는 것 같아요 ㅠㅠ
안녕하세요 강사님이 만들어 두신 네비게이션 최종본 파일을 지우고 새로 적으면서강의를 듣고 따라해보고 있는데분명 똑같이 했는데 메뉴부분이 보더가 부족해서 왜 이런가 싶어서 문의드립니다 ㅠㅠ어떤게 잘못된건지 계속 찾아봐도 모르겠네요...
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
css 이미지 사이즈
index.html <div class="banner"> <a href="#none"><img src="images/banner-01.jpg" alt="banner"></a> </div> style.css .banner a img { height: 95%; border-radius: 5px; margin: 5px; } .banner img로 해야 하나요? .banner a img로 해야 하나요? 그리고 이미지사이즈 줄일 때 height와 width 중에서 어떤걸로 해야하나요?
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
d,e 유형에서 이거 어떻게 해야할까요?
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다d유형과 e유형 내용에서여기 아래 컨텐츠는 html 코딩으로 작성해야 하며, 이미지로 삽입하면 안된다 부분이 말하는게 배너나 갤러리에 들어가는 이미지에 텍스트를 넣을때 포토샵으로 텍스트를 넣으면 안된다는 걸까요? 슬라이드에선 강의하신대로 포토샵으로 텍스트를 넣었는데 저기에선 저 문구가 좀 걸리긴하네요.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
푸터 로고 변경 문의
D. Footer ❍ 로고를 (무채색)로 변경이면검정색, 흰색, 회색으로 변경하면 되는 건가요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
css 작성 위치
.items{ display : flex; } .items > div{ border: 1px solid green; height : 200px; }강의에서는 위와 같이 스타일을 주셨는데,.items > div에 들어갈 내용을 .item에 넣어도 레이아웃이 똑같이 잡히더라구요. 혹시 .items > div에 작성한 border 과 height를 .items에 넣어도 괜찮은지 궁금합니다.■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
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="main-content"> <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">OnSale</a></li> <li><a href="#none">기획전</a></li> <li><a href="#none">푸른마을 레시피</a></li> <li><a href="#none">매장안내</a></li> <div class="sub-back"> <div class="mega-menu"> <div class="sub-menu"> <a href="#none">할인행사</a> <a href="#none">덤증정</a> </div> <div class="sub-menu"> <a href="#none">봄 먹거리</a> <a href="#none">여름 먹거리</a> <a href="#none">가을 먹거리</a> <a href="#none">겨울 먹거리</a> </div> <div class="sub-menu"> <a href="#none">메인요리</a> <a href="#none">밑반찬</a> <a href="#none">간식</a> <a href="#none">브런치</a> </div> <div class="sub-menu"> <a href="#none">신규매장</a> <a href="#none">추천매장</a> <a href="#none">공지사항</a> </div> </div> </div> </ul> </div> <div class="spot-menu"> <a href="#none">로그인</a> <span>|</span> <a href="#none">회원가입</a> </div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-image"> <div class="slide-image-inner"> <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="banner"> <a href="#none"><img src="images/banner-01.jpg" alt="banner1"></a> <a href="#none"><img src="images/banner-02.jpg" alt="banner2"></a> <a href="#none"><img src="images/banner-03.jpg" alt="banner3"></a> </div> </div> <div class="items"> <div class="shortcut"> <img class="shortcut-image" src="images/shortcut-01.jpg" alt="shortcut image"> <div class="shortcut-content"> <h2>얼리버드 선착순 할인 이벤트, 신규강의 최대 30% 할인</h2> <p> 12월은 사랑의 달~ 코딩웍스에서 여러분께 사랑을 뿌려요~<br> 12월 개강반을 12월 06일까지 접수하는 분들께는 15%~ 20% 의 얼리버드 할인을 제공합니다.<br> 더불어 소중한 리뷰를 꼼꼼히 남겨주시는 분들을 뽑아 더 큰 적립금을 추가지급해 드릴 예정이오니 리뷰도 놓치지 마시고 작성해주세요~^^<br> 기간: 2022년 12월 18일~ 12월 25일 </p> </div> <a href="#none"><img src="images/shortcut-02.png" alt="shortcut link"></a> </div> <div class="news-gallery"> <div class="tab-inner"> <div class="btn"> <a class="active" href="#none">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a class="open-modal" href="#none">스트리밍 서버 이전 작업으로 2시간 서비스 중지<b>2022.12.20</b></a> <a href="#none">얼리버드 선착순 할인 이벤트 최대 50% 할인<b>2022.10.13</b></a> <a href="#none">내 집 마련의 꿈을 꿈이 아닌 현실로 만드는 진짜 방법<b>2022.11.31</b></a> <a href="#none">외국인과 영어로 네이티브처럼 대화하는 노하우<b>2022.08.09</b></a> <a href="#none">월 500만원 매출을 내는 블로그 운영하는 노하우<b>2022.07.07</b></a> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-01.jpg" alt="gallery1"><span>체스키크룸로프성</span></a> <a href="#none"><img src="images/gallery-02.jpg" alt="gallery2"><span>럭셔리 범선 선셋</span></a> <a href="#none"><img src="images/gallery-03.jpg" alt="gallery3"><span>거제 바람의언덕</span></a> <a href="#none"><img src="images/gallery-04.jpg" alt="gallery4"><span>연천 덴마크 가평</span></a> <a href="#none"><img src="images/gallery-05.jpg" alt="gallery5"><span>담양 메타프로방스</span></a> <a href="#none"><img src="images/gallery-06.jpg" alt="gallery6"><span>잘츠카머쿠트</span></a> </div> </div> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/logo-footer.png" alt="footer logo"></a> </div> <div class="footer-content"> <div class="footer-link"> <a href="#none">회사소개</a> <a href="#none">찾아오시는길</a> <a href="#none">개인정보처리방침</a> <a href="#none">이용약관</a> <a href="#none">고객지원</a> <a href="#none">제휴문의</a> </div> <div class="copyright"> 상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스 </div> </div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>스트리밍 서버 이전으로 서비스 장애</h2> <p> 스트리밍 서버 이전 작업으로 2시간 서비스 중지됩니다.<br> 주요 작업 내용은 아래와 같습니다.<br> <br> 1. 서버 이전에 따른 DNS 이전으로 기존 호스팅 서비스 대체<br> 2. 문자셋을 utf-8로 변경 후 모바일 등에 대처하기 위해 미리 조치<br> 3. 스트리밍 서버 CDN과 연동 후 멀티미디어 이러닝 서비스가 제공<br> <br> 위 내용을 보시면 제법 큰 작업이었음을 알 수 있습니다.<br> 특히 문자셋의 변경에 따라 기존의 DB, data, 웹사이트 솔루션 등의 커스트마이징 등에 상당한 어려움이 있었고, 이에 따른 일부 접속 오류가 있을 수 있었음에 양해를 구합니다.<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> @charset "UTF-8"; body { margin: 0; background-color: #fff; color: #333; font-size: 15px; } a { color: #333; text-decoration: none; } .container {} .main-content { display: flex; } .main-content > div { /* border: 1px solid black; */ /* height: 800px; */ } .left { width: 200px; } .right { flex: 1; } header { position: relative; z-index: 10; } header > div { /* border: 1px solid red; */ } .header-logo { height: 100px; display: flex; align-items: center; } .navi { height: 200px; } /* Navigation */ .menu { list-style: none; padding: 0; width: 90%; margin: auto; margin-top: 10px; position: relative; } .menu li { text-align: center; background-color: #fff; } .menu li > a { border: 1px solid #000; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a { background-color: #000; color: #fff; } .sub-back { background-color: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 100%; width: calc(100vw - 208px); z-index: 1000; display: none; } .mega-menu {} .sub-menu { height: 32px; display: flex; align-items: center; gap: 15px; margin-left: 15px; } .sub-menu a { padding: 5px; transition: 0.5s; color: #fff; } .sub-menu a:hover { background-color: #000; } .spot-menu { height: 50px; text-align: center; } .spot-menu a { color: blue; } .spot-menu a:hover { text-decoration: underline; } .slide { position: relative; } .slide > div { /* border: 1px solid blue; */ } .slide-image { height: 400px; } .slide-image-inner { font-size: 0; height: inherit; overflow: hidden; position: relative; } .slide-image-inner a { height: inherit; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; visibility: hidden; } .slide-image-inner a:nth-child(1) { animation-delay: 0s; } .slide-image-inner a:nth-child(2) { animation-delay: 3.5s; } .slide-image-inner a:nth-child(3) { animation-delay: 7s; } .slide-image-inner a img { height: inherit; width: 100%; object-fit: cover; } @keyframes slide { 0% { opacity: 0; } 5% { opacity: 1; visibility: visible; } 35% { opacity: 1; } 40% { opacity: 0; visibility: hidden; } 100% { opacity: 0; } } .banner { width: 150px; height: 300px; position: absolute; top: 0; right: 10px; } .banner a img { width: 150px; border-radius: 10px; margin: 5px 0; } .items {} .items > div { /* border: 1px solid green; */ } .shortcut { height: 200px; display: flex; align-items: center; justify-content: space-around; } .shortcut .shortcut-image { height: 150px; border-radius: 30px; } .news-gallery { height: 250px; } /* News & Gallery */ .tab-inner { width: 95%; margin: auto; margin-top: 25px; } .btn {} .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; margin-right: -6px; margin-bottom: -1px; background-color: #ccc; } .btn a.active { background-color: #fff; } .tabs {} .tab1 { /* display: none; */ border: 1px solid #000; height: 170px; box-sizing: border-box; padding: 10px 15px; } .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; padding-right: 50px; } .tab2 { border: 1px solid #000; height: 170px; text-align: center; box-sizing: border-box; padding-top: 10px; display: none; } .tab2 a { display: inline-block; text-align: center; } .tab2 a img { height: 130px; border-radius: 10px; margin: 0 55px; } .tab2 a span { display: block; } footer { display: flex; height: 120px; align-items: center; } footer > div { /* border: 1px solid red; */ } .footer-logo { width: 200px; } .footer-content { flex: 1; } .footer-content div { /* border: 1px solid red; */ /* height: 60px; */ padding: 10px 15px; } .footer-link {} .copyright {} .footer-link a { color: blue; } .footer-link a::after { content: "|"; margin-left: 5px; } .footer-link a:last-child::after { display: none; } .footer-link a:hover { text-decoration: underline; } .modal { background-color: #00000060; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: none; } .modal-content { background-color: #fff; width: 500px; padding: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .close-modal { float: right; border: 1px solid #000; padding: 5px 10px; } .modal-content h2 { text-align: center; } $('.menu').mouseenter(function(){ $('.sub-back').stop().fadeIn() }) $('.menu').mouseleave(function(){ $('.sub-back').stop().fadeOut() }) $('.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') }) $('.open-modal').click(function(){ $('.modal').fadeIn() }) $('.close-modal').click(function(){ $('.modal').fadeOut() })
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
시험결과를 받고 궁금해서 문의합니다 ㅠㅠ
이번 2023년 1차 실기 시험 준비하면서 강의를 듣고 너무 도움이 많이 됐고 덕분에 시험도 잘 마무리 할수 있었습니다 DE 타입이 나올까 조마조마했지만 다행이 A타입이 나왔습니다 제자리뿐만 아니라 감독관님자리에서도 모든 기능이 구현되고 탭키도 작동하고 하는걸 확인까지 했습니다왼쪽 슬라이드/ 메뉴슬라이드다운/ 모달레이어팝업 / 전체레이아웃 ( 모든 배치 완료 세밀한 조정에서 부족하지만 처음 봤을때 다 제자리에 위치해 있었습니다 ) 모든 기능이 다 구현이 되고 레이아웃도 됐는데요 근데 어디서 잘못을 해야 54점이 나올까요?? 답답한 마음에 글 남겨 봅니다 모든 기능이 구현되는데 뭘 잘못을 해야 48점을 감점 받는걸까요 ㅠㅠ
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
요소들이 조금씩 다른데
두개 사진에 태그들이 조금 다른데어떤걸로 외우면되나요
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
슬라이드 넘어가는 효과가 안들어가요
선생님께서 만드신 슬라이드처럼 부드럽게 넘어가지 않고 이미지가 그냥 툭툭 끊기면서 바뀝니다.ㅠㅠ설마 이러면 실격사유인가요? .right { flex: 1; } .slide { width: calc(100vw - 600px); height: 850px; border: 1px solid orange; } .slide-image { width: inherit; height: 850px; font-size: 0; /* overflow: hidden; */ } .slide-items { height: 850px; } .slide-item { height: 850px; } .slide-item a { display: block; height: 850px; } .slide-item img { width: 100%; height: 850px; object-fit: cover; } setInterval(function(){ $('.slide-items').animate({top:'-100%'}, function(){ $('.slide-items').css({top:0}) $('.slide-item:first-child').appendTo('.slide-items') }) },3500)
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
D,E유형 제이쿼리로 슬라이드 할 때 CSS 문의
슬라이드를 제이쿼리로 공부하고 있는데,이런 상황에서는 어떻게 css를 고쳐야할지 궁금합니다 ㅠㅠ슬라이드 크기가 넘쳐요 높이값 적용이 안되고있는것같습니다. 지금 상황 말고도 다른 유형에서 calc 함수를 줄 때마다 제대로 적용이 안돼서 가로는 꼭 flex:1을 썼는데, 혹시 flex가 위에 있으면 적용이 안된다거나.. 특정 (block, inline-block..등) 요소에만 되거나 등등 적용 가능/불가능한 조건이 있나요?숫자에 공백 다 주고 똑같이 작성해도 잘 안됩니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
시험 출제 유형 문의
혹시 정보가 있으시다면 이번 회차(2023.3월~4월)의 지난 시험에는 어떤 유형이 나왔는지 궁금합니다.남은 하루동안 D, E 유형이 난이도 조정을 위해 새로 생긴 만큼 아주 집중적으로 공부하는편이 좋을지, 아니면 A~C 최종 복습을 하고 갈지 선택하려구요.. 물론 다 잘 해야겠지만요 ^^;;내일 시험이라 걱정이 많이 되고 떨리네요.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
어디 물어볼곳이 없어서 질문합니다 ㅜㅜ
d3 가로메가 메뉴 말고도 다른부분들 암기할 부분들이 많은데... 물론 연습을 최대한 해보겠지만 만약 d3 유형 가로메가메뉴를 구현하지 못하고 c유형처럼 메뉴를 구성하게 됬을때 점수로 따지면 d3 메뉴에서 몇점정도 깎이게 되는건지 궁금합니다 ㅜㅜ 슬라이드 영역이 아니기에 실격은 아닐것 같은데..
- 해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
공지사항 날짜부분이 float:right 하면 뒤죽박죽 이상해집니다ㅠㅠ
공지사항에서 날짜부분 float: right 하면 정렬이 이렇게 이상해집니다.혹시 몰라서 글자 넘칠때 쓰는 html 태그를 써보기도 했지만 고쳐지지 않았습니다..ㅠㅠhtml css 너무 길어서 댓글로 첨부드리겠습니다.
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
D타입 메가메뉴 ul 밑에 div 유효성검사 오류
유효성 검사에서 오류가 나옵니다 왜그런걸까요?ㅠ<!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="main-content"> <div class="left"> <header> <div class="header-logo"><a href="#none"><img src="images/header-logo.jpg" alt="header-logo"></a></div> <div class="navi"> <ul class="menu"> <li> <a href="#none">Onsale</a> </li> <li> <a href="#none">기획전</a> </li> <li> <a href="#none">푸른마을 레시피</a> </li> <li> <a href="#none">매장안내</a> </li> <div class="sub-back"> <div class="sub-menu"> <a href="#none">할인행사</a> <a href="#none">덤증정</a> </div> <div class="sub-menu"> <a href="#none">봄 먹거리</a> <a href="#none">여름 먹거리</a> <a href="#none">가을 먹거리</a> <a href="#none">겨울 먹거리</a> </div> <div class="sub-menu"> <a href="#none">메인요리</a> <a href="#none">밑반찬</a> <a href="#none">간식</a> <a href="#none">브런치</a> </div> <div class="sub-menu"> <a href="#none">신규매장</a> <a href="#none">추천매장</a> <a href="#none">공지사항</a> </div> </div> </ul> </div> <div class="spot-menu"> <a href="#none">로그인</a> <a href="#none">공지사항</a> </div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-inner"> <div class="slide-items"> <a class="slide-item" href="#none"><img src="images/slide-01.jpg" alt="slide-01"></a> <a class="slide-item" href="#none"><img src="images/slide-02.jpg" alt="slide-02"></a> <a class="slide-item" href="#none"><img src="images/slide-03.jpg" alt="slide-03"></a> </div> </div> <div class="slide-banner"> <a href="#none"><img src="images/slide-banner-01.jpg" alt="slide-banner-01"></a> <a href="#none"><img src="images/slide-banner-02.jpg" alt="slide-banner-02"></a> <a href="#none"><img src="images/slide-banner-03.jpg" alt="slide-banner-03"></a> </div> </div> <div class="items"> <div class="shortcut"> <a href="#none"><img src="images/shortcut-01.jpg" alt="shortcut-01"></a> <div> <br> <h3>얼리버드 선착순 할인 이벤트, 신규강의 최대 30% 할인</h3> <p>12월은 사랑의 달~ 코딩웍스에서 여러분께 사랑을 뿌려요~ 12월 개강반을 12월 06일까지 접수하는 분들께는 15%~ 20% 의 얼리버드 할인을 제공합니다. 더불어 소중한 리뷰를 꼼꼼히 남겨주시는 분들을 뽑아 더 큰 적립금을 추가지급해 드릴 예정이오니 리뷰도 놓치지 마시고 작성해주세요~^^ <br> <b>기간: 2022년 12월 18일~ 12월 25일</b> </p> </div> <a href="#none"><img src="images/shortcut-02.png" alt="shortcut-02"></a> </div> <div class="news-gallery"> <div class="btn"> <a class="active" href="#none">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a class="open-modal" href="#none">스트리밍 서버 이전 작업으로 2시간 서비스 중지<b>2022.12.20</b></a> <a href="#none">얼리버드 선착순 할인 이벤트 최대 50% 할인<b>2022.10.13</b></a> <a href="#none">내 집 마련의 꿈을 꿈이 아닌 현실로 만드는 진짜 방법<b>2022.11.31</b></a> <a href="#none">외국인과 영어로 네이티브처럼 대화하는 노하우! <b>2022.08.09</b></a> <a href="#none">월 500만원 매출을 내는 블로그 운영하는 노하우<b>2022.07.07</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> <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> <a href="#none"><img src="images/gallery-01.jpg" alt="gallery-01"></a> </div> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"><a href="#none"><img src="images/footer-logo.png" alt="footer-logo"></a></div> <div class="footer-content"> <div class="footer-shortcut" > <a href="#none">기업소개 제휴 및 입점 문의</a> <a href="#none">이용약관</a> <a href="#none">개인정보처리방침</a> <a href="#none">이메일무단수집거부</a> <a href="#none">사이트맵</a> <a href="#none">인재채용</a> </div> <div> 상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 <br> 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스 </div> </div> </footer> </div> <div class="modal"> <div class="modal-content"> <h3>스트리밍 서버 이전으로 서비스 장애</h3> <p>서버 이전 작업으로 고객님들께 불편을 드려서 대단히 죄송합니다. 정상 운영되도록 최선을 다하겠습니다. 감사합니다.</p> <br><br><br><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"; body { background-color: #fff; color: #333; margin: 0; font-size: 15px; position: relative; } a { text-decoration: none; color: inherit; } .container {} .main-content { display: flex; } .main-content>div { } .left { width: 200px; } .right { flex: 1; } /* header */ header { position: relative; z-index: 10; } header>div { } .header-logo { height: 100px; } .navi { height: 300px; position: relative; } /* navi */ .menu{ list-style: none; padding: 0; margin: 10px; } .menu li{} .menu li > a{ border: #000 1px solid; display: block; padding: 5px; text-align: center; transition: 0.5s; } .menu li:hover > a{ background-color: #333; color: #fff; } .sub-back{ position: absolute; top:0; left: 180px; background-color: #0b042ec0; color: #fff; width: calc(100vw - 180px); height: 130px; display: none; } .sub-menu{ padding-left: 20px; padding-top: 10px; display: flex; align-items: center; gap: 20px; } .sub-menu >a{ text-align: center; display: block; width: 120px; } .sub-menu >a:hover{ background-color: #fff; color: #000; } .spot-menu { height: 50px; display: flex; align-items: center; justify-content: center; } .spot-menu>a::after { content: '|'; padding: 7px; } .spot-menu>a:last-child::after { content: none; } .spot-menu>a:hover { color: blue; text-decoration: underline; } /* slide */ .slide { position: relative; height: 400px; /* overflow: hidden; */ } .slide-inner { position: absolute; height: 400px; font-size: 0; object-fit: cover; width: 100%; top:0; left:0; height: 400px; } .slide-items { height: 400px; } .slide-item{ position: absolute; top:0; left: 0; } .slide-banner { width: 150px; height: 300px; position: absolute; top: 0; right: 0; padding-right: 10px; } .slide-banner a img { border-radius: 5px; } /* items */ .items {} .items>div { } .shortcut { height: 200px; display: flex; } .shortcut a {} .shortcut a img { border-radius: 10px; width: 180px; margin: 10px; } .news-gallery { height: 250px; } .btn { margin: 0 20px; margin-top: 20px; } .btn>a { display: inline-block; width: 100px; border: #333 1px solid; text-align: center; padding: 5px; border-radius: 5px 5px 0 0; background-color: rgb(203, 228, 255); color: #000; margin-bottom: -2px; border-bottom: none; } .btn >.active { background-color: #fff; } .tab1 { margin: 0 20px; padding: 10px; border: #333 1px solid; height: 150px; } .tab1 a { display: block; padding: 5px; border-bottom: #333 1px dashed; } .tab1 a:last-child { border-bottom: none; } .tab1 a b { float: right; font-weight: normal; } .tab2 { margin: 0 20px; border: #333 1px solid; height: 150px; background-color: #fff; display: none; padding: 0 50px; padding-top: 20px; } .tab2 a { padding-left: 10px; } .tab2 a img { width: 150px; } /* footer */ footer { display: flex; } footer>div { height: 120px; } .footer-logo { width: 200px; } .footer-content { flex: 1; } .footer-content>div { height: 60px; padding-left: 20px; box-sizing: border-box; padding-top: 20px; } .footer-shortcut { padding-top: 20px; box-sizing: border-box; } .footer-shortcut>a::after { content: '|'; padding: 7px; } .footer-shortcut>a:last-child::after { content: none; } .footer-shortcut>a:hover { color: blue; text-decoration: underline; } /* modal */ .modal { background-color: #33333328; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; } .modal-content { width: 300px; height: 300px; background-color: #fff; padding: 20px; border-radius: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .close-modal { float: right; border: 1px solid; padding: 5px 15px; } /* tab */ $('.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') }) /* modal */ $('.open-modal').click(function(){ $('.modal').fadeIn(500) }) $('.close-modal').click(function(){ $('.modal').fadeOut(500) }) /* slide 가로 또는 세로 슬라이드 제이쿼리 css 수정필요 setInterval(function(){ $('.slide-inner').animate({top:'-100%'},function(){ $('.slide-inner').css({top:0}) $('.slide-item:first-child').appendTo('.slide-items') }) },3500) */ /* 크로스페이드 슬라이드 */ $('.slide-item:gt(0)').hide() setInterval(function(){ $('.slide-item:first-child').fadeOut().next().fadeIn() $('.slide-item:first-child').appendTo('.slide-items') },3500) /* navi */ $('.menu').mouseenter(function(){ $('.sub-back').fadeIn() }) $('.menu').mouseleave(function(){ $('.sub-back').fadeOut() })
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
웹페이지 여는 법
안녕하세요.현재 사이트에 올라와있는 홈페이지 예제를 참고하여 홈페이지 레이아웃을 만들고자 합니다.크롬에서 f12 단축키를 통해 코딩코드를 확인하고 있는데F12로 확인하는 방법 말고 사이트의 코딩을 여는 방법이 있나요?
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
D2 슬라이드 배너 내용이 보이지 않습니다.
<!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="main-content"> <div class="left"> <header> <div class="header-logo"> <a href="#none"><img src="images/header-logo.jpg" 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> </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> </div> </li> </ul> </div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-inner"> <div class="slide-items"> <a class="slide-item" href="#none"><img src="images/slide-01.jpg" alt="slide-01"></a> <a class="slide-item" href="#none"><img src="images/slide-02.jpg" alt="slide-02"></a> <a class="slide-item" href="#none"><img src="images/slide-03.jpg" alt="slide-03"></a> </div> </div> <div class="slide-banner"> <a href="#none"><img src="images/slide-banner.png" alt="slide-banner"></a> <h3> 얼리버드 할인, <br> 신규강의 최대 30% 할인 </h3> 12월 개강반을 12월 06일까지 접수하는 분들께는 15%~ 20% 의 얼리버드 할인을 제공합니다. 더불어 소중한 리뷰를 꼼꼼히 남겨주시는 분들을 뽑아 더 큰 적립금을 추가지급! 리뷰도 놓치지 마시고 작성해주세요~^^ <br><br> 기간: 12월 18일~ 12월 25일</p> </div> </div> <div class="news-gallery"> <div class="news"> <div class="btn"> <a href="#none">공지사항</a> </div> <div class="tab1"> <a class="open-modal" href="#none">스트리밍 서버 이전 작업으로 2시간 서비스 중지<b>2022.12.20</b></a> <a href="#none">얼리버드 선착순 할인 이벤트 최대 50% 할인<b>2022.10.13</b></a> <a href="#none">내 집 마련의 꿈을 꿈이 아닌 현실로 만드는 진짜 방법<b>2022.11.31</b></a> <a href="#none">외국인과 영어로 네이티브처럼 대화하는 노하우! <b>2022.08.09</b></a> <a href="#none">외국인과 영어로 네이티브처럼 대화하는 노하우! <b>2022.07.07</b></a> </div> </div> <div class="gallery"> <div class="btn"> <a href="#none">갤러리</a> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-01.jpg" alt="gallery-01"><span>퍼블리셔 <br> 취업 진짜 가이드 </span></a> <a href="#none"><img src="images/gallery-02.jpg" alt="gallery-02"><span>초보자가 전문가가 <br> 되는 사진촬영</span></a> <a href="#none"><img src="images/gallery-03.jpg" alt="gallery-03"><span>탄탄한 라인을 <br> 만드는 필라테스</span></a> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/footer-logo.png" alt="footer-logo"></a> </div> <div class="copyright"> <p>상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 <br> 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스 </p> </div> <div class="family-site"> <select> <option value="family-site-01">Family Site</option> <option value="family-site-01">Family Site</option> <option value="family-site-01">Family Site</option> <option value="family-site-01">Family Site</option> </select> </div> </footer> <div class="modal"> <div class="modal-content"> <h3>스트리밍 서버 이전으로 서비스 장애</h3> <p> 문자셋의 변경에 따라 기존의 DB, data, 웹사이트 솔루션 등의 커스트마이징 등에 상당한 어려움이 있었고, 이에 따른 일부 접속 오류가 있을 수 있었음에 양해를 구합니다. 특히 인터넷익스플로러 11로 접속하셨을 경우 일부 문제은행 목차가 출력되지 않았을 수도 있습니다. 서버 이전 작업으로 고객님들께 불편을 드려서 대단히 죄송합니다. 정상 운영되도록 최선을 다하겠습니다 <br> 감사합니다.</p> <a class="close-modal" href="#none"> X 닫기</a> </div> </div> </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: #333; position: relative; margin: 0; } a{ text-decoration: none; color: inherit; } .container{ } .main-content{ display: flex; } .main-content > div{ /* border: 1px solid; */ } .left{ width: 200px; } .right{ flex:1; } /* header */ header{} header > div{ } .header-logo{ height: 100px; } .navi{ height: 400px; } .menu{ list-style: none; padding: 0; } .menu li{ display: flex; flex-direction: column; align-items: center; } .menu li > a{ text-align: center; display: block; border: #333 1px solid; width: 180px; padding: 5px; transition: 0.5s; } .menu li:hover > a{ background-color: #333; color: #fff; } .sub-menu{ border: 1px solid #333; background-color: #fff; display: none; } .sub-menu a{ width: 180px; display: block; padding: 5px; text-align: center; } .sub-menu a:hover{ background-color: #3333336c; color: #fff; } /* slide */ .slide{ display: flex; font-size: 0; height: 400px; } .slide-inner{ overflow: hidden; flex: 1; height: 400px; position: relative; } .slide > div{ height: 400px; border: #333 1px solid; } .slide-banner{ width: 230px; text-align: center; } .slide-items{ flex:1; width: 300%; position: absolute; height: inherit; object-fit: cover; } .slide-items{ } .news-gallery{ display: flex; } .news-gallery > div{ height: 250px; } .news{ flex: 1; } .gallery{ flex: 1; } .btn{} .btn > a{ display: block; border: #333 1px solid; padding: 5px; width: 100px; text-align: center; margin: 0 10px; margin-top: 10px; border-radius: 5px 5px 0 0; background-color: #333; border-bottom: none; color: #fff; } .tab1 , .tab2{ margin: 0 10px; border: #333 1px solid; height: 190px; } .tab1 a{ display: block; padding: 5px 15px; border-bottom: #333 1px dashed; padding-top: 10px; } .tab1 a:last-child{ border-bottom: none; } .tab1 a b { float: right; font-weight: normal; } .tab2{ display: flex; justify-content: center; align-items: center; gap: 30px; } .tab2 a span{ display: block; font-size: 14px; text-align: center; } .tab2 a img{ width: 180px; border-radius: 5px; } footer{ display: flex; text-align: center; } footer > div{ height: 100px; } .footer-logo{ width: 200px; } .copyright{ flex: 1; padding-top: 10px; box-sizing: border-box; } .family-site{ width: 230px; padding-top: 30px; box-sizing: border-box; } .modal{ position: absolute; background-color: #3333332c; top:0; left: 0; width: 100%; height: 100%; display: none; } .madal > div{} .modal-content{ text-align: center; padding: 15px; border-radius: 10px; width: 350px; height: 300px; background-color: #fff; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); } .close-modal{ float: right; display: block; border: #333 1px solid; padding: 5px 10px; border-radius: 5px; } $('.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(500) }) $('.close-modal').click(function(){ $('.modal').fadeOut(500) }) setInterval(function(){ $('.slide-items').animate({left:'-100%'},function(){ $('.slide-items').css({left:0}) $('.slide-item:first-child').appendTo('.slide-items') }) },3500)슬라이드 배너밑에 요소가 보이지 않습니다 ㅠobject-fit 커버도 똑바로 준건지 궁금합니다그외에 또 문제사항은 없을까요??
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
(수정) D 타입 메가 메뉴 서브메뉴 높이 설정에 문제가 있습니다
.menu {list-style: none;position:relative;padding: 0;margin:auto;}.menu li {background-color: #fff;text-align: center;}.menu li > a {display:block;padding:5px;}.menu li:hover > a{background-color: #000;color:#fff;}.sub-back{ /* display: none;position:absolute;background-color: #00000060;top:0;left:100%;z-index: 1000;width:100vw; }.mega-menu { / display: flex; /}.sub-menu { / height:calc(128px / 4); / / display:flex; align-items:center; */}.sub-menu a { display:block; padding:5px;}.sub-menu a:hover { background-color: bisque;}
- 미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
E타입 레이아웃
슬라이드 이미지를 똑같이 calc(100vh - 120px)로 바꿨는데 강의화면과는 다르게 나타나 질문 드립니다 ㅜ<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>E1</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"></div> <div class="navi"></div> <div class="spot-menu"></div> </header> </div> <div class="center"> <div class="shortcut"></div> <div class="news"></div> <div class="gallery"></div> <div class="slide-banner"></div> </div> <div class="right"> <div class="slide-img"></div> </div> </div> <footer> <div class="footer-logo"></div> <div class="footer-content"> <div class="footer-link"></div> <div class="copyright"></div> </div> </footer> </div> </body> </html>@charset "UTF-8"; body{ background-color: #fff; color: #333333; margin: 0; } a{ text-decoration: none; color: #333333; } .contaniner{} .main-content{ display: flex; } .main-content>div{ border: 1px solid black; } .left{ width: 200px; } .center{ width: 400px; } .right{ flex: 1; } header{} header>div{ border: 1px solid red; } .header-logo{ height: 100px; } .navi{ height: 400px; } .spot-menu{ height: 50px; } .slide-img{ border: 1px solid green; height: calc(100vh - 120px); } .shortcut{ border: 1px solid blue; height: 150px; } .news{ border: 1px solid blue; height: 250px; } .gallery{ border: 1px solid blue; height: 250px; } .slide-banner{ border: 1px solid blue; height: 150px; } footer{ display: flex; } footer>div{ border: 1px solid black; height: 120px; } .footer-logo{ width: 200px; } .footer-content{ flex: 1; } .footer-content>div{ border: 1px solid black; height: 60px; } .footer-link{} .copyright{}