묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결핵심만 골라배우는 CSS3
style 속성마다 박스 형태를 따로 따로 가지나요?
a tag, span 태그는 각각의 박스 성질을 가지고 있다하셨는데, 줄바꿈을 해도 각각의 박스 성질을 유지하나요?
-
해결됨DOM에서 픽셀까지, 브라우저 렌더링과 CRP 완전 정복 - [DOM 완전 정복 Part 3]
CSS까지만 지연에 영향을 주는건가요?
안녕하세요~! 궁금한 점이 생겨 문의드립니다! DOM + CSSOM > Render Tree를 만들기 때문에 CSS 배치에 따라 CRP에 영향을 주는 것까지는 이해했는데요! script는 async 또는 defer 속성을 알맞게 적어주기만 하면 실행 순서만 보장이 되고 안되고의 차이이고 CRP에는 영향을 주진 않는건가요?
-
미해결TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!
tailwindcss 와 ai tool
ai tool(cursor, claude code ...) 에서 tawilwindcss 를 다룰 때, 팁이나 주의해야 할 점에 대해서 공유해주셔도 좋을것 같다는 생각이 들었습니다. 🙂
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
class 값 한 번에 부여하는법
<article></article> <article></article> <article></article>값에 한 번에 class를 주고싶을 때 강사님은 한 번에 선택하여 동시입력하시던데 방법이 있나요?
-
해결됨Cursor AI로 만들면서 배우는 Web & Javascript
Gemini API Key 관련 문의입니다.
강사님, Vibe 코딩에 관심이 있어서 강의를 수강하고 있는데앞부분에 알려주신 API KEY 입력 관련해서 Google AI Studio에서 API KEY 받아서 알려주신 대로 Cursor 입력해서 사용하는데,, Cursor 화면 인터페이스가 영상 촬영하신 2월달과 달라진거 같고설명주시는 Gemini 2.0 flash도 조회가 안되는거 같은데... 현재 Cursor 환경이 달라진 걸까요? 궁금해서 문의드립니다.
-
해결됨바이브 코딩 With Claude Code로 웹 서비스 만들기
Cluade Code 사용 시 TaskMaster API key 필요 유무
안녕하세요. 10강에서 TaskMaster에서 복잡도를 사용하기 위해서 Perplexity API 를 입력해서 쓰셨는데, Cluade Code를 사용하면 자체 Provider를 사용하는 거 같은데 다른 이유가 있으신가요?https://github.com/eyaltoledano/claude-task-master/blob/main/docs/examples/claude-code-usage.md
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
그랩님,[꼭] 답변 부탁드립니다.
*먼저 이 질문의 글을 그랩님께서 보신다면, [꼭][[꼭] 그랩님, 답변 부탁드립니다], Failed to load resource: the server responded with a status of 404 (Not Found) 상품 상세 페이지 질문입니다.https://inf.run/FB4N9링크부터 본 뒤 답변을 그 게시물에 해 주신 후이 질문 글 아래에도 답변을 부탁 드립니다.그랩님, 좋은 강의 잘 듣고 있습니다.다름이 아니라, 아래 질문글에서 단 하나도 수정한 것 없이 몇일 뒤 재부팅만 해주었는데요, VS CODE에서 실행을 해주면 아래와 같이 에러도 줄어들어들었습니다.그리고 위 그림에서 축구공을 누르면 '상품 상세 페이지'가 아무리 기다려도 뜨지 않고 오른쪽에 에러가 발생합니다. 에러 발생 스샷 아래 첨부 합니다.( 참고로 이전에는 상품 상세 페이지의 상품 정보를 받고 있습니다...가 에러 없이 내용을 잘 불러왔었습니다.그런데 왜 지금은 아무리 기다려도 내용을 불러오지 못하는 이유를 모르겠습니다. )오른쪽에 에러를 해결하여상품 정보를 받고 있습니다... 내용이 불러오게 하려면 어떻게 해야 하나요?-------------------------------------------------------------------------------------------------또한 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]사진 첨부해 봅니다.어떻게 해야 이 모든 에러를 해결 할 수 있을지에 대해 자세한 답변 부탁 드립니다.
-
미해결모바일 웹 제작 입문: Figma 디자인 완벽 구현하기 with Javascript
11. login 페이지 - 폼 요소 작성 및 스타일
11. login 페이지 - 폼 요소 작성 및 스타일19:12앱 전체 사이즈 넓이가 414px피그마에서 빨간줄에는 us.가 한줄강사님의 코딩저의 코딩 수업 중 따라하던 중뷰어를 보니 us.가 내려가 있음똑같이 했는데 왜 이럴까요 근데 font-weight: 700;이 부분을 빼니 us.가 위로 잘 올라가 있고요 font-weight: 700;를 넣으면 다시 내려오지요header 패딩도 강사님이랑 동일한데 무엇때문일까요? 참고로 저는 맥을 사용하고 크롬을 보고 있었습니다.
-
미해결모바일 웹 제작 입문: Figma 디자인 완벽 구현하기 with Javascript
참조: https://creatie.ai/ 사이트가 바뀌었어요
11. login 페이지 - 폼 요소 작성 및 스타일9:58 수업노트보기에서 참조: https://creatie.ai/이 링크가 지금은 변경이 되어 https://readdy.ai/로 되어있어서요 이젠 유료이고 프롬프트로 이젠 제작하는 것 같습니다.그래서 대안은 피그에 플로그인에 AutoHTML | Components to Code나 다른 플러그인 추천이 좋을 것 같습니다.
-
해결됨모던 웹 인터렉티브 CSS3 부트캠프 [Full vers.]
수강기간 무제한으로 변경 부탁드립니다.
수강기간 무제한으로 변경즘 부탁드릴게요
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
섹션10-77번강의 내 와이어프레임 pdf 자료 다운로드 어디서 하나요?
안녕하세요 섹션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)
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
보더를 사용해 와이어프레임만드는 강의 html+css소스 다운로드 받을 수 있나요?
안녕하세요 38.2.가로고정형 레이아웃(A1-A4)보더를사용해서 Html+css 구조만들기 강의에서 html+css 코딩소스 다운로드 받을 수 있나요? 전체를 감싸는 컨테이너박스와 안에 있는박스 사이 1픽셀 공간이 남아서 소스를 비교해 볼려고 합니다
-
미해결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) 만들기이미지맵 만드는 강좌 연습파일 다운로드는 유튜브 영상의 [더보기]에 링크가 있다고 하셨는데, 아무리 찾아봐도 찾을 수가 없습니다.어디서 받을 수 있는걸까요?
