inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

섹션 .con02 gsap 질문

미해결

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

안녕하세요 먼저 너무 유익하고 도움이되는 강의를 주셔서 감사드립니다. .con02에 workList gsap쪽에 질문이 있어서 글 남기게 되었습니다. my work 타이틀이 fixed되고 리스트들이 올라왔다가 다시 스크롤을 천천히 위 방향으로 해서 올라가다보면 리스트 영역이 이상하게 위로 올라왔다가 사라지는 현상이 있어서 문의 드립니다.

  • HTML/CSS
  • 포트폴리오
  • 반응형-웹
  • gsap
  • scrolltrigger
신동승 댓글 3 좋아요 0 조회수 322

2025년 실기준비할때도 참고하면 좋을 강의일까요?!

미해결

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

아직 결제만하고 강의시청은 안한상태인데 2025년 웹디자인개발기능사로 바뀌는데 내용도 바뀐다고 알고있는데 이 강의로2025년도꺼 준비해도 무리는 없을까요!? 혹시 2025년도 버전 강의가 새로 나오면 그걸로 결제할까해서요 여쭤볼곳이 없어서 여기에 적습니다. 답변주시면 감사하겠습니다.!

  • HTML/CSS
  • jquery
  • 웹-디자인
이희정 댓글 1 좋아요 2 조회수 276

강의 자료 요청합니다~

미해결

실전! 웹사이트제작! Step by Step! ('크루알라모드'_반응형웹 제작)

강의를 듣기 시작했는데 강의자료는 어디에서 받는지 몰라 질문드려요~ kjj5421@naver.com 으로 자료 요헝 드려도 될까요?

  • HTML/CSS
  • jquery
  • 인터랙티브-웹
  • 반응형-웹
roaddion 댓글 2 좋아요 0 조회수 156

Azure 서버로 구축하고 작업하는 방법 알 수 있을까요?

미해결

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

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요! 제가 AWS가 아닌 Azure 서버를 이용하고 있는데, Azure는 어떻게 이용 가능한 지 알 수 있을까요? 프로젝트를 수행하고 있는 비전공자라 개념이 많이 부족합니다. 운이 좋게 Azure를 쓸 기회를 얻어서 Azure를 이용해서 작업하고 싶은데, 어떻게 사용할 있을 지 알 수 있나 싶어 질문 드립니다.

  • HTML/CSS
  • javascript
  • aws
  • git
  • mysql
  • rest-api
  • github
  • azure
  • microsoft
dpfqjf 댓글 2 좋아요 0 조회수 302

그랩선생님, 질문 답변 부탁 드립니다.vscode에서 npm install -g create-react-app 입력 후 에러 입니다.

해결됨

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

