묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결처음 만난 리액트(React)
npx create-react-app 오류
프로젝트 생성하는 데 오류가 생겨 질문 드립니다
-
미해결처음 만난 리액트(React)
리액트 DOM부분 수정
DOM화면의 일부만 찾아서 수정해서 사용자에게 응답해준다고 하였는데 AJAX비동기 통신도 일부 구역만 변경해서 보여주는데 서로 관련이 있나요?? 아직 리액트 처음이라 궁금해서 질문 드려봅니다.
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
scss에 active 적용하는 방법
이 햄버거 버튼을 active 넣었을때 바꾸려고 하는데 scss에는 도대체 어떻게 넣는지 너무 궁금해요 제가 강의 들으면서 계속 겪는 문제인데 scss에 .active를 적용해도 아무것도 안돼네요 scss 에 active 적용하려면 도대체 어떻게 해야할 지 모르곘어요 항상 강의들으면서 이 부분에서 막히는데 어떻게 해야할 지 도움 구합니다
-
미해결처음 만난 리액트(React)
그대로 넣으면 map을 찾지 못한다는 오류가 나옵니다
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.이런 오류가 나오면서 따로 실행이 되지 않습니다
-
미해결처음 만난 리액트(React)
섹션2 리액트 가져오기에서 react@17 말고 18을 불러와도 상관없나요?
안녕하세요! 실습을 하던 도중 react@17 을 가지고 오는 것을 알게되었습니다! 현재 react@18도 나온 것 같은데 17로 실습하는게 나은지 18로도 해도 되는건지 여쭤보고 싶었습니다. 밑에 처럼 바꿔도 되는걸까요?<!-- 리액트 가져오기 --> <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> <!-- 리액트 컴포넌트 가져오기 --> <script src="MyButton.js"></script>
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
반응형이 안먹힐때 뭐가 문제일까요?? ㅜㅠ
■ 질문 남기실 때 꼭! 참고해주세요. font-size: 2.2em; 을했는데 크롬 디바이스툴에서는 전혀 줄어들지 않네요 ㅜㅠ 어떻게 해야할지 질문드립니다 저 크롬이 문제인가요??
-
해결됨면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
skill 섹션 질문
선생님 안녕하세요!제가 포토샵 공부는 하고 있는데 포토샵이 아직 익숙치는 않아서skill 섹션에 포토샵 대신에 figma를 넣고 싶은데요올려주신 참고 텍스트에는 Figma가 없어서 혼자 이렇게 저렇게 적어보았는데 썩 좋아보이지가 않네요ㅠㅠ괜찮은 문구 짧게나마 부탁좀 드려도 될까요?
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스)4
@media (max-width:768px) { /* html { scroll-behavior: smooth; } */ /* Entire Layout */ .cd-section { height: auto; } .cd-section > div { height: auto; } .content { position: static; width: 100%; height: 100%; } /* Header */ header { transition: 0.5s; z-index: 100; } header.active { background-color: #fff; border-bottom: 1px solid #eee; } .menu { display: block; } .slogan { display: none; } .gnb { background-color: #fff; position: fixed; top: 0; right: -270px; width: 250px; height: 100vh; box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1); transition: 0.5s; } .gnb.active { right:0; } .menu { margin-top: 60px; line-height: 40px; } .menu a { display: block; text-align: right; padding-right: 20px; color: #000; font-size: 20px; } /* Trigger */ .trigger { display: block; width: 24px; height: 14px; position: absolute; top: 20px; right: 20px; } .trigger span { position: absolute; height: 1px; width: 100%; background-color: #000; transition: 0.5s; } .trigger span:nth-child(1) { top: 0; } .trigger span:nth-child(2) { top: 50%; width: 80%; } .trigger span:nth-child(3) { top: 100%; } .trigger.active span:nth-child(1) { top: 50%; transform: rotate(45deg); } .trigger.active span:nth-child(2) { top: 50%; width: 80%; opacity: 0; } .trigger.active span:nth-child(3) { top: 50%; transform: rotate(-45deg); } /* go to top */ .gototop { position: fixed; bottom: 20px; left: 20px; border: 1px solid #fff; display: block; width: 40px; height: 40px; border-radius: 50%; text-align: center; line-height: 50px; transform: translateY(0px); opacity: 0; } .gototop.active { opacity: 1; } .btn-hiring { right: 20px; bottom: 20px; } .cd-vertical-nav { display: none; } /* Show Hide Section */ /* #home, #about, #project, #plan, #awards, #location, #contact { display: none; } */ /* ############# section : Home ############# */ .home-inner { height: 100vh; } .welcome-text { transform: translate(-50%, -50%) scale(0.7); width: 100%; /* border: 2px solid red; */ } .home-heading { left: 20px; } .home-heading span { font-size: 50px; } }
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스)3
/* Google Web Font : Montserrat */ @import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500&display=swap'); @import url('https://fonts.googleapis.com/css?family=Manrope:300,400,500,600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap'); /* FontAwesome CDN 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* source sans */ @import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@200;300;400;600&display=swap'); /* Overpass */ @import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap'); /* Reset CSS */ * { box-sizing: border-box; } ul { list-style: none; padding: 0; } a { text-decoration: none; } /* Default CSS */ body { font-family: 'Montserrat', sans-serif; color: #222; font-size: 15px; margin: 0; height: 100vh; background-color: #fff; } /* Entire Layout */ .cd-section { height: 100vh; } .cd-section > div { height:100%; position: relative; } .content { background-color: #ddd; position: absolute; width: calc(100% - 40px); height: calc(100% - 80px); left: 20px; bottom: 20px; overflow: hidden; } /* Header */ header { position: fixed; top:0; left:0; width: 100%; } .gnb-inner { /* border: 1px solid #000; */ width: calc(100% - 40px); margin: auto; height: 60px; line-height: 60px; } .logo { float: left; } .logo img { padding-top: 17px; } .gnb { float: right; } .menu { display: none; } .menu a {} .slogan { font-size: 16px; font-style: italic; } .trigger { display: none; } /* Hiring button */ .btn-hiring { position: fixed; right: 50px; bottom: 50px; color: #fff; background-color: #000; padding: 10px 20px; border-radius: 20px; box-shadow: 5px 5px 20px rgb(0, 0, 0, 0.3); transition: 0.5s; } .btn-hiring .fa-solid { transform: rotateY(180deg); margin-right: 5px; } .btn-hiring:active { transform: scale(0); } /* ############# section : Home ############# */ .home-inner { background-color: #fff; height: 100%; } .home-inner::before { content: ''; background-color: #000; position: absolute; width: 0; height: 100%; top: 0; left: 0; animation: overlay 1s 2.5s ease-in-out; /* display: none; */ } .welcome-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 50px; font-weight: 300; text-align: center; line-height: 1.2em; margin: 0; font-family: 'Source Sans 3', sans-serif; animation: slideup 2s linear; animation-fill-mode: both; /* display: none; */ } .welcome-text span { display: block; font-size: 26px; } .welcome-text span .fa { color: crimson; } .opacity-image { background: url('images/section-bg-01.jpg') no-repeat center center; background-size: cover; height: 100%; opacity: 0; animation: opacity-image 1s 3s ease-in both; /* display: none; */ } .home-heading { /* display: none; border: 1px solid red;*/ position: absolute; top: 50%; /* left: 40%; */ left: 300px; /* margin-left: 200px; */ transform: translateY(-50%); } .home-heading span { display: block; font-size: 115px; color: #fff; font-weight: 600; width: 0; overflow: hidden; animation: reveal 1s 3s ease-in-out both; } .home-heading span:nth-child(1) { animation-delay: 3s; } .home-heading span:nth-child(2) { animation-delay: 3.2s; } .home-heading span:nth-child(3) { animation-delay: 3.4s; } @keyframes slideup { 0% { opacity: 0; margin-top: 50px; } 20% { opacity: 1; margin-top: 0; } 80% { opacity: 1; margin-top: 0; } 100% { opacity: 0; } } @keyframes overlay { 0% { width: 0; left: 0; } 50% { width: 100%; left: 0; } 100% { width: 0; /* right: 0; */ left: 100%; } } @keyframes opacity-image { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes reveal { 0% { width: 0; } 100% { width: 100%; } }
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스 js)2
/* document ready랑 같은거 = html을 다 읽은 후 실행해라고 표시 */ /* Trigger */ $(function(){ $('.trigger').click(function(){ $(this).toggleClass('active') $('.gnb').toggleClass('active') }) $('section, .menu a').click(function(){ $('.gnb').removeClass('active') $('.trigger').removeClass('active') }) /* smooth Scrolling */ $('.menu a, .gototop').click(function(e){ $.scrollTo(this.hash || 0, 900) }) /* chacng CSS with Scroll */ // 스크롤을 한 상태 if 스크롤을 안한상태 else $(window).scroll(function(){ if($(window).scrollTop() > 50) { $('header, .gototop').addClass('active') } else { $('header, .gototop').removeClass('active') } }) // slick.js History $('.history-slider').slick({ dots: true, infinite: true, speed: 300, slidesToShow: 4, slidesToScroll: 2, 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 ] }) // slick.js project photo1 $('.project-photo').slick({ dots : true, infinite : true, speed : 500, fade : true, autoplay : true, autoplaySpeed : 2000, cssEase : 'linear' }) })
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태
수업진행을 하는 과정에 있어서 제가 문제를 찾아볼려고 했는데 못찾아서 질문을 드립니다.PC에서 모바일 화면으로 전환되면 GNB메뉴가 항시 OPEN되어있는 상태로 화면이 보이게 되면서 계속 GNB메뉴를 닫아야하더라구요. 선생님께서는 그런 문제가 없어보여서요.선생님 소스를 복사해서 붙여넣기도 해봤는데요.. 제 쪽에서는 항시 OPEN되서 보이더라구요제가 문제해결을 하지 못해서 여쭈어봅니다. 소스는 많지만.. 아래와 같습니다.<!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> --> <title>DesignAgency SIYU Family</title> <link rel="icon" href="images/favicon.png"> <script src="/js/jquery-2.1.4.js"></script> <!-- <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> <!-- slick.js --> <script src="js/slick/slick.min.js"></script> <link rel="stylesheet" href="js/slick/slick-theme.css"> <link rel="stylesheet" href="js/slick/slick.css"> <!-- featherlight.js --> <script src="js/featherlight/featherlight.js"></script> <link rel="stylesheet" href="js/featherlight/featherlight.css"> <!-- custom Js & CSS --> <script src="custom.js"></script> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="responsive.css"> <!-- fontawesome --> <script src="https://kit.fontawesome.com/f7c955b0b1.js" crossorigin="anonymous"></script> </head> <!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax --> <body data-hijacking="on" data-animation="rotate"> <!-- S : container --> <div class="container"> <!-- S : Home --> <section class="cd-section visible" id="home"> <div> <div class="content"> <div class="home-inner"> <h3 class="welcome-text"> You can do it <span>with SIYU family <i class="fa fa-heart"></i></span> </h3> <div class="opacity-image"></div> <div class="home-heading"> <span>Creative</span> <span>Architecture</span> <span>Specialists</span> </div> </div> </div> </div> </section> <!-- E : Home --> <!-- S : header --> <header class="active"> <div class="gnb-inner"> <div class="logo"> <a href="/"> <img src="images/logo.png" alt="로고" /> </a> </div> <!-- S : gnb --> <div class="gnb active"> <div class="menu"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#project">Project</a> <a href="#plan">Plan & History</a> <a href="#awards">Awards</a> <a href="#location">Location</a> <a href="#contact">Contact</a> </div> <div class="slogan">We design places, not projects.</div> </div> <div class="trigger active"> <span></span> <span></span> <span></span> </div> <!-- E : gnb --> </div> </header> <!-- E : header --> </div> <!-- E : container --> <a href="#" class="gototop"> <img src="images/gototop.png" alt="맨 위로"> </a> <a href="hiring.html" class="btn-hiring" data-featherlight="iframe"> <i class="fa-solid fa-comment-dots"></i> Hiring </a> <nav> <ul class="cd-vertical-nav"> <li><a href="#0" class="cd-prev inactive">Next</a></li> <li><a href="#0" class="cd-next">Prev</a></li> </ul> </nav> </body> </html>
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
npm install -g sequelize sqlite3 설치가 안되네요
윈도우 11에서npm install -g sequelize sqlite3 설치가 안됩니다유사 답변 참고해도 설치가 안되네요 아래 문구가 나왔을 땐 어떻게 어떤 방법으로 접근하는 게 좋을까요?npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fsadded 146 packages in 6s13 packages are looking for fundingrun npm fund for details
-
해결됨[코드캠프] 시작은 프리캠프
피그마 유료화
안녕하세요. 회원가입 과제를 하기위해 링크된 피그마를 확인해보니 개발자모드를 이용하려면 유료 플랜에 가입해야 하는 것 같습니다. 해결방법이 있을까요?
-
해결됨[코드캠프] 강력한 CSS
강의 수강 후 실습
질문 ) 혼자 실습해본다고 모 홈페이지 하나 클론코딩하는 중인데 header 부분에서 만들다가 막혔습니다....그래서 https://www.w3schools.com/howto/howto_js_accordion.asp 여기서 기초적인 연습을 하고 있는데 flex와 grid를 사용하지않더라구요. 위 처럼 기초적인 연습을 할 수 있고, flex grid 쓰는 사이트가 있을까요? 있으시다면 추천 부탁드립니다!!!
-
해결됨중상급 퍼블리싱을 위한 CSS3의 모든 것
<br>태그 사용 빈도를 줄이게 될 경우의 질문입니다.
안녕하세요 쌤~ 제가 지금까지 디스플레이 이해도가 낮아서br 태그를 엄청 썼었는데요,(display 속성 이해도가 없을 경우 생기는 비 웹 표준 코딩)강의를 보고 무릎을 탁 쳤습니다..!!ㅠㅠ 그러다 문득 드는 생각이 있더라고요. 강의에 나온 예문에는 span 태그를 block 속성으로 바꿔서줄바꿈을 하는 건 이해를 했는데요, h1과 span 이라, 짧은 문장이라 쉽게 이해되는데밑에 첨부한 사진처럼 p 태그 안에 문단을 바꿔야 하는 장문일때는 줄바꿈을 어떻게 해야 좋을까요?
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
수업 이미지 파일
안녕하세요 선생님 강의에서 나오는 이미지 파일은 어디서 다운 받을수 있는지요??????
-
해결됨카페 24 베스트 쇼핑몰 디자인 클론코딩하기 (HTML + CSS)
VS code에서 문자열을 정렬하는 단축키가 궁금합니다!
긴 문자열이나 문단을 입력하면 텍스트 에디터 내에서 한번에 볼 수 없어 조금 불편한 점이 있었는데, <HTML 태그에 대해(2)> 강의 중 1:19~1:21 사이에 사용하신 정렬 단축키가 따로 있으시다면 어떤 것인지 궁금합니다! 좋은 강의 감사합니다~!
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
실전 넷플릭스 6 footer부분
a태그들 네개 섹션으로 나누는 .items 부분혹시 float랑 inline-block으로 나누는 법 말고flex해서 1씩 나눠도 상관없나요 ??저런 나누는거 나오면 저는 꼭 flex로 하는 버릇이 들었네요...뭐가 더 좋고 답이다~ 그런건 없는건가요?!
-
미해결쉽고 빠른 스타일링 Tailwind CSS 기초 가이드
학습 자료를 받을 수 있나요 ?
선생님 강의에서 보여주셨던 notion 은 공유되지 않는 학습 자료인가요 ? 아니면 다른 수업에서 받을 수 있는 자료인가요 ?
-
해결됨면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
포트폴리오 홈페이지 제작가이드
안녕하세요 선생님 현재 제가 질문을 남기는 이 강의와 '퍼블리셔 개인 포트폴리오 홈페이지 제작 완벽 가이드(PDF)' 이 강의는 어떠한 차이점이 있는지 내용이 많이 겹치는지 궁금해서 글남깁니다~ 궁금한게 많아 질문을 자주 남기는데 항상 빠르게 답변 해주셔서 정말 감사합니다.