묻고 답해요
169만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
<꼭 답변 부탁 드립니다>그랩선생님, [컴포넌트 사용하기] 강의에서 질문 있습니다.
안녕하세요? 그랩선생님, 수고가 많으십니다.다름이 아니라 강의 [컴포넌트 사용하기] 강의를 진행하던 중 2가지 에러가 발생하여 질문을 하게 되었습니다.첫번째 에러는 아래 사진으로 첨부합니다.첫번째 에러 사진의 크롬 브라우저 제목은 listing directory / 라고 뜹니다. 그다음에 src디렉토리에 가서 App.js를 열면 첨부사진 처럼 입력된 소스화일 내용이 아래와 같이 뜨는데어떻게 해야 크롬 브라우저로 로고까지 뜨게 되나요?그리고 두번째 에러는 실제 소스 파일 폴더에 가서 App.js 파일을 선택 후 엔터(실행)하니 아래 사진과 같은 에러가 발생하였습니다.--> 이 두가지 에러를 어떻게 하면 해결 할 수 있는지 상세한 설명과 자세한 답변 부탁드립니다.감사합니다.
-
미해결UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략
3차 y축으로 올라오는 갤러리제작
3차 y축으로 올라오는 갤러리제작에 관한 질문입니다이미지와 왼쪽에 있는 클론코딩 제목이 같이 올라오게 하고 싶거든요Concierge 글자가 올라오면서 이미지가 올라오고두번째 Hanwha Solutins가 올라오면서 이미자가 올라오는이런건 안될까요?
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
Putty에서 nginx를 vi로 수정할때 오류
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 제목과 같이 putty 터미널에서 vi로 vi /etc/nginx/sites-.../에서 수정하는데 저는 다음과 같은 화면이 나옵니다. ㅠㅠ 이거 왜 이런건가요
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
mysql과 선생님의 깃허브 코드연결
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요선생님께서 올리신 완성본 코드를 깃허브에서 다운받아서 결과를 보고싶은데, 지도상에 음식점들의 핀이 뜨지 않습니다 ㅠ 아마 sql상에 더미 데이터들이랑 연결이 안되어서 그런것같은데 지도상에 마커들이 뜨게 하려면 어떻게 해야할까요 도와주세요
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
nodemon 실행오류
[nodemon] 3.1.7[nodemon] to restart at any time, enter rs[nodemon] watching path(s): .[nodemon] watching extensions: js,mjs,cjs,json[nodemon] starting node index.js[nodemon] app crashed - waiting for file changes before starting... 다음과 같은 오류가 발생하는데 어떻게 해결해야하나요 ㅠ
-
미해결TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!
스니펫 관련질문
이거 근데 log이렇게 치면console.log(''); 이렇게 되야되는거 아닌가요? 이상하게 안되네요console.log(); 이렇게 밖에 스니펫이 안되는데 '$1' 에서 '' 이부분은 왜 씹히는거죵?ㅠㅠ
-
미해결인터랙티브 웹 개발 제대로 시작하기
animation이벤트 질문이요!
window를 ballElem로 변경하면 click했을때 작동을 하지 않는데 이유를 모르겠습니다..!<script> const ballElem=document.querySelector('.ball'); window.addEventListener('click', function(){ ballElem.style.animation='ball-ani 1s 3 forwards'; }); ballElem.addEventListener('animationend',function(){ ballElem.classList.add('end'); }); ballElem.addEventListener('animationiteration',function(){ console.log('반복'); }); </script>
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
visual studio 2022 emmet
시험장 visual studio 2022에 emmet 설치 되어 있습니까?! -> Tab이 되지 않으면 기본 구문 외워서 다 쳐야 합니까?그리고, 시험장에 최신 버전 visual studio 2022 설치 되어 있습니까? 이때까지 visual studio 2019로 연습했었는데요.
-
미해결퍼블리싱 핵심이론 PDF 교재 및 예제파일(HTML+CSS+FLEX+JQUERY)
비주얼 스튜디오 코드 Bracket Pair Colorizar 설치
비주얼 스튜디오 코드 필수 앱 설치 및 사용법 영상을 보고 있는데'Bracket Pair Colorizar' 이라는 프로그램이 기능 제공을 더 이상 하지 않는다고 적혀있습니다. 해당 프로그램 외에 어떤걸 설치 해야 하나요???
-
해결됨[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
공지사항, 갤러리 tab보더
tab쪽 보더를 tab1과 tab2에 따로 보더를 주셨는데 한번에 줘도 될까요? 왜 따로주셨는지도 궁금해요.tabs > div { border: 1px solid #000; height: 169px; padding: 0 10px; }이런식으로 하는게 더 깔끔하지 않을까 싶어서요
-
해결됨[코드캠프] 시작은 프리캠프
정렬 연습중인데 왜 여성과 남성 칸이 가로로 배열 안되는지 모르겠습니다.
css:*{ box-sizing: border-box;}.box2{display: flex;align-items: center;margin: 10px auto;flex-direction: column;justify-content: space-evenly;}.box {width: 300px;height: 1px;border: 1px solid rgb(199, 199, 199);display: flex;flex-direction: column;justify-content: space-evenly;align-items: center;padding: 30px;margin: 5px auto;border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;}.box3 {display: flex;flex-direction: row;justify-content: row;}select {border: 1px solid black;}.pb{width: 500px;height: 800px;border: 1px solid gray;display: flex;flex-direction: column;justify-content: space-around;align-items: center;padding: 30px;border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;} html:<!DOCTYPE html><html lang="en"><head><title>회원가입</title><link href="./02-signup.css" rel="stylesheet" /></head><body><div class="pb"><h2 class="box2">회원가입</h2><input type="text" placeholder="이메일을 입력해주세요"class="box"><br><br><input type="text" placeholder="이름을 입력해주세요"class="box"><br><br><input type="password" placeholder="비밀번호를 입력해주세요" class="box"><br><br><input type="password" placeholder="비밀번호를 다시 입력해주세요" class="box"><br><br><select><option disabled="true" selected="true">지역을 선택하세요</option><option>서울</option><option>경기</option><option>인천</option></select><br><br><input type="radio" name="gender" class="box3"><span class="box3">여성</span><input type="radio" name="gender" class="box3"><span class="box3">남성</span><br><br><input type="checkbox"> 이용약관 동의합니다<hr><button class="box">가입하기</button></div><!-- <input type="button" value="가입하기2"> 예전에 사용했으나 커스텀하기 어려웠음 --></body></html> 어디가 문제 인지 알려주시면 감사하겠습니다.
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
네비게이션 보더
영상에선 패스하셨지만네비게이션 서브메뉴 보더 중간없애고 테두리만 있게어떻게 하는지 알수있을까요?
-
미해결UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략
내용입력할때 p안쓰고 span쓰는 이유가 있을까요
내용을 입력하실때 <p>태그를 안쓰고 <span>태그를 쓰신다음 display:block으로 하신 이유가 있을까요?
-
미해결CSS 기본부터 활용까지
<style>에서 nav,aside
<style>에서 nav,aside 따로 할 때는 .container nav, .container aside로 하고 두 개 같이 묶어서 할 때는 그냥 nav,aside로 쓰는 지 궁금합니다..container를 안 붙여도 똑같이 실행되가지고요
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
인접선택자에 대한 질문드립니다!
확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 06(탭 콘텐츠 - Slide) 강의에서 인접선택자로 아래 코드와 같이 input 태그의 해당 id값을 체크 시 .slide의 자식인 .slide-inner에 left값을 변경해준다고 표시되어져있습니다.여기에서 ~가 없으면 왜 코드가 제대로 작동되지 않는건가요? ~ 가 없으면 input부분에 해당하는 태그의 자식요소만 올 수 있다는 걸로 이해하는게 맞나요??(아래 코드는 질문에 필요한 html과 css 부분만 올렸습니다)(+ 항상 질문에 답변 달아주셔서 감사합니다!ㅎㅎ)input[id=tab1]:checked ~ .slide .slide-inner { left: 0; } input[id=tab2]:checked ~ .slide .slide-inner { left: -300px; } input[id=tab3]:checked ~ .slide .slide-inner { left: -600px; } /*----------------------------------------*/ <body> <div class="tab-inner"> <input type="radio" name="tabmenu" id="tab1" checked> <input type="radio" name="tabmenu" id="tab2"> <input type="radio" name="tabmenu" id="tab3"> <div class="slide"> <div class="slide-inner"> <a href="#none1"><img src="images/slide-01.jpg"></a> <a href="#none2"><img src="images/slide-02.jpg"></a> <a href="#none3"><img src="images/slide-03.jpg"></a> </div> </div> <div class="btn"> <label for="tab1"></label> <label for="tab2"></label> <label for="tab3"></label> </div> </div> </body>
-
미해결퍼블리싱 핵심이론 PDF 교재 및 예제파일(HTML+CSS+FLEX+JQUERY)
Beautify에 관해서
유튜브 보면서 비주얼 스튜디오 코드 환경설정 중인데 beautify가 '이 확장은 더 이상 유지 관리되지 않으므로 더 이상 사용되지 않습니다.' 라는 알림문 뜹니다그래도 다운 받으면 확장 앱 부분에 노란색 경고 아이콘이 계속 뜨는데 이대로 두는게 맞는건가요?
-
미해결나만의 포트폴리오 웹페이지 만들기
동영상을 최신버전에 맞게 업그레이드 해주시거나 css적용이 안되는 원인과 해결방법을 빠르게 써주실 수 있나요?
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="Chrome"> <meta name="viewport" content="width-device-width, initial-scale-1.0, maximum-scale-1.0, minimum-scale-1.0, user-scalable-no"> <title>Portfolio - Navbar</title> <!-- saved from url=(0013)about:internet--> <!-- icon --> <script src="https://kit.fontawesome.com/64fe4437c7.js" crossorigin="anonymous"></script> <!-- fonts --> <link href="https://fonts.googleapis.com/css2?family=Heebo:wght@100..900&family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet"> <!-- user style --> <link rel="stylesheet" href="/css/portfolio.css"> </head> <body> <header class="header-area navbar-fade" id="header"> <nav class="Navbar"> <a class="Navbar-brand" id="navbarBrand">logo</a> <a class="Navbar-toggler" id="toggleBtn"><i class="fa fa-bars"></i></a> <div class="Navbar-menu" id="menu"> <div class="nav-item"><a class="nav-link" id="navbarAbout">about</a></div> <div class="nav-item"><a class="nav-link" id="navbarService">service</a></div> <div class="nav-item"><a class="nav-link" id="navbarPortfolio">portfolio</a></div> <div class="nav-item"><a class="nav-link" id="navbarReview">review</a></div> </div> </nav> </header> <!-- user script --> <script src="portfolio.js"></script> </body> </html>웨에거는 portfolio.html이고 아래거는 portfolio.css인데, 아이콘 적용도 안되고, css적용도 안되요! 고쳐주세요!/* COMMON */ * { margin: 0; padding: 0; font-size: 0; } body { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; word-break: break-all; font-family: 'Heebo', sans-serif; } img { width: 100%; height: 100%; } a { text-decoration: none; font-size: 14px; text-transform: uppercase; } ul { list-style-type: none; } /* HEADER */ .header-area { position: relative; top: 0; left: 0; width: 100%; z-index: 99; background-color: white; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); } .navbar-fade { animation-name: navbar-fade; animation-duration: 0.5s; -webkit-animation-name: navbar-fade; -webkit-animation-duration: 0.5s; } @keyframes navbar-fade { from {opacity: .4} to {opacity: 1} } @-webkit-keyframes navbar-fade { from {opacity: .4} to {opacity: 1} } .header-area.navbar-fixed { position: fixed; } .header-area > .navbar { width: calc(100% - 120px); margin: 0 60px; overflow: hidden; } @media (min-width: 992px) { .header-area > .navbar { max-width: 900px; margin: 0 auto; } } @media (min-width: 1200px) { .header-area > .navbar { max-width: 1000px; } } .header-area > .navbar > .navbar-brand { display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); font-size: 32px; cursor: pointer; } .header-area > .navbar > .navbar-toggler * { font-size: 32px; } .header-area > .navbar > .navbar-toggler { float: right; height: 70px; line-height: 70px; font-size: 32px; cursor: pointer; } @media(min-width: 992px) { .header-area > .navbar > .navbar-toggler { display: none; } } .header-area > .navbar > .navbar-menu { position: absolute; background-color: rgba(0, 0, 0, 0.5); top: 70px; left: 0; width: 100%; height: 200px; transition: 0.5s ease; overflow: hidden; } .header-area > .navbar > .navbar-menu.show { height: 200px; } .header-area > .navbar > .navbar-menu > .nav-item { float: none; display: block; height: 50px; line-height: 50px; } .header-area > .navbar > .navbar-menu > .nav-item:hover * { background-color: rgba(0, 0, 0, 0.4); } .header-area > .navbar > .navbar-menu > .nav-item > .nav-link { display: block; padding-left: 50px; color: white; cursor: pointer; } @media (min-width: 992px) { .header-area > .navbar > .navbar-menu { position: relative; background-color: transparent; float: right; top: 0; width: auto; height: auto; transition: none; } .header-area > .navbar > .navbar-menu.show { height: auto; } .header-area > .navbar > .navbar-menu > .nav-item { display: inline-block; height: 70px; line-height: 70px; } .header-area > .navbar > .navbar-menu > .nav-item:hover * { background-color: transparent; } .header-area > .navbar > .navbar-menu > .nav-item > .nav-link { display: block; padding: 0 20px; color: black; } }css파일을 css폴더에 넣고 <link rel="stylesheet" href="/css/portfolio.css">로 불러오기를 했는데 안되요!
-
미해결UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략
섹션 .con02 gsap 질문
안녕하세요 먼저 너무 유익하고 도움이되는 강의를 주셔서 감사드립니다. .con02에 workList gsap쪽에 질문이 있어서 글 남기게 되었습니다.my work 타이틀이 fixed되고 리스트들이 올라왔다가 다시 스크롤을 천천히 위 방향으로 해서 올라가다보면 리스트 영역이 이상하게 위로 올라왔다가 사라지는 현상이 있어서 문의 드립니다.
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
2025년 실기준비할때도 참고하면 좋을 강의일까요?!
아직 결제만하고 강의시청은 안한상태인데2025년 웹디자인개발기능사로 바뀌는데내용도 바뀐다고 알고있는데 이 강의로2025년도꺼 준비해도 무리는 없을까요!?혹시 2025년도 버전 강의가 새로 나오면 그걸로 결제할까해서요 여쭤볼곳이 없어서 여기에 적습니다.답변주시면 감사하겠습니다.!
-
미해결실전! 웹사이트제작! Step by Step! ('크루알라모드'_반응형웹 제작)
강의 자료 요청합니다~
강의를 듣기 시작했는데 강의자료는 어디에서 받는지 몰라 질문드려요~kjj5421@naver.com으로 자료 요헝 드려도 될까요?
