173만명의 커뮤니티!! 함께 토론해봐요.
미해결
처음 만난 리액트(React)
패키지도 새로 설치해보고 챗지피티가 하라는데로 다 해봤는데도 해결이 안되네요 ㅠㅜㅜ 최신 버전맞아요 react랑 react dom 어쩌고랑 create어쩌고에서 문제가 있는 것 같다고 했습니다 ㅠ 어떻게 해결해야하나요
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
■ 질문 남기실 때 꼭! 참고해주세요. - 먼저 유사한 질문이 있었는지 검색해주세요. - 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다. - HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요. - 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 이번강의에서는 input email타입과 password타입에는 label이 아닌 span을 사용하셨는데 label을 따로 안넣어줘도 되는지 궁금합니다.
미해결
처음 만난 리액트(React)
import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; //import App from './App'; //import reportWebVitals from './reportWebVitals'; import Clock from './chapter_04/clock'; const root = ReactDOM.createRoot(document.getElementById('root')); setInterval(() => { root.render( <React.StrictMode> <Clock /> </React.StrictMode> ); }, 1000); import React from "react"; const Clock = () => { return( <div> <h1>안녕, 리엑스</h1> <h2>현재 시간: {new Date().toLocaleTimeString}</h2> </div> ) } export default Clock; Failed to compile. Module not found: Error: Can't resolve './chapter_03/Library' in 'C:\reactdeveloper\reactcoding\my-app\src' WARNING in [eslint] src\index.js Line 4:8: 'App' is defined but never used no-unused-vars Line 5:8: 'reportWebVitals' is defined but never used no-unused-vars Line 7:8: 'Library' is defined but never used no-unused-vars Failed to compile. Module not found: Error: Can't resolve './chapter_03/Library' in 'C:\reactdeveloper\reactcoding\my-app\src' WARNING in [eslint] src\index.js Line 4:8: 'App' is defined but never used no-unused-vars Line 5:8: 'reportWebVitals' is defined but never used no-unused-vars Line 7:8: 'Library' is defined but never used no-unused-vars Failed to compile. Module not found: Error: Cannot find file: 'clock.jsx' does not match the corresponding name on disk: '.\src\chapter_04\Clock.jsx'. ERROR in ./src/index.js 10:0-39 Module not found: Error: Cannot find file: 'clock.jsx' does not match the corresponding name on disk: '.\src\chapter_04\Clock.jsx'. webpack compiled with 1 error 이렇게 오류가 나고 있는데 해결 방법이 있을까요
미해결
처음 만난 리액트(React)
리액트 한 번도 공부한 적 없어서 리액트 기초 공부하려는 목적입니다. 기초 강의 찾던 중에 알게 되었습니다! 리액트 버전 업데이트가 있었다고 알고 있는데 입문자 레벨이라면 강의 수강해도 별 문제 되지 않을까요?
해결됨
부트스트랩을 활용한 반응형 웹제작 [실전편] 부트캠프
https://getbootstrap.com/docs/4.6/components/carousel/#with-captions 위 사이트에서 똑같이 따라했는데.. 캐러셀이 좌우로 움직이지않고 그냥 뚝뚝 깜빡이면서 다음걸로 바뀌어요 ㅠㅠ 이렇게도해보고 저렇게도 해보는데 안되요 ㅠㅠㅠㅠ <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Fabicorn --> <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon"> <title>부트스트랩 1강</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <!-- fontawesome cdn --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <!-- animate.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> <!-- my style --> <link rel="stylesheet" href="css/mystyle.css"> </head> <body> <div class="container-fluid"> <header id="top"> <!-- Captions --> <div id="topCarousel" class="carousel" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#topCarousel" data-slide-to="0" class="active"></li> <li data-target="#topCarousel" data-slide-to="1"></li> <li data-target="#topCarousel" data-slide-to="2"></li> <li data-target="#topCarousel" data-slide-to="3"></li> <li data-target="#topCarousel" data-slide-to="4"></li> </ol> <div class="carousel-inner"> <!-- 01 --> <div class="carousel-item active"> <img src="/img/carousel_1.jpg" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>First slide label</h5> <p>Some representative placeholder content for the first slide.</p> </div> </div> <!-- 02 --> <div class="carousel-item"> <img src="/img/carousel_2.jpg" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p>Some representative placeholder content for the second slide.</p> </div> </div> <!-- 03 --> <div class="carousel-item"> <img src="/img/carousel_3.jpg" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Some representative placeholder content for the third slide.</p> </div> </div> <!-- 04 --> <div class="carousel-item"> <img src="/img/carousel_4.jpg" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Some representative placeholder content for the third slide.</p> </div> </div> <!-- 05 --> <div class="carousel-item"> <img src="/img/carousel_5.jpg" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Some representative placeholder content for the third slide.</p> </div> </div> </div> <button class="carousel-control-prev" type="button" data-target="#topCarousel" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </button> <button class="carousel-control-next" type="button" data-target="#topCarousel" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </button> </div> <!-- Captions end --> </header> </div> <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) --> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script> <!-- my script --> <script src="js/myscript.js"></script> </body> </html>
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
저는 1년 정도 퍼블리싱 경력이 있는데 실무에서 float 를 사용한 적이 없습니다. 부끄럽지만 부족한 실력을 보완하기 위해 강의를 듣고 있는데요. 포트폴리오를 보완하려고 하는데, 강의를 듣다보니 float 를 사용법을 이제라도 익혀서 홈페이지를 만들어야하나 고민이 됩니다. 사실 flex 만 사용하면 정렬 관련해서는 어려울 게 없는데 float 는 너무 어렵게 느껴지네요...
미해결
습관부터 바꿔주는 React 기초
섹션 0 의 강의소개 첫번째 1분미만 컨텐츠가 완료가 안됩니다.
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
HTML CSS Support을 깔고 코드 트린거 없이 확인후 css에 적은걸 html에 들어가서 첫문장만 치면 단어가 뜬다고 했는데 안떠서 이렇게 글을 올려봅니다...
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
다크모드 버튼 만들때 왜 <button> 이 아닌 <div> 를 사용하나요 ? 가끔 <button>, <ul> 대신에 div 를 사용하는 경우가 많은데 웹표준에 어긋나는 게 아닌지 헷갈립니다 ㅜ
미해결
CSS Flex와 Grid 제대로 익히기
안녕하세요 로드맵으로 강의를 다 신청해서 듣고있는 중인데 혹시나 제가 지금 웹에서 카드게임을 만들고 싶은데 홀덤테이블 이미지에 맞게 지정된 자리에 각각의 플에이어들의 이름 프로필 그리고 손패2장을 놓을 슬롯을 지정하고 싶은데 그리드를 사용해 영역을 나누고 그곳에 위치를 구해야 할까요? 지금은 css로 이미지 만들어서 테이블을 만들어 둔 후에 css를 사용하여 6명의 플레이어 위치를 퍼센트로 조절해두고 그곳에 다시 <div>태그들을 사용해 위치시켜놨는데 혹시 다른 좋은 방법이있을까요?
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
이렇게 오류가 떳다고 뜨면서, image만 쳐도 사이트 01해서 나오시던데 전 아예 나오질 않네요.
미해결
반응형 웹사이트 포트폴리오(App Official Landing Website)
선생님 해당 display: flex; 할떼, 중앙정렬하는 justify-content: center;/ align-items: center; 할때 해당 div 의height를 auto; 또는 아에안적으면 어떻게되나요/? 꼭안적어도되죠
미해결
애플 웹사이트 인터랙션 클론!
안녕하세요. 강의 재미있게 완강하였습니다. Next.js에 애니메이션을 구현해보려고 하는데요. 현재는 load event 대신 useEffect안에서 기능들을 호출하는 방식으로 구현하였는데, useEffect는 DOM요소들이 생성이 완료되는 시점에서 기능이 실행되어 이미지들의 다운로드가 다 완료되지 않은 상태에서도 Loading 화면이 끝나버립니다. useEffect안에서 onLoad나 eventListener load를 시도해보았지만 다른 eventListener와 다르게 제대로 동작하지 않는 현상이 발생합니다. 혹시 답변이 가능하시다면 React에서는 Resource의 다운로드 완료 시점을 어떻게 알 수 있을지 조언 부탁드립니다!
미해결
Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
안녕하세요 강사님. 강사님의 강의를 보고 블로그를 직접 만들어서 현재 공부기록을 올리고 있었습니다. 그러던 중에 갑자기 오류가 나면서 제 웹사이트에 접속이 안되는 문제가 발생하였습니다. 도메인은 giyeonss.com 입니다. 어떻게 해야 하나요?
해결됨
구글 애드센스 수익형 워드프레스 블로그 만들기
선생님 워드프레스 처음인데요 애드센스 신청할려고하면 오류떠요 코드 스니펫 ads 하면 오류떠요 유튜브 따라해도 계속 오류나요 도와주세요
해결됨
인터랙티브 웹 개발 제대로 시작하기
전진! 3D 스크롤 21 강의에서, 스크롤을 내리거나 올릴 때 css를 적용하는 과정에서 css 코드가 잘 이해가 가지 않아서 질문 드립니다. .character[data-direction='forward'] { transform: rotateY(180deg); } .character[data-direction='backward'] { transform: rotateY(0deg); } .character[data-direction='left'] { transform: rotateY(-90deg); } .character[data-direction='right'] { transform: rotateY(90deg); } css 선택자에서 [ ]는 속성을 의미하는 걸로 알고있는데, 그렇다면 위의 코드는 클래스 이름이 character인 클래스이고, chracter 클래스 중에서 data-direction = 'forword'라는 속성을 가지는 것을 가리킨다고 해석하면 될까요? 클래스 자체도 하나의 속성인데 그 안의 또 다른 속성?이 들어간걸로 이해가 되서 질문드립니다ㅠㅠ
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.02
안녕하세요 ! 강의를 듣다가 궁금한점이 생겨 글을 남깁니다. switch (id) { case 'home': console.log('home'); progress = 0; break; case 'mountain': console.log('mountain'); progress = 0.21; break; case 'river': console.log('river'); progress = 0.47; break; case 'company': console.log('company'); progress = 1; break; } gsap.to(route_animmation, { progress: progress, duration: 1 }); 위의 코드에서, progress: progress 변수로 사용중에다가, progress를 switch 문에서 직접 치수를 넣어주고 있는데, 클릭시 해당 svg path의 진행률을 직접 가져올 수는 없는걸까요 ? 반응형 코드에서 문제를 어떤식으로 해결하시는지 궁금합니다.
미해결
중상급 퍼블리싱을 위한 CSS3의 모든 것
선택자 강의부터 화면이 검은색으로만 나옵니다.
해결됨
[ 부트스트랩 5 ] 빠르고 스마트하게 웹 사이트 만들기 | Bootsrap 입문용
html <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Gabie's ART Cook</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <link rel="stylesheet" href="style.css"> </head> <body> <!-- 헤더 영역 시작 --> <header> <h1>Gabie's ART Cook</h1> <h4> 요리와 아트의 만남 </h4> <p> 아름다운 한 끼로 삶의 색채를 더하다</p> <button type="button" class="btn btn-outline-warning rounded-pilll"> 요리 보기 </button> </header> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> </body> </html> css header{ background-color: blue; } 이미지 파일 적용이 불가하여 background color로 테스트 해보았는데 css 적용이 불가합니다.
미해결
인터랙티브 웹 개발 제대로 시작하기
이벤트 강의를 듣고 나서 addEventListener를 이용하여 여러 장의 사진이 있으면 슬라이더처럼 하나씩 넘겨서 볼 수 있는 이벤트를 만들 수 있을 것 같아 혼자 코드를 직접 짜봤는데요, body 부분은 아래처럼 작성하고, <body> <div class="container"> <div class="slider" id="slider-01"></div> <div class="slider" id="slider-02"></div> <div class="slider" id="slider-03"></div> </div> </body> css는 아래처럼 작성했고, .container { position: relative; width: 660px; height: 440px; overflow: hidden; } .slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; transform: translateX(100%); } #slider-01 { background-image: url(./images/cat/cat-01.png); z-index: 3; } #slider-02 { background-image: url(./images/cat/cat-02.webp); z-index: 2; } #slider-03 { background-image: url(./images/cat/cat-03.webp); z-index: 1; } .sliderMove { transform: translateX(0%); transition: 1s; } js코드를 아래와 같이 작성했습니다. <script> window.addEventListener("load", function sliderHandler() { const sliderGroup = document.querySelectorAll(".slider"); let currentSlider; function activate(elem) { elem.classList.add("sliderMove"); currentSlider = elem; } function inactivate(elem) { elem.classList.remove("sliderMove"); } for (i = 0; i < sliderGroup.length; i++) { if (currentSlider) { inactivate(currentSlider); } activate(sliderGroup[i]); } }); </script> 후에 실행을 해보니 사진이 슬라이더처럼 작동이 안돼서요.. 작동이 안되는 이유와 어느 부분을 수정해야 하는지 알려주시면 감사하겠습니다! 혹 수업 내용과는 조금 벗어난 질문을 한 거라면 정말 죄송합니다ㅜㅜ..
