묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
autoAlpha : 0 사용 시 css로 visibility hidden 꼭 줘야하는지 궁금해요
autoAlpha : 0 이css visibility : hidden, opacity 0 으로 설정해준다고 하고css에 visibility hidden 을 제거해도 깜빡이는 현상은 안일어나더라구요!css에도 visibility:hidden을 작성하는 이유가 있을까요?
-
해결됨부트스트랩을 활용한 반응형 웹제작 [실전편] 부트캠프
애니메이션 시간차
animation.css에서 강의대로 animate__fadeInLeftBig을 가져왔는데 첫 슬라이드는 자연스럽게 나옵니다. 두번째 슬라이드에서는 중간에 살짝 덜컹거리듯이 하며 나오는 문제와 next 버튼을 클릭했을 때 다음 화면을 넘어가게 되면 애니메이션 텍스트의 나타나는 시간과 이미지가 슬라이드되서 보여지는 시간 차이가 납니다.혹시 animatin.css 에서 선언된 애니메이션 옵션이 변경 가능한지 궁금합니다.
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
완성본은 따로 없는건가요?
자료를 받으면 이미지랑 캡쳐본만 있는데 완성본은 없는건가요?cctv0820@naver.com 입니다.
-
미해결퍼블리싱 핵심이론 PDF 교재 및 예제파일(HTML+CSS+FLEX+JQUERY)
핵심이론 가이드북 폼요소,시멘틱 태그
코딩 초보입니다 핵심이론 가이드북을 참고해서 선생님 유투브를 보면서 공부하고 있어요!코딩 포기하려던 와중에 선생님 강의영상 보고 다른 강의와 다르게 잘 이해할 수 있게 설명해주셔서 포기하지 않고 선생님 강의로 너무 재밌게 공부하고 있는데혹시 폼 요소, 시멘틱 태그 부분은 참고할 수 있는 영상이 없는걸까요??ㅜㅜ유투브에는 표만들기까지만 있네용!
-
해결됨Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
url pattern관련 문의
안녕하세요. urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) 이런식으로 url패턴을 만들어주면 이렇게 (^media/(?P<path>.*)$)패턴이 생기는거 같고 그 다음 views.py에서 해당 url을 처리할 로직을 만들어야하는걸로 아는데.. 이 경우는 어째서 예외인가요?
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌3)
순수 CSS 선택자 중첩(Nesting) - 활용예제 (로그인폼)관련 질문있습니다.
scss 작성하다가 궁금한 것이 있어 질문 남깁니다.scss를 작성할 때 띄어쓰기를 어떻게 해야할지 궁금합니다. 예를들어 .status { display: flex; justify-content: space-between; margin: 20px 0; & label { & input[type=checkbox] { display: none; +em { display: inline-block; width: 18px; height: 18px; background-image: url('images/icon-radio.png'); transform: translateY(4px); background-position: left; } &:checked+em { background-position: right; } &:checked+em+span { color: var(--mainColor); } } } & a:hover { text-decoration: underline; } } 선생님과 수업하면서 작성한 띄어쓰기 하지 않은코드인데요.이쁘게 정렬하고 싶어서 alt + shift + f 를 눌러서 전체 정렬을 했더니 .status { display: flex; justify-content: space-between; margin: 20px 0; & label { & input[type=checkbox] { display: none; +em { display: inline-block; width: 18px; height: 18px; background-image: url('images/icon-radio.png'); transform: translateY(4px); background-position: left; } &:checked+em { background-position: right; } &:checked+em+span { color: var(--mainColor); } } } & a:hover { text-decoration: underline; } } 이렇게 자동으로 띄어쓰기게 되더라구요.의미없는 띄어쓰기는 하지 않는게 좋다고 들었는데띄어쓰기를 하지 않으면scss nesting 특성상 괄호가 많아져서 알아보기 힘들고비주얼 단축키로 정렬했을 때엔 알아서 띄어쓰게 해주는데,scss는 어떤식으로 코드를 작성해야할지 궁금합니다.
-
미해결구글 애드센스 수익형 워드프레스 블로그 만들기
프로 다운어떻게 요청드리면 되나요?
어디로 요청드리면 되나요?~
-
미해결[웹 개발 풀스택 코스] HTML&CSS 기초
3강 localhost 접속 오류
3강에서 localhost로 접속을하면 계속 이렇게 뜹니다...localhost에서 잘못된 응답을 전송했습니다. 해결방법좀 알려주십시오! live server초기값이 127.0.0.1로 되어 있어 설정으로 제 ip주소로 바꾼상태이고요... localhost 접속방법좀 알려주십시오!
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
실전 반응형 웹사이트
안녕하세요! 항상 강의 재밌게 듣고 있습니다~제가 강의를 따라하며 제작한 실전 반응형 웹사이트(넷플릭스와 크롬 사이트)를 포트폴리오에 넣으려고 합니다. 그런데 현재 실제 사이트들과 디자인에 차이가 있어서, 강의에서 배운 이전 디자인으로 포트폴리오에 포함해도 괜찮을지 고민이 됩니다…
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
안녕하세요. 포트폴리오가 어느방향으로 해야할지 감이 안잡히는데 카톡같은걸로 상담도 해주시나요?
안녕하세요. 포트폴리오가 어느방향으로 해야할지 감이 안잡히는데 카톡같은걸로 상담도 해주시나요?
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
퍼블리싱 작업 마무리 하기 01 강의
안녕하세요. 강의 잘 보고 있습니다 !강의를 듣다 궁금한 점이 생겨 문의를 남깁니다. 퍼블리싱 작업 마무리 하기 01 강의 중 .btn-fold에 left : 0 을 주라고 하셨는데, 이전 강의 에서 .goods-order-final 에 position: relative; 로 부모로 선언하고, 그 자식으로 .btn-fold 로 position: absolute; 를 선언하여 굳이 left : 0 을 주지 않아도, 위치가 잘 잡히는데, .goods-order-final 에 position: relative; 를 제거하고.btn-fold 에 left: 0 을 주신 이유가 궁금합니다.
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
세로이동할때 height값
가로이동때는 width를 items에 3배로 주었는데세로이동할때는 height를 그대로 400으로 하셨는데 세로는 안바꿔도 되는건가요? 왜그런건가요??
-
미해결SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
savePath 경로
scss파일은 scss폴더에 css파일은 css폴더에 따로 컴파일 되게 하고싶어서 이렇게 경로 설정을 하고 저장했는데 css파일이 scss파일하고 동일한 폴더에 컴파일됩니다.
-
미해결애플 웹사이트 인터랙션 클론!
선생님 안녕하세요. 혹시 메인개발(?)분야가 뭔지 궁금합니다.
안녕하세요 선생님!예전에 선생님 강의 청첩장강의랑 flex,grid, 기타 강의들 구매하고 들었던 학생입니다.선생님은 메인개발분야가 뭔지 궁금합니당.또 리액트 사용하시는지도 궁금합니다!질문과는 무관한 여담이지만,,최근 리액트로 프로젝트하면서 애니메이션 편하게 구현하기위해서 여러 라이브러리를 사용하고 또 gsap관련해서도 찾아보고 했었는데.. gsap로 이렇게 손쉽게 인터랙티브 애니메이션을 구현할 수있다고? 하면서 혁신이다! 라고 생각했었는데보니깐 자체 서비스에서 결제 같은 기능이있을경우 (넷플릭스같은) gsap 프리미엄을 결제해서 사용해야하더라구요..그것도 연간 구독 시스템이고, 코딩하는 개발자 수에따라서 개별로 구매..ㅎㄷㄷ 그래서 돌고돌아 다시 선생님 곁으로왔습니다.이 강의 듣다가 개인적인 일들이 겹쳐서 중간하차했었는데 다시 처음부터 차근차근 수강하고 복습해서 마스터해보려고합니닷.. 질문 요약1: 선생님 메인분야가 뭐에요?2: gsap에 관해서 의견이궁금합니다.
-
미해결CSS Flex와 Grid 제대로 익히기
질문은 아니고.. 오타 발견..
https://studiomeal.com/archives/197위 링크에서 align-items 속성설명 보면"align 키워드가 나왔죠? 수직축 방향으로 아이템을들 정렬하는 속성이에요."라고 오타가 있네요~내용들이 술술 읽혀서 발견했습니다~
-
미해결기획자님 이 정도 웹 개발은 배워보면 어떨까요? [이론+실습]
vue cli 설치 강의 중 오류
질문은 자세하게 적어주실 수록 좋습니다. 2-6 Vue CLI 설치 강의 Node. js 파일까지 설치 완료 -> Vue 설치 진행 과정에서 아래와 같은 오류가 뜹니다. npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.npm warn deprecated @babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.npm warn deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead. npm warn deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated npm warn deprecated rimraf@2.6.3: Rimraf versions prior to v4 are no longer supportednpm warn deprecated @babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead. npm warn deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecatednpm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supportednpm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supportednpm warn deprecated apollo-datasource@3.3.2: The apollo-datasource package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.npm warn deprecated apollo-server-errors@3.3.1: The apollo-server-errors package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the @apollo/server package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.npm warn deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecatednpm warn deprecated apollo-server-types@3.8.0: The apollo-server-types package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the @apollo/server package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.npm warn deprecated apollo-server-plugin-base@3.7.2: The apollo-server-plugin-base package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the @apollo/server package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.npm warn deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecatednpm warn deprecated shortid@2.2.16: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. npm warn deprecated apollo-reporting-protobuf@3.4.0: The apollo-reporting-protobuf package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the @apollo/usage-reporting-protobuf package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details. npm warn deprecated apollo-server-env@4.2.1: The apollo-server-env package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the @apollo/utils.fetcher package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.npm warn deprecated subscriptions-transport-ws@0.11.0: The subscriptions-transport-ws package is no longer maintained. We recommend you use graphql-ws instead. For help migrating Apollo software to graphql-ws, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws For general help using graphql-ws, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md npm warn deprecated vue@2.7.16: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.changed 852 packages in 1m 75 packages are looking for funding run npm fund for details 재설치도 해 봤는데, 안되네요..!도와주세요! 추가로 터미널에 작성할 때 폴더명 뒤에 % 이것도 넣어야 하나요?
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
섹션4에 있는 4번째 강의 질문(스크롤링)
스크롤링 권장 스크립트 올려주신 부분으로 했는데 작동이 되지 않아 해결 방법 문의 드립니다. 권장<script> /* Smooth Scrolling */ $('.menu a').click(function(e) { e.preventDefault(); $.scrollTo(0, 900); }); 문제: 이 스크립트 하기 전에는 menu a를 눌렀을 때 잘 이동했는데 해당 스크립트를 추가하면 작동이 되지 않습니다.. 그래서 일단 아래와 같이 html { scroll-behavior: smooth; } 해결했더니 다음 챕터에서 .gototop부분에서 같이 스크립트 작성해야 하는 부분이 있네요. 혹시 잘못된 부분이 있을까요? <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DesignWorks Archecture Agency</title> <script src="js/jquery-2.1.4.js"></script> <!-- Page Scroll Effect JS& CSS --> <script src="js/velocity/modernizr.js"></script> <script src="js/velocity/velocity.min.js"></script> <script src="js/velocity/velocity.ui.min.js"></script> <script src="js/velocity/main.js"></script> <link rel="stylesheet" href="js/velocity/velocity.css"> <!-- Smooth Scrolling --> <script src="js/jquery.scrollTo.min.js"></script> <!-- Custom JS & CSS --> <script src="custom.js"></script> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="responsive.css"> <!--FONTASOME CDN--> <script src="https://kit.fontawesome.com/c7f55332cf.js" crossorigin="anonymous"></script> </head>$(function(){ /* Trigger*/ $('.trigger').click(function(){ $(this).toggleClass('active') $('.gnb').toggleClass('active') }); $('section, .menu a').click(function(){ $('.gnb').removeClass('active') $('.trigger').removeClass('active') }); /* Change CSS with Scroll */ $(window).scroll(function(){ if($(window).scrollTop() > 50) { $('header').addClass('active') } else { $('header').removeClass('active') } }); /* Smooth Scrolling */ $('.menu a').click(function(e){ e.preventDefault(); $.scrollTo(0, 900); }); });
-
미해결처음 만난 리액트(React)
안녕하세요 undefined 오류에 대해 질문드립니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 미니 블로그 진행해보는데, MainPage는 출력이 되고 버튼도 작동됩니다. 다만 여기서 PostViewpage로 넘어가려니, 아래와 같은 오류가 발생합니다. 콘솔 로그를 확인해도 해결방안을 잘 모르겠어서 질문드립니다. 아래 오류 사진과 PostViewPage 코드입니다.
-
미해결처음 만난 리액트(React)
버튼이 보이지 않아요
유사 다른 질문 참고해도 오타는 없는 거 같은 데 동일 실패가 반복 됩니다.
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
set에 대해서 궁금증.
tl.set('#emart .pick', { opacity: 0 }) .to(map, { scale: 1, x: 0, y: 0 }) .set('#emart .pick', { opacity: 1 }) .fromTo('#emart .path', { strokeDashoffset: 496 }, { strokeDashoffset: 0 }) .to( '#emart .pick', { motionPath: { path: '#emart .path', align: '#emart .path', alignOrigin: [0.5, 0.5], }, }, '<' );위 코드에서 맨 처음 set 으로 opacity: 0 을 줘서 pick을 안 보이게 한 다음에후에 다시 set으로 opacity: 1을 주게 되는데요 궁금한 것이아직 순서상 motionPath 가 실행될 차례가 아니어서 마트 위치에서 pick 이 보여질 것인데 어째서 강남역 위치에서 부터 보여 지게 되는지 궁금합니다. 아래에 있는 set을 위로 올려서tl.set('#emart .pick', { opacity: 0 }) .set('#emart .pick', { opacity: 1 }) .to(map, { scale: 1, x: 0, y: 0 })이렇게 위치를 바꾸면 그때서야 제가 이해한 형태로 움직이게 되네요.왜 그런지 궁금합니다.