묻고 답해요
160만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!
tailwindcss 4.1 docs에서는 container가 목록에서 안보이네요
docs를 보니 4.1에서는 container가 목록에는 안보이는데, 앞으로 없어지는건가요?코드상 동작은 하는데... 왜 최신 버전 docs에서 빠진건지 궁금하네요. 버전업 되면서 변경된거만 보이는건가요?
-
미해결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%; } }
-
미해결입문자를 위한, HTML&CSS 웹 개발 입문
button 질문
<input type="button"이거랑<button type="button이 둘은 어떤 차이인가요?
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
live server가 안 떠요..
저 이 화면에서 open with live server 를 눌렀는데이 화면이 떠요.. 저 그러고 혹시 강의 마지막 부분만 보고도 앱을 만들 수 있나요?
-
해결됨반응형 웹사이트 포트폴리오(App Official Landing Website)
하드코딩으로 이미지맵(image map) 만들기
하드코딩으로 이미지맵(image map) 만들기이미지맵 만드는 강좌 연습파일 다운로드는 유튜브 영상의 [더보기]에 링크가 있다고 하셨는데, 아무리 찾아봐도 찾을 수가 없습니다.어디서 받을 수 있는걸까요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
시험 시 슬라이드 작성 관련 문의
슬라이드 유형 중에는 아래와 같이 가로세로 고정이 아닌 형태가 있는데 포토샵으로는 어떻게 만들면 좋을까요?D /E /F 유형 별로 자세하게 설명해 주셨으면 합니다.
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
[꼭][[꼭] 그랩님, 답변 부탁드립니다], Failed to load resource: the server responded with a status of 404 (Not Found) 상품 상세 페이지 질문입니다.
좋은 강의 잘 듣고 있습니다.다름이아니라, 이전 강의들에 에러들을 다 해결해서 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]사진 첨부해 봅니다. 어떻게 해야 이 모든 에러를 해결 할 수 있을지에 대해 자세한 답변 부탁드립니다.
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
강의 질문 있습니다
■ 질문 남기실 때 꼭! 참고해주세요.안녕하세요 코딩웍스선생님의 웹디자인기능사자격증 수업듣고있는데요 중간에 다른선생님 목소리로 강의가 나와서요 강사2분의 강의를 한 강좌 안에 섞어서 만든 강의 인가요? 어제 9월9일에는 37강 부터 코딩웍스 선생님 목소리로 강의가 나왔는데 오늘 9월10일 에는 37강이 코딩웍스 강사분 목소리가 아닌 다른강사분 목소리로 강의가 나와서요 저는 코딩웍스 선생님의 강의를 듣고 싶어요 방법이 없을까요?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
시험 관련 문의
시험유형 관련 사항 문의합니다. 예를 들면 D유형의 경우 공개문제 상으로는왼쪽 개별 네비게이션, 우측 메가 메뉴 두 유형이 존재하는데 예를 들면 D유형 공개문제에는 없는 상단 메뉴가 추가되어 나온다는지 하는 경우가 있는지 문의 드립니다. 정리하면 24개 공개문제에 없는 새로운 유형이 출제 될 수도 있는지 알려주시면 될 것 같습니다.
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
파워포인트 자료 다운로드 버튼 어디에 있나요?
안녕하세요 7강 파워포인트 자료 다운로드 버튼 어디에 있나요? 나중에 코딩소스도 다운로드해서 볼수있나요?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
hover pulse animation 관련해서 질문있습니다!
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();를 사용해도 동일하게 어색하지 않게 줄 수있는 효과인건가요? 차이점은 없는건지 궁금합니다.
-
미해결[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, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
메일 확인부탁드립니다
권한 요청드렸습니다.확인부탁드립니다!
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
CodeSandbox Vanilla 질문있습니다
안녕하세요. CodeSandbox에 Vanilla가 보이질 않습니다. 그래서 인프런 내부에 올라온 여러 해결방법을 찾아서 따라하려 했으나 잘 되지는 않는 것 같습니다. 혹시 그냥 자바스크립트를 사용해도 이상없을까요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
6강/7강 수업
다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요.6강 마지막 화면이랑 7강 첫화면 코드가 달라져서 이 부분은 어떻게 해결하면 될까요??(안녕하세요->환영합니다)(console.log->alert)크게 이 두 부분이 다른 것 같습니다. 그냥 이대로 진행하면 될까요?2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다!3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요!
-
해결됨[코드캠프] 강력한 CSS
노션 자료위치
안녕하세요 .강의에 노션자료가있다고하는데 노션링크를 못찾아서요 노션링크를 공유받을수있을까요 ?
-
미해결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() })
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
ipify.org api 호출 시 클라이언트 ip주소를 반환하는지?
ch-7-2에서포스트 상세 조회 router 안에서 ipify.org api를 호출하는데포스트 상세 조회 API를 클라이언트에서 호출할 경우서버에서 ipify.org api를 호출하기 때문에 의도한바와 다르게 서버 ip 주소가 나오고 클라이언트 IP는 req.ip를 통해서만 얻을 수 있지않나요??const response = await axios.get("https://api.ipify.org?format=json"); ip = response.data.ip;
