inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

이미 완성된 반응형 사이트가 있을 때

미해결

퍼블리셔 개인 포트폴리오 홈페이지 제작 완벽 가이드(PDF)

안녕하세요 선생님 전자책 잘 읽었습니다! 기획서, 기능정의서를 만들어서 넣는 게 좋다고 전자책에 쓰여있는데 제가 이미 완성된 반응형 사이트가 하나 있긴 합니다. 이미 완성된 반응형 사이트의 기능정의서, 기획서를 다시 만들어서 넣는게 좋을까요 아니면 그 시간에 다른 클론코딩이나 반응형, 모바일 웹을 만드는 게 나을까요? 제가 알바를 하면서 취준을 같이 하는 중이라 시간이 많지 않아 최대한 빨리 취업하고 싶은 마음에 이런 질문을 드립니다 감사합니다!

  • HTML/CSS
  • 웹-디자인
  • 포트폴리오
라면라미 댓글 1 좋아요 1 조회수 280

반응형에 대해 질문이 있습니다 !

미해결

초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트

안녕하세요 깡코딩님, 다름이 아니라 모바일 뿐만아니라 pc도 반응형이 필요할텐데 맥북프로같은 경우는 해상도가 크더라구요 .. 이럴경우 처음부터 크게 작업하고 미디어 쿼리로 점점 작게 진행해야하는걸까요??? 1920까지만 신경쓰고 최소로 280까지만 신경썼는데 이렇게 큰게 나오니 또 조정을 해야하나 싶습니다.

  • HTML/CSS
  • javascript
  • jquery
  • 인터랙티브-웹
빈공간 댓글 1 좋아요 0 조회수 399

넷플릭스 예제 제이쿼리 동작 안먹는데 뭐가 문제일까요?

미해결

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

저렇게 두줄 이상 동작 넣을 시에 아예 안먹히네용 ㅠㅠ $(function(){ $('.accordion .title').click(function(){ $(this).next().stop().slideToggle() }) }) 만 작성했을 때는 정상동작되구요 .. 뭐가 문제일까요 ??

  • HTML/CSS
  • jquery
예림 댓글 1 좋아요 2 조회수 263

npm install을 하면 취약점 문제가 뜹니다.

미해결

처음 만난 리액트(React)

npm install --save styled-components up to date, audited 1782 packages in 5s 117 packages are looking for funding run npm fund for details 131 vulnerabilities (1 low, 104 moderate, 22 high, 4 critical) To address issues that do not require attention, run: npm audit fix To address all issues (including breaking changes), run: npm audit fix --force Run npm audit for details. 라고 뜨면서 안되는데 어떻게 해결하나요..?ㅜ

  • HTML/CSS
  • javascript
  • react
twjung 댓글 1 좋아요 1 조회수 6520

기획서 작성 방법에 대해서 질문드립니다..

미해결

퍼블리셔 개인 포트폴리오 홈페이지 제작 완벽 가이드(PDF)

안녕하세요 pdf 중 모바일 웹 섹션 부분을 읽고 있습니다.. 개인 포트폴리오 홈페이지에 기획서를 넣어야 한다고 하셨는데 기획서 내용은 어떻게 구성해야 하는걸까요? 혹시 예시나 간단한 가이드를 알려주실 수 있을까요 좋은 하루 되세요..

  • HTML/CSS
  • 웹-디자인
  • 포트폴리오
d111 댓글 1 좋아요 1 조회수 272

비주얼 스튜디오 코드(Visual Studio Code) 사용법 및 환경설정 강의 > 기능사 자격증 시험에 필요한 부분만 정리 부탁드립니다.

미해결

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

안녕하세요. 웹디자인 기능사 실기 준비 중인 강의 수강자입니다. >>비주얼 스튜디오 코드(Visual Studio Code) 사용법 및 환경설정 해당 강의 수강 중인데 실무자 팁과 섞여있어 시험 시 필요한 부분 구분이 어려운 상황입니다. 시험자 환경에 맞춰 실제 시험에 필요한 세팅 부분만 모두 알 수 있을까요? 감사합니다.

  • HTML/CSS
  • jquery
  • 웹-디자인
susu2013 댓글 2 좋아요 1 조회수 411

섹션5의 2번째 강의 질문-setMap 비동기 처리 이유

미해결

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