(* nodejs 설치를 https://nodejs.org/en/download/ 에 들어가서 Prebuilt Installer 메뉴에서 v22.11.0(LTS)를 설치하였습니다.) 안녕하세요, 수고가 많으십니다. 강의 잘 듣고 공부하다 모르는 부분이 있어 에러사항은 아래에 요약하여 적었습니다. 일단 react 시작하기 강의를 듣고 있던 중 처음 부분에서 vscode 터미널에서 명령어 npm install -g create-react-app 입력 후 아래 에러가 발생하여 어떻게 해야 해결 할 수 있는지 답을 알고 싶어서 글을 쓰게 되었습니다. 1.첫번째로 vscode 실행 후 npm install -g create-react-app 명령어 입력하니 에러 요약: 경로를 확인하라는 문제가 발생하였습니다. 첫번쨰 에러 발생 한 후 vscode를 종료하고 다시 시작하니 또 다시 이번엔 새로운 에러가 발생 하였습니다. 에러 요약: 자세한 내용은 마이크로소프트 링크 주소 참조하라는 메시지 에러가 발생하였습니다. 현재까지 2가지 에러가 순서대로 나타내고 있는데요, 어떻게 하면 해당 사항을 해결 할 수 있을까요? 상세하고 자세한 답변 부탁드립니다. 감사합니다.

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
isbcom1004 댓글 2 좋아요 0 조회수 522

delay 적용 안됨

미해결

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

딜레이가 적용이 안되는데 코드에서 어떤 부분이 잘못된 것일까요?? animation-fill-mode와 animation-delay 모두 다 주었습니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; } .skill-progress { background-color: #333; width: 500px; border-radius: 10px; color : white; text-align: center; padding: 10px; } .item { margin-bottom: 35px; } .item p{ overflow: hidden; margin-bottom: 5px; } .item span:nth-child(1) { float: left; } .item span:nth-child(2) { float: right; } .progress { border : 1px solid aquamarine; padding: 5px; border-radius: 3px; } .progress-level { background: linear-gradient(to right, #fc6c85 0%, gold 100%); height: 7px; animation: ani 1s; animation-fill-mode: both; } @keyframes ani { 0% { width: 0; } } .skill-progress .item:nth-of-type(1) .progress-level { animation-delay: 0s; } .skill-progress .item:nth-of-type(2) .progress-level { animation-delay: 0.2s; } .skill-progress .item:nth-of-type(3) .progress-level { animation-delay: 0.4s; } .skill-progress .item:nth-of-type(4) .progress-level { animation-delay: 0.6s; } .skill-progress .item:nth-of-type(5) .progress-level { animation-delay: 0.8s; } </style> </head> <body> <div class="skill-progress"> <h1>SOFTWARE SKILLS</h1> <div class="item"> <p> <span>HTML5</span><span>90%</span> </p> <div class="progress"> <div class="progress-level" style="width: 90%"></div> </div> <p> <span>CSS3</span><span>80%</span> </p> <div class="progress"> <div class="progress-level" style="width: 80%"></div> </div> <p> <span>jQuery</span><span>65%</span> </p> <div class="progress"> <div class="progress-level" style="width: 65%"></div> </div> <p> <span>Photoshop</span><span>70</span> </p> <div class="progress"> <div class="progress-level" style="width: 70%"></div> </div> <p> <span>illustrator</span><span>82%</span> </p> <div class="progress"> <div class="progress-level" style="width: 82%"></div> </div> </div> </div> <script src="script\jquery-1.12.4.js"></script> <script src="script\custom.js"></script> </body> </html>

  • HTML/CSS
  • jquery
황서영 댓글 1 좋아요 1 조회수 148

scrolla 질문

미해결

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

안녕하세요, 강사님. 다름이 아니라 스크롤라 반복이 되지 않아서 질문 드립니다. 알려주신대로 펑션으로 스크롤라를 호출하고 인덱스 파일에 애니메이트도 선언했습니다만, 처음에만 애니메이션이 작동하고 스크롤을 내렸다 올릴 땐 작동하지 않습니다. 스크롤을 초기화 해야 되는걸까요? 챕터마다 넣어주신 캡쳐 파일에선 저랑 다른 부분을 찾기가 어려워 질문 남깁니다!

  • HTML/CSS
  • 포트폴리오
  • 반응형-웹
  • gsap
  • scrolltrigger
febisthe 댓글 2 좋아요 0 조회수 169

메일 확인 부탁드립니다.

미해결

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

이메일로 자료 요청을 했으나 계속 받지 못하고 있습니다. 메일 확인 부탁드립니다. (swh0107@gmail.com)

  • HTML/CSS
  • javascript
  • es6
우혁 댓글 1 좋아요 0 조회수 168

rotateY(360deg)가 적용이 안됩니다!

미해결

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

/* Google Web Font */ @import url('https://fonts.googleapis.com/css?family=Raleway&display=swap'); /* Fontawesome 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"); body { border : 1px solid red; margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } a { text-decoration: none; color : #222; } .sns { background-color: #f8f8f8; padding : 40px; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.3); } .sns a { border : 5px solid white; display: inline-block; width: 80px; height: 80px; border-radius: 50%; background-color: #fff; text-align: center; line-height: 80px; font-size: 40px; margin: 0 10px; position: relative; overflow: hidden; } .sns a:before { content:''; position: absolute; width: 100%; height: 0; bottom:0; left:0; transition: 0.5s; } .sns a:hover:before { height: 100%; } .sns a:nth-child(1):before { background-color: #3b5999; } .sns a:nth-child(2):before { background-color: #55acee; } .sns a:nth-child(3):before { background-color: #dd4b39; } .sns a:nth-child(4):before { background-color: #0077b5; } .sns a:nth-child(5):before { background-color: #e4405f; } .sns a .bi { position: relative; transition: 0.3s; } .sns a:hover .bi { transform: rotateY(360deg); color: #fff; }<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"> </head> <body> <div class="sns"> <a href="#none"><i class="bi bi-facebook"></i></a> <a href="#none"><i class="bi bi-twitter"></i></a> <a href="#none"><i class="bi bi-google"></i></a> <a href="#none"><i class="bi bi-linkedin"></i></a> <a href="#none"><i class="bi bi-instagram"></i></a> </div> <script src="script\jquery-1.12.4.js"></script> <script src="script\custom.js"></script> </body> </html><!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"> </head> <body> <div class="sns"> <a href="#none"><i class="bi bi-facebook"></i></a> <a href="#none"><i class="bi bi-twitter"></i></a> <a href="#none"><i class="bi bi-google"></i></a> <a href="#none"><i class="bi bi-linkedin"></i></a> <a href="#none"><i class="bi bi-instagram"></i></a> </div> <script src="script\jquery-1.12.4.js"></script> <script src="script\custom.js"></script> </body> </html> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"> </head> <body> <div class="sns"> <a href="#none"><i class="bi bi-facebook"></i></a> <a href="#none"><i class="bi bi-twitter"></i></a> <a href="#none"><i class="bi bi-google"></i></a> <a href="#none"><i class="bi bi-linkedin"></i></a> <a href="#none"><i class="bi bi-instagram"></i></a> </div> <script src="script\jquery-1.12.4.js"></script> <script src="script\custom.js"></script> </body> </html> 코드 내용은 위와 같습니다..! rotateY(360deg)를 css에 작성해주었는데 실행 결과 이것만 적용되지 않습니다. 어떤 이유 때문일까요..? 강의 자료에 제공된 css를 복사해서 붙여넣어도 적용되지 않습니다

  • HTML/CSS
  • jquery
황서영 댓글 2 좋아요 1 조회수 216

섹션 1 - 3강 화면이 안나오는것 같네요

미해결

Tailwind CSS로 만드는 멋진 웹 UI 스타일링

섹션 1 - [필독] CDN 사용법과 비주얼스튜디오코드에서 Tailwind CSS IntelliSense 세팅 강의 화면이 하얀색 배경화면만 나오고 수업내용은 안보이네요. 소리는 정상적으로 들립니다.

  • HTML/CSS
  • 반응형-웹
  • tailwindcss
google pen 댓글 2 좋아요 1 조회수 234

header gnb splitting 적용문제

미해결

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

안녕하세요. 오늘 처음 수업을 시작하면서 <header> <nav>영역에 splitting 적용을 해봤는데요. 해당 모션이 적용되지 않아 문의드립니다. 혹시나 싶어 codepen 예제만 따로 만들어봤는데 동일한 현상이 생기고 있어 제가 무엇을 잘못하고 있는지 알 수가 없습니다. 완성본을 따로 받아 볼 수 있을지도 문의드립니다.

  • HTML/CSS
  • 포트폴리오
  • 반응형-웹
  • gsap
  • scrolltrigger
yeri kim 댓글 3 좋아요 0 조회수 214

메일 확인 부탁드립니다

미해결

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

punkwagon@gmail.com 입니다

  • HTML/CSS
  • javascript
  • es6
PUNKWAGON 댓글 1 좋아요 0 조회수 166

동영상 보는 웹페이지에 강의 web-book 보는 방법 알려주세요

해결됨

HTML5 CSS3 기초 & 반응형 웹 템플릿 만들기!

동영상 보이는 곳에서 Web-Book 어떻게 보나요? https://www.books.weniv.co.kr/로 가서 봐야 하나요? 동영상 강의 하는 웹페이지 어디선가 찾아 볼 수 있었으면 좋겠습니다. 제가 못 찾는 건지 모르겠지만.

  • HTML/CSS
  • 반응형-웹
박진섭 댓글 2 좋아요 1 조회수 189

특별한 형태의 javascript배열에서

해결됨

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

모던 을 위한 다양한 Javascript+EX6 배열 문법 이해1 16분 2초 const data1 = [1, 2, "dave", null]; const data2 = [ { name: "Dave Lee", age: 30 }, { name: "Alex", age: 40 }, ]; const data3 = [ [1, 2, 3], [4, 5, 6], ]; console.log(data1[0]); console.log(data2[0].name); console.log(data3[0][0]); 위 코드에서 마지막줄 console.log(data3[0][0]);만 결과가 나오지 않습니다. [0][1], [0][2], 등 나머지 index 번호를 적용했을 때 정상적으로 나오는데, [0][0]은 왜 결과가 누락되는걸까요? (undefined 라는 결과값도 나오지 않습니다.)

  • HTML/CSS
  • javascript
  • es6
HYO JIN Kim 댓글 1 좋아요 0 조회수 163

메일 확인부탁드립니다!

미해결

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

upward070@gmail.com 권한요청드렸습니다!

  • HTML/CSS
  • javascript
  • es6
upward070 댓글 1 좋아요 0 조회수 184

모바일 화면 최적화 방법 질문드립니다!

미해결

웹 애니메이션의 새로운 표준, Web Animations API

선생님, 안녕하세요! 모바일 화면에서도 비율을 유지하면서 반응형으로 동작하게 만드는 것이 가능할까요? 여러 방법을 시도해 보았는데, 해결이 잘 안 돼서 이렇게 질문을 남깁니다. 아니면 차라리 모바일 전용 SVG를 따로 만들고, PC 버전에서는 display: none으로 처리한 후 모바일일 때만 보이게 하는 방식이 더 나을까요? 조언 부탁드립니다!

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
  • frontend
  • web-animations-api
파이썬 댓글 1 좋아요 0 조회수 255

PDF파일은 어디있나요?

미해결

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

3강에서 비주얼 스튜디오 코드 사용법 강의에서 PDF파일 참고하라는 내용이 있는데 파일은 어디서 확인할 수 있나요?

  • HTML/CSS
  • javascript
  • jquery
ehkim 댓글 2 좋아요 1 조회수 204

codesandbox 업데이트..

미해결

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

codesandbox가 또 업데이트 된 것 같습니다.. 모던 html 기능과 배경지식 이해 강의 영상과 전혀 다른 화면이 나옵니다.. 사용법 업데이트 해 주시면 좋을 것 같습니다.!

  • HTML/CSS
  • javascript
  • es6
HYO JIN Kim 댓글 1 좋아요 0 조회수 166

지금은 저 링크의 filter playground가 지원을안하는것 같아요~

미해결

CSS 기본부터 활용까지

생활코딩 내 링크통해 들어갔는데 제작자가 만든 다른사이트로 이동하더라구요. 근데 거기서도 영상 속 사이트는 이제 없나봐요. 혹시 찾으신 분 계시면 공유해주세요~

  • HTML/CSS
kiri lee 댓글 1 좋아요 0 조회수 113

선생님 알려주신 내용을 기반삼아 구현하고 싶은 UI가 있습니다.

해결됨

웹 애니메이션을 위한 GSAP 가이드 Part.02

안녕하세요 범쌤...! 강의 너무 잘 듣고 있습니다. motionPath를 이용해서 구현하고 싶은 UI가 있습니다. 대략적인 구현하고자 하는 모양은 이러합니다. ● 디폴트 1. 행성이 각 궤도에 맞춰 공전 ● 행성을 클릭시 1. 공전이 멈추고 클릭 된 행성이 줌인 2.행성마다 행성의 설명 UI가 보여짐 설명이 부족한 것 같아 부족하지만 피그마로 그려서 첨부해봅니다.. 실무에 필요한데 도저히 감이오지 않아요 ㅜㅜㅜㅜㅜㅜ

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
  • gsap
eljsh95 댓글 2 좋아요 1 조회수 236

인기 태그

인프런 TOP Writers

주간 인기글