172만명의 커뮤니티!! 함께 토론해봐요.
미해결
모바일 웹 제작 입문: Figma 디자인 완벽 구현하기 with Javascript
11. login 페이지 - 폼 요소 작성 및 스타일 9:58 수업노트보기에서 참조: https://creatie.ai/ 이 링크가 지금은 변경이 되어 https://readdy.ai/ 로 되어있어서요 이젠 유료이고 프롬프트로 이젠 제작하는 것 같습니다. 그래서 대안은 피그에 플로그인에 AutoHTML | Components to Code 나 다른 플러그인 추천이 좋을 것 같습니다.
해결됨
모던 웹 인터렉티브 CSS3 부트캠프 [Full vers.]
수강기간 무제한으로 변경즘 부탁드릴게요
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
안녕하세요 섹션10에서 77번 강의 에서 나오는 와이어프레임 html 나와있는 pdf자료 어디에서 다운로드 하나요?
해결됨
부트스트랩을 활용한 반응형 웹제작[기본 개념편] 부트캠프
수강기간 무제한으로 변경즘 부탁드릴게요
미해결
워드프레스 온라인 강의 플랫폼 제작
고객이 가장 먼저 보는곳, 홈페이지 Header 손쉽게 제작하기 에서 18:33분 쯤에 홈페이지 주소를 남겨달라고 요청하셔서 정식 유료 라이센스 플러그인을 위해 이렇게 주소 남깁니다! https://noviros.kr/ 아니면 jhkluck22@gmail.com 으로 파일 전송해주셔도 좋습니다 ^^ 감사합니다
해결됨
Cursor AI로 만들면서 배우는 Web & Javascript
강사님, 안녕하세요. 좋은 강의를 열어주셔서 감사합니다! 현재 업로드한 강의는 모두 들었으나, 아래 영상은 미제공되어 업로드 일정 문의드립니다. 1. 8/30 업로드 예정이나 미업로드된 강의(54, 55, 56, 57) 2. 영상 편집 중으로 미업로드된 강의(59) 3. 8/31 업로드 예정이나 미업로드된 강의(62, 63, 64, 65, 66, 67, 68, 69)
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
안녕하세요 38.2.가로고정형 레이아웃(A1-A4)보더를사용해서 Html+css 구조만들기 강의에서 html+css 코딩소스 다운로드 받을 수 있나요? 전체를 감싸는 컨테이너박스와 안에 있는박스 사이 1픽셀 공간이 남아서 소스를 비교해 볼려고 합니다
미해결
TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!
docs를 보니 4.1에서는 container가 목록에는 안보이는데, 앞으로 없어지는건가요? 코드상 동작은 하는데... 왜 최신 버전 docs에서 빠진건지 궁금하네요. 버전업 되면서 변경된거만 보이는건가요?
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
안녕하세요 선생님! 수업 잘 듣고 있습니다. 질문이 있어 글을 작성합니다. 강의와 같이 코드를 작성하였습니다. @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%; } }
미해결
입문자를 위한, HTML&CSS 웹 개발 입문
<input type="button" 이거랑 <button type="button 이 둘은 어떤 차이인가요?
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
저 이 화면에서 open with live server 를 눌렀는데 이 화면이 떠요.. 저 그러고 혹시 강의 마지막 부분만 보고도 앱을 만들 수 있나요?
해결됨
반응형 웹사이트 포트폴리오(App Official Landing Website)
하드코딩으로 이미지맵(image map) 만들기 이미지맵 만드는 강좌 연습파일 다운로드는 유튜브 영상의 [더보기]에 링크가 있다고 하셨는데, 아무리 찾아봐도 찾을 수가 없습니다. 어디서 받을 수 있는걸까요?
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
슬라이드 유형 중에는 아래와 같이 가로세로 고정이 아닌 형태가 있는데 포토샵으로는 어떻게 만들면 좋을까요? D /E /F 유형 별로 자세하게 설명해 주셨으면 합니다.
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
좋은 강의 잘 듣고 있습니다. 다름이아니라, 이전 강의들에 에러들을 다 해결해서 80강을 듣기 전 까지 상품 상세 페이지 구현 후, 상품 상세 페이지 보기까지 에러 없이 잘 되던 것이 80강을 듣고 코드를 작성 후 부터 ' 상품 상세 페이지 ' 가 뜨지를 않고 있습니다. 아래 사진 첨부 합니다. 사진 1. 아래 사진으로 DB Browser for SQLITE에서 이미지를 작성 해 준 뒤 일단 이미지는 잘 받아 옵니다. 참고로, 사진 1 은 VS CODE 폴더(GRAB-MARKET-SERVER)에서 server.js에 소스 order : [['createdAt','DESC']], 입력을 일단 개인적인 이유로 빼었기 떄문에 , 판매되는 상품 에 순서가 바뀌어 있습니다. order : [['createdAt','DESC']] 을 넣게 된다면 상품 순서는 축구공,농구공,키보드,키보드로 화면에 나타나는데요 , 아래 사진과 같아요. 제일 먼저 축구공을 누르게 되면 localhost:3000/products/4라고 뜨기에요, 원래 제대로 되려면, 축구공을 누르면 localhost:3000/products/1로 되어야 하는거 아닌가요? 그리고 위 첨부한 사진 보면 왼쪽과 같이 에러가 발생하는데요, 어떻게 해야 제대로 작동 할까요? 그리고 잘못 소스코드를 입력하고 실행하다보니 키보드가 2개 생성 되었습니다만 , 이것 을 하나만 남기고 싶은데 어떻게 해야 하는지요? -->DB Browser for SQLite에서 삭제하는 방법이 있나요? 위에 사진 1에서 가장 마지막인 4번째의 축구공을 누르면, 위와 그리고 아래와 같은 에러가 발생하며 상품 정보 상세 페이지 . 즉 상품 정보를 받고 있습니다... 만 그대로 멈춰있고 이전 강의 챕터에서 만든 것(상품상세페이지) 불러올 수 없게 되어 질문을 남깁니다. 즉 상품 정보 상세 페이지가 잘 만들어져서 그대로 에러 없이 잘 해왔는데, 에러가 나서 여쭈어봅니다. -추가 질문 : 상품 정보를 받고 있습니다... 페이지 경우는 POSTMAN 가짜 서버(=mock서버)에서랑 관련이 깊은 건가요? POSTMAN(=mock서버)에서 그랩님의 강의를 따라올때, 다른점들이 몇가지 있었는데요(몇가지 다른점은 에러가 있었습니다 .), 그래서 위 에러가 발생하는 건가요? 다른점이 발생한 경우라면 포스트맨 에러 스샷을 추가로 올리겠습니다. 그럼 봐주실 수 있나요? 아니라면 POSTMAN(=mock서버)과 관련 없이 우리는 Node 서버를 구축 했기에, Mock서버인 POSTMAN과 전혀 상관이 없는 건가요? [상품 상세 페이지] 불러오지 못하는 것은 만일 Node 서버의 문제이지, Postman과 상관 없다면,node 서버측에서는 무엇을 고쳐주거나 어떤 소스를 작성해줘야 에러가 해결될까요? 더불어서 79강 강의 2분 56초 부터 3분 32초 보면, POSTMAN 테스트 를 하는 부분이 나오는데, 여기서 아래 사진을 보면[왼쪽 메뉴 get product] Body 부분에서 그랩 강사님 화면과 다르게 뜨는데, 이것은 왜 그런건가요? 어떻게 해야 http://localhost:8080/products/1 , http://localhost:8080/products/2 , http://localhost:8080/products/3 을 제대로 작동하게 할 수 있나요? 마지막으로 [참고 사진]으로 POSTMAN의 잘 작동하는 [get products]사진 첨부해 봅니다. 어떻게 해야 이 모든 에러 를 해결 할 수 있을지에 대해 자세한 답변 부탁드립니다.
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
■ 질문 남기실 때 꼭! 참고해주세요. 안녕하세요 코딩웍스선생님의 웹디자인기능사자격증 수업듣고있는데요 중간에 다른선생님 목소리로 강의가 나와서요 강사2분의 강의를 한 강좌 안에 섞어서 만든 강의 인가요? 어제 9월9일에는 37강 부터 코딩웍스 선생님 목소리로 강의가 나왔는데 오늘 9월10일 에는 37강이 코딩웍스 강사분 목소리가 아닌 다른강사분 목소리로 강의가 나와서요 저는 코딩웍스 선생님의 강의를 듣고 싶어요 방법이 없을까요?
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
시험유형 관련 사항 문의합니다. 예를 들면 D유형의 경우 공개문제 상으로는 왼쪽 개별 네비게이션, 우측 메가 메뉴 두 유형이 존재하는데 예를 들면 D유형 공개문제에는 없는 상단 메뉴가 추가되어 나온다는지 하는 경우가 있는지 문의 드립니다. 정리하면 24개 공개문제에 없는 새로운 유형이 출제 될 수도 있는지 알려주시면 될 것 같습니다.
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
안녕하세요 7강 파워포인트 자료 다운로드 버튼 어디에 있나요? 나중에 코딩소스도 다운로드해서 볼수있나요?
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.01
mouseenter 마우스 이벤트를 할때 pulse.start(); 대신 pulse.restart();로 처음시작하게 하는것처럼 실습 때 mouseleave 마우스가 벗어날 때 자연스럽게 하려면 pulse.pause(); gsap.to ('button',{scale:0.8,duration:0.4}) 두개를 사용해서 어색하지 않게 구현했는데요, pulse.pause(); gsap.to ('button',{scale:0.8,duration:0.4}) 대신 pulse.reverse();를 사용해도 동일하게 어색하지 않게 줄 수있는 효과인건가요? 차이점은 없는건지 궁금합니다.
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
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, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
권한 요청드렸습니다. 확인부탁드립니다!