제가 이해한 바가 맞는지 질문드립니다. 질문1. 마커를 찍을 시: 1. 주소를 좌표로 변환 2. 해당 좌표를 마커로 지도에 표시 의 처리 순서가 보장되어야 하므로, async await를 이용한 비동기처리를 해준 것이 맞나요? 질문 2. 비동기처리를 해주기 전에도 마커는 잘 찍혔는데, 그 말은 즉 주소를 좌표로 변환하고-> 좌표를 마커로 표시하는 순서로 코드가 실행되었다는 것 아닌가요? 그렇다면 api가 비동기적으로 이루어진다는 말이 잘 와닿지 않아서 질문드립니다. 감사합니다!

  • HTML/CSS
  • javascript
  • aws
  • git
  • mysql
  • rest-api
  • github
이다윤 댓글 1 좋아요 0 조회수 254

시맨틱 태그를 모두 사용하고싶어요

미해결

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

nav section aside main 사용해서 하는법을 알수없을까요??

  • HTML/CSS
  • jquery
  • 웹-디자인
작전김 댓글 1 좋아요 1 조회수 337

질문 드립니다..

미해결

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

스크립트에 fade: true를 하면 그림처럼 뒤에 있는 요소들은 안 나오는데 어디가 틀렸을까요? .. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <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> <!-- slick.js --> <link rel="stylesheet" href="slick/slick-theme.css"> <link rel="stylesheet" href="slick/slick.css"> <script src="slick/slick.js"></script> <!-- <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> --> <link rel="stylesheet" href="01.slickslider-contents-slider.css"> </head> <body> <div class="myslider"> <div>your content1</div> <div>your content2</div> <div>your content3</div> <div>your content4</div> <div>your content5</div> <div>your content6</div> <div>your content7</div> <div>your content8</div> </div> <script> $('.myslider').slick({ infinite: true, slidesToShow: 4, slidesToScroll: 4, autoplay: true, autoplaySpeed: 2000, speed: 2000, fade: true, cssEase: 'linear', dots: true, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 3, infinite: true, dots: true } }, { breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 2 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } } // You can unslick at a given breakpoint now by adding: // settings: "unslick" // instead of a settings object ] }); </script> </body> </html> body { margin: 0; box-sizing: border-box; background-color: pink; } .myslider { width: 800px; margin: auto; } .myslider .slick-arrow { border: 1px solid #000; display: none !important; } .myslider .slick-dots { border: 1px solid #000; /* display: none !important; */ bottom : 5px; } .myslider .slick-dots li button:before{ font-size: 15px; } .myslider div { border: 1px solid #000; height: 300px; background-color: #ddd; } @media (max-width: 768px){ .myslider { width: 100%; } }

  • HTML/CSS
  • jquery
d111 댓글 1 좋아요 0 조회수 239

컴포넌트 렌더링 과정이 궁금합니다.

해결됨

처음 만난 리액트(React)

안녕하세요 선생님 Char 7 실습 코드를 localhost:3000 포트에서 처음 랜더링 했을 때 그림과 같이 useEffect() 각각 2번씩 (총4번)호출되어 질문드립니다. 코드는 다음과 같습니다. 각각 1번씩 호출되지 않고 2번씩 호출되는 이유가 뭘까요.. ㅠ import React, {useState, useEffect} from "react"; import useCounter from "./useCounter"; const MAX_CAPACITY = 10; function Accommodate(props){ const [isFull, setIsFull] = useState(false); const [count, increaseCount, decreaseCount] = useCounter(0); useEffect(() => { console.log("============"); console.log("useEffect() is called."); console.log(`isFull : ${isFull}`); }); useEffect(() => { setIsFull(count >= MAX_CAPACITY); console.log(`Current count value: ${count}`); }, [count]); return ( <div style={{padding : 16}}> <p>{`총 ${count}명 수용했습니다.`}</p> <button onClick={increaseCount} disabled={isFull}> 입장 </button> <button onClick={decreaseCount}> 퇴장 </button> {isFull && <p style={{color: "red"}}>정원이 가득찼습니다.</p>} </div> ) } export default Accommodate;

  • HTML/CSS
  • javascript
  • react
OnlyOne 댓글 1 좋아요 1 조회수 474

선생님 질문 있습니다! svg 태그에 object-fit: cover; 같은 속성을 적용하기는 어려울까요?

미해결

SVG 마스터

- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :) - 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다. - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

  • HTML/CSS
  • svg
JiHyeon Han 댓글 1 좋아요 0 조회수 611

