173만명의 커뮤니티!! 함께 토론해봐요.
미해결
UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략
안녕하세요 먼저 너무 유익하고 도움이되는 강의를 주셔서 감사드립니다. .con02에 workList gsap쪽에 질문이 있어서 글 남기게 되었습니다. my work 타이틀이 fixed되고 리스트들이 올라왔다가 다시 스크롤을 천천히 위 방향으로 해서 올라가다보면 리스트 영역이 이상하게 위로 올라왔다가 사라지는 현상이 있어서 문의 드립니다.
HTML/CSS 포트폴리오 반응형-웹 gsap scrolltrigger
신동승
2024-11-05T07:30:24.928Z
댓글 3
좋아요 0
조회수 322
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
아직 결제만하고 강의시청은 안한상태인데 2025년 웹디자인개발기능사로 바뀌는데 내용도 바뀐다고 알고있는데 이 강의로2025년도꺼 준비해도 무리는 없을까요!? 혹시 2025년도 버전 강의가 새로 나오면 그걸로 결제할까해서요 여쭤볼곳이 없어서 여기에 적습니다. 답변주시면 감사하겠습니다.!
이희정
2024-11-05T06:45:38.605Z
댓글 1
좋아요 2
조회수 276
미해결
실전! 웹사이트제작! Step by Step! ('크루알라모드'_반응형웹 제작)
강의를 듣기 시작했는데 강의자료는 어디에서 받는지 몰라 질문드려요~ kjj5421@naver.com 으로 자료 요헝 드려도 될까요?
HTML/CSS jquery 인터랙티브-웹 반응형-웹
roaddion
2024-11-05T04:45:19.948Z
댓글 2
좋아요 0
조회수 156
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요! 제가 AWS가 아닌 Azure 서버를 이용하고 있는데, Azure는 어떻게 이용 가능한 지 알 수 있을까요? 프로젝트를 수행하고 있는 비전공자라 개념이 많이 부족합니다. 운이 좋게 Azure를 쓸 기회를 얻어서 Azure를 이용해서 작업하고 싶은데, 어떻게 사용할 있을 지 알 수 있나 싶어 질문 드립니다.
HTML/CSS javascript aws git mysql rest-api github azure microsoft
dpfqjf
2024-11-05T02:16:27.161Z
댓글 2
좋아요 0
조회수 302
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
(* 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
2024-11-04T05:59:26.348Z
댓글 2
좋아요 0
조회수 522
미해결
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>
황서영
2024-11-03T22:27:17.078Z
댓글 1
좋아요 1
조회수 148
미해결
UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략
안녕하세요, 강사님. 다름이 아니라 스크롤라 반복이 되지 않아서 질문 드립니다. 알려주신대로 펑션으로 스크롤라를 호출하고 인덱스 파일에 애니메이트도 선언했습니다만, 처음에만 애니메이션이 작동하고 스크롤을 내렸다 올릴 땐 작동하지 않습니다. 스크롤을 초기화 해야 되는걸까요? 챕터마다 넣어주신 캡쳐 파일에선 저랑 다른 부분을 찾기가 어려워 질문 남깁니다!
HTML/CSS 포트폴리오 반응형-웹 gsap scrolltrigger
febisthe
2024-11-03T11:18:15.067Z
댓글 2
좋아요 0
조회수 169
미해결
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
이메일로 자료 요청을 했으나 계속 받지 못하고 있습니다. 메일 확인 부탁드립니다. (swh0107@gmail.com)
우혁
2024-11-03T08:53:33.921Z
댓글 1
좋아요 0
조회수 168
미해결
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를 복사해서 붙여넣어도 적용되지 않습니다
황서영
2024-11-02T01:12:45.746Z
댓글 2
좋아요 1
조회수 216
미해결
Tailwind CSS로 만드는 멋진 웹 UI 스타일링
섹션 1 - [필독] CDN 사용법과 비주얼스튜디오코드에서 Tailwind CSS IntelliSense 세팅 강의 화면이 하얀색 배경화면만 나오고 수업내용은 안보이네요. 소리는 정상적으로 들립니다.
google pen
2024-10-30T13:26:34.362Z
댓글 2
좋아요 1
조회수 234
미해결
UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략
안녕하세요. 오늘 처음 수업을 시작하면서 <header> <nav>영역에 splitting 적용을 해봤는데요. 해당 모션이 적용되지 않아 문의드립니다. 혹시나 싶어 codepen 예제만 따로 만들어봤는데 동일한 현상이 생기고 있어 제가 무엇을 잘못하고 있는지 알 수가 없습니다. 완성본을 따로 받아 볼 수 있을지도 문의드립니다.
HTML/CSS 포트폴리오 반응형-웹 gsap scrolltrigger
yeri kim
2024-10-29T05:21:12.535Z
댓글 3
좋아요 0
조회수 214
미해결
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
punkwagon@gmail.com 입니다
PUNKWAGON
2024-10-29T02:23:38.544Z
댓글 1
좋아요 0
조회수 166
해결됨
HTML5 CSS3 기초 & 반응형 웹 템플릿 만들기!
동영상 보이는 곳에서 Web-Book 어떻게 보나요? https://www.books.weniv.co.kr/로 가서 봐야 하나요? 동영상 강의 하는 웹페이지 어디선가 찾아 볼 수 있었으면 좋겠습니다. 제가 못 찾는 건지 모르겠지만.
박진섭
2024-10-28T07:55:36.296Z
댓글 2
좋아요 1
조회수 189
해결됨
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (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 라는 결과값도 나오지 않습니다.)
HYO JIN Kim
2024-10-26T12:13:00.554Z
댓글 1
좋아요 0
조회수 163
미해결
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
upward070@gmail.com 권한요청드렸습니다!
upward070
2024-10-25T18:16:22.889Z
댓글 1
좋아요 0
조회수 184
미해결
웹 애니메이션의 새로운 표준, Web Animations API
선생님, 안녕하세요! 모바일 화면에서도 비율을 유지하면서 반응형으로 동작하게 만드는 것이 가능할까요? 여러 방법을 시도해 보았는데, 해결이 잘 안 돼서 이렇게 질문을 남깁니다. 아니면 차라리 모바일 전용 SVG를 따로 만들고, PC 버전에서는 display: none으로 처리한 후 모바일일 때만 보이게 하는 방식이 더 나을까요? 조언 부탁드립니다!
HTML/CSS javascript 인터랙티브-웹 frontend web-animations-api
파이썬
2024-10-24T09:01:46.119Z
댓글 1
좋아요 0
조회수 255
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
3강에서 비주얼 스튜디오 코드 사용법 강의에서 PDF파일 참고하라는 내용이 있는데 파일은 어디서 확인할 수 있나요?
ehkim
2024-10-23T05:36:28.757Z
댓글 2
좋아요 1
조회수 204
미해결
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
codesandbox가 또 업데이트 된 것 같습니다.. 모던 html 기능과 배경지식 이해 강의 영상과 전혀 다른 화면이 나옵니다.. 사용법 업데이트 해 주시면 좋을 것 같습니다.!
HYO JIN Kim
2024-10-23T04:00:17.405Z
댓글 1
좋아요 0
조회수 166
미해결
CSS 기본부터 활용까지
생활코딩 내 링크통해 들어갔는데 제작자가 만든 다른사이트로 이동하더라구요. 근데 거기서도 영상 속 사이트는 이제 없나봐요. 혹시 찾으신 분 계시면 공유해주세요~
kiri lee
2024-10-23T00:39:05.676Z
댓글 1
좋아요 0
조회수 113
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.02
안녕하세요 범쌤...! 강의 너무 잘 듣고 있습니다. motionPath를 이용해서 구현하고 싶은 UI가 있습니다. 대략적인 구현하고자 하는 모양은 이러합니다. ● 디폴트 1. 행성이 각 궤도에 맞춰 공전 ● 행성을 클릭시 1. 공전이 멈추고 클릭 된 행성이 줌인 2.행성마다 행성의 설명 UI가 보여짐 설명이 부족한 것 같아 부족하지만 피그마로 그려서 첨부해봅니다.. 실무에 필요한데 도저히 감이오지 않아요 ㅜㅜㅜㅜㅜㅜ
HTML/CSS javascript 인터랙티브-웹 gsap
eljsh95
2024-10-22T09:15:16.920Z
댓글 2
좋아요 1
조회수 236