묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
D,E유형 반응형 슬라이드 필수인가요?
특성화고에서 필기면제자 검정 대비 학생들 가르치고 있습니다.D,E유형에서 반응형 슬라이드에 대한 부분은 공개문제에서 없는거같아서요.. 그냥 기존에 A,B,C타입에서 하던대로 시켜도 시험에서 큰 지장이 있을까요?
-
미해결웹디자인기능사 [2024년 합격 99%] 실기전체 A - F
에러가 나는데... 어디가 잘못된건지 모르겠습니다.ㅠㅠ
<!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 아니면 다운 받는곳이 있나요?
-
미해결웹디자인기능사 [2024년 합격 99%] 실기전체 A - F
F1실무코드
안녕하십니까? 강사님. 다름이 아니라 F1 실무코드로 변경해서 만드신 코드도 한번 보고 싶은데... 가능할까요? 파일 있으시다면 업로드 시켜주시면 감사하겠습니다:)
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
.container>div{} 작성해야 하는 경우는?
.container{}.container>div{} .container{}만 하고 .container>div{} 는 하지 않는 경우도 있고 .container>div{} 를 하는 경우도 있는데 .container>div{} 어떤 경우에 해야 합니까?
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
예제처럼 선밖으로 딱 붙여서 배치하는법있나요
강의에서처럼 선 안쪽경계에 자식요소가 부모요소 너비만큼 이동했을때 선안쪽경계에 붙는게 아니라 예제처럼 선바깥쪽경계에 딱 붙게하려면 어떻게 하는게 가장 좋은 방법인가요?같은 질문이 있긴한데 border-box를 줘도 선두께만큼 배치한 자식요소도 같이 따라 가서 결국 똑같이 되서요
-
미해결웹디자인기능사 [2024년 합격 99%] 실기전체 A - F
F-1 메뉴 제이쿼리로 제작하는 강의
강사님. F1 메뉴 제이쿼리 로 제작된 파일은 업로드 되지 않아 혹시나 싶어 문의글 남깁니다^^;;
-
미해결웹디자인기능사 [2024년 합격 99%] 실기전체 A - F
E4 유형 레이아웃에서 calc 질문있습니다.
.slide {width: calc(100% - 600px); 라고 되어 있는데 %를 사용하려면 html, body{height:100%;} 코드를 작성해야 되지 않나요?왜 슬라이드에서 % 사용이 가능한지 궁금합니다.추가적으로 width: 100vw - 600px 는 사용이 불가 한지 알고싶습니다. 강사님께서 픽셀이야기를 하시긴 했는데 이해가 안되어서... 비율과 정확한 단위 이야기 인건지... 질문남깁니다.
-
미해결웹디자인기능사 [2024년 합격 99%] 실기전체 A - F
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년 출제기준 반영버전)
실전사이트 제이쿼리소스
초반에 제이쿼리 소스를 넣을때 둘 중 하나만 언더바가 생겨요 ㅠㅠ
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
D,E유형 제이쿼리로 슬라이드 할 때 CSS 문의
슬라이드를 제이쿼리로 공부하고 있는데,이런 상황에서는 어떻게 css를 고쳐야할지 궁금합니다 ㅠㅠ슬라이드 크기가 넘쳐요 높이값 적용이 안되고있는것같습니다. 지금 상황 말고도 다른 유형에서 calc 함수를 줄 때마다 제대로 적용이 안돼서 가로는 꼭 flex:1을 썼는데, 혹시 flex가 위에 있으면 적용이 안된다거나.. 특정 (block, inline-block..등) 요소에만 되거나 등등 적용 가능/불가능한 조건이 있나요?숫자에 공백 다 주고 똑같이 작성해도 잘 안됩니다.
-
미해결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문 조건문에 쓰이는거 보면 이해가 잘 안가요 ㅜ
-
미해결스프링 프레임워크 입문자를 위한 따라하기
pom에 스프링 jdbc 인식 오류
Invalid property 'dataSourse' of bean class [org.mybatis.spring.SqlSessionFactoryBean]: Bean property 'dataSourse' is not writable or has an invalid setter method. Did you mean 'dataSource'? 해당 오류가 떠서 구글링 막 검색하고 했는데 스프링 jdbc pom에 코드 복사해서 삽입하고 라이브러리에 잘 등록된것 까지 확인했는데도 서버 실행시 같은 오류가 뜨는데 뭐가 문제일까요? ㅠㅠ 마리아db 데이터베이스 -> 테이블까지 다 해놓은 상태인데 원인 해결이 안됩니다 ㅠㅠ
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
HTML 와이어프레임 만들기 실습(커스텀 체크박스 로그인폼) 강의의 파일이 없는것 같아요
안녕하세요! 코딩웍스 선생님 강의를 열심히 듣고있는 학생입니다! :)공유해주신 폴더 모두 찾아보았는데 모바일 웹 HTML 와이어프레임 구조 , HTML 와이어프레임 실습 (로그인폼) 관련된 파일을 찾아봐도 없는데 혹시 어디에 있는지 알려주시면 감사하겠습니다!
-
미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
4-3 함수선언방식 질문
function motion() { //스크롤할때마다 작동할 함수 setProperty(); changeBg(); parallaxMove(); } function init() { motion() }; $(window).scroll(function(e) { motion(); }); init(); //이런식으로 함수끼리 연결?하는방식으로 하셨는데 $(window).scroll(function(e) { setProperty(); changeBg(); parallaxMove(); }); /** 이런식으로 해도 작동이되는거같아서 왜 함수를 스크롤함수,init함수,motion함수 각각 만들어서 연결하는방식으로 하신이유가있을까요? */
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
24.Pure CSS 콘텐츠 슬라이더 프로토타입 01 (풀스크린 탭 콘텐츠 슬라이더 프로토
slide content 3개 까지만 있는데,3개 이상이면 어떻게 해야되나요??
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
모달(Modal) 만들기 Only CSS 애니메이션 모달 : target 가상 클래스 - 모달창 닫을 때는 스크립트 써야 하나요?
항상 수업 잘 듣고 있습니다. 궁금한 점이 있어 글 남깁니다. 모달(Modal) 만들기 Only CSS 애니메이션 모달 : target 가상 클래스 영상에서요. - 모달창 열때는 css : target로 열었는데요. - 모달창 닫을 때는 스크립트 써야 하나요?궁금합니다. 항상 감사드립니다.
