묻고 답해요
169만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
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() })
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
웹페이지 여는 법
안녕하세요.현재 사이트에 올라와있는 홈페이지 예제를 참고하여 홈페이지 레이아웃을 만들고자 합니다.크롬에서 f12 단축키를 통해 코딩코드를 확인하고 있는데F12로 확인하는 방법 말고 사이트의 코딩을 여는 방법이 있나요?
-
미해결애플 웹사이트 인터랙션 클론!
load 이벤트시 첫 비디오 이미지가 뜨네요.
window.addEventListener('load' ... 중략sceneInfo[0].objs.context.drawImage(sceneInfo[0].objs.videoImages[0], 0, 0);안녕하세요.작업하다 이상해서, 강의자료도 같이 확인해보니 중간에 새로고침시 videoImages의 첫 이미지가 잠시 뜨는데, 아마 위의 코드 때문이 아닌가 합니다. 저 부분은 첫 scene의 장면임에도 불구하고, 뜬다는 것은 찰나이긴 하지만, 첫영역부터 순간적으로 중간으로 이동하면서 나타나는 현상같기도 한데, 이게 컴퓨터의 성능차이일수도 있다는 생각이 들기도 합니다. 저만 이런건지 모르겠습니다만..저 코드를 제거하고 중간에서 새로고침해보니 안보여서 문제가 없지만, 최상단 첫화면에서 새로고침하면 이미지가 안보이니 또 문제더군요.그래서 위 코드를 제거후, 새로고침시 조금 스크롤되는 코드에서 추가 조건문(else)를 붙여서 아래와 같이 수정해보았습니다. if (tempYOffset > 0) { let siId = setInterval(() => { scrollTo(0, tempYOffset); tempYOffset += 5; if (tempScrollCount > 20) { clearInterval(siId); } tempScrollCount++; }, 20); } else { sceneInfo[0].objs.context.drawImage(sceneInfo[0].objs.videoImages[0], 0, 0); } 이렇게 처리하니 문제가 없는 듯 한데, 이게 저한테만 생기는 문제인지, 아니라면 제가 위와 같이 처리한 방법이 맞는것인지 궁금합니다.
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
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 커버도 똑바로 준건지 궁금합니다그외에 또 문제사항은 없을까요??
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
(수정) 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;}
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
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{}
-
해결됨[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
네비 왼쪽2번 서브메뉴가 계속 가려집니다
왼쪽1번은 메뉴에 높이값이 없어서 잘내려오는데, 왼쪽2번은 .left를 width:200px로 고정시킨것 때문인지 전부 펼쳐지지 못하고 사진처럼 막힙니다. 마우스를 올리면 자바는 잘 먹혀서 나왔다 들어가는건 보이고 css문제 같은데, 왼쪽2번 완성본과 비교해도 어느부분이 문제인지 모르겠어서 질문드립니다.저는 header의 메뉴부분 div를 .menu라고 css를 줬고, 네비게이션 부분은 .menu안에 .navi, .sub-navi라고 이름 지었습니다.네비게이션이 계속 높이값과 넓이값때문에 전부 펼쳐지지 못하고 가려지는건 z-index로 해결해야하나요?1) html코드 <div class="content"> <div class="left"> <!-- header --> <header> <div class="logo"></div> <div class="menu"> <!-- navi --> <ul class="navi"> <li> <a href="#">main1</a> <div class="sub-navi"> <a href="#">sub1</a> <a href="#">sub2</a> <a href="#">sub3</a> <a href="#">sub4</a> </div> </li> <li> <a href="#">main2</a> <div class="sub-navi"> <a href="#">sub1</a> <a href="#">sub2</a> <a href="#">sub3</a> <a href="#">sub4</a> </div> </li> <li> <a href="#">main3</a> <div class="sub-navi"> <a href="#">sub1</a> <a href="#">sub2</a> <a href="#">sub3</a> <a href="#">sub4</a> </div> </li> <li> <a href="#">main4</a> <div class="sub-navi"> <a href="#">sub1</a> <a href="#">sub2</a> <a href="#">sub3</a> <a href="#">sub4</a> </div> </li> </ul> <!-- navi --> </div> </header> </div> <div class="right"> <!-- section --> <div class="section"> <div></div> </div> <!-- items --> <div class="items"> <div class="notice"></div> <div class="banner"></div> <div class="short"></div> </div> <!-- footer --> <footer> <div class="llogo"></div> <div class="mmenu"> <div></div> <div></div> </div> </footer> </div> </div>2) css코드*{ margin: 0; padding: 0; } .content{ border: solid 1px #000; width: 1000px; overflow: hidden; } .content > div{ float: left; box-sizing: border-box; } .left{ width: 200px; } .right{ width: 800px; } header{ overflow: hidden; } header > div{} .logo{ border: solid 1px #000; height: 100px; } .menu{ /* border: solid 1px #000; */ /* height: 200px; */ } /* navi */ .navi{ padding: 0; list-style: none; width: 90%; margin: auto; margin-top: 10px; /* 2번추가 */ position: relative; } .navi li{ box-sizing: border-box; text-align: center; background: #fff; } /* 큰메뉴(자식)만 선택 */ .navi li > a{ border: solid 1px #000; display: block; padding: 5px; color: #000; text-decoration: none; transition: 0.5s; } .navi li:hover > a{ /* 큰메뉴hover는 li에 넣기(그래야 자손메뉴 호버시에도 유지) */ background: #fff; color: #000; } .sub-navi{ border: solid 1px #000; /* 1번 = css다하면 서브메뉴 가리기 */ display: none; /* 2번추가 */ position: absolute; top: 0; left: 100%; /* 부모요소에 딱 붙이기 */ width: 100%; height: 200px; background: #000; } .sub-navi a{ display: block; /* 세로정렬 먼저하기 */ padding: 5px; transition: 0.5s; color: #FFF; text-decoration: none; } .sub-navi a:hover{ background: #fff; color: #000; } /* navi */ .section{ overflow: hidden; } .section div{ border: solid 1px #000; height: 350px; } .items{ overflow: hidden; } .items > div{ border: solid 1px #000; height: 200px; float: left; box-sizing: border-box; } .notice{ width: 300px; } .banner{ width: 250px; } .short{ width: 250px; } footer{ overflow: hidden; } footer > div{ border: solid 1px #000; height: 100px; float: left; box-sizing: border-box; } .llogo{ width: 200px; } .mmenu{ overflow: hidden; width: 600px; } .mmenu > div{ border: solid 1px #000; height: 50px; box-sizing: border-box; }3) js코드$('.navi li').mouseenter(function(){ $(this).children('.sub-navi').stop().slideDown() }) $('.navi li').mouseleave(function(){ $(this).children('.sub-navi').stop().slideUp() })
-
해결됨[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
css슬라이드 배너
안녕하세요.강의듣고 시험 보고 왔는데 슬라이드 배너 가로형이 출제 되었는데요css사용해서 슬라이드 작업했고요 배운것은 123에서 다시 1번으로 돌아와서 롤링되는 방식인데 그렇게 하면 감점사항이라고 시험관이 그래서요.지금 보니까 jquery로 작업하는 방식이 맞는것 같은데감점이 많이 될까요?.
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
fixed position when scrolling 옵션
Constraints 밑에 fixed position 옵션이 안 뜨는 경우는 어떻게 해결해야 하나요?
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
강의 잘 따라가고 있는지 체크 부탁합니다.
<!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> </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="spot-menu"> <a href="#none">로그인</a> <span>|</span> <a href="#none">회원가입</a> </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"> <h2>얼리버드 선착순 할인 이벤트</h2> <p> 12월 개강반을 접수하는 분들께는 15%의 얼리버드 할인을 제공합니다.<br> <b>기간: 2022년 12월 18일~ 12월 25일</b> </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> </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="copyright"> 상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스 </div> <div class="sns"> <a href="#none"><img src="images/sns-01.png" alt="sns1"></a> <a href="#none"><img src="images/sns-02.png" alt="sns2"></a> <a href="#none"><img src="images/sns-03.png" alt="sns3"></a> </div> </footer> </div> <div class="modal"> <div class="modal-content"> <h3>스트리밍 서버 이전으로 서비스 장애</h3> <p> 스트리밍 서버 이전 작업으로 2시간 서비스 중지됩니다. 주요 작업 내용은 아래와 같습니다. <ol> <li>서버 이전에 따른 DNS 이전으로 기존 호스팅 서비스 대체</li> <li>문자셋을 utf-8로 변경 후 모바일 등에 대처하기 위해 미리 조치</li> <li>스트리밍 서버 CDN과 연동 후 멀티미디어 이러닝 서비스가 제공</li> </ol> 위 내용을 보시면 제법 큰 작업이었음을 알 수 있습니다.<br> 특히 문자셋의 변경에 따라 기존의 DB, data, 웹사이트 솔루션 등의 커스트마이징 등에 상당한 어려움이 있었고, 이에 따른 일부 접속 오류가 있을 수 있었음에 양해를 구합니다. 특히 인터넷익스플로러 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 red; */ /* height: 800px; */ } .left { width: 200px; } .center { width: 400px; } .right { flex: 1; } header { position: relative; z-index: 10; } header > div { /* border: 1px solid blue; */ } .header-logo { height: 100px; display: flex; align-items: center; } .navi { height: 150px; } /* Navigation */ .menu { list-style: none; padding: 0; width: 90%; margin: auto; margin-top: 10px; } .menu li { text-align: center; background-color: #fff; position: relative; } .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: 0; left: 100%; width: 100%; height: 150px; background-color: #ddd; display: none; } .sub-menu a { display: block; padding: 5px; transition: 0.5s; color: #000; } .sub-menu a:hover { background-color: #000; color: #fff; } .spot-menu { height: 50px; text-align: center; } .spot-menu a:hover { text-decoration: underline; } .items {} .items > div { /* border: 1px solid black; */ } .shortcut { height: 150px; display: flex; align-items: center; font-size: 14px; padding: 0 5px; gap: 5px; } .shortcut .shortcut-image { height: 70px; } .shortcut h2 { font-size: 17px; } .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: #ddd; } .tab1 { border: 1px solid #000; height: 170px; box-sizing: border-box; padding: 5px 10px; } .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%; overflow: hidden; white-space: nowrap; 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: 35px; } .tab2 a { display: inline-block; text-align: center; } .tab2 a img { height: 80px; border-radius: 5px; margin: 0 25px; } .tab2 a span { display: block; } .slide { display: flex; } .slide > div { /* border: 2px solid green; */ height: calc(100vh - 100px); } .slide-image { flex: 1; overflow: hidden; position: relative; height: inherit; } .slide-image-inner { font-size: 0; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; height: inherit; } .slide-image-inner a { height: inherit; } .slide-image-inner a img { width: 100%; height: inherit; object-fit: cover; } @keyframes slide { 0% { top: 0; } 30% { top: 0; } 35% { top: -100%; } 65% { top: -100%; } 70% { top: -200%; } 95% { top: -200%; } 100% { top: 0; } } footer { display: flex; height: 100px; align-items: center; } footer > div { /* border: 1px solid red; */ text-align: center; } .footer-logo { width: 200px; display: flex; align-items: center; } .copyright { flex: 1; } .sns { width: 230px; } .sns a img { width: 50px; border-radius: 5px; } /* modal */ .modal { background-color: #00000052; 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; } /* 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() })
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
D,E이미니사이즈
안녕하세요 d,e타입 슬라이드 이미지 사이즈는 포토샵에서 몇으로 작업해야하는지 알 수 있을까요~??
-
미해결퍼블리셔 개인 포트폴리오 홈페이지 제작 완벽 가이드(PDF)
수강생참고자료 어디서 봐요?
수강생참고자료 어디서 봐요?
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
플러그인 다운로드 및 폴더파일 세팅 질문
안녕하세요 선생님. 플러그인 폴더 세팅 질문드립니다.강의에는 image폴더와 source 폴더만 나와있는데 파일을 다운로드 하면 위 사진처럼 style.css, custom.js등 완성된 파일이 있습니다. 소스에서 압축 파일을 풀고 자료를 옮기면 이름이 겹쳐서 문제가 생겨서 강의처럼 images,source 외 모든 파일 지우고 진행해도 괜찮을까요?
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
프로토타입에서 액션을 취했을때 팝업요소가 나오도록 할 수 있나요?
예를 들어서...1. 버튼을 눌렀을 때 페이지 이동 대신 이런저런 모달이나 drawer, 스낵바와 같은 팝업 요소를 현재 페이지 위에 구현하는 것과...2. 버튼이나 아이콘따위를 눌렀을때 예를 들어서... 리스트나 카드 같은 것이 접히고 펴지는(expandable) 액션과 같은 것들이 프로토타입 상에서도 구현 가능한 것으로 알고 있습니다. 하지만 저는... 어떻게 설정을 하는지 찾아보는데 조금 애를 먹고 있습니다. 도와주시면 감사드리겠습니다.
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
팝업창이 열리지 않습니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>E3</title> <link rel="stylesheet" href="css/E3.css"> </head> <body> <div class="container"> <div class="maincontent"> <div class="left"> <header> <div class="header-logo"></div> <div class="navi"> <ul class="menu"> <li> <a href="#none">MENU1</a> <div class="sub-menu"> <a href="#none">submenu1</a> <a href="#none">submenu2</a> <a href="#none">submenu3</a> <a href="#none">submenu4</a> </div> </li> <li> <a href="#none">MENU2</a> <div class="sub-menu"> <a href="#none">submenu1</a> <a href="#none">submenu2</a> <a href="#none">submenu3</a> <a href="#none">submenu4</a> </div> </li> <li> <a href="#none">MENU3</a> <div class="sub-menu"> <a href="#none">submenu1</a> <a href="#none">submenu2</a> <a href="#none">submenu3</a> <a href="#none">submenu4</a> </div> </li> <li> <a href="#none">MENU4</a> <div class="sub-menu"> <a href="#none">submenu1</a> <a href="#none">submenu2</a> <a href="#none">submenu3</a> <a href="#none">submenu4</a> </div> </li> <li> <a href="#none">MENU5</a> <div class="sub-menu"> <a href="#none">submenu1</a> <a href="#none">submenu2</a> <a href="#none">submenu3</a> <a href="#none">submenu4</a> </div> </li> </ul> </div> <div class="spot-menu"></div> </header> </div> <div class="center"> <div class="items"> <div class="shortcut"></div> <div class="news"> <div class="tab-inner"> <div class="btn"> <a href="#none">공지사항</a> </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.12.20</b></a> <a href="#none"><em>내 집 마련의 꿈을 꿈이 아닌 현실로 만드는 진짜 방법</em><b>2022.12.20</b></a> <a href="#none"><em>외국인과 영어로 네이티브처럼 대화하는 노하우!</em><b>2022.12.20</b></a> <a href="#none"><em>월 500만원 매출을 내는 블로그 운영하는 노하우</em><b>2022.12.20</b></a> </div> </div> </div> <div class="gallery"></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="슬라이드1"></a> <a href="#none"><img src="images/slide-e-02.jpg" alt="슬라이드2"></a> <a href="#none"><img src="images/slide-e-03.jpg" alt="슬라이드3"></a> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="sns"></div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>스트리밍 서버 이전으로 서비스 장애</h2> <p>스트리밍 서버 이전 작업으로 2시간 서비스 중지됩니다. 주요 작업 내용은 아래와 같습니다. <br>1. 서버 이전에 따른 DNS 이전으로 기존 호스팅 서비스 대체 <br>2. 문자셋을 utf-8로 변경 후 모바일 등에 대처하기 위해 미리 조치 <br>3. 스트리밍 서버 CDN과 연동 후 멀티미디어 이러닝 서비스가 제공 <br>위 내용을 보시면 제법 큰 작업이었음을 알 수 있습니다. 특히 문자셋의 변경에 따라 기존의 DB, data, 웹사이트 솔루션 등의 커스트마이징 등에 상당한 어려움이 있었고, 이에 따른 일부 접속 오류가 있을 수 있었음에 양해를 구합니다. 특히 인터넷익스플로러 11로 접속하셨을 경우 일부 문제은행 목차가 출력되지 않았을 수도 있습니다. 서버 이전 작업으로 고객님들께 불편을 드려서 대단히 죄송합니다. 정상 운영되도록 최선을 다하겠습니다. 감사합니다. </p> <div class="close-modal" href="none">X 닫기</div> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/E3.js"></script> </body> </html>@charset "utf-8"; body { font-size: 15px; background-color: #fff; color: #000; margin: 0; } a { color: #000; text-decoration: none; } .container { border: 1px solid seagreen; } .maincontent { border: 1px solid sandybrown; display: flex; } .left { width: 200px; } .center { width: 400px; } .right { flex: 1; } header {} header > div { border: 1px solid aqua; } .header-logo { height: 100px; } .navi { height: 500px; } /* NAVIGATION */ .menu { width: 90%; margin: auto; padding: 0; list-style: none; } .menu li { position: relative; text-align: center; } .menu li > a { display: block; border: 1px solid #000; padding: 5px; transition: 0.3s; } .menu li:hover > a { background-color: lightgray; } .sub-menu { display: none; position: absolute; top: 0; left: 100%; width: 100%; } .sub-menu a { display: block; background-color: #00000050; padding: 5px; } .sub-menu a:hover { background-color: #000; color: #fff; } .spot-menu { height: 50px; } .items {} .items > div { border: 1px solid lightcoral; } .shortcut { height: 150px; } .news { height: 250px; } .gallery { height: 250px; } /* news-gallery */ .tab-inner { box-sizing: border-box; overflow: hidden; } .btn {} .btn a { border: 1px solid #000; display: inline-block; width: 100px; padding: 5px; text-align: center; border-radius: 5px 5px 0 0; background-color: lightgray; margin-bottom: -1px; border-bottom: none; } .tab1 { border: 1px solid #000; } .tab1 a { width: 95%; margin: auto; overflow: hidden; padding: 5px; display: block; border-bottom: 1px dashed lightgray; } .tab1 a:last-child { border-bottom: none; } .tab1 a em { float: left; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 70%; } .tab1 a b { float: right; } /* .tab-inner { width: 95%; margin: auto; } .btn {} .btn > a { border: 1px solid #000; padding: 5px; width: 100px; display: inline-block; text-align: center; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -1px; background-color: gainsboro; } .tab1 { border: 1px solid #000; } .tab1 a { display: block; overflow: hidden; padding: 5px; border-bottom: 1px solid #000; width: 95%; margin: auto; } .tab1 > a:last-child { border-bottom: none; } .tab1 > a em { font-style: normal; width: 70%; float: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tab1 > a > b { font-weight: normal; float: right; } */ /* slide-image */ .slide-banner { /* height: 150px; */ display: flex; } .slide-banner a img { width: 100%; } /* Slide */ .slide {} .slide-image { height: calc(100vh - 120px); } /* Slide */ .slide { display: flex; } .slide-image { flex: 1; position: relative; overflow: hidden; } .slide-image-inner { /* 실제로 움직이는 요소 */ font-size: 0; width: 300%; height: inherit; position: absolute; animation: slide 10s linear infinite; } .slide-image-inner a { /* 움직이는 .slide-image-inner에 포함된 요소 */ display: inline-block; height: inherit; width: calc(100% / 3); } .slide-image-inner a img { width: 100%; height: inherit; 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; } } /* 좌우 슬라이드 */ /* .slide-image-inner { top: 0; left: 0; font-size: 0; width: 100%; height: inherit; position: absolute; animation: slide 10s linear infinite; } .slide-image-inner a { width: inherit; height: inherit; } .slide-image-inner a img { object-fit: cover; width: inherit; height: inherit; } @keyframes slide { 0% { top: 0; } 30% { top: 0; } 35% { top: -100%; } 65% { top: -100%; } 70% { top: -200%; } 95% { top: -200%; } 100% { top: 0; } } */ footer { display: flex ; } footer > div { border: 1px solid saddlebrown; height: 100px; } .footer-logo { width: 200px; } .copyright { flex: 1; } .sns { width: 250px; } /* modal */ .modal { display: none; position: absolute; background-color: #0000004f; top: 0; left: 0; width: 100%; height: 100%; } .modal-content { top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; background-color: #fff; padding: 15px; width: 400px; height: 450px; } .modal-content h2 { text-align: center; background-color: #000; padding: 5px; color: #fff; } .modal-content p {} .close-modal { float: right; border: 1px solid #000; padding: 5px; width: 50px; }// 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() })안녕하세요! 공지사항 첫째 줄 글을 클릭했을 때 팝업창이 떠야 하는데 왜 안 뜨는 건지 코드를 봐도 잘 모르겠어서 질문 남깁니다. 왜 안뜨는 걸까요...? 완성본 코드와 비교했을 때 틀린 부분은 없는 것 같아서요.
-
해결됨피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
버튼 생성 시 Frame과 Rectangle의 차이
안녕하세요.[스플래시 UI화면 디자인하기]를 실습중입니다.버튼을 만들 때 Rectangle과 Text를 그룹으로 알려주셨습니다. Rectangle 대신 Frame을 사용해도 되는지, 된다면 차이점이 무엇인지 질문드립니다.
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
span텍스트 아래로 안가져요 ㅠㅠㅠ
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>D-4</title> <link rel="stylesheet" href="css/style4.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"> <a href="#"><img src="images/header-logo.png" alt="header-logo"></a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#">menu1</a> <div class="sub-menu"> <a href="#">sub-menu1</a> <a href="#">sub-menu2</a> <a href="#">sub-menu3</a> <a href="#">sub-menu4</a> </div> </li> <li> <a href="#">menu2</a> <div class="sub-menu"> <a href="#">sub-menu1</a> <a href="#">sub-menu2</a> <a href="#">sub-menu3</a> <a href="#">sub-menu4</a> </div> </li> <li> <a href="#">menu3</a> <div class="sub-menu"> <a href="#">sub-menu1</a> <a href="#">sub-menu2</a> <a href="#">sub-menu3</a> <a href="#">sub-menu4</a> </div> </li> <li> <a href="#">menu4</a> <div class="sub-menu"> <a href="#">sub-menu1</a> <a href="#">sub-menu2</a> <a href="#">sub-menu3</a> <a href="#">sub-menu4</a> </div> </li> </ul> </div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-images"> <div class="slide-images-inner"> <a href="#"><img src="images/slide-d-01.jpg" alt=""></a> <a href="#"><img src="images/slide-d-02.jpg" alt=""></a> <a href="#"><img src="images/slide-d-03.jpg" alt=""></a> </div> </div> </div> <div class="banner"> <a href="#"><img src="images/banner-01.png" alt="banner-01"></a> <span>배너1</span> <a href="#"><img src="images/banner-02.png" alt="banner-02"></a> <span>배너2</span> <a href="#"><img src="images/banner-03.png" alt="banner-03"></a> <span>배너3</span> <a href="#"><img src="images/banner-04.png" alt="banner-04"></a> <span>배너4</span> <a href="#"><img src="images/banner-05.png" alt="banner-05"></a> <span>배너5</span> <a href="#"><img src="images/banner-06.png" alt="banner-06"></a> <span>배너6</span> <a href="#"><img src="images/banner-07.png" alt="banner-07"></a> <span>배너7</span> </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="#">스트리밍 서버 이전 작업으로 2시간 서비스 중지<b>2022.12.20</b></a> <a href="#">얼리버드 선착순 할인 이벤트 최대 50% 할인<b>2022.10.13</b></a> <a href="#">내 집 마련의 꿈을 꿈이 아닌 현실로 만드는 진짜 방법<b>2022.11.31</b></a> <a href="#">외국인과 영어로 네이티브처럼 대화하는 노하우!<b>2022.08.09</b></a> <a href="#">월 500만원 매출을 내는 블로그 운영하는 노하우<b>2022.07.07</b></a> </div> </div> </div> <div class="gall"> <div class="tab-inner"> <div class="btn"> <span>갤러리</span> </div> <div class="tab2"> <a href="#"><img src="images/gallery-01.png" alt="images/gallery-01"></a> <span>갤러리1</span> <a href="#"><img src="images/gallery-02.png" alt="images/gallery-02"></a> <span>갤러리2</span> <a href="#"><img src="images/gallery-03.png" alt="images/gallery-03"></a> <span>갤러리3</span> </div> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#"><img src="images/footer-logo.png" alt="footer-logo"> </a> </div> <div class="footer-content"> <div class="footer-link"> <a href="#">기업소개 제휴 및 입점 문의</a> <span>ㅣ</span> <a href="#">이용약관</a> <span>ㅣ</span> <a href="#">개인정보처리방침</a> <span>ㅣ</span> <a href="#">이메일무단수집거부</a> <span>ㅣ</span> <a href="#">사이트맵</a> <span>ㅣ</span> <a href="#">인재채용</a> <span>ㅣ</span> <a href="#">기업소개 제휴 및 입점 문의</a> </div> <div class="copy"> 상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장<br> 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스 </div> </div> <div class="family-site"> <select> <option value="">family site</option> <option value="">코딩웍스 커뮤니티</option> <option value="">코딩웍스 쇼핑몰</option> <option value="">코딩웍스 재단</option> </select> </div> </footer> <div class="modal"> <div class="modal-content"> <h3>스트리밍 서버 이전으로 서비스 장애</h3> <p>스트리밍 서버 이전 작업으로 2시간 서비스 중지됩니다. 주요 작업 내용은 아래와 같습니다. <ol> <li>서버 이전에 따른 DNS 이전으로 기존 호스팅 서비스 대체</li> <li>문자셋을 utf-8로 변경 후 모바일 등에 대처하기 위해 미리 조치</li> <li>스트리밍 서버 CDN과 연동 후 멀티미디어 이러닝 서비스가 제공</li> </ol> </p> <a class="close-modal" href="#">닫기</a> </div> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom4.js"></script> </body> </html>@charset "utf-8"; body{ background-color: #fff; color: #333; margin: 0; } a{ text-decoration: none; color: #333; } .container{} .main-content{ display: flex; } .main-content>div{ } .left{ width: 200px; } .right{ flex: 1; } header{} header>div{ } .header-logo{ height: 100px; padding-top: 10px; box-sizing: border-box; } .navi{ height: 400px; width: 90%; margin: auto; } .menu{ padding: 0; } .menu li{ list-style: none; } .menu li>a{ width: 94%; border: 1px solid #000; display: inline-block; padding: 5px; margin: auto; text-align: center; transition: 0.5s; } .menu li>a:hover{ background-color: #000; color: #fff; } .sub-menu{ display: none; } .sub-menu a{ display: block; text-align: center; padding: 5px; border: 1px solid #000; transition: 0.5s; } .sub-menu a:hover{ background-color: #000; color: #fff; } .slide{ height: 400px; position: relative; overflow: hidden; } .slide-images{ height: 400px; } .slide-images-inner{ position: absolute; top: 0; left: 0; font-size: 0; animation: slide 10s linear infinite; } @keyframes slide{ 0%{top:0} 30%{top:0} 35%{top:-400px} 65%{top:-400px} 70%{top:-800px} 95%{top:-800px} 100%{top:0} } .slide-images-inner a{ } .slide-images-inner img{} .banner{ height: 150px; display: flex; align-items: center; } .banner a{ margin: auto; display: block; } .banner a img{ width: 120px; } .banner a img span{ } .items{ height: 250px; display: flex; } .items>div{ height: 250px; flex: 1; } .news{} .gall{} .tab-inner{} .btn{} .btn span{ border: 1px solid #000; display: inline-block; padding: 10px; width: 150px; text-align: center; border-radius: 5px 5px 0 0; background-color: #ddd; border-bottom: none; margin-bottom: -1px; } .tab1{ border: 1px solid #000; height: 168px; width: 98%; } .tab1 a{ width: 95%; margin: auto; display: block; border-bottom: 1px solid #000; padding: 5px; } .tab1 a:last-child{ border-bottom: none; } .tab1 a b{ font-weight: normal; float: right; } .tab2{ width: 98%; border: 1px solid #000; height: 168px; display: flex; } .tab2 a{ margin: auto; } .tab2 a img{ width: 120px; display: inline-block; } .tab2 span{ display: block; } footer{ display: flex; height: 100px; align-items: center; } footer>div{ } .footer-logo{ width: 200px; } .footer-content{ flex: 1; } .footer-content>div{ display: flex; align-items: center; height: 50px; } .footer-link{ } .footer-link a:hover{ text-decoration: underline; color: skyblue } .copy{} .family-site{ text-align: center; width: 230px; } .modal{ background-color: #000; top: 0; position: absolute; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); display: none; } .modal-content{ position: absolute; background-color: #fff; width: 600px; padding: 20px; border-radius: 20px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .modal-content h3{ background-color: black; padding: 10px; color: #fff; } .modal-content p{} .modal-content a{ border: 1px solid #000; padding: 5px; float: right; }$('.open-modal').click(function(){ $('.modal').fadeIn() }) $('.close-modal').click(function(){ $('.modal').fadeOut() }) $('.menu>li').mouseover(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu>li').mouseout(function(){ $(this).children('.sub-menu').stop().slideUp() })
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
레이아웃 B타입 만들기 footer-inner 작동오류
index.html<div class="footer-inner"> <footer> <div class="footer-logo"></div> <div class="copyright"> <div></div> <div></div> </div> </footer> </div> style sheet.footer-inner{ background-color: beige;}footer{ border: 1px solid green; width: 1200px; margin: auto;}footer > div { height: 100px; box-sizing: border-box; float: left;}.footer-logo{ border: 1px solid pink; width: 200px;}.copyright{ width: 1000px;}.copyright > div { border: 1px solid black; height: 50px; } footer-inner 부분만 먹히지 않아요... background-color를 줘도 실행이 안됩니다ㅠㅠ
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
전체레이아웃 E형 _ 브라우져 가로스크롤 생성이 됩니다.
안녕하세요 강좌를 듣고 큰 도움을 얻고 있습니다. 강의 듣고 따라 하는중 궁금사항이 있어 문의드립니다. - 전체레이아웃 E형 강의 듣고 따라 하여 모두 정상적으로 잘 레이아웃이 작성되었습니다. ( 강좌명 : E유형(HTML 전체 레이아웃 제작 with Flex) – E1) 그런데 , 브라우져의 세로 스크롤이 생성됩니다. 세로 스크롤을 안생기게 하려면 어떻게 해야 할까요?
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
넣지 않은 패딩이 있고 해당부분을 해결할 수 없어요
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.<보고 있던 강의제목>3. 상단 드롭다운 네비게이션(3가지 타입) – HTML+CSS+JQUERY강의시점 23:09아래는 작성한 cssbody { display: flex; justify-content: center; } .container { border: 1px solid #000; width: 1200px; } header { display: flex; justify-content: space-between; position: relative; } header>div { border: 1px solid #000; height: 100px; } .header-logo { width: 200px; } .navi { width: 600px; } .slide {} .slide div { border: 1px solid #000; height: 300px; } .items { display: flex; } .items>div { border: #000 1px solid; height: 200px; } .news { width: 400px; } .banner { width: 400px; } .shortcut { width: 400px; } footer { display: flex; } footer>div { border: #000 1px solid; height: 100px; } .footer-logo { width: 200px; } .copyright { width: 800px; } .sns { width: 200px; } /* navi */ .menu { list-style: none; margin-top: 67px; } .menu li { /* border: #000 1px solid; */ float: left; width: 25%; box-sizing: border-box; text-align: center; } .sub-menu { border: #000 1px solid; /* display: none; */ } .sub-menu a { display: block; text-decoration: none; padding: 5px; background-color: #fff; transition: 0.5s; } .sub-back { width: 100%; height: 200%; background-color: #000; position: absolute; right: 0; } .sub-menu a:hover { background-color: #000; color: #fff; } .menu li>a { border: #000 1px solid; display: block; padding: 5px; text-decoration: none; } .menu li:hover>a { background-color: #000; color: #fff; }