관련 영상은 어디있나요~?

미해결

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

더블 보더 다음인 막대 그래프에 대한 영상이 없는데 어디서 확인할 수 있나요?

  • HTML/CSS
  • jquery
예리 댓글 1 좋아요 1 조회수 163

Fiama 링크 찾기

해결됨

[코드캠프] 시작은 프리캠프

피그마 링크는 인프런 강의실 하단에 (강의실에서 아래로 스크롤) 수업자료로 가는 노션링크가 있고, 노션에 피그마로 넘어가는 링크가 있습니다. 라고 안내를 받았습니다. 그런데 인프런 강의실은 어느 화면을 이야기 하는지요? 동영상 강의를 보고 있는데 어디를 찾아가야 하는지 모르겠습니다. 세션별 학습 자료 이미지를 보내 주셨는데 이런 자료를 찾을 수가 없습니다. 자세한 그리고 쉬운 설명을 부탁 드릴께요.

  • HTML/CSS
  • javascript
ktkong 댓글 2 좋아요 0 조회수 275

비쥬얼스튜디오 코드 환경설정

미해결

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

비쥬얼스튜디오 코드 환경설정 강의에서 beautify 익스텐션에서 다운 받으시라고 하셨는데, 이제 지원하지 않는다고 나오는데 다운 없이 그냥 해도 상관없는걸까요? 그리고 처음부터 강의를 보고 있는데 비쥬얼스튜디오 코드를 쓰면 브라켓은 따로 설치하고 사용을 하지 않아도 되는걸까요?

  • HTML/CSS
  • jquery
  • 웹-디자인
ay1124 댓글 2 좋아요 1 조회수 295

투두리스트 과제 힌트 좀 주세요 ㅠ

미해결

자바스크립트 : 기초부터 실전까지 올인원

투두리스트 마지막에서 과제로 내주신 '끝남' 에서 Delete 버튼을 눌렀을 경우 삭제가 안되는거 어디를 봐야하는건지 모르겠어요 ㅠㅠ

  • HTML/CSS
  • javascript
bbd 댓글 1 좋아요 0 조회수 451

마크다운 이미지가 잘 작동안합니다.

해결됨

React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)

제시해주신 방식대로는 마크다운으로 작성하는 이미지가 링크를 작성하기까지만 하고 나오지 않는 경우가 대부분입니다. 이유는 모르겠네요. 잠깐 나왔었는데.. 또 안나옵니다. 이유가 있을까요. 조건과 지시를 다양하게 걸었더니 제대로 답변을 못하네요. ^^; 특히 일기를 제멋대로 쓰는 부분이 있습니다. 어떤때는 내가쓴것처럼 잘 쓰는데 어떤때는 제멋대로 씁니다. ㅎㅎ 그래도 이런 시도를 해볼수 있어서 좋습니다.

  • HTML/CSS
  • javascript
  • react
  • node.js
  • chatgpt
액트나우 댓글 2 좋아요 1 조회수 598

섹션 5 클립패스 - 동영상이 중심에서 커지는게 아니고 우측하단에서 커져요,,

미해결

UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략

왜 그런걸까요? ;; 이것때문에 진도를 못나가고있어요 ~ ㅠㅠ 파일을 똑같이 복사해서 동영상에서 이미지로 변경하면 선생님처럼 중심에서 애니메이션이 진행되네요... 왜 동영상을 넣으면 우측하단에서 동영상이 진행될까요? 동영상 파일이 좀 크지만 선생님 메일에 보내볼게요~ ㅠㅠ

  • HTML/CSS
  • 포트폴리오
  • 반응형-웹
  • gsap
  • scrolltrigger
김은정 댓글 3 좋아요 1 조회수 332

Figma는 어디에 있나요?

해결됨

[코드캠프] 시작은 프리캠프

별도로 제공되는 Figma를 통해서 과제를 한다는 것이 무슨 뜻인가요? Figma는 어디로 가야하나요?

  • HTML/CSS
  • javascript
ktkong 댓글 1 좋아요 0 조회수 264

연습 파일은 어디에 있나요?

미해결

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

안녕하세요 연습파일을 다운로드 받고 싶은데요.. 유튜브 영상에서 연습파일 다운로드를 못찾았습니다.. 어디에 있을까요?

  • HTML/CSS
  • jquery
d111 댓글 1 좋아요 1 조회수 340

인기 태그

인프런 TOP Writers

주간 인기글