묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
D,E유형 반응형 슬라이드 필수인가요?
특성화고에서 필기면제자 검정 대비 학생들 가르치고 있습니다.D,E유형에서 반응형 슬라이드에 대한 부분은 공개문제에서 없는거같아서요.. 그냥 기존에 A,B,C타입에서 하던대로 시켜도 시험에서 큰 지장이 있을까요?
-
미해결웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)
에러가 나는데... 어디가 잘못된건지 모르겠습니다.ㅠㅠ
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Green복지재단</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="wrap"> <header> <h1> <a href="#"> <img src="images/logo.jpg" alt=""> </a> </h1> <nav> <ul class="gnb"> <li><a href="#">재단소개</a> <ul class="lnb"> <li><a href="#">설립취지</a></li> <li><a href="#">연혁</a></li> <li><a href="#">찾아오시는길</a></li> </ul> </li> <li><a href="#">후원하기</a> <ul class="lnb"> <li><a href="#">국내후원</a></li> <li><a href="#">국외후원</a></li> <li><a href="#">맞춤후원</a></li> </ul> </li> <li><a href="#">자료실</a> <ul class="lnb"> <li><a href="#">서식자료실</a></li> <li><a href="#">사진자료실</a></li> <li><a href="#">후원양식</a></li> </ul> </li> <li><a href="#">스토리</a> <ul class="lnb"> <li><a href="#">웹진</a></li> <li><a href="#">보고서</a></li> <li><a href="#">나의 후원</a></li> </ul> </li> </ul> <div class="lnb_bg"></div> </nav> </header> <div class="slide"> <ul> <li><img src="images/slide1.jpg" alt=""></li> <li><img src="images/slide2.jpg" alt=""></li> <li><img src="images/slide3.jpg" alt=""></li> </ul> </div> <section> <div class="board"> <h2><a href="#">공지사항</a></h2> <ul> <li> <a href="#"> <p class="title">웹디자인 기능사 풀어보야요</p> <p class="date">2023-12-15</p> </a> </li> <li> <a href="#"> <p class="title">웹디자인 기능사 풀어보야요</p> <p class="date">2023-12-15</p> </a> </li> <li> <a href="#"> <p class="title">웹디자인 기능사 풀어보야요</p> <p class="date">2023-12-15</p> </a> </li> <li> <a href="#"> <p class="title">웹디자인 기능사 풀어보야요</p> <p class="date">2023-12-15</p> </a> </li> </ul> </div> <div class="gallery"> <h2><a href="#">갤러리</a></h2> <ul> <li><a href="#"><img src="images/gallery1.jpg" alt=""></a></li> <li><a href="#"><img src="images/gallery2.jpg" alt=""></a></li> <li><a href="#"><img src="images/gallery3.jpg" alt=""></a></li> </ul> </div> <div class="banner"> <h2><a href="#">배너</a></h2> <ul> <li> <a href="#"> <p class="icon"><img src="images/icon.jpg" alt=""></p> <p class="title">시험유형은 모두 20가지</p> </a> </li> <li> <a href="#"> <p class="icon"><img src="images/icon.jpg" alt=""></p> <p class="title">시험유형은 모두 20가지</p> </a> </li> <li> <a href="#"> <p class="icon"><img src="images/icon.jpg" alt=""></p> <p class="title">시험유형은 모두 20가지</p> </a> </li> </ul> </div> </section> <footer> <h1><img src="images/logo_footer.jpg" alt=""></h1> <div class="lnfo"> 경기도 성남시 분당구 돌마로 46 (광천빌딩 5층)<br> 그린컴퓨터에서 ui/ux 웹디자인+웹퍼블리셔 수업중 (강쌤) </div> <div class="family"> <select> <option value="">familysite</option> <option value="">네이버</option> <option value="">다음</option> <option value="">네이트</option> </select> </div> </footer> </div> <div class="popup_box"> <div class="popup"> <h3>팝업제목</h3> "한정 기간, 특별 혜택! 최대 40% 할인과 선착순 사은품! 다양한 상품으로 쇼핑의 즐거움을 높이세요. 놓치지 마세요! 자세한 내용은 홈페이지에서 확인하세요. 지금 쇼핑 시작!" <button type="button">닫기</button> </div> </div> <script src="script/jquery-3.7.0.min.js"></script> <script src="script/action.js"></script> </body> </html> 파일업로드는 불가한건가요?ㅠㅠ먼저 css파일을 선생님 코드로, html은 제가 짠 코드로 해보니 에러가 나서 html에서 문제가 발생했다는 사실을 알아서, html을 선생님 코드로 해보니 정상으로 나와서... 제 html 파일 업로드해봅니다. 어디가 문제인지 모르겠습니다.ㅠㅠ 이런 경우가 제법 되어서 왜 그런지 이번에 좀 확실히 짚고 넘어가야겠어요.ㅠㅠ 흐규...그리고 a2유형 입니다!
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
교제 다운로더
잊어버리고 있다 다시 시작 할려는데 교제를 찾을수 없네요.. car4000@naver.com 아니면 다운 받는곳이 있나요?
-
미해결웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)
F1실무코드
안녕하십니까? 강사님. 다름이 아니라 F1 실무코드로 변경해서 만드신 코드도 한번 보고 싶은데... 가능할까요? 파일 있으시다면 업로드 시켜주시면 감사하겠습니다:)
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
.container>div{} 작성해야 하는 경우는?
.container{}.container>div{} .container{}만 하고 .container>div{} 는 하지 않는 경우도 있고 .container>div{} 를 하는 경우도 있는데 .container>div{} 어떤 경우에 해야 합니까?
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
예제처럼 선밖으로 딱 붙여서 배치하는법있나요
강의에서처럼 선 안쪽경계에 자식요소가 부모요소 너비만큼 이동했을때 선안쪽경계에 붙는게 아니라 예제처럼 선바깥쪽경계에 딱 붙게하려면 어떻게 하는게 가장 좋은 방법인가요?같은 질문이 있긴한데 border-box를 줘도 선두께만큼 배치한 자식요소도 같이 따라 가서 결국 똑같이 되서요
-
미해결웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)
F-1 메뉴 제이쿼리로 제작하는 강의
강사님. F1 메뉴 제이쿼리 로 제작된 파일은 업로드 되지 않아 혹시나 싶어 문의글 남깁니다^^;;
-
미해결웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)
E4 유형 레이아웃에서 calc 질문있습니다.
.slide {width: calc(100% - 600px); 라고 되어 있는데 %를 사용하려면 html, body{height:100%;} 코드를 작성해야 되지 않나요?왜 슬라이드에서 % 사용이 가능한지 궁금합니다.추가적으로 width: 100vw - 600px 는 사용이 불가 한지 알고싶습니다. 강사님께서 픽셀이야기를 하시긴 했는데 이해가 안되어서... 비율과 정확한 단위 이야기 인건지... 질문남깁니다.
-
미해결웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)
css로 메뉴 만드는 부분
안녕하세요? 강사님. 공부 중에 혹시 css로 메뉴 만드는 거 말고jquery로 메뉴 만드는 것도 가르쳐주시면 안될까요?물론 css가 쉽고 간편하지만 jquery도 알고 싶어 문의글 남깁니다. 확인부탁드립니다. 감사합니다:)
-
미해결스프링 프레임워크는 내 손에 [스프2탄]
안녕하세요 강의내용을 복습하다가 질문이 생겼습니다
list.jsp 의 form안의 인풋타입히든의 으로 값을 넘길떄 왜 위에 url에 표시가 되는걸까요.원래 직접 action에 입력을 안해주면 값은 넘어가도 위에 url에 표시는 안되야하는거 아닌가요? <input type="hidden" id="page" name="page" value="${pageMaker.cri.page}" /> <input type="hidden" name="perPageNum" value="${pageMaker.cri.perPageNum}" /> <input type="hidden" name="type" value="${pageMaker.cri.type}" /> <input type="hidden" name="keyword" value="${pageMaker.cri.keyword}" /><input type="hidden" name="memID" value="${mvo.memID}"/>
-
미해결웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)
실전사이트 제이쿼리소스
초반에 제이쿼리 소스를 넣을때 둘 중 하나만 언더바가 생겨요 ㅠㅠ
-
미해결스프링 프레임워크는 내 손에 [스프2탄]
spring Legacy Project에서 MVC 프로젝트가 없습니다. 어떻게 해야하나요?
안녕하세요. 24.03.24일 날 스프2탄을 구매하였습니다. 시작부터 문제가 발생되어서 글 남깁니다. 강사님의 영상을 따라 eGovFrame-4.0.0을 다운로드 하였고 1. 프로젝트를 생성하기위해 Spring Legacy Project 클릭 ---문제 발생 ---- 2.Simple Projects만 보이고 MVC프로젝트가 보이질 않습니다. 구글링을 해보고 시도 하였지만 해결되지 못했습니다. 초보의 입장에서 난감해하고 있습니다. 해결방법과 그따른 영상을 업데이트를 해주실수 있을까요?
-
미해결스프링 프레임워크 입문자를 위한 따라하기
따라하고 있는데, Spring MVC Project가 보이지 않아요..
똑같이 따라 했는데, Spring MVC Project가 보이지 않아요.. 다른것도 다 안보이고, Simple Project만 보여요 ㅠㅠ
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
spoqa han sans neo
spoqa han sans neo글씨체 다운받았는데 피그마 할 때 text밑에 fonts에서 no matching font로 나오네요.아예 검색자체가 안되는데 무슨 문제인가요??
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
vscode emmet 핵심 단축키 파일 관련
안녕하세요!vscode에서 emmet 사용법 강좌 끝에 보면 첨부파일에 핵심 단축키 정리된 파일을 다운로드 받으라고 되어 있는데, 아무리 찾아도 다운로드할 파일을 찾지 못하여... 제가 못찾는건지, 다운이 안되는 상황인건지 문의드립니다!
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
D,E유형 제이쿼리로 슬라이드 할 때 CSS 문의
슬라이드를 제이쿼리로 공부하고 있는데,이런 상황에서는 어떻게 css를 고쳐야할지 궁금합니다 ㅠㅠ슬라이드 크기가 넘쳐요 높이값 적용이 안되고있는것같습니다. 지금 상황 말고도 다른 유형에서 calc 함수를 줄 때마다 제대로 적용이 안돼서 가로는 꼭 flex:1을 썼는데, 혹시 flex가 위에 있으면 적용이 안된다거나.. 특정 (block, inline-block..등) 요소에만 되거나 등등 적용 가능/불가능한 조건이 있나요?숫자에 공백 다 주고 똑같이 작성해도 잘 안됩니다.
-
미해결자바스크립트+jQuery 기초부터 실무까지 : 기초 Part.1
상단에 일시정지 새로고침하는 것은 어떻게 나오게 하나요??
html에 상단에 일시정지 새로고침 아이콘들 나오게 하는것은 어떻게 하나요??
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
탭 메뉴 콘텐츠(스타일 01) with JQUERY 에서 제이쿼리 질문 드립니다.
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 해당 강의를 보고 간단한 ul li a 를 이용한 메뉴 탭을 연습해 보았습니다.그런데 이 부분에서 제이쿼리를 짤 때예제에서는 .testimonial-pic 밑에 img 들이 형제 요소로 잡혀서 siblings 를 이용해 removeClass('active') 를 하여 클릭한 것 외에 나머지들의 active 클래스들이 빠지도록 했는데제가 만든 부분은 menu 라는 div 에 ul > li > a 로 작성을 하고 a 에 active 를 넣어주다보니 siblings가 먹질 않아서 고민고민하다 제이쿼리는 li 에 class="active"를 넣어주고 css 에서는 active 가 들어가면 그 하위 a에 효과가 들어가도록 한번 짜봤는데 이렇게 하는게 문제 없는 방법일까요? 아니면 더 나은 방법이 있는 걸까요?<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="content"> <div class="menu"> <ul> <li class="active" data-alt="tab1"><a href="#none">메뉴01</a></li> <li data-alt="tab2"><a href="#none">메뉴02</a></li> <li data-alt="tab3"><a href="#none">메뉴03</a></li> <li data-alt="tab4"><a href="#none">메뉴04</a></li> </ul> </div> <div class="news active" id="tab1"> news01 </div> <div class="news" id="tab2"> news02 </div> <div class="news" id="tab3"> news03 </div> <div class="news" id="tab4"> news04 </div> </div> <script> $('.menu ul li').click(function(){ $(this).addClass('active') $(this).siblings().removeClass('active') $('.content .news').removeClass('active') $('#'+ $(this).attr('data-alt')).addClass('active') }) </script> </body> </html> * { margin:0; padding:0; box-sizing: border-box; } body { height: 100vh; } a{ text-decoration: none; color: #000; } li { list-style: none; padding: 10px; } .content { border: 1px solid #000; } .menu ul { display: flex; } .menu ul a { padding:5px; color:gray; } .menu ul li.active a{ color: #000; font-weight: 700; } .news { border: 1px solid #000; height: 100px; display: none; } .news.active { display: block; }위 코드 처럼 만들었고 고민 후 수정해서 정상적으로 작동하는 전체 코드 입니다.수정전에 문제였던 부분을 코드와 함께 설명드리면,예제를 따라하면서 하다보니HTML 에 a 태그에 클래스와 데이터속성을 넣어줘서 <div class="menu"> <ul> <li><a class="active" data-alt="tab1" href="#none">메뉴01</a></li> <li><a data-alt="tab2" href="#none">메뉴02</a></li> <li><a data-alt="tab3" href="#none">메뉴03</a></li> <li><a data-alt="tab4" href="#none">메뉴04</a></li> </ul> </div>css 에서도 a 에 active 효과를 주었고.menu ul li a.active{ color: #000; font-weight: 700; }그래서 a태그들은 형제요소가 아니기 때문에 siblings 가 먹지 않았어서 이 문제를 어떻게 해결해야 하나 고민하다 맨 위에 정상작동되는 코드처럼 처리하였습니다. <script> $('.menu ul li a').click(function(){ $(this).addClass('active') $(this).siblings().removeClass('active') $('.content .news').removeClass('active') $('#'+ $(this).attr('data-alt')).addClass('active') }) </script> 해당 코드로 active를 넣어주고 해도 크게 문제 될게 없는지 더 나은 방법이 있는지 알려주시면 감사하겠습니다.(메뉴 구성을 .menu 클래스 밑에 ul과 li 를 쓰지말고 a 태그만을 이용하여 siblings 형제요소들을 사용하는 방법도 생각했으나 메뉴를 흔히 ul li로 만들기 때문에 해당 방법은 사용하지 않았습니다.)
-
해결됨스프링 프레임워크는 내 손에 [스프2탄]
page의 값이 어디서 증가하는지 궁금합니다..
29강 - 리스트에 페이지 번호 구하기를 들으면서 이해가 안가는 부분이 있어 질의 드립니다.페이지 하단에 페이지번호 출력과 각 번호를 누르면 list?page=1, list?page=2 이런식으로 웹이 이동하는 방식 같은 전체적인 프로세스는 강의를 들으면서 이해가 잘되었습니다.한가지 이해가 안가는 부분이 있는데 제목에 작성한것처럼 page의 증가가 어디서 이루어지는지를 잘모르겠습니다.정상적으로 다 작동이 잘되고 디버깅을 이용해서 page가 1 - > 2 로 값이 정상적으로 들어가있는것도 확인하였습니다.코드를 전체적으로 검토를 해봤지만 page를 따로 증가시켜주는 코드는 찾지못했는데 어디서 증가가 되는건지가 궁금합니다 ㅠㅜㅠㅠ
-
미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
5-2 vanilla.html 질문합니다.
안녕하세요. 정말 기초적이라고 생각 하실 수 있는데 정말 모르겠어요 ㅜㅜ..scrollMove 라는 함수 매게변수에 moveY가 있는데요.moveY가 움직이는 y값이라고 하셨잖아요그걸 변수로 어디에다가 지정해놓지 않았는데 moveY가 움직이는 y값일거다 라는걸 어떻게 알고 if문이나 다운 클리어, 업 클리어에 어떻게 쓰는거죠?moveY에는 아무런 값이 지정되어 있지 않은데 if문 조건문에 쓰이는거 보면 이해가 잘 안가요 ㅜ
