묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
ㅜㅜ확실히 d유형은 헷갈리네요 ㅠㅠ 선생님 사진에 처럼 왜겹쳐져서 보이는걸까요ㅠㅠ
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>d-4레이아웃연습</title> <link rel="stylesheet" href="css/d-4.css"> </head> <body> <div class="container"> <div class="main-container"> <div class="left"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-image"></div> <div class="slide-banner"></div> </div> <div class="items"> <div class="news-gallery"> <div class="news"></div> <div class="gallery"></div> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"></div> <div class="footer-content"> <div class="footer-link"></div> <div class="copyright"></div> </div> <div class="family-site"></div> </footer> </body> </html> @charset "UTF-8"; body{ margin: 0; background-color: #fff; color: #333; } a{ list-style: none; text-decoration: none; color: #333; } /*layout*/ .container{} .main-container{ display: flex; } .main-container > div{ border: 1px solid #333; } .left{ width: 200px; } .right{ flex: 1; } /*header*/ header{} header > div{ border: 1px solid #333; } .header-logo{ height: 100px; } .navi{ height: 400px; } .slide{ height: 400px; } .slide > div{ border: 1px solid #333; } .slide-image{ height: 400px; } .slide-banner{ height: 150px; } /*news-gallery*/ .news-gallery{ display: flex; } .news-gallery > div{ border: 1px solid #000; height: 250px; flex: 1; } .news{} .gallery{} footer{ display: flex; } footer > div{ border: 1px solid #333; height: 120px; } .footer-logo{ width: 200px; } .footer-content{ flex: 1; } .footer-content> div{ border: 1px solid #333; height: 60px; } .family-site{ width: 230px; } 강의 1,2,3,4 할때 마다 조금씩 방식이 바뀌는거같아서 혼란스럽네요 container 하고 main-content인가요 main-container 인가요 ?ㅜㅠ헷갈려요,, 그리고 2 4탭메뉴부분도 똑같다고하셨는데 2에서는 .news, .gallery 하셨는데 4에서는 news-gallery 에 .news/.gallery 로나뉘는거 보고 혼란이왔네요 ..어떤게 정확한건가요 ?? 그리고 3-4유형에서도 item에 shortcut 따로 하는게 맞는걸까요 ㅜ 4번에서 news-gallery부분도 헷갈리네요... 위에첨부한거는 왜 저렇케 겹쳐지는지 모르겠어서 문의남깁니다 ㅠㅠㅠ
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
공지사항부분이 왜올라가져서 안보일까요 ?? 뭐가문제일까요 ㅠㅠㅠ???ㅠㅠ
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>c실전연습</title> <link rel="stylesheet" href="css/c.css"> </head> <div class="container"> <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> </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/slider01-c.jpg" alt="slider01"></a> <a href="#none"><img src="images/slider02-c.jpg" alt="slider02"></a> <a href="#none"><img src="images/slider03-c.jpg" alt="slider03"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab1"> <a href="#none"> 운영위원장 후보자 추천을 받고 있습니다. <b>2020.01.09</b></a> </div> </div> </div> <div class="gallery"></div> <div class="shortcut"> <a href="#none"><img src="images/shortcut-c.jpg" alt=""></a> </div> </div> <footer> <div class="copyright"> 상호 : (주)이스타컴퍼니 | 대표자 : 최종윤 | 개인정보관리책임자 : 이주현 부장 <br> 사업장주소 : 인천광역시 중구 개항로 6층 (주)이스타컴퍼니 </div> <div class="sns"> <div> <a href="#none"><img src="images/sns1.png" alt="facebook"></a> <a href="#none"><img src="images/sns2.png" alt="tiwtter"></a> <a href="#none"><img src="images/sns3.png" alt="instagram"></a> </div> <div> <select> <option value="">familysite</option> <option value="">여주군청 홈페이지</option> <option value="">한국관광공사</option> <option value="">여행자보험가입</option> </select> </div> </div> </footer> </div> </div> <body> <script src="js/jquery-1.12.4.js"></script> <script src="js/custom.js"></script> </body> </html> @charset "UTF-8"; body{ margin: 0; background-color: #fff; color: #333333; } a{ list-style: none; color: #333333; } .container{ width: 1000px; border: 1px solid #000; display: flex; } .container > div{ } .left{ width: 200px; } .right{ width: 800px; } header{} header > div{ } .header-logo{ height: 100px; line-height: 130px; } .navi{ height: 400px; } .slide{} .slide > div{ border: 1px solid #000; height: 350px; } .items{ display: flex; } .items > div{ height: 200px; border: 1px solid #000; } .news{ width: 300px; } .gallery{ width: 300px; } .shortcut{ width: 200px; } footer{ display: flex; } footer > div{ height: 100px; text-align: center; } .copyright{ width: 800px; padding-top: 30px; box-sizing: border-box; text-align: center; } .sns{ width: 200px; } .sns div{ height: 50px; box-sizing: border-box; } .sns div:nth-child(1){ padding-top: 15px; } .sns div:nth-child(2){ padding-top: 10px; box-sizing: border-box; } /*slide*/ .slide{ position: relative; width: 800px; height: 300px; } .slide >div{ } .slide >div a{ font-size: 0; width: 2400px; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; visibility: hidden; } .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; visibility: visible; } 35%{ opacity: 1; } 40%{ opacity: 0; } 100%{ opacity: 0; } } /*navigation*/ .menu{ list-style: none; padding: 0; width: 90%; margin: auto; position: relative; } .menu li{ padding: 2px; text-align: center; } .menu li > a{ display: block; border: 1px solid #000; padding: 4px; text-decoration: none; transition: 0.5s; } .menu li:hover > a{ background-color: #000; color: #fff; } .sub-menu{ display: none; border: 1px solid #000; } .sub-menu a{ display: block; text-decoration: none; padding: 5px; transition: 0.5s; } .sub-menu a:hover{ background-color: #000; color: #fff; }사진처럼 공지사항부분이 위에서 슬라이더에 가렸는데 뭐때문에 가린건지요 ,,, 크기값이안맞아서 그런지 display:flex 를 써서 영향이 있는지 뭐때문에 그런지 궁금합니다 !ㅜ
-
미해결스프링 프레임워크는 내 손에 [스프2탄]
스프링부트
스프2는 스프링부트기반으로 작성하나요? 지금학원에서 스프링부트안적옹해서 시큐리티랑페이징 처리하는걸로프로젝트 하고있거든요
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
선생님 슬라이드 첫번째사진에서버벅거리는느낌나는건 뭐때문일까요 ..
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>c실전연습</title> <link rel="stylesheet" href="css/c.css"> </head> <div class="container"> <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"></div> </header> </div> <div class="right"> <div class="slide"> <div> <a href="#none"><img src="images/slider01-c.jpg" alt="slider01"></a> <a href="#none"><img src="images/slider02-c.jpg" alt="slider02"></a> <a href="#none"><img src="images/slider03-c.jpg" alt="slider03"></a> </div> </div> <div class="items"> <div class="news"></div> <div class="gallery"></div> <div class="shortcut"></div> </div> <footer> <div class="copyright"> 상호 : (주)이스타컴퍼니 | 대표자 : 최종윤 | 개인정보관리책임자 : 이주현 부장 <br> 사업장주소 : 인천광역시 중구 개항로 6층 (주)이스타컴퍼니 </div> <div class="sns"> <div> <a href="#none"><img src="images/sns1.png" alt="facebook"></a> <a href="#none"><img src="images/sns2.png" alt="tiwtter"></a> <a href="#none"><img src="images/sns3.png" alt="instagram"></a> </div> <div> <select> <option value="">familysite</option> <option value="">여주군청 홈페이지</option> <option value="">한국관광공사</option> <option value="">여행자보험가입</option> </select> </div> </div> </footer> </div> </div> <body> <script src="js/jquery-1.12.4.js"></script> <script src="js/custom.js"></script> </body> </html> @charset "UTF-8"; body{ margin: 0; background-color: #fff; color: #333333; } a{ list-style: none; color: #333333; } .container{ width: 1000px; border: 1px solid #000; display: flex; } .container > div{ } .left{ width: 200px; } .right{ width: 800px; } header{} header > div{ } .header-logo{ height: 100px; line-height: 130px; } .navi{ height: 400px; border: 1px solid #000; } .slide{} .slide > div{ border: 1px solid #000; height: 350px; } .items{ display: flex; } .items > div{ height: 200px; border: 1px solid #000; } .news{ width: 300px; } .gallery{ width: 300px; } .shortcut{ width: 200px; } footer{ display: flex; } footer > div{ height: 100px; text-align: center; } .copyright{ width: 800px; padding-top: 30px; box-sizing: border-box; text-align: center; } .sns{ width: 200px; } .sns div{ height: 50px; box-sizing: border-box; } .sns div:nth-child(1){ padding-top: 15px; } .sns div:nth-child(2){ padding-top: 10px; box-sizing: border-box; } /*slide*/ .slide{ position: relative; width: 800px; height: 300px; } .slide >div{ } .slide >div a{ font-size: 0; width: 2400px; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; } .slide >div a:nth-child(1){ animation-delay: 0s; } .slide >div a:nth-child(2){ animation-delay: 3.5s; } .slide >div a:nth-child(3){ animation-delay: 7s; } @keyframes slide{ 0%{ opacity: 0; visibility: hidden; } 5%{ opacity: 1; } 35%{ opacity: 1; } 40%{ opacity: 0; } 100%{ opacity: 0; } } 선생님 슬라이드 첫번째사진에서버벅거리는느낌나는건 뭐때문일까요. 가로세로는 이해가되는데 페이드인아웃 효과가 젤어렵긴하네요 .. 일단 해봤는데 약간 버벅거리는느낌이있는거같아 첨부해보아요,,
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
공지사항, 갤러리 탭 <section><article class></article></section>, <div class> 중 어떤 것 이용?
A1 작업시 공지사항, 갤러리 탭 만들때 <section><article class></article></section>, <div class> 중 어떤 태그 이용해서 제작합니까?강의 중 <section><article></article></section> 태그로 제작하는 것도 있고 <div class> 태그로 제작하는 것도 있는데 각각 어떤 경우에 사용합니까?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
시험장에서 유효성검사는 어떻케하는지요 ,,?? 인터넷이안되는걸로알고있는데 어떻케하는지궁금해서요 ,
유효성검사를 하게되어 오류가난다면 실격이되는건가요 ?? 인터넷이안되는데 시험때 다만들고 유효성검사는 어떻케 하는건가요 ??
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
네비게이션 이 사진처럼 덜올라왓는데 커뮤니티쪽에만저런데 뭐가문제일까요 ㅠㅠㅠ
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>b실전</title> <link rel="stylesheet" href="css/b.css"> </head> <body> <div class="container"> <div class="header-inner"> <header> <div class="header-logo"> <a href="#none"><img src="images/header-logo.png" alt="headerlogo"></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> </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 class="sub-back"></div> </div> </header> </div> <div class="content-inner"> <div class="slide"> <div> <a href="#none"><img src="images/slider01.jpg" alt="slide1"></a> <a href="#none"><img src="images/slider02.jpg" alt="slide2"></a> <a href="#none"><img src="images/slider03.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 href="#none"> SMS 발송 모바일 서비스 개선작업 안내입니다. <b>2020.01.09</b></a> <a href="#none">휴대폰 인증 서비스 개선 작업 기간 연장합니다.<b>2020.01.07</b></a> <a href="#none">카드사 부분 무이자 할부 이벤트 2월 3일까지<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 class="gallery-inner"> <div class="btn"> <span>갤러리</span> </div> <div class="tab2"> <a href="#none"><img src="images/gallery02.jpg" alt="gallery2"></a> <a href="#none"><img src="images/gallery03.jpg" alt="gallery3"></a> <a href="#none"><img src="images/gallery02.jpg" alt="gallery2"></a> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner-1.jpg" alt="banner"></a> </div> </div> </div> <div class="footer-inner"> <footer> <div class="copyright"> <div></div> <div></div> </div> <div class="family-site"></div> </footer> </div> </div> </body> <script src="js/jquery-1.12.4.js"></script> <script src="js/custom.js"></script> </html> @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 blue; } header{ display: flex; width: 1200px; margin: auto; justify-content: space-between; position: relative; z-index: 10; } header > div{ height: 100px; } .header-logo{ width: 200px; line-height: 130px; } .navi{ width: 600px; } .content-inner{} .slide{ width: 1200px; margin: auto; } .slide > div{ height: 300px; } .items{ display: flex; width: 1200px; margin: auto; margin-top: 20px; box-sizing: border-box; } .items > div{ height: 200px; } .news{ width: 425px; } .gallery{ width: 425px; } .banner{ width: 350px; } .footer-inner{ border: 1px solid blue; } footer{ display: flex; width: 1200px; margin: auto; } footer > div{ height: 100px; border: 1px solid #000; } .copyright{ width: 1000px; } .copyright div{ height: 50px; border: 1px solid #000; } .family-site{ width: 200px; } /*slide*/ .slide{ width: 1200px; height: 300px; position: relative; overflow: hidden; } .slide >div{ 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; } } /*new & gallery*/ .tab-inner, .gallery-inner{ width: 97%; margin: auto; } .btn{} .btn span{ display: inline-block; width: 120px; border: 1px solid #000; text-align: center; padding: 5px; border-radius: 7px 7px 0 0; border-bottom: none; background-color: #fff; margin-bottom: -1px; } .tab1,.tab2{ border: 1px solid #000; padding: 0 4px; height: 155px; } .tab1 a{ display: block; border-bottom: 1px solid #000; padding: 4px; } .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: 18px; } .banner img{ width: 95%; } /*navigation*/ .menu{ list-style: none; padding: 0; padding-top: 53px; } .menu li{ display: block; width: 25%; float: left; box-sizing: border-box; } .menu li > a{ border: 1px solid #000; display: block; text-align: center; padding: 5px; transition: 1; } .menu li:hover > a{ background-color: #000; color: #fff; } .sub-menu{ border: 1px solid #000; } .sub-menu a{ display: block; padding: 5px; text-align: center; color: #fff; transition: 0.5s; } .sub-menu a:hover{ background-color: #fff; color: #222328; } .sub-back{ position: absolute; left: 0; top: 100%; width: 1200px; height: 140px; background-color: #000; z-index: -1; }
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
제이쿼리 작성 후 메뉴가 내려 오지 않습니다.
A1 [최종본 제작] 가로 고정형(A1타입) – Part1에서style.css에.sub-menu{display: none; 후custom.js에$('.menu li').mouseenter(function(){$('.sub-menu').stop().slideDown()}) 하였는데 메뉴가 내려오지 않습니다.index.htmlstyle.csscustom.js파일 첨부가 되지 않아 화면 캡처해서 올립니다. 무엇이 잘 못 되었습니까?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
유효성검사에서오류가난거같은데 어떻케 수정을해야하나요 ,,,링크로첨부했습니다 ..
텍스트 입력 영역의 내용에 대한 결과 표시 - Nu Html Checker (w3.org)
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
<!DOCTYPE html> 없어도 상관없나요?ㅠㅠ
e유형 중인데html 제일 윗부분<!DOCTYPE html>이걸 넣으면 slide 사진이 사라지고 footer가 올라오고저것만 없애면 완벽하게 잘 작동하는데없애도 상관없나요? 시험때도 상관없을까요?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
D3 visibility: hidden; 이걸 없애면 슬라이드가 보이는 문제!...
다른건 아니오라 작업하다가 원래 fade in / fade out 슬라이드 형식대로 써봤는데..visibility: hidden; 을 주석처리 하는순간 슬라이드가 작동되는 현상은 처음이라 적어봅니다!...제가 뭘 잘못건드렸는지 확인 한번만 부탁드려요!<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <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">MENU-1</a> <div class="sub-menu"> <a href="#none">submenu-1</a> <a href="#none">submenu-2</a> <a href="#none">submenu-3</a> <a href="#none">submenu-4</a> </div> </li> <li> <a href="#none">MENU-1</a> <div class="sub-menu"> <a href="#none">submenu-1</a> <a href="#none">submenu-2</a> <a href="#none">submenu-3</a> <a href="#none">submenu-4</a> </div> </li> <li> <a href="#none">MENU-1</a> <div class="sub-menu"> <a href="#none">submenu-1</a> <a href="#none">submenu-2</a> <a href="#none">submenu-3</a> <a href="#none">submenu-4</a> </div> </li> <li> <a href="#none">MENU-1</a> <div class="sub-menu"> <a href="#none">submenu-1</a> <a href="#none">submenu-2</a> <a href="#none">submenu-3</a> <a href="#none">submenu-4</a> </div> </li> </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-img"> <div class="slide-image-inner"> <a href="#none"><img src="images/slide-d-01.jpg" alt="slide 1"></a> <a href="#none"><img src="images/slide-d-02.jpg" alt="slide 2"></a> <a href="#none"><img src="images/slide-d-03.jpg" alt="slide 3"></a> </div> </div> <div class="slide-banner"> <a href="#none"><img src="images/banner-01.png" alt="banner 1"></a> <a href="#none"><img src="images/banner-02.png" alt="banner 2"></a> <a href="#none"><img src="images/banner-03.png" alt="banner 3"></a> </div> </div> <div class="items"> <div class="shortcut"> <img src="images/shortcut-01.png" alt="shortcut 1"> <div class="shortcut-content"> <h2>얼리버드 선착순 할인 이벤트, 신규강의 최대 30% 할인</h2> <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 2"></a> </div> <div class="news"> <div class="tab-inner"> <div class="btn"> <a class="active" href="#none"><span>공지사항</span></a> <a href="#none"><span>갤러리</span></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.png" alt="gallery 1"><span>퍼블리셔 취업</span></a> <a href="#none"><img src="images/gallery-02.png" alt="gallery 2"><span>퍼블리셔 취업</span></a> <a href="#none"><img src="images/gallery-03.png" alt="gallery 3"><span>퍼블리셔 취업</span></a> <a href="#none"><img src="images/gallery-04.png" alt="gallery 4"><span>퍼블리셔 취업</span></a> <a href="#none"><img src="images/gallery-05.png" alt="gallery 5"><span>퍼블리셔 취업</span></a> <a href="#none"><img src="images/gallery-06.png" alt="gallery 6"><span>퍼블리셔 취업</span></a> <a href="#none"><img src="images/gallery-07.png" alt="gallery 7"><span>퍼블리셔 취업</span></a> </div> </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-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"> 상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 br사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스 </div> </div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>스트리밍 서버 이전으로 서비스 장애</h2> <p> 스트리밍 서버 이전 작업으로 2시간 서비스 중지됩니다. 주요 작업 내용은 아래와 같습니다. <br><br>1. 서버 이전에 따른 DNS 이전으로 기존 호스팅 서비스 대체 <br>2. 문자셋을 utf-8로 변경 후 모바일 등에 대처하기 위해 미리 조치 <br>3. 스트리밍 서버 CDN과 연동 후 멀티미디어 이러닝 서비스가 제공 <br><br>위 내용을 보시면 제법 큰 작업이었음을 알 수 있습니다. 특히 문자셋의 변경에 따라 기존의 DB, data, 웹사이트 솔루션 등의 커스트마이징 등에 상당한 어려움이 있었고, 이에 따른 일부 접속 오류가 있을 수 있었음에 양해를 구합니다. 특히 인터넷익스플로러 11로 접속하셨을 경우 일부 문제은행 목차가 출력되지 않았을 수도 있습니다. <br><br>서버 이전 작업으로 고객님들께 불편을 드려서 대단히 죄송합니다. 정상 운영되도록 최선을 다하겠습니다. 감사합니다. </p> <a href="#none"><div class="close-modal">닫기</div></a> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html>@charset "utf-8"; body { margin: 0; background-color: #fff; color: #333333; } a { text-decoration: none; color: inherit; } .container {} .main-content { display: flex; } .main-content > div { /* border: 1px solid red; */ } .left { width: 200px; } header {} header > div { /* border: 1px solid blue; */ } .header-logo { height: 150px; line-height: 170px; } .navi { /* height: 400px; */ } .menu { list-style: none; width: 90%; margin: 20px auto; padding: 0; } .menu li { position: relative; } .menu li > a { padding: 7px; border: 1px solid black; display: block; transition: 0.5s; } .menu li:hover > a { background-color: #00000021; } .sub-menu { position: absolute; left: 100%; top: 0; width: calc(100vw - 209px); padding: 8px; background-color: #00000021; z-index: 10; display: none; } .sub-menu > a { width: 120px; display: inline-block; transition: 0.5s; text-align: center; } .sub-menu > a:hover { background-color: #000; color: #fff; } .spot-menu { height: 50px; text-align: center; } .spot-menu a:after { content: "|"; margin: 8px; } .spot-menu a:last-child:after { content: none; } .right { flex: 1; } .slide { position: relative; height: 400px; } .slide > div { /* border: 1px solid green; */ } .slide-img { height: 400px; } .slide-image-inner { height: inherit; } .slide-image-inner a { visibility: hidden; position: absolute; height: inherit; top: 0; left: 0; width: 100%; animation: slide 10s linear infinite; opacity: 0; } .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: inherit; object-fit: cover; } @keyframes slide { 0% { opacity: 0; } 5% { opacity: 1; } 35% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 0; } } .slide-banner { top: 0; right: 0; position: absolute; width: 150px; height: 300px; float: right; } .slide-banner a {} .slide-banner a img { width: 150px; display: block; } .items {} .items > div { /* border: 1px solid pink; */ } .shortcut { /* border: 1px solid black; */ height: 200px; display: flex; align-items: center; gap: 25px; margin: 0 20px; } .shortcut > img {} .shortcut > a {} .shortcut h2 {} .shortcut p {} .shortcut p b {} .news { height: 250px; } .tab-inner { width: 95%; margin: auto; margin-top: 25px; } .btn {} .btn a { width: 100px; text-align: center; display: inline-block; border: 1px solid black; margin-right: -6px; border-bottom: none; border-radius: 5px 5px 0 0; background-color: #ddd; margin-bottom: -1px; padding: 4px; } .tabs {} .tabs > div {} .tab1 { background-color: #fff; border: 1px solid black; padding: 6px; } .tab1 a { border-bottom: 1px dashed black; padding: 6px; display: block; } .tab1 a:last-child { border-bottom: none; } .tab1 a b { padding-right: 100px; float: right; font-weight: normal; } .tab2 { display: none; border: 1px solid black; padding: 20px; height: 140px; text-align: center; /* box-sizing: border-box; */ } .tab2 a { display: inline-block; text-align: center; margin: 0 15px; } .tab2 img { width: 200px; } .tab2 a span { display: block; } .btn a.active { background-color: #fff; } footer { display: flex; } footer > div { /* border: 1px solid blue; */ height: 120px; } .footer-logo { width: 200px; line-height: 180px; } .footer-content { flex: 1; } .footer-content > div { /* border: 1px solid green; */ height: 60px; /* box-sizing: border-box; */ /* padding: 0 20px; */ } .footer-link { padding-top: 30px; box-sizing: border-box; } .footer-link > a:hover { text-decoration: underline; color: blue; } .footer-link a::after { content: "|"; margin: 0 8px; color: #ccc; } .footer-link a:last-child:after { content: none; } .copyright { /* padding-top: -100px; */ } .modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #0000003b; display: none; } .modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: #fff; padding: 20px; width: 500px; } .close-modal { float: right; border: 1px solid black; padding: 2px; } $('.menu li').mouseenter(function(){ $('.sub-menu').stop().fadeIn() }); $('.menu li').mouseleave(function(){ $('.sub-menu').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(){ $('.tab1').hide() $('.tab2').show() $(this).addClass('active') $(this).siblings().removeClass('active') }); $('.open-modal').click(function(){ $('.modal').fadeIn() }); $('.close-modal').click(function(){ $('.modal').fadeOut() });
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
실전사이트 따라하고있는데 copyright부분 css에서 padding주면 사진첨부한거처럼 전체로 내려가는데 뭐가 문제일까요 ,,,??
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>a실전연습</title> <link rel="stylesheet" href="css/실전a.css"> </head> <div class="container"> <header> <div class="heder-logo"> <a href="none"><img src="images/header-logo.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-1.jpg" alt="banner1"> </a> </div> <div class="shortcut"> <a href="#none"><img src="images/banner-2.jpg" alt="banner2"></a> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/footer-logo.png" alt="footerlogo"></a> </div> <div class="copyright"> 상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장<br> 사업장주소 : 서울특별시 강남구 테헤란로 123-56 </div> <div class="sns"> <a href="#none"><img src="images/SNS.png" alt=""></a> </div> </footer> </div> <body> <script src="js/jquery-1.12.4.js"></script> <script src="js/custom.js"></script> </body> </html> @charset "UTF-8"; body{ margin: 0; font-size: 15px; background-color: #fff; color: #222328; } a{ color: #222328; text-decoration: none; } .container{ width: 1200px; border: 1px solid #000; margin: auto; } header{ display: flex; justify-content: space-between; } header > div{ height: 100px; border: 1px solid #000; } .heder-logo{ width: 200px; } .navi{ width: 600px; } .slide{} .slide > div{ height: 300px; border: 1px solid #000; } .items{ display: flex; } .items > div{ height: 200px; border: 1px solid #000; } .news{ width: 500px; } .banner{ width: 350px; } .shortcut{ width: 350px; } footer{ display: flex; } footer > div{ height: 100px; border: 1px solid #000; } .footer-logo{ width: 200px; } .copyright{ width: 800px; } .sns{ width: 200px; } /*Image & Text */ .heder-logo,.footer-logo{ line-height: 130px; } .copyright{ text-align: center; margin-top: 30px; line-height: 20px; }
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
제이쿼리슬라이드제작
css로 슬라이드제작은 그래도 따라갈만한데 제이쿼리는 도통어렵네요,,, d형e형도 css로 슬라이드작업을하면 안되는걸까요 ?? d형e형 레이아웃강의도못들었는데 갑자기 d형으로 넘어가서 당황했어요 ,,, 어떤거부터 들어야하는게 좋을까요 ,,,? 그리고 시험장에가서도 css로 슬라이더 작업하면 안되는걸까요 ??
-
해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
html과 css 구문 모두 똑같은데 sub-menu가 슬라이드 뒤에 숨어요ㅠ
해당 부분 html-<header> <article class="header-logo">로고</article> <article class="navi"> <ul class="menu"> <li> <a href="#none">MENU-1</a> <div class="sub"> <a href="#none">sub-1</a> <a href="#none">sub-2</a> <a href="#none">sub-3</a> <a href="#none">sub-4</a> </div> </li> <li> <a href="#none">MENU-2</a> <div class="sub"> <a href="#none">sub-1</a> <a href="#none">sub-2</a> <a href="#none">sub-3</a> <a href="#none">sub-4</a> </div> </li> <li> <a href="#none">MENU-3</a> <div class="sub"> <a href="#none">sub-1</a> <a href="#none">sub-2</a> <a href="#none">sub-3</a> <a href="#none">sub-4</a> </div> </li> <li> <a href="#none">MENU-4</a> <div class="sub"> <a href="#none">sub-1</a> <a href="#none">sub-2</a> <a href="#none">sub-3</a> <a href="#none">sub-4</a> </div> </li> </ul> </article> </header>해당 부분 css-.menu { padding: 0; list-style: none; width: 90%; margin: auto; margin-top: 10px; position: relative; } .menu li { text-align: center; } .menu li > a { border: 1px solid #000; display: block; padding: 5px; color: #000; transition: 0.3s; } .menu li:hover > a { background-color: #000; color: #fff; } .sub { border: 1px solid #000; position: absolute; top: 0; left: 100%; width: 100%; height: 200px; background-color: #000; /* display: none; */ } .sub > a { display: block; color: #fff; padding: 5px; transition: 0.3s; } .sub a:hover { background-color: #000; color: #fff; }인터넷 찾아보고 z-index도 넣어봤는데 소용이 없습니다ㅠㅠ
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
body 구문 형식 어떻게 작성해야 합니까?
[2. 레이어 팝업 제작 HTML+CSS 구조 만들기, 레이어 팝업 제이쿼리] 과정에서 body 구분 형식과 다른 강의 가로 고정형 레이아웃 HTML+CSS 구조만들기 등에서의 body 구문 형식이 조금 다른데 body 구문 어떤 식으로 작성해야 합니까?
-
미해결스프링 프레임워크는 내 손에 [스프2탄]
섹션 01 8강 질문입니다
8강 스프2탄_Junit리스트보기 Controller테스트 강의 중 질문입니다.테스트코드 BoardControllerTest.java에서@Testpublic void testList() throws Exception{log.info(mockMvc.perform(MockMvcRequestBuilders.get("/board/list")).andReturn().getModelAndView().getModelMap());} 굵은 글씨 get이라고 하셨는데BoardController.java에서@GetMapping("/list")public String getList(Model model) {List<Board> list=boardService.getList();// 객체바인딩model.addAttribute("list",list);return "board/boardList";}굵은 글씨 @GetMapping이라고 해줘서 테스트코드에서 get인 것은 알겠는데왜 get이라고 해 줬는데 이해가 잘 안되서요..특별한 거 없으면 그냥 get이라고 해주면 되는 건가요? 두번째 질문은다음 강의 언제 나오나요
-
미해결면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
연봉 질문합니다.
신입 식대포함 연봉2700인데 가야할지 고민입니다..식대포함인걸 모르고 있었는데 고민이네요 조언 부탁드립니다. 그 외의 조건은 괜찮다고 생각합니다
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
D3 유형 우측 메가 메뉴 질문
안녕하세요저는 전에 배우던 스타일이 있어서메뉴 만들때.menu를 .gnb로 하고.sub-menu를 div로 대신 ul로 해서 .lnb로 만듭니다.이대로 스타일 적용하고 메가 메뉴 만들 때 혹시 주의 사항이 있는지, 시험 때 이대로 풀어도 되는지 궁금합니다.이대로 적용했을 때는 브라우저에 결과는 잘 나왔었습니다. html css js 저는 와이어프레임 만들 때 border를 사용하지 않고background-color로 사용하였습니다. 혹시 문제가 있는지 여쭈어봅니다. 코드 복사해서 수정합니다. html<div class="navi"> <ul class="gnb"> <li><a href="#">OnSale</a> <ul class="lnb"> <li><a href="#">할인행사</a></li> <li><a href="#">덤증정</a></li> </ul> </li> <li><a href="#">기획전</a> <ul class="lnb"> <li><a href="#">봄 먹거리</a></li> <li><a href="#">여름 먹거리</a></li> <li><a href="#">가을 먹거리</a></li> <li><a href="#">겨울 먹거리</a></li> </ul> </li> <li><a href="#">푸른마을 레시피</a> <ul class="lnb"> <li><a href="#">메인요리</a></li> <li><a href="#">밑반찬</a></li> <li><a href="#">간식</a></li> <li><a href="#">브런치</a></li> </ul> </li> <li><a href="#">매장안내</a> <ul class="lnb"> <li><a href="#">신규매장</a></li> <li><a href="#">추천매장</a></li> <li><a href="#">공지사항</a></li> </ul> </li> </ul> </div>css.navi { width: 90%; margin: 20px auto; background-color: greenyellow; } .gnb {} .gnb>li { text-align: center; position: relative; } .gnb>li>a { display: block; padding: 5px; border: 1px solid black; background-color: #fff; transition: 0.5s; } .gnb>li:hover>a { background-color: gray; } .lnb { display: none; position: absolute; top: 0; left: 100%; width: calc(100vw - 210px); padding: 6px; background-color: rgba(0, 0, 0, 0.5); } .lnb>li { float: left; } .lnb>li>a { display: inline-block; width: 120px; transition: 0.5s; } .lnb>li>a:hover { color: white; background-color: gray; }js$('.gnb>li').mouseenter(function(){ $('.lnb').stop().fadeIn() }); $('.gnb>li').mouseleave(function(){ $('.lnb').stop().fadeOut() });
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
저는 잘 만들었다고 생각했는데 Tab키로 옵젝전환을 시켜보니..
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JUST 쇼핑몰</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#none"><img src="images/logo-header.png" alt="headerlogo 1"></a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#none">재단소개</a> <div class="sub-menu"> <a href="#none">설립취지</a> <a href="#none">연혁</a> <a href="#none">찾아오시는길</a> </div> </li> <li> <a href="#none">후원하기</a> <div class="sub-menu"> <a href="#none">국내후원</a> <a href="#none">국외후원</a> <a href="#none">맞춤후원</a> </div> </li> <li> <a href="#none">자료실</a> <div class="sub-menu"> <a href="#none">서식자료실</a> <a href="#none">사진자료실</a> <a href="#none">후원양식</a> </div> </li> <li> <a href="#none">스토리</a> <div class="sub-menu"> <a href="#none">웹진</a> <a href="#none">보고서</a> <a href="#none">나의 후원</a> </div> </li> </ul> </div> <div class="sub-back"></div> </header> <div class="slide"> <div> <a href="#none"><img src="images/slide-01.jpg" alt="slide 1"></a> <a href="#none"><img src="images/slide-02.jpg" alt="slide 2"></a> <a href="#none"><img src="images/slide-03.jpg" alt="slide 3"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <span>공지사항</span> <div class="tab1"> <a class="open-modal" href="#none"><em>SMS 발송 모바일 서비스 개선작업 안내입니다.</em><b>2020.01.09</b></a> <a href="#none"><em>휴대폰 인증 서비스 개선 작업 기간 연장</em><b>2020.01.07</b></a> <a href="#none"><em>카드사 부분 무이자 할부 이벤트</em><b>2019.12.31</b></a> <a href="#none"><em>올앳 시스템 작업 안내</em><b>2019.12.20</b></a> <a href="#none"><em>휴대폰 결제 시스템 작업이 완료되었습니다.</em><b>2019.12.20</b></a> </div> </div> </div> <div class="gallery"> <div class="tab-inner"> <span>갤러리</span> <div class="tab2"> <a href="#none"><img src="images/gallery-01.jpg" alt="gallery 1"></a> <a href="#none"><img src="images/gallery-02.jpg" alt="gallery 2"></a> <a href="#none"><img src="images/gallery-03.jpg" alt="gallery 3"></a> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner-01.jpg" alt="banner 1"></a> <a href="#none"><img src="images/banner-02.jpg" alt="banner 2"></a> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/logo-footer.png" alt="footerlogo 1"></a> </div> <div class="copyright"> <a href="#none">법적고지</a> <a href="#none">개인정보취급방침</a> <a href="#none">개인정보처리방침</a> <p> 상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장<br> 사업장주소 : 서울특별시 강남구 테헤란로 123-56 </p> </div> <div class="familysite"> <select> <option value="">Familysite</option> <option value="">연습용입니다</option> <option value="">이쪽도 재밌어요</option> <option value="">저쪽은 낭떠러지</option> </select> </div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>SNS비회원주문하기 종료 안내</h2> <p> 안녕하세요, JUST 쇼핑몰 MD 홍길동입니다. 안타깝게도 SNS비회원 주문하기 서비스가 한달 뒤 종료될 예정입니다.<br> 회원가입없이 SNS계정을 이용해 그동안 제품주문을 하실수 있었는데, 금번 강화된 개인정보보호법 시행령 제 9조 (부칙 3조 3항)에 의거, SNS를 이용한 상품 주문/결제등이 근래에 많은 보안잇슈로 문제가 되고 있음에 다라 KISA의 권고조치의 일환으로 했습니다.<br> 따라서, 한달뒤인 2019.03.10 이후 모든 비회원 고객님들께서는 회원가입으로 전환 후 실명인증이 되어야 하며, 이는 모든 쇼핑몰/오픈마켓등의 전자상거래서비스의 공통된 사항이라는 점을 안내해드립니다. </p> <a class="close-modal" href="#none">닫기</a> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "utf-8"; body { margin: 0; background-color: #fff; color: #333333; font-size: 15px; } a { text-decoration: none; color: #333333; } .container { margin: auto; /* border: 1px solid red; */ width: 1200px; } header { height: 100px; position: relative; z-index: 10; } header > div { height: 100px; /* border: 1px solid green; */ } .header-logo { width: 200px; float: left; } .header-logo > a { line-height: 130px; } .navi { width: 600px; float: right; } .menu { padding: 0; width: 600px; } .menu li { text-align: center; list-style: none; float: left; width: 25%; padding-top: 55px; } .menu li > a{ border: 1px solid black; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a { background-color: #000; color: #fff; } .sub-menu { position: relative; display: none; } .sub-menu > a{ display: block; padding: 8px; transition: 0.5s; color: #fff; } .sub-menu > a:hover { background-color: #fff; color: #333333; } .sub-back { display: none; width: 100%; height: 150px; top: 100%; left: 0; background-color: #000; position: absolute; z-index: -1; } .slide { height: 300px; width: 1200px; position: relative; overflow: hidden; } .slide > div { position: absolute; width: 3600px; /* border: 1px solid black; */ left: 0; top: 0; height: 300px; font-size: 0; animation: slide 10s linear infinite; } @keyframes slide { 0% { left: 0; } 30% { left: 0; } 35% { left: -1200px; } 65% { left: -1200px; } 70% { left: -2400px; } 95% { left: -2400px; } 100% { left: 0; } } .items { overflow: hidden; margin-top: 10px; } .items > div { /* border: 1px solid blue; */ height: 200px; float: left; box-sizing: border-box; } .news { width: 425px; } .gallery { width: 425px; } .tab-inner { width: 95%; margin: auto; } .tab-inner span { border: 1px solid black; border-radius: 5px 5px 0 0; display: inline-block; width: 80px; padding: 8px; text-align: center; background-color: #fff; border-bottom: 0; } .tab1 { border: 1px solid black; padding: 0 4px; height: 150px; background-color: #fff; margin-top: -2px; } .tab1 em { width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: normal; position: relative; } .tab1 b { float: right; } .tab1 a { display: block; border-bottom: 1px solid black; padding: 2.5px; } .tab1 a:last-child { border-bottom: 0px; } .tab1 a b{ font-weight: normal; } .tab2 { background-color: #fff; margin-top: -2px; border: 1px solid black; text-align: center; padding-top: 20px; height: 130px; } .tab2 img { width: 120px; } .banner { width: 350px; } footer { overflow: hidden; } footer > div { height: 100px; float: left; box-sizing: border-box; } .footer-logo { width: 200px; } .footer-logo > a { line-height: 130px; } .copyright { width: 800px; text-align: center; padding-top: 10px; overflow: hidden; } .copyright > a { box-sizing: border-box; } .copyright > p { padding-bottom: 10px; } .familysite { width: 200px; text-align: center; padding-top: 35px; } .modal { position: absolute; background-color: #00000049; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: none; } .modal-content { position: absolute; transform: translate(-50%,-50%); width: 350px; background-color: #fff; top: 50%; left: 50%; padding: 20px; border-radius: 5px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.356); } .modal-content span { } .close-modal { float: right; border: 1px solid black; padding: 5px; } $('.menu li').mouseenter(function(){ $('.sub-menu,.sub-back').stop().slideDown() }); $('.menu li').mouseleave(function(){ $('.sub-menu,.sub-back').stop().slideUp() }); $('.open-modal').click(function(){ $('.modal').fadeIn() }); $('.close-modal').click(function(){ $('.modal').fadeOut() });이게 이렇게해서 Html, css ,jQuery 3개 잘 만들어 보았으나, 직접 웹 페이지에서 탭키로 누르려고하면 아이템 부분의 공지사항이랑 갤러리가 없어져버립니다.. 왜 이렇게 되는걸까요!..
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
A1타입 최종본 만들기
최종본 만들때 슬라이드 안에 있는 사진 사이즈와 텍스트는 포토샵으로 만든건가요?