묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결처음 만난 리액트(React)
ReactDOM.render .createRoot 질문 드립니다.
ReactDOM.render( <React.StrictMode> <CommentList /> </React.StrictMode>, document.getElementById('root') )위 내용대로 npm start해서 띄우면 React 18버전부터는 React.createRoot를 사용하라고 나오네요..render대신에 .createRoot로 사용하면 될까여? 만약 .createRoot로 사용시 예제 간단히 알려주시면 감사하겠습니다.
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
강의를 보고 똑같이 코드를 쳤는데 a태그가 밑으로 떨어집니다 ㅠㅠ
■ 공지사항,갤러리가 별도로 구성되어있는 강의를 듣고있는데 news 클래스 아래로 a태그가 떨어집니다 ㅠㅠ혹시 잘못된 부분이 있는걸까요? <body> <section class="items"> <article class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab"> <a href="#none"> 문자발송서비스 <b>2024.03.06</b> </a> <a href="#none">문자발송서비스 <b>2024.03.06</b> </a> <a href="#none">문자발송서비스 <b>2024.03.06</b> </a> <a href="#none">문자발송서비스 <b>2024.03.06</b> </a> <a href="#none">문자발송서비스 <b>2024.03.06</b> </a> </div> </div> </article> <article class="gallery">갤러리</article> <article class="now">바로가기</article> </section> </body><css>* { padding: 0; margin: 0; position: relative;} a { color: inherit; text-decoration: none; display: inline-block;} ul,li,ol { list-style: none;} /*와이어프레임정렬*/ .items { border: 3px solid blue; max-width: 1200px; margin: 0 auto; display: flex; } .items div { height: 200px; } .news { width: 350px; background-color: lightblue;} .news .tab-inner { border: 5px solid salmon; } .news .tab a { border: 3px solid slateblue; } .gallery { width: 500px; background-color: coral;} .now { width: 350px; background-color: lightseagreen;} /*tab content*/ -출력화면-
-
미해결자바스크립트 : 기초부터 실전까지 올인원
반복문 문제3 369게임
1부터 50까지 369결과 프린트인데왜 숫자 2인데 박수 짝치죠?
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
강의 순서 질문드립니다.
선생님 안녕하세요. 수강생입니다.수업은 섹션1부터 차근 차근 따라가면 될까요? 안배우고, 몰랐던 부분들이 등장해서 인강을 어디서부터 어떻게 들으면 될지 여쭈어 봅니다.(비전공자라 코딩 지식이 아예 없습니다.)
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
display flex 질문,,
안녕하세요 ! gnb부분 하다가 헷갈리는게 있어서요 ..gnb 부분엔 flex를 줘서 가로배치 1/5한 건 이해했는데,.gnb a 위아래 여백이 남았어서 그 여백을 없애려면.gnb a에 display : flex를 주어야한다고 하셨는데왜 flex를 주면 위아래 여백이 사라지고 딱 맞게 배치가 되는건지 이해가 잘 안가서요 ㅠ..!말로 설명이 가능하실까 모르겠지만 일단 남겨봅니다!
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
다시 질문 드립니다 ㅠㅠ CSS 키프레임 애니메이션 활용한 실전 예제 제작 01(원형 크기 변경 로딩 애니메이션)
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>도형 로딩 애니메이션</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="loading"> <span></span> <span></span> <span></span> </div> </body> </html> /* Google Web Font */ @import url('http://fonts.googleapis.com/css?family=Raleway&display=swap'); body { font-family: 'Raleway', sans-serif; line-height: 1.5em; margin: 0; font-weight: 300; display: inline; justify-content: center; align-items: center; height: 100vh; } a { text-decoration: none; } .loading {} .loading span { display: inline-block; width: 20px; height: 20px; background-color: gray; border-radius: 50%; animation: loading 1s linear infinite; } .loading span:nth-child(1) { animation-duration: 0s; background-color:crimson; } .loading span:nth-child(2) { animation-duration: 0.2s; background-color:dodgerblue; } .loading span:nth-child(3) { animation-duration: 0.4s; background-color:royalblue; } @keyframes loading { 0% { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; transform: scale(0.5); } 100% { opacity: 0; transform: scale(0.5); } }이렇게 작성했는데 go live 화면에선 이렇게 뜨고 애니메이션이 안나와요.. ㅠㅠ 뭐가 문제일까요??? 몇주동안 안되요..
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
도형 로딩 애니메이션 질문입니다
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>도형 로딩 애니메이션</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="loading"> <span></span> <span></span> <span></span> </div> </body> </html>/* Google Web Font */ @import url('http://fonts.googleapis.com/css?family=Raleway&display=swap'); body { font-family: 'Raleway', sans-serif; line-height: 1.5em; margin: 0; font-weight: 300; display: flex; justify-content: center; align-items: center; height: 100vh; } a { text-decoration: none; } .loading {} .loading span { display: inline-block; width: 20px; height: 20px; background-color: gray; } .loading span:nth-child(1) {} .loading span:nth-child(2) {} .loading span:nth-child(3) {} 지금 이 상태인데 화면에 아무것도 나타나지 않습니다. 이렇게 뜨는데 뭐가 문제일까요?
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
도형 로딩 애니메이션 질문입니다
이렇게 뜨는데 뭐가 문제일까요.. go live 화면에서도 안보이고 문제가 뭔지 모르겠어요 ㅠ
-
해결됨순수하게 html/css/js만을 활용한 반응형 웹 제작 [실전편]
수업 소스 다운로드 어디서 받을수 있나요?
영상 수업 소스 다운로드는 어디서 받을수 있나요?영상 수업 동일하게 코딩해도 오류가 나거나 정상적으로 출력되지 않아..
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
현재 강의 Express 프레임워크 사용하기 를 듣고 있는데요
이전 강의인 그랩 마켓 서버 구축하기 에서는 node_modules가 없었는데 이번 강의부터는 생성 되어있습니다.생성 과정을 건너뛰셨다면 어디서 확인할 수 있는지는 강의에 포함시켜주시는게 맞는거 같습니다.
-
미해결처음 만난 리액트(React)
props에 대해 궁금한 점이 있습니다.
우선 좋은 강의를 무료로 제공해 주신다는 점에 매우 감사드립니다 🙂다름이 아니라 props에 대해 궁금한 점이 있어서 글 남깁니다.function SampleComponent(props) { return ( <div> <div>{props.name}</div> <div>{props.age}</div> </div> ); }만약 위와 같이 코드를 작성했다고 하면, 이 컴포넌트를 사용할 때 아래와 같이 사용할 것으로 예상됩니다.root.render( <React.StrictMode> <SampleComponent name={'kim'} age={12} /> </React.StrictMode> );근데 만약 코드가 매우 길어지고, props로 넘겨야 하는 것들이 많아진다고 가정해 보겠습니다. 예를 들어props.nameprops.ageprops.universityprops.profilePhotoprops.gradeetc...이런 경우에는 도대체 props로 어떤 것들을 넘겨 주어야 하는지 굉장이 헷갈리는 상황이 발생할 것 같은데 이를 해결하기 위한 방법이 있을지 궁금합니다. ++ 제가 찾아본 바로는 아래와 같이 코드를 작성하면 된다고 합니다.function SampleComponent({name, age}) { return ( <div> <div>{name}</div> <div>{age}</div> </div> ); }그런데 이 방식을 사용하게 되면 children은 어떻게 넘겨 줄 수 있는지가 궁금합니다. 그냥 아래와 같이 처리하면 되는 것일까요?function SampleComponent({children, name, age}) { return ( <div> <div>{name}</div> <div>{age}</div> <div>{children}</div> </div> ); }또한, 이 방식이 맞는 방식이라면, 굳이 아래 코드와 같이 props를 사용하시는 이유가 무엇인지도 궁금합니다.function SampleComponent(props) { return ( <div> <div>{props.name}</div> <div>{props.age}</div> </div> ); }
-
해결됨중상급 퍼블리싱을 위한 CSS3의 모든 것
inherit와 100%의 차이가 궁금합니다.
안녕하세요 선생님, ( hover로 만드는 버튼 디자인, 드롭다운 네비게이션 & 컨텐츠) 를 듣다가 궁금한 점이 생겨 질문 드립니다. 10:32 분에 보여지는 .dropdown {width: 150px'}.dropdown-btn {width:inherit;} 14:50 분.tour-item {width:400px;}.tour-photo img {width:100%;} 둘다 부모 자식관계라 부모의 크기를 따라가는 것도 이해가 되었는데 inherit 과 100% 는 그럼 같은 기능을 가진 코드일까요?두 가지 방식 모두 사용할 수 있다는 것을 소개해주신건지, 아님 특정 상황에 각각의 사용법이 있는지 궁금합니다.
-
미해결처음 만난 리액트(React)
리액트 연동 오류
안녕하세요. 실습 따라하는데 리액트 연동이 안된건지 버튼이 페이지에 안뜨는데 코드를 비교해도 뭐가 문제인지 모르겠어요
-
미해결처음 만난 리액트(React)
The `punycode` module is deprecated
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.주소 따라 들어가면 왜 이렇게 되는지 잘 모르겠어요... ㅠㅠ
-
미해결[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
마지막 파트 기술적 준수 사항 관련 질문
■ 질문 남기실 때 꼭! 참고해주세요.btn 태그 안에 span 태그를 마지막에 a링크로 바꾸셨는데 별도로 구성하기 할 때도 동일하게 적용되는 사항일까요?
-
미해결조코딩의 코딩 기초와 웹 풀스택 개발
livesurver가 작동이 안돼요.
안녕하세요, 강의를 보던 중 궁금한게 있어서 문의 드립니다. 라이브서버를 다운받고 'open with live surver' 를 눌렀는데 크롬에서 영상처럼 연동이 안되네요. 인터넷 찾아보면서 세팅설정도 바꿔보고 했는데도 안되네요. 뭐가 문제인지 알려주실 수 있으신가요?
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
강의 너무 잘 듣고있습니다. 섹션6번에서 질문이 있습니다.
안녕하세요. 좋은 강의 감사합니다.센셕6번에서 스크롤트리거를 하셨잖아요. title를 fixed로 시키셨습니다..fromTo('.worklist' ,{margin:'0 auto'} ,{margin:'100vh auto 0', duration:'1',ease: "power3.out"},0)그런다 다시 올리면 버버벅 거리는 현상은 어쩔수 없는 현상일까요?margin-top가 올라가면 다시 0으로 돌아가면서 버벅거리는 현상같은데, 어쩔수 없는 현상인지 여쭤봅니다.혹시몰라 사진 첨부드려요~회신 주시면 너무 감사드릴겠습니다.항상 좋은 강의 많이 부탁드립니다.~
-
미해결[웹 개발 풀스택 코스] HTML&CSS 기초
비쥬얼 스튜디오 코드 저장키
HTML기본 구조 및 기본요소강의에서 5분 15초쯤부터 비쥬얼 스튜디오 코드 저장키가 ctrl+c라고 하는데 맞나요? ctrl+s가 아닌가요?
-
미해결입문자를 위한 HTML 기초 강의
강의 자료 관련
안녕하세요. html 수업 듣고 있는데 강의 자료는 어디서 다운 받나요?
-
해결됨풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
backtotop 버튼을 연속으로 여러번 사용할때 스크롤이 끝까지 안올라갈 때가 생깁니다.
- 본 강의 영상 학습 관련 문의에 대해 답변을 드립니다. (어떤 챕터 몇분 몇초를 꼭 기재부탁드립니다)- 이외의 문의등은 평생강의이므로 양해를 부탁드립니다- 현업과 병행하는 관계로 주말/휴가 제외 최대한 3일내로 답변을 드리려 노력하고 있습니다- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 웬만하면 정상적으로 돌아가는데 누르다보면 한번씩 스크롤이 끝까지 안올라가고 중간에 멈출때가 있는데, 해결 방법이 따로 있는지 궁금합니다 헤더 영역을 처음부터 나타나게 하지 않고, 어느정도 스크롤이 되고 나서 띄우는 사이트들이 많은데 이것 때문에 그렇게 처리하는건지 궁금합니다