묻고 답해요
160만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결스프링 프레임워크 입문자를 위한 따라하기
Spring Legacy Project 생성 불가
전자정부 프레임워크 3.10 버전으로 강사님의 강의를 따라하고 있습니다. 그런데 새로운 프로젝트를 생성할 때 Spring Legacy Project가 뜨지 않아 찾아보니, 전자정부 프레임워크 3.8 버전 이상에서는 따로 설정을 해줘야 하더라구요. 블로그를 찾아보며 설정을 해줬는데도 제대로 동작하지 않아 그냥 Maven 프로젝트로 생성해서 구성을 맞춰가고 있습니다ㅠ 혹시 전자정부 프레임워크 버전을 낮춰서 3.7이나 3.8로 해도 문제가 없을까요?
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
class 값 한 번에 부여하는법
<article></article> <article></article> <article></article>값에 한 번에 class를 주고싶을 때 강사님은 한 번에 선택하여 동시입력하시던데 방법이 있나요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
섹션10-77번강의 내 와이어프레임 pdf 자료 다운로드 어디서 하나요?
안녕하세요 섹션10에서 77번 강의 에서 나오는 와이어프레임 html 나와있는 pdf자료 어디에서 다운로드 하나요?
-
해결됨[자바스크립트부터 리액트까지] 포기없는 React로 가는 길 [Full vers.]
제가 신청한강좌들 무제한으로 변경즘부탁드릴게요
[자바스크립트부터 리액트까지] 포기없는 React로 가는 길 [Full vers.]122/ 122강(100%)2027. 01. 01. 23:59 만료모던 웹 인터렉티브 CSS3 부트캠프 [Full vers.]78/ 78강(100%)2027. 01. 01. 23:59 만료쌩초보, 비전공자를 위한 [HTML 스타터] 부트캠프 이3강좌가 수강기간이 제한이있어서 무제한으로 변경즘부탁드립니다.
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
보더를 사용해 와이어프레임만드는 강의 html+css소스 다운로드 받을 수 있나요?
안녕하세요 38.2.가로고정형 레이아웃(A1-A4)보더를사용해서 Html+css 구조만들기 강의에서 html+css 코딩소스 다운로드 받을 수 있나요? 전체를 감싸는 컨테이너박스와 안에 있는박스 사이 1픽셀 공간이 남아서 소스를 비교해 볼려고 합니다
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
@media에서의 flex-direction: column으로 세로배치 관련 질문드립니다.
안녕하세요 선생님!수업 잘 듣고 있습니다.질문이 있어 글을 작성합니다.강의와 같이 코드를 작성하였습니다.@media (max-width: 768px) { .modal-content { flex-direction: column; width: 100%; } }위처럼 @media (max-width: 768px) { .modal-content { flex-direction: column; width: 100%; } }를 작성하면 모바일에서 확인 시 새로 배치가 되어야 하는 것 같은데... 하단 이미지와 같이 가로 배치 그대로 유지 됩니다. 무엇이 문제일까요 ㅠㅠ 전체 코드는 아래와 같습니다. <body> <div class="modal"> <div class="modal-content"> <div class="photo"></div> <div class="desc"> <div class="desc-header"> <h2>지금 다양한 혜택을 받아보세요.</h2> <button class="btn-close">×</button> </div> <div class="desc-content"> <input type="email" placeholder="이메일 주소를 입력하세요." /> <button>뉴스레터 구독하기</button> <p> 스타트업메이트 뉴스룸의 다양한 소식과 혜택을 이메일로 받아 보시려면 구독 신청 해주시기 바랍니다. 스타트업메이트에 대해 알고 싶은 뉴스, 꼭 알아야 할 뉴스를 신속하고 정확하게 전합니다. </p> </div> </div> </div> </div> <div class="overlay"></div> </body> * { box-sizing: border-box; font-family: "Noto Sans", sans-serif; } body { font-weight: 300; color: #222; font-size: 15px; line-height: 1.6em; } a { color:#222; text-decoration: none; } .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px rgb(0, 0, 0, 00.15); z-index: 10; overflow: hidden; } .modal-content { /* border: 1px solid #000; */ width: 600px; display: flex; } .modal-content > div { padding: 20px; } .photo { flex:1; background: url(/img/office.jpg) no-repeat center right; background-size: cover; } .desc { flex:2; text-align: center; } .overlay { background-color: hwb(0 0% 100% / 0.212); position: fixed; width: 100%; height: 100%; top: 0; left: 0; } .btn-close { position: absolute; top: 10px; right: 10px; background-color: transparent; border: none; font-size: 18px; color: #999; cursor: pointer; } .btn-close:hover { color: #000; } .desc-content input[type=email] { display: block; width: 100%; text-align: center; padding: 7px; margin-bottom: 10px; border: 1px solid #ccc; outline: none; } .desc-content input[type=email]::placeholder{ color:#ccc; transition: .5s; } .desc-content input[type=email]:focus::placeholder{ visibility: hidden; opacity: 0; } .desc-content button { display: block; width: 100%; border: none; background-color: crimson; color: #fff; cursor: pointer; padding: 7px; } @media (max-width: 768px) { .modal-content { flex-direction: column; width: 100%; } }
-
해결됨반응형 웹사이트 포트폴리오(App Official Landing Website)
하드코딩으로 이미지맵(image map) 만들기
하드코딩으로 이미지맵(image map) 만들기이미지맵 만드는 강좌 연습파일 다운로드는 유튜브 영상의 [더보기]에 링크가 있다고 하셨는데, 아무리 찾아봐도 찾을 수가 없습니다.어디서 받을 수 있는걸까요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
시험 시 슬라이드 작성 관련 문의
슬라이드 유형 중에는 아래와 같이 가로세로 고정이 아닌 형태가 있는데 포토샵으로는 어떻게 만들면 좋을까요?D /E /F 유형 별로 자세하게 설명해 주셨으면 합니다.
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
강의 질문 있습니다
■ 질문 남기실 때 꼭! 참고해주세요.안녕하세요 코딩웍스선생님의 웹디자인기능사자격증 수업듣고있는데요 중간에 다른선생님 목소리로 강의가 나와서요 강사2분의 강의를 한 강좌 안에 섞어서 만든 강의 인가요? 어제 9월9일에는 37강 부터 코딩웍스 선생님 목소리로 강의가 나왔는데 오늘 9월10일 에는 37강이 코딩웍스 강사분 목소리가 아닌 다른강사분 목소리로 강의가 나와서요 저는 코딩웍스 선생님의 강의를 듣고 싶어요 방법이 없을까요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
시험 관련 문의
시험유형 관련 사항 문의합니다. 예를 들면 D유형의 경우 공개문제 상으로는왼쪽 개별 네비게이션, 우측 메가 메뉴 두 유형이 존재하는데 예를 들면 D유형 공개문제에는 없는 상단 메뉴가 추가되어 나온다는지 하는 경우가 있는지 문의 드립니다. 정리하면 24개 공개문제에 없는 새로운 유형이 출제 될 수도 있는지 알려주시면 될 것 같습니다.
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
파워포인트 자료 다운로드 버튼 어디에 있나요?
안녕하세요 7강 파워포인트 자료 다운로드 버튼 어디에 있나요? 나중에 코딩소스도 다운로드해서 볼수있나요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
브라우저 화면 줄일 시 빈 공간 발생
D1 유형이고, 브라우저 화면을 줄이면 위와 같이 빈 공간이 발생합니다. 슬라이드 이미지로 꽉 채워져야 할 것 같은데 말입니다. 제공된 예제 파일에서도 이런 증상이 있는 것 같은데 혹시 잘못된 부분이 있는 건가요?아니면 원래 예상된 동작인지 궁금합니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="maincontant"> <div class="left"> <header> <div class="headerlogo"></div> <div class="navi"></div> <div class="spotmenu"></div> </header> </div> <div class="right"> <div class="slide"> <div class="slideimg"> <div class="slideinner slideitems"> <a class="sitem" href="#none"><img src="images/slide-d-01.jpg" alt="slide-d-01"></a> <a class="sitem" href="#none"><img src="images/slide-d-02.jpg" alt="slide-d-02"></a> <a class="sitem" href="#none"><img src="images/slide-d-03.jpg" alt="slide-d-03"></a> </div> </div> <div class="slidebanner"> <a href="#none"><img src="images/banner-01.png" alt="banner-01"></a> <a href="#none"><img src="images/banner-02.png" alt="banner-02"></a> <a href="#none"><img src="images/banner-03.png" alt="banner-03"></a> </div> </div> <div class="items"> <div class="shortcut"></div> <div class="newsgallery"></div> </div> </div> </div> <footer> <div class="footerlogo"></div> <div class="copyright"></div> <div class="sns"></div> </footer> </div> <script type="text/javascript" src="script/jquery-1.12.4.js"></script> <script type="text/javascript" src="script/custom.js"></script> </body> </html>@charset "utf-8"; body { margin: 0; background-color: #fff; color: #333; } .container {} .maincontant { display: flex; } .maincontant > div{ border: 1px solid; /* height: 800px; */ } .left { width: 200px; } .right { flex : 1 } /* header */ header{} header > div { border: 1px solid red; } .headerlogo { height: 200px; } .navi { height: 500px; } .spotmenu { height: 50px; } .slide { height: 400px; position: relative; } .slideimg { /* border: 1px solid blue; */ height: 400px; position: relative; overflow: hidden; } /* Slide Animation */ .slideinner { /* 실제로 움직이는 요소 */ position: absolute; top: 0; left: 0; font-size: 0; /* animation: slide 10s linear infinite; */ height: inherit; } .slideinner a { /* 움직이는 .slide-image-inner에 포함된 요소 */ height: inherit; } .slideinner a img { width: 100%; height: inherit; /* 부모요소인 a의 너비에 유동적으로 맞춰지게 하는 속성 */ object-fit: cover; } .slidebanner { width: 100px; height: 300px; position: absolute; top: 0; right: 0; } .slidebanner img{ width: 100px; } /* items */ .items{} .items > div{ border: 1px solid green; } .shortcut { height: 200px; } .newsgallery { height: 250px; } /* footer */ footer { display: flex; } footer > div { border: 1px solid; height: 100px; } .footerlogo { width: 200px; } .copyright { flex:1 } .sns { width: 300px; }setInterval(function(){ $('.slideitems').animate({top:'-100%'},function(){ $('.slideitems').css({top:0}); $('.sitem:first-child').appendTo('.slideitems') }) },1000);
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
div#css-checker-widget의 해결방
DIV를 HTMl에서 두 개를 만들었는데 계속 이미지와 같이 div#css-checker-widget라는 것이 생겨서 3개의 div가 나옵니다. 껐다 재실행도 해보고 다른 파일에서도 생성해도 같은 증상이 나오는데 왜 그런걸까요?<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <title>자손선택자vs자식선택자</title> <link rel="stylesheet" href="CSS/style.css"> <script src="/script/jquery-1.12.4.js"></script> </head> <body> <span>Inline element</span> <span>Inline element</span> <span>Inline element</span> <div>Block Element1</div> <div>Block Element2</div> </body> </html> * { box-sizing: border-box; } body { font-family: 'Raleway', sans-serif; font-size: 18px; line-height: 1.5em; color: #222; } a{ text-decoration: none; color: #222; } span { border: 1px solid #000; text-transform:capitalize; width: 400px; height: 100px; margin: 20px; } div { border: 1px solid red; background:red; margin: 20px; width: 200px; height: 50px; }- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
서브메뉴가 유지되지 못하고 사라지는데 무엇이 문제 일까요?
서브메뉴가 아래 같이 유지되지 않고 사라지네요. 어디가 잘못일까요? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <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="headerlogo"></div> <div class="navi"> <!-- navigation --> <ul class="menu"> <li> <a href="#none">CLUB</a> <div class="submenu"> <a href="#none">클럽소개</a> <a href="#none">시설안내</a> </div> </li> <li> <a href="#none">BOOKING</a> <div class="submenu"> <a href="#none">요금안내</a> <a href="#none">예약안내</a> <a href="#none">위약안내</a> </div> </li> <li> <a href="#none">INFORMATION</a> <div class="submenu"> <a href="#none">명예의 전당</a> <a href="#none">이벤트</a> <a href="#none">자료실</a> <a href="#none">포토갤러리</a> </div> </li> <li> <a href="#none">COMMUNITY</a> <div class="submenu"> <a href="#none">공지사항</a> <a href="#none">Q&A</a> </div> </li> </ul> </div> <div class="spotmenu"></div> </header> </div> <div class="right"> <div class="slide"> <div class="slideimg"></div> <div class="slidebanner"></div> </div> <div class="items"> <div class="shortcut"></div> <div class="newsgallery"></div> </div> </div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="sns"></div> </footer> </div> <script type="text/javascript" src="/script/jquery-1.12.4.js"></script> <script type="text/javascript" src="/script/custom.js"></script> </body> </html>@charset "utf-8"; body { margin: 0; background-color: #fff; color: #333; } a { text-decoration: none; color: inherit; } .container {} .main-content { display: flex; } .main-content > div{ border: 1px solid gray; /* height: 800px; */ } .left { width: 200px; } .right { flex : 1 } header {} header > div { border: 1px solid red; } .headerlogo { height: 100px; } .navi { height: 400px; } .spotmenu { height: 100px; } .slide { position: relative; height: 400px; } .slide > div { border: 1px solid blue; /* height: 400px; */ } .slideimg { height: 400px; } .slidebanner { position: absolute; top: 0; right: 0; height: 300px; width: 100px; } .items {} .items > div { border: 1px solid green; } .shortcut { height: 200px; } .newsgallery { height: 250px; } footer { display: flex; } footer > div { border: 1px solid orange; height: 100px; } .footer-logo { width: 200px; } .copyright { flex: 1 } .sns{ width: 300px; } /* navagation */ .menu { list-style: none; padding: 0; width: 90%; margin: auto; margin-top: 15px; } .menu li { position: relative; text-align: center; } .menu li > a { border: 1px solid black; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a { background-color: rgba(0, 0, 0, 0.5); color: white; } .submenu { border: 1px solid black; display: none; position: absolute; top: 0; left: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.5); height: 150px; } .submenu a { display: block; padding: 5px; transition: 0.5s; } .submenu a:hover { background-color: rgba(0, 0, 0, 0.5); color: white; }// navigation $('.menu li').mouseenter(function(){ $(this).children('.submenu').slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.submenu').slideUp() })
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
슬라이드 및 완성본 관련 사항
슬라이드 작성 시 CSS 도 변경되어야 할 것 같은데 아직 강의 영상에서는 찾지 못했습니다.어느 위치에 있는 건가요?예를 들면 가로 슬라이드 제작시 width: 3600px;로 설정하고 position absolute로 변경 해야 할 것 같은데 관련 사항을 찾을 수 없습니다.abc type에 대한 flex / jquery 적용 완성본 공유 부탁드립니다.ABD 강의 영상은 DEF 타입과 달리 flex나 jquery 를 사용하지 않아 시험 준비하는데 어려움이 있네요.혹시 제가 찾지 못한 것이라면 위치 알려주셨으면 합니다. 그리고 시험이 얼마남지 않아 공부중인데 자료 찾는데 시간이 너무 많이 걸립니다. A~F 유형에 대한 모든 완성본 취합해서 올려주시면 많은 도움이 될 것 같습니다.
-
미해결[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; }
