묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
D유형 레이아웃 연습중인데 슬라이드 이미지 크기가 변하지 않습니다
@charset "UTF-8"; body{ margin: 0; background-color: #ffffff; color: #333333; } a{ text-decoration: none; color: #333333; } .container{ width: 100%; } .main{ margin: auto; display: flex; border: 1px #333333 solid; box-sizing: border-box; } footer{ margin: auto; } .left{ width: 200px; border: 1px #333333 solid; box-sizing: border-box; } .right{ width: calc(100% - 200px); border: 1px #333333 solid; box-sizing: border-box; } .header-logo{ height: 100px; border: 1px #333333 solid; } .navi{ border: 1px #333333 solid; box-sizing: border-box; height: 100px; } .sub-menu{ border: 1px #333333 solid; height: 100px; } .header-logo a img{ object-fit: cover; } .slide{ height: 400px; border: 1px #333333 solid; position: relative; } .slide-itmes{ height: 400px; border: 1px #333333 solid; position: relative; overflow: hidden; } .silde-items-img{ height: 400px; width: 300%; font-size: 0; position: absolute; } .silde-items-img a{ border: 1px #333333 solid; height: inherit; width: calc(100% / 3); display: inline-block; box-sizing: border-box; } .silde-items-img a img{ object-fit: cover; height: inherit; width: 100%; } .slide-banner{ position: absolute; top: 0; right: 0; box-sizing: border-box; } .item1{ height: 200px; border: 1px #333333 solid; box-sizing: border-box; } .item2{ height: 250px; border: 1px #333333 solid; box-sizing: border-box; } .news{ height: inherit; } footer{ border: 1px #333333 solid; display: flex; justify-self: start; box-sizing: border-box; width: 100%; } footer>div{height: 100px;} .footer-logo{ background-color: #161111; width: 200px; } .copyright{ background-color: aqua; width: calc(100% - 400px); } .sns{ background-color: rgb(158, 69, 69); width: 200px; }<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css"> <title>Document</title> </head> <body> <div class="container"> <div class="main"> <div class="left"> <header> <div class="header-logo"> <a href="#none"><img src="images/logo-b4-header.png" alt=""></a> </div> <div class="navi"></div> <div class="sub-menu"></div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-items"> <div class="slide-items-img"> <a href="#none"><img src="images/slide-d-01.jpg" alt=""></a> </div> </div> <div class="slide-banner"> <a href="#none"><img src="images/banne-a1-02.jpg" alt=""></a> </div> </div> <div class="item1"> <div class="shortcut"></div> </div> <div class="item2"> <div class="news"></div> </div> </div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="sns"></div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html>ovject-fit:cover;했는데 이미지가 유동적으로 변하지 않아서 글을 올립니다 창 넓이를 늘리면 슬라이드창에 맞춰 이미지 크기가 변해 붙지 않고 공백이 생겨납니다
-
해결됨[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
B-4연습중인데 네비게이션의 a태그 두께가 이상하고 슬라이드 다운시 문제가 있습니다.
@charset "UTF-8"; body{ margin:0 ; background-color: #fff; color: #222328; } a{ color: #222328; text-decoration: none; } .header-inner{ width: 1200px; margin: auto; line-height: 120px; } header{ height: 100px; width: 1200px; margin: auto; z-index: 20; position: relative; } header>div{ height:100px;} .header-logo{ width: 200px; height: 100px; float: left; } .navi{ width: 800px; height: 100px; float: right; } .contents-inner{ width: 1200px; margin: auto; } .slide{ width: 1200px; height: 300px; position: relative; overflow: hidden; } .slide-items{ width: 3600px; height: 300px; font-size: 0; position: absolute; } .items{ width: 1200px; margin: auto; display: flex; } .items>div{ height: 200px; width: 400px; } .footer-inner{ border: #222328 1px solid; width: 1200px; margin: auto; } footer{ height: 100px; width: 1200px; display: flex; overflow: hidden; } .footer-items{ width: 1000px; } .footer-items div{ height: 50px; border: #222328 1px solid; } .fmily-site{ border: #222328 1px solid; width: 200px; } /* 갤러리,공지사항 */ .tab-inner{ padding-top: 10px; } .tab1{ border: #222328 1px solid; width: 93%; padding: 10px; margin: auto; } .tab1 a{ display: block; border-bottom: 1px #222328 solid; } .tab1 a:last-child{ border-bottom: none; } b{ float: right; font-weight: normal; } .tab-inner>span{ display: inline-block; border: #222328 1px solid; border-radius: 5px 5px 0 0; border-bottom: #fff 1px solid; margin-bottom: -1px; margin-left: 10px; width: 100px; text-align: center; } .tab2{ border: #222328 1px solid; width: 93%; padding: 10px; margin: auto; padding-top: 22px; text-align: center; height: 112px } .tab2 a img{ width: 100px; } .banner a img{ padding: 5px; width: 95%; } /* 메뉴 */ .menu{padding: 0;} .menu li{ float: left; width: 25%; list-style: none; text-align: center; display: block; } .menu li>a{ display: block; } .sub-menu{ background-color: #222328; border: 1px solid #222328 } .sub-menu a{ display: block; text-align: center; color: #fff; z-index: 8; display: none; } .menu li:hover>a{ color: #fff; background-color: #222328; } .sub-menu a:hover{ color: #222328; background-color: #fff; } .sub-back{ width: 1200px; height: 200px; background-color: #222328; position: absolute; left: 0; top:100%; z-index: -3; display: none; } .footer-items:nth-child(1){ text-align: center; }setInterval(function(){ $('.slide-items').animate({left:'-1200px'},function(){ $('.slide-items').css({left:0}) $('.slide-items a:first-child').appendTo('.slide-items') }) }, 3500); $('.menu li').mouseenter(function(){ $('.sub-menu,.sub-back').slideDown() }) $('.menu li').mouseleave(function(){ $('.sub-menu,.sub-back').slideUp() }) <!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="header-inner"> <header> <div class="header-logo"> <a href="#none"><img src="images/header-logo.jpg" alt=""></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> <div class="sub-back"></div> </ul> </div> </header> </div> <div class="contents-inner"> <div class="slide"> <div class="slide-items"> <a href="#none"><img src="images/slide01.jpg" alt="슬라이드1"></a> <a href="#none"><img src="images/slide02.jpg" alt="슬라이드2"></a> <a href="#none"><img src="images/slide03.jpg" alt="슬라이드3"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <span>공지사항</span> <div class="tab1"> <a href="#none">산업대학교 동문회장배 자선골프대회<b>2016-09-12</b></a> <a href="#none">개교 100주년 기념 야외 오페라 초청 <b>2016-09-10</b></a> <a href="#none">동문회장 및 운영위원장 후보자 추천<b>2016-09-09</b></a> <a href="#none">진행위원회(정회원) 선발 결과<b>2016-09-07</b></a> <a href="#none">산업대학교 동문회 개최일 변경<b>2016-08-30</b></a> </div> </div> </div> <div class="gallery"> <div class="tab-inner"> <span>갤러리</span> <div class="tab2"> <a href="#none"><img src="images/img1.jpg" alt="이미지"></a> <a href="#none"><img src="images/img2.jpg" alt="이미지"></a> <a href="#none"><img src="images/img3.jpg" alt="이미지"></a> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner.jpg" alt=""></a> </div> </div> </div> <div class="footer-inner"> <footer> <div class="footer-items"> <div><a href="#none">법적고지 개인정보취급방침 개인정보처리방침 <br>상호명 : 산업대학교 대표자 : 송성훈 개인정보관리책임자 : 김보미 대리 사업장주소 : 서울특별시 중구 개항로 49</a></div> <div><select> <option value="">패밀리사이트</option> <option value="">산업대학교</option> <option value="">정보통신부</option> <option value="">과학기술연구원 </option> </select></div> </div> <div class="family-site"> <select> <option value="https://www.naver.com">네이버 </option> </select> </div> </footer> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html>
-
해결됨[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
A2 연습중인데 메뉴 배경색과 서브메뉴 크기, 갤러리 그림 정리에 문제가 있습니다
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Green복지재단</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#none"><img src="images/header-logo.jpg" alt="헤더로고"></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> </header> <div class="slide"> <div class="slide-items"> <a href="#none"><img src="images/slide01.jpg" alt="슬라이드"></a> <a href="#none"><img src="images/slide02.jpg" alt="슬라이드"></a> <a href="#none"><img src="images/slide03.jpg" alt="슬라이드"></a> </div> </div> <div class="contents"> <div class="news"> <div class="tab-inner"> <div class="btns"> <a href="#none">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tabs"> <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 class="tab2"> <a href="#none"><img src="images/img1.jpg" alt="이미지1"></a> <a href="#none"><img src="images/img2.jpg" alt="이미지2"></a> <a href="#none"><img src="images/img3.jpg" alt="이미지3"></a> </div> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner.jpg" alt="배너"></a> </div> <div class="shortcut"> <a href="#none"><img src="images/shortcut.jpg" alt="쇼컷"></a> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/footer-logo.jpg" alt="푸터로고"></a> </div> <div class="copyright"> 법적고지 개인정보취급방침 개인정보처리방침 <br>상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장 <br>사업장주소 : 서울특별시 강남구 테헤란로 123-56 </div> <div class="family-site"> <select name="" id=""> <option value="https://naver.com">네이버</option> <option value="https://daum.net">다음</option> </select> </div> </footer> </div> </div> <div class="modal-layer"> <div class="modal-contents"> <h1>SNS비회원주문하기 종료 안내</h1> <h2> 안녕하세요, JUST 쇼핑몰 MD 홍길동입니다. 안타깝게도 SNS비회원 주문하기 서비스가 한달 뒤 종료될 예정입니다. <br>회원가입없이 SNS계정을 이용해 그동안 제품주문을 하실수 있었는데, 금번 강화된 개인정보보호법 시행령 제 9조 (부칙 3조 3항)에 의거, SNS를 이용한 상품 주문/결제등이 근래에 많은 보안잇슈로 문제가 되고 있음에 다라 KISA의 권고조치의 일환으로 했습니다. 따라서, 한달뒤인 2019.03.10 이후 모든 비회원 고객님들께서는 회원가입으로 전환 후 실명인증이 되어야 하며, 이는 모든 쇼핑몰/오픈마켓등의 전자상거래서비스의 공통된 사항이라는 점을 안내해드립니다.</h2> <a href="#none" class="close-modal"></a> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </div> </body> </html>@charset "utf-8"; body{ margin: 0%; background-color: #ffffff; color: #333333; } body a{ color: #333333; text-decoration: none; } .container{ margin: auto; width: 1200px; } header{ height: 100px; } .header-logo{ width: 200px; float: left; padding-top: 20px; text-align: center; } .navi{ border: #333333 1px solid; box-sizing: border-box; width: 800px; float: right; } .contents{ height: 200px; display: flex; } .contents>div{ width: 400px; } footer{ height: 100px; display: flex; } .footer-logo{ width: 200px; line-height: 110px; } .copyright{ width: 700px; text-align: center; padding-top: 10px; } .family-site{ width: 200px; padding-top: 30px; padding-left: 60px; } .modal-layer{ display: none; } select{ text-align: center; } /* 메뉴 */ ul.menu{ list-style: none; position: relative; z-index: 10; padding: 0; } ul.menu>li { float: left; text-align: center; width: 25%; } ul.menu>li>a{ padding: 2px; transition: 0.5s; } .sub-menu>a{ display:block; text-align: center; transition: 0.5s; } .sub-menu{ display: none; } .sub-menu a:hover{ color: #fff; background-color: #333333; } .menu li:hover>a{ color: #fff; background-color: #333333; } /* 슬라이드 */ .slide{ position: relative; height: 300px; overflow: hidden; } .slide-items{ font-size: 0; position: absolute; width: 3600px; height: 300px; } /* 뉴스,갤러리 */ .tab-inner{ padding-top: 20px; } .tab1{width: 95%; padding: 7px; margin: auto; box-sizing: border-box; border: #333333 1px solid; display: none;} .tab1 a{ display: block; font-size: smaller; box-sizing: border-box; border-bottom: #333333 1px solid; } .tab1 a:last-child{ border-bottom: none; } .tab1 a b{ font-weight: normal; float: right; } .tab2{ width: 95%; margin: auto; box-sizing: border-box; border: #333333 1px solid; } .tab2 a{ text-align:center; } .tab2 a img{ width: 100px; } .btns a{ display:inline-block; border: #333333 1px solid; border-radius: 5px 5px 0 0; padding: 2px; border-bottom: #ffffff; background-color: #bbb; } .btns{ margin-left: 15px; margin-bottom: -1px; } .btns a:last-child{ margin-left: -4px; } a.active{ background-color: #fff; } // 메뉴 $('ul.menu>li').mouseenter(function(){ $('.sub-menu').stop().slideDown() }) $('ul.menu>li').mouseleave(function(){ $('.sub-menu').stop().slideUp() }) // 슬라이드 setInterval(function(){ $('.slide-items').animate({left:'-1200px'},function(){ $('.slide-items').css({left:0}) $('.slide-items a:first-child').appendTo('.slide-items') }) },3500) // 탭메뉴 $('.btns a:first-child').click(function(){ $(this).addClass('active') $(this).siblings().removeClass('active') $('.tab1').show() $('.tab2').hide() }) $('.btns a:last-child').click(function(){ $(this).addClass('active') $(this).siblings().removeClass('active') $('.tab2').show() $('.tab1').hide() })서브메뉴가 내려올때 엄청 크게 내려오고, 메뉴의 큰 카테고리에 배경색이 끝까지 채워지지 않습니다
-
해결됨[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
A1 레이아웃 연습중인데 overflow: hidden이나 box-sizing: border-box;가 적용되지 않는 것 같습니다
질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>레이아웃 가로 고정형</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> <div class="slide"> <div></div> </div> <div class="items"> <div class="news"></div> <div class="banner"></div> <div class="shortcut"></div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="sns"></div> </footer> <script src="js/jquery-1.12.4.js"></script> <script src="js/custum.js"></script> </div> </body> </html> .container { border: 1px red solid; box-sizing: border-box; width: 1200px; margin: auto; } header{ border: 1px red solid; box-sizing: border-box; height: 100px; } header div { border: 1px red solid; box-sizing: border-box; height: 100px; } .header-logo{ width: 200px; float: left; } .navi{ width: 800px; float: right; } .slide{ border: 1px red solid; box-sizing: border-box; } .slide div{ border: 1px red solid; box-sizing: border-box; height: 300px; } .items{ border: 1px red solid; box-sizing: border-box; overflow: hidden; } .items div{ border: 1px red solid; float: left; height: 200px; } .news{ width: 500px; } .banner{ width: 350px; } .shortcut{ width: 350px; } footer { overflow: hidden; } footer div{ border: 1px red solid; box-sizing: border-box; height: 100px; float: left; } .footer-logo{ width: 200px; } .copyright{ width: 800px; } .sns{ width: 200px; }
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
input의 포커스되었을때 검정선이 사라지지 않아요
안녕하세요 선생님 visivility: hidden;을하여도 외곽의 검정선이 없어지지 않네요 완성 예제파일도 같은 현상이 나오는데 어떻게 해결하면 좋을까요? <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <title>자손선택자vs자식선택자</title> <link rel="stylesheet" href="/CSS/style.css" /> </head> <body> <form class="login"> <span>Email</span> <input type="email" placeholder="Email Address"> <span>Password</span> <input type="password" placeholder="password"> <p> <label> <input type="checkbox"> Keep me logged in </label> <a href="#none">Forgot Your Password?</a> </p> <button>Log in</button> </form>@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap'); body{ font-family: 'Noto Sans KR', sans-serif; line-height: 1.5em; margin: 0; font-weight: 300; display: flex; justify-content: center; align-items: center; height: 100vh; color: #222; } a{ text-decoration: none; color: #222; } .login{ width: 800px; background-color: #f5f5f5; border: 1px solid #eee; border-radius: 5px; padding: 25px; box-sizing: border-box; box-shadow: 0 0 25px #00000026; } .login span { font-weight: bold; display: block; margin-top: 20px; } .login input[type=email], .login input[type=password] { width: 100%; padding: 15px; box-sizing: border-box; border: 1px solid #ddd; border-radius: 5px; padding-left: 40px; transition: .3s; } .login input[type=email]:hover, .login input[type=password]:hover { border: 1px solid dodgerblue; box-shadow: 0 0 5px dodgerblue; } .login input[type=email]::placeholder, .login input[type=password]::placeholder{ font-style: italic; } .login input[type=email]:focus::placeholder{ visibility: hidden; } .login input[type=email]{ background:#fff url(/img/icon-email.png) no-repeat center left 10px; } .login input[type=password]{ background:#fff url(/img/icon-lock.png) no-repeat center left 10px; } .login p { overflow: hidden; } .login p label { float: left; cursor: pointer; } .login p a { float: right; } .login p a:hover { text-decoration: underline; } .login button { background-color: #2991b1; color: #f5f5f5; width: 300px; padding: 10px; outline: none; border-radius: 5px; border: none; font-size: 24px; transition: 0.3s; } .login button:hover{ background-color: #237a95; }
-
미해결웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)
공지사항과 갤러리html파트 강의자료가 없음.
다운로드할 수 있는 강의 자료의 부재로 수업을 진행하는데 어려움이 있음, 강의 제목 옆에 다운로드 버튼도 없을 뿐더러 동영상 재생바 하단에도 자료 다운로드가 없음 강의 자료가 없어서 강의 진행에 어려움이 있어요
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
강의듣는법
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.책같은거없나요? 그냥 강의들으면되요?
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
아코디언 만들기 100%이하의 화면으로 보았을때
안녕하세요 선생님 강의 잘 듣고 있습니다.위의 예제에서 100%~90%이상의 화면은 문제 없는데 80%이하로 갔을 경우 이미지와 같이 분리되는 현상을 해결할 방법은없을까요?
-
미해결UIUX 포트폴리오 Part.3 - 반응형 웹 포트폴리오
폰트나 이미지사용 문의
안녕하세요 강의 듣고있는 학생입니다. 혹시 다운로드 파일에 있는 아이콘이나 폰트들취업용 개인 포트폴리오 웹사이트 만들때 사용해도 될까요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
레이어 팝업 '닫기' 가 안됩니다
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>A1~A4레이아웃 연습</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <header> <div class="logo"></div> <div class="manu"></div> </header> <div class="silde"> <div></div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <a href="#none" class="active">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a class="open">SNS 발송 서비스 개선작업<b>2020.01.09</b></a> <a href="#none">휴대폰 인증 서비스 개선 작업<b b>2020.01.07</b></a> <a href="#none">카드사 부분 무이자 할부 이벤트<b>2019.12.31</b></a> <a href="#none">올엣 시스템 작업 안내<b>2019.12.20</b></a> <a href="#none">휴대폰 결제 시스템 작업 안내<b>2019.12.20</b></a> </div> <div class="tab2"> <a href="#none"><img src="image/1.jpg" alt="garllery1"></a> <a href="#none"><img src="image/2.jpg" alt="garllery2"></a> <a href="#none"><img src="image/3.jpg" alt="garllery3"></a> </div> </div> </div> </div> <div class="banner"></div> <div class="nav"></div> </div> <footer> <div class="copy"> <div class="copy2"></div> <div class="copy3"></div> </div> <div class="logo2"></div> </footer> <div class="model"> <div class="model-content"> <h1>SNS비회원주문하기 종료 안내</h1> <p>안녕하세요. JUST 쇼핑몰 MD 홍길동입니다. 안타깝게도 SNS비회원 주문하기 서비스가 한달 뒤 종료될 예정입니다. 회원가입 없이 SNS계정을 이용해 그동안 제품주문을 하실수 있었는데, 금번 강화된 개인정보보호법 시행령 제 9조 (부칙 3조)에 의거, SNS를 이용한 상품 주문/결제등이 근래에 많은 보안잇슈로 문제가 되고 있음에 따라 KISAS의 권고조치의 일환으로 했습니다. 따라서, 한달뒤인 2019.03.10 이후 모든 비회원 고객님들께서는 회원가입으로 전환 후 실명인증이 되어야 하며, 이는 모든 쇼핑몰/오픈마켓등의 전자상거레서비스의 공통된 사함이라는 점을 안내드립니다. </p> <a class="close-model">X 닫기</a> </div> </div> </div> <script src="js/jquery-1.12.4.js"></script> <script src="js/costom.js"></script> </body> </html> .container{ border: 1px solid #111; width: 1200px; margin: auto; } header{ width: 1200px; height: 100px; background-color: #222; } header div{ height: 100px; } .logo{ width: 170px; background-color: #333; float: left; } .manu{ width: 700px; background-color: #444; float: right; } .silde{ height: 300px; background-color: #555; } .items{ /* height: 200px; */ overflow: hidden; } .items>div{ display: inline-block; height: 200px; float: left; } .news{ width: 400px; background-color: #666; } .tab-inner{ margin: 5px 10px; } .btn{ } .btn .active{ background-color: #fff; } .btn a{ width: 100px; height: 50px; background-color: #888; border: 1px solid #000; display: inline-block; text-align: center; color: #111; text-decoration: none; box-sizing: border-box; padding: 13px 0; border-radius: 5px 5px 0 0; margin-left: -5px; border-bottom: none; cursor: pointer; } .tabs{ background-color: #fff; height: 145px; border: 1px solid #000; margin-left: -5px; margin-top: -1px; } .tab1 a.open{ cursor: pointer; } .tab1 a{ color: #000; text-decoration: none; box-sizing: border-box; border-bottom: 1px solid #000; display: block; margin: 3px; } .tab1 a:last-child{ border-bottom: none; } .tab1 a b{ float: right; font-weight: normal; } .tab2{ display: none; } .tab2 a{ box-sizing: border-box; display: inline-block; padding: 17px 0; margin-left: 10px } .tab2 img{ width: 110px; } .banner{ width: 400px; background-color: #777; } .nav{ width: 400px; height: 200px; background-color: #888; } footer{ height: 100px; background-color: #999; } footer> div{ float: left; height: 100px; } .copy{ width: 1030px; } .copy> div{ width: 1030px; height: 50px; } .copy2{ background-color: #444; } .copy3{ background-color: #777; } .logo2{ width: 170px; background-color: #222; } .model{ position: absolute; left: 0; top: 0; background-color: #00000028; width: 1200px; height: 700px; margin: 7px; display:block; display: none; } .model-content{ position: absolute; left: 50%; top: 50%; background-color: #fff; width: 500px; height: 400px; border: 1px solid #000; transform: translate(-50%,-50%); box-sizing: border-box; } .model-content h1{ color: #fff; background-color: #000; width: 450px; display: inline-block; text-align: center; margin: 25px; } .model-content p{ line-height: 26px; text-shadow: 0 0 3px #0000003d; text-align: center; } .close-model{ background-color: #000; width: 90px; height: 40px; display: inline-block; float: right; color: #fff; text-align: center; box-sizing: border-box; margin: 12px; padding: 6px; cursor: pointer; }$('.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').click (function(){ $('.model').fadeIn() }) $('.close-model').click (function(){ $('.mode1').fadeOut() })코드를 보내드립니다
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
공지사항과 갤러리 탭(안)구성 중 마우스 클릭시 색상변경이 안됩니다.
마우스 클릭 갤러리마우스 클릭 공지사항 .js .html.css 세번 정도 다시 해보고 class명까지 바꿔가며 확인을 했지만 도저히 찾을 수가 없어요 이상하게 .js가 아예 안되는 것도 아니고 배경색만 바뀌지 않습니다 제가 보기엔 .btn a.active 가 .js로 입력이 안되는 것 같은데 정말 궁금하네요!
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
뷰티파이 설치 관련 문의
30:00 익스텐션 뷰티파이 설치 시 제 코드에서는 이렇게 나오는데, 설치해서 사용해도 되는건가요??
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
웹디자인 기능사 웹디자인개발기능사로 개편 되었는데 이 수업만 들어도 가능?
웹디자인 기능사가 웹디자인개발기능사로 개편 되었는데 이 수업만 들어도 가능합니까? 추가 된 유형이나 작업 같은 것이 없어 그대로 수강하면 됩니가?
-
해결됨[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
A유형~C유형 수험자 제공파일 어디서
A유형~C유형 수험자 제공파일은 어디서 다운 받습니까? D유형과 E유형은 올려져 있는데 A유형~C유형 수험자 제공파일은 어디서 다운 받아야 할지요?
-
해결됨[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
A1 작업하는데 와이어프레임이 무너지고, hover일부가 적용 안되고 메뉴바가 슬라이드를 밀어냅니다. 탭메뉴도 작동하지 않습니다..
이곳저곳 실수가 너무 많은데 처음 연습하는거다보니까 어디서부터 잘못된건지 혼자 알기가 너무 어려워 질문글 올립니다. ㅜㅜ 어디가 잘못된건지 지적 꼭 좀 부탁드립니다.<!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/header-logo.jpg" alt="헤더로고"></a> </div> <div class="navi"> <ul class="menu"> <li>탑 <div class="sub-menu"> <a href="#none">블라우스</a> <a href="#none">티</a> <a href="#none">셔츠</a> <a href="#none">니트</a> </div> </li> <li>아우터 <div class="sub-menu"> <a href="#none">자켓</a> <a href="#none">코트</a> <a href="#none">가디건</a> <a href="#none">머플러</a> </div> </li> <li>팬츠 <div class="sub-menu"> <a href="#none">청바지</a> <a href="#none">짧은바지</a> <a href="#none">긴바지</a> <a href="#none">레깅스</a> </div> </li> <li>악세서리 <div class="sub-menu"> <a href="#none">귀고리</a> <a href="#none">목걸이</a> <a href="#none">반지</a> <a href="#none">팔찌</a> </div> </li> </ul> </div> </header> <div class="slide"> <div class="slide-items"> <a href="#none" class="slide-item"><img src="images/slide-1.jpg" alt="슬라이드1"></a> <a href="#none" class="slide-item"><img src="images/slide-2.jpg" alt="슬라이드2"></a> <a href="#none" class="slide-item"><img src="images/slide-3.jpg" alt="슬라이드3"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"></div> <div class="btn"> <a href="#none" class="btn1">공지사항</a> <a href="#none" class="btn2">갤러리</a> </div> <div class="tabs"> <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 class="tab2"> <a href="#none"><img src="images/pic.jpg" alt="이미지1"></a> <a href="#none"><img src="images/pic1.jpg" alt="이미지2"></a> <a href="#none"><img src="images/pic2.jpg" alt="이미지3"></a> </div> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner.jpg" alt="배너"></a> </div> <div class="shortcut"> <a href="#none"><img src="images/shortcut.jpg" alt="쇼컷"></a> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/footer-logo.jpg" alt="푸터로고"></a> </div> <div class="copyright"> <a href="#none">법적고지 개인정보취급방침 개인정보처리방침<br>상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장 <br>사업장주소 : 서울특별시 강남구 테헤란로 123-56</a> </div> <div class="SNS"> <a href="#none"><img src="images/sns-01.png" alt=""></a> <a href="#none"><img src="images/sns-02.png" alt=""></a> <a href="#none"><img src="images/sns-03.png" alt=""></a> </div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custum.js"></script> </body> </html>@charset "utf-8"; body{ margin: 0; background-color: #fff; color: #333333; font-size: 15px; } body a{ text-decoration: none; color: #333333; } .container{ width: 1200px; margin: auto; } header{ height: 100px; border: red solid 1px; box-sizing: border-box; position: relative; z-index: 10; } .slide{ height: 300px; width: 1200px; border: red solid 1px; box-sizing: border-box; position: relative; overflow: hidden; } .items{ height: 200px; border: red solid 1px; box-sizing: border-box; overflow: hidden; } footer{ height: 100px; border: red solid 1px; box-sizing: border-box; overflow: hidden; } .items > div{ height: 200px; float: left; } .footer>div{ float: left; height: 100px;} .header-logo{ width: 200px; border: red solid 1px; box-sizing: border-box; float: left; margin-top: 25px; } .navi{ width: 500px; border: red solid 1px; box-sizing: border-box; float: right; text-align: center; } .slide-items{ border: red solid 1px; box-sizing: border-box; position: absolute; height: 300px; font-size: 0; left: 0; top: 0; } .news{ width: 400px; border: red solid 1px; box-sizing: border-box; font-size: smaller; } .banner{ width: 400px; border: red solid 1px; box-sizing: border-box; font-size: 0; } .shortcut{ width: 390px; border: red solid 1px; box-sizing: border-box; font-size: 0; } .footer-logo{ width: 250px; height: 100px; border: red solid 1px; box-sizing: border-box; float: left; margin: 20px; } .copyright{ width: 700px; border: red solid 1px; box-sizing: border-box; text-align: center; height: 100px; padding-top: 10px; color: darkgray; float: left; } .sns{ width: 250px; height: 100px; border: red solid 1px; box-sizing: border-box; float: left; } .sns a img{margin: 20px;} /* 네이게이션 */ ul.menu{padding: 0px; list-style: none;} .menu li{ float: left; background: #fff; width: 25%; font-weight:bolder; } .sub-menu{ display: none; background: #fff; } .sub-menu a { display: block; background: #fff; } .menu>li>a {display: block; padding: 5px;} ul.menu li:hover > a { color: #fff; background-color: black; } ul.menu li .sub-menu a:hover{ color: #fff; background-color: black; } /* 탭메뉴 */ .btn{margin-left: 4px;} .btn a{ display: inline-block; border: #333333 1px solid; border-radius: 5px 5px 0 0; width: 100px; text-align: center; margin-right: -6px; background-color: #ddd; margin-bottom: -3px; border-bottom: none; } .tab-inner{width: 80%; margin: auto; border: 1px solid #000; box-sizing: border-box;} .tab1{border: 1px solid #000; padding: 0 10px;} .tab1 a{ display: block; padding: 5px; border-bottom: #333333 1px solid; } .tab1 a:last-child{border-bottom: none;} .tab1 a b {float: right; font-weight: normal;} .tab2{ border: 1px solid #000; display: none; height: 165px; text-align: center; padding-top: 20px; box-sizing: border-box; } .btn a.active {background-color: #fff;} $(".menu li").mouseenter(function(){ $('.sub-menu').stop().slideDown() }) $(".menu li").mouseleave(function(){ $('.sub-menu').stop().slideUp() }) $('.slide-item:gt(0)').hide() setInterval(function(){ $('.slide-item:first-child').fadeOut(500).next().fadeIn(500) $('.slide-item:first-child').appendTo('.slide-items') },3500) $('.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') }) $(this).addClass('active') $(this).siblings().removeClass('active')
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
footer 높이 값
세로 2칼럼(C2타입) Part ①』 영상 18분 58초 지점에서, 강사님께서 footer > div에 height: 100px를 적용하시던데, 혹시 이 부분의 높이는 50px이 맞는 값이 아닌가요?footer의 높이가 100px로 주어졌는데footer > div에 height: 100px를 적용하면 실제 높이는 200px 아닌가요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
div 상하분배?가 안돼요
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다.2강 가로 고정형 레이아웃 A3 유형 푸터 부분 변형하는 것 듣다가 선생님 따라 똑같이 썼는데도 푸터 부분의 div가 변형이 안되고 이런식으로 분배가 돼요. 3-4번 반복해서 코드 쓰신거 보고 있는데 뭐가 다른지 모르겠어요 ㅠㅠ엉엉
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
제공된 강의자료 fig파일 import
상태로 임포트가 안됩니다.
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
position absolute, relative
19분 55초 보면 자식이 position: absolute 사용했기 때문에 부모에 position: relative를 주는 줄 알았는데 갑자기 부모에도 positoin: absolute를 주더라구요. 다른 강의에서는 position:relative 주시다가 이번 강의에서는 부모에 absolute를 주신 이유가 있나요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
제이쿼리 슬라이드 제작(3) 슬라이드 제작 강의
강의 35초에 .slide-items 에 width 3600px 필요없지 않나요? (어짜피 slide에 width 1200px에 hidden 있어서)혹시 3600px 입력하신 이유가 있으신가요? width 3600px 삭제해도 정상 동작합니다.
