수강평 이벤트
미해결
TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!
수강평 적었는데 쿠폰이 안들어와서 문의 드려요!
- HTML/CSS
- javascript
- 반응형-웹
- tailwindcss
dlsdl9037
댓글 2
좋아요 0
조회수 186
묻고 답해요
176만명의 커뮤니티!! 함께 토론해봐요.
생성자 함수를 클래스 함수로 변경 하고 this 오류 관련
미해결
인터랙티브 웹 개발 제대로 시작하기
init() { window.addEventListener('scroll', () => { this.scrollRunHandler(); this.scrollPosition(this.mainElem); }); } scrollRunHandler() { clearTimeout(this.scrollState); if (!this.scrollState) { this.mainElem.classList.add('running'); } this.scrollState = setTimeout(() => { this.scrollState = false; this.mainElem.classList.remove('running'); }, 500); } scrollPosition = (elem) => { if (elem.lastScrollTop > window.scrollY) { // 스크롤을 아래로 this.mainElem.dataset.direction = 'backward'; } else { // 스크롤 위로 this.mainElem.dataset.direction = 'forward'; } elem.lastScrollTop = window.scrollY; } 생성자 함수를 클래스 함수로 변경하면서 this가 character를 가리켜야 되는데 window를 가리키는 문제가 생겨서 변수를 그냥 넣어줘서 작동은 하는데 이렇게 하는게 맞는지 궁금합니다.
- HTML/CSS
- javascript
- 인터랙티브-웹
samkookji12
댓글 1
좋아요 0
조회수 205
React 18.3.1 버전에서는 ReactDom에서 render할 수 없습니다.
미해결
처음 만난 리액트(React)
최신버전에서는 ReactDom의 Render가 더 이상 사용되지 않는군요.. 기존의 ReactDom으로 만든 root를 이용해서 render를 하도록 수업 내용이 변경되어야겠습니다.
- HTML/CSS
- javascript
- react
- 버전이슈
nimoya90
댓글 2
좋아요 1
조회수 535
font-weight가 왜 적용이 안될까요?
미해결
TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!
<h2 class="text-2xl">폰트 두께 조절</h2> <p class="font-light">Lorem ipsum dolor sit amet.</p> <p class="font-semibold">Lorem ipsum dolor sit amet.</p> <p class="font-bold">Lorem ipsum dolor sit amet.</p> <p class="font-extrabold">Lorem ipsum dolor sit amet.</p> <p class="font-black">Lorem ipsum dolor sit amet.</p> 위와 같이 했는데, 화면 볼때 굵기가 모두 같습니다. f12눌러서 확인해보면 font-weight이 700, 800 으로 다른데, 보이는건 똑같네요. 이유가 뭘까요?
- HTML/CSS
- javascript
- 반응형-웹
- tailwindcss
오제비
댓글 3
좋아요 0
조회수 472
스크롤이 중간 위치에 있을 때 창의 크기를 변환하면 생기는 문제
미해결
인터랙티브 웹 개발 제대로 시작하기
스크롤이 처음과 끝이 아닌 중간 위치에 있을 때 창의 크기를 변환하면 스크롤 비율이 달라져서 그런지 화면이 z축을 기점으로 순간이동을 합니다. 이것을 부드럽게 하기 위해서는 어떠한 방법이 있을까요?
- HTML/CSS
- javascript
- 인터랙티브-웹
유인준
댓글 1
좋아요 0
조회수 170
HomePage.vue에 작성한 내용이 화면엔 보이지 않습니다.
미해결
기획자님 이 정도 웹 개발은 배워보면 어떨까요? [이론+실습]
질문은 자세하게 적어주실 수록 좋습니다. 어느 부분을 수강중이신지 -> bmi 계산기 프로그램 완성하기 내가 어떻게 했는데, 어떤 결과가 나오기를 기대했는데, 다른 결과가 나왔는지 -> 노션의 코드들을 다 복사해서 붙여넣기 했는데 homepage 영역이 안나옵니다 작성하신 코드 및 오류 스크린샷 을 함께 첨부해주시면 좋아요!
- HTML/CSS
- javascript
- vue.js
- node.js
- mongodb
- 소프트스킬
댓글 2
좋아요 0
조회수 211
VUE CLI 설치 프로젝트 생성이 안됩니다
미해결
기획자님 이 정도 웹 개발은 배워보면 어떨까요? [이론+실습]
Vue CLI v5.0.8 ✨ Creating project in /Users/yeji/Desktop/2-17__/myfirestvuewapp. ⚙ Installing CLI plugins. This might take a while... npm error code EACCES npm error syscall open npm error path /Users/yeji/.npm/_cacache/tmp/e7f990df npm error errno EACCES npm error npm error Your cache folder contains root-owned files, due to a bug in npm error previous versions of npm which has since been addressed. npm error npm error To permanently fix this problem, please run: npm error sudo chown -R 501:20 "/Users/yeji/.npm" npm error Log files were not written due to an error writing to the directory: /Users/yeji/.npm/_logs npm error You can rerun the command with --loglevel=verbose to see the logs in your terminal ERROR Error: command failed: npm install --loglevel error --legacy-peer-deps Error: command failed: npm install --loglevel error --legacy-peer-deps at ChildProcess.<anonymous> (/usr/local/lib/node_modules/@vue/cli/lib/util/executeCommand.js:138:16) at ChildProcess.emit (node:events:518:28) at maybeClose (node:internal/child_process:1104:16) at ChildProcess._handle.onexit (node:internal/child_process:304:5) yeji@gim-yejiui-MacBookPro 2-17__ % sudo npm i -g @vue/cli;2A
- HTML/CSS
- javascript
- vue.js
- node.js
- mongodb
- 소프트스킬
댓글 2
좋아요 0
조회수 273
full reload 질문
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)
선생님 처럼 영상을 보고 css full reload 를 설정 했는데 체크를 해제하면 css 수정 시 안올라가고 체크를 하면 올라 갑니다 또한 html 수정시 마다 매번 위(무한스크롤링)로 올라 갑니다. 해결방법이 있나요?
- HTML/CSS
- jquery
- 웹-디자인
- 반응형-웹
댓글 3
좋아요 1
조회수 247
영상 싱크가 맞지 않습니다!
미해결
SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
영상 싱크가 맞지 않습니다 ㅠㅠ 헤더영역에 특히 그렇습니다 ㅠ
- HTML/CSS
- javascript
- sass
- jquery
- scss
hangong16
댓글 2
좋아요 1
조회수 228
결과 이미지랑 글이 안떠요 왜일까요
미해결
[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
// main변수= 문서 내 #main을 찾아서 가지고 와라 const main= document.querySelector("#main"); const qna= document.querySelector("#qna"); // statusbar 위한 엔드포인트 정의 const endPoint =12; // 결과값 const result=document.querySelector("#result"); // 사용자 입력값에 대한 배열 // const select = []; // 사용자 입력값에 대한 배열 new.직접 12개의 배열에 value 0넣기 const select = [0,0,0,0,0,0,0,0,0,0,0,0,0]; // 질문에 따른 답변 계산 // function calresult(){ // var pointArray = [ // 이 부분 data는 data.js로 옮겨서 동물 당 번호로 바꿔줌. // ] // for(let i = 0; i<endPoint; i++){ // // qnalist로 들어가서 a로 들어가고 거기서 select한 값 // var target =qnaList[i].a[select[i]]; // for(let j=0; j< target.type.length; j++){ // for(let k=0; k<pointArray.length; k++){ // if(target.type[j]=== pointArray[k].name){ // pointArray[k].value += 1; // } // } // } // } function calresult(){ // select라는 배열에 index를 반환할건데 최대값을 console.log(select); var result =select.indexOf(Math.max(...select)); return result; } // // value기준으로 정렬 sort // var resultArray = pointArray.sort(function(a,b){ // if(a.value > b.value){ // return -1; // } // if(a.value < b.value){ // return 1; // } // return 0; // }); // console.log(resultArray) // // key값을 도출, 동물의 이름 // let resultword = resultArray[0].key; // return resultworld; function setresult(){ let point = calresult(); const resultName = document.querySelector('.resultname'); resultName.innerHTML = infoList[point].name; var resultImg = document.createElement('img'); const imgDiv = document.querySelector('#resultImg'); var imgURL = 'img/image-'+ point + '.png'; resultImg.src=imgURL; resultImg.alt=point; resultImg.classList.add('img-fluid'); imgDiv.appendChild(resultImg); const resultDesc = document.querySelector('.resultDesc'); resultDesc.innerHTML=infoList[point].desc; } function goresult(){ qna.style.WebkitAnimation = "fadeOut 1s"; qna.style.Animation = "fadeOut 1s"; setTimeout(() => { result.style.WebkitAnimation = "fadeIn 1s"; result.style.Animation = "fadeIn 1s"; setTimeout(() => { qna.style.display = "none"; result.style.display = "block" }, 450)}) setresult(); calresult(); } function addAnswer(answerText, qIdx,idx){ var a = document.querySelector('.answerbox'); var answer = document.createElement('button'); // answer는 클래스나 id값이 없어서 querySelector이용 불가하므로 클래스 만들어주기 answer.classList.add('answerlist'); // qbox, answerlist에 애니메이션 넣기 위해 클래스 만들어주기 answer.classList.add('fadeIn'); // 버튼 간 간격 answer.classList.add('my-3'); answer.classList.add('py-3'); answer.classList.add('mx-auto'); // 답변 클릭할 수 있게 버튼 만들기 그것을 html에서 코드 짜지 않고 // innerhtml을 통해서 넣기 a.appendChild(answer); answer.innerHTML = answerText; // html의 onclick 역할의 addEventListener answer.addEventListener("click", function(){ // 버튼 하나만 클릭해도 모든 버튼이 사라지도록 함 var children = document.querySelectorAll('.answerlist'); for(let i=0; i< children.length; i++){ children[i].disabled =true; children[i].style.WebkitAnimation = "fadeOut 1s"; children[i].style.Animation = "fadeOut 1s"; } setTimeout(() => { // 소,닭 등 각 부여된 select 리스트의 순서를 찾아 value값 1씩 늘려주기 var target =qnaList[qIdx].a[idx].type; for(let i=0; i< target.length; i++){ select[target[i]] +=1; } //// 사용자 입력이 몇 번째인지 인덱스로 넣어주고 idx로 받아주기 -> 몇 번째 질문에서 몇 번째 답변 눌렀는지 select[qIdx] = idx; for(let i=0; i< children.length; i++){ children[i].style.display = 'none'; } goNext(++qIdx); // 버튼이 사라지고 950초쯤 이후 버튼 없어지게 }, 950) }, false); } function goNext(qIdx){ // 결과값 호출하는 함수 if(qIdx === endPoint){ goresult(); return; } // html파일에서 qna 안 qbox가져와라 var q= document.querySelector('.qbox'); q.innerHTML = qnaList[qIdx].q; // 원래는 q.innerHTML =qnalist[0].q; 였는데 0~11번째 질문을 // 하나씩 입력하면 귀찮으니까 let Idx라는 변수 만들어서, for 함수 사용 for(let i in qnaList[qIdx].a){ // answerlist를 하나씩 입력하지 않고 파라미터로 addAnswer(qnaList[qIdx].a[i].answer,qIdx,i); } // status에 따라서 바로 나타내려고 var status = document.querySelector('.statusbar'); status.style.width=(100/endPoint)*(qIdx+1) + '%'; } // 장면 넘어가는 animation function begin(){ main.style.WebkitAnimation = "fadeOut 1s"; main.style.Animation = "fadeOut 1s"; setTimeout(() => { qna.style.WebkitAnimation = "fadeIn 1s"; qna.style.Animation = "fadeIn 1s"; setTimeout(() => { main.style.display = "none"; qna.style.display = "block" }, 450); // 위에서 세운 고넥스트 함수 호출 let qIdx = 0; goNext(qIdx); }, 450); }
- HTML/CSS
- javascript
- bootstrap
dbwls204605
댓글 1
좋아요 0
조회수 177
index.js를 수정 후 npm start를 하면 계속 포트running이라고 뜹니다
미해결
처음 만난 리액트(React)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 강사님과 동일하게 index.js를 수정하고 terminal - new terminal을 하면 저는 경로가 계속 my-app의 상위 경로로 되어있어서 cd my-app을 해주고 npm start를 하는데 (이부분도 저는 왜 계속 이렇게 뜨는지 궁금합니다..my-app을 우클릭 후 터미널을 열면 되긴합니다만..) 이렇게 떠서 계속 새로운 포트를 추가해서 사용하게 됩니다..저도 강사님처럼 실습하고 싶은데 어떻게 하면 될까요..?
- HTML/CSS
- javascript
- react
duswjdhh
댓글 2
좋아요 0
조회수 254
폰트어썸
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
안녕하세요 css 기초이론을 따라하여 (아이콘) cdn 주소 링크에 넣고 i 태그도 위에 맞게 넣었습니다. 근데 항상 저는 네모에 엑스박스친 오류 상자만 뜹니다. 인강 당시와 cdn 주소가 변경된건지.. 알 수 있을까요?
- HTML/CSS
- jquery
gbs06193
댓글 2
좋아요 1
조회수 188
jsx 실습 관련 오류 npm start를 해도 강사 화면처럼 안떠요.
미해결
처음 만난 리액트(React)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 왼쪽의 화면처럼만 뜹니다. 그리고 강사처럼 npm start만 하면 이런 오류가 떠서 cd my-app , npm start하면 그나마 실행되는데 위의 사진처럼 결과 리액트가 아니라 로딩화면같이 뜹니다. 어떻게 해결해야하나요?
- HTML/CSS
- javascript
- react
dbwls204605
댓글 3
좋아요 0
조회수 490
terminal에서 npx 명령어 입력해도 안떠요..
미해결
처음 만난 리액트(React)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 어떻게 해결해야할까요?
- HTML/CSS
- javascript
- react
dbwls204605
댓글 2
좋아요 1
조회수 847
수강평 작성이 안되네요..
미해결
SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
안녕하세요 선생님 SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma 강의를 구매하고 섹션1all 과 섹션2 몇개 강의 듣고 수강평 남기려고 하는데 작성하는 곳이 없어서 글올립니다.. ㄴ 수강평 버튼이 없습니다..
- HTML/CSS
- javascript
- sass
- jquery
- scss
디토
댓글 1
좋아요 1
조회수 196
다운로드 불가
해결됨
이거 하나로 종결-스프링 기반 풀스택 웹 개발 무료 강의
1강 소개 자료 zip 파일이 압축 해제가 안 됩니다!
- HTML/CSS
- javascript
- jsp
- mysql
- spring-boot
- spring-security
초보안
댓글 2
좋아요 0
조회수 460
<꼭 답변 부탁 드립니다>그랩선생님, [컴포넌트 사용하기] 강의에서 질문 있습니다.
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
안녕하세요? 그랩선생님, 수고가 많으십니다. 다름이 아니라 강의 [컴포넌트 사용하기] 강의를 진행하던 중 2가지 에러가 발생하여 질문을 하게 되었습니다. 첫번째 에러는 아래 사진으로 첨부합니다. 첫번째 에러 사진의 크롬 브라우저 제목은 listing directory / 라고 뜹니다. 그다음에 src디렉토리에 가서 App.js를 열면 첨부사진 처럼 입력된 소스화일 내용이 아래와 같이 뜨는데 어떻게 해야 크롬 브라우저로 로고까지 뜨게 되나요? 그리고 두번째 에러는 실제 소스 파일 폴더에 가서 App.js 파일을 선택 후 엔터(실행)하니 아래 사진과 같은 에러가 발생하였습니다. --> 이 두가지 에러를 어떻게 하면 해결 할 수 있는지 상세한 설명과 자세한 답변 부탁드립니다. 감사합니다.
- HTML/CSS
- javascript
- react
- node.js
- react-native
- 머신러닝
- express
- tensorflow
isbcom1004
댓글 2
좋아요 0
조회수 314
3차 y축으로 올라오는 갤러리제작
미해결
UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략
3차 y축으로 올라오는 갤러리제작에 관한 질문입니다 이미지와 왼쪽에 있는 클론코딩 제목이 같이 올라오게 하고 싶거든요 Concierge 글자가 올라오면서 이미지가 올라오고 두번째 Hanwha Solutins가 올라오면서 이미자가 올라오는 이런건 안될까요?
- HTML/CSS
- 포트폴리오
- 반응형-웹
- gsap
- scrolltrigger
김김김
댓글 2
좋아요 0
조회수 198
Putty에서 nginx를 vi로 수정할때 오류
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 제목과 같이 putty 터미널에서 vi로 vi /etc/nginx/sites-.../ 에서 수정하는데 저는 다음과 같은 화면이 나옵니다. ㅠㅠ 이거 왜 이런건가 요
- HTML/CSS
- javascript
- aws
- git
- mysql
- rest-api
- github
김태훈
댓글 3
좋아요 0
조회수 360
mysql과 선생님의 깃허브 코드연결
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 선생님께서 올리신 완성본 코드를 깃허브에서 다운받아서 결과를 보고싶은데, 지도상에 음식점들의 핀이 뜨지 않습니다 ㅠ 아마 sql상에 더미 데이터들이랑 연결이 안되어서 그런것같은데 지도상에 마커들이 뜨게 하려면 어떻게 해야할까요 도와주세요
- HTML/CSS
- javascript
- aws
- git
- mysql
- rest-api
- github
김태훈
댓글 1
좋아요 0
조회수 229
인기 태그
인프런 TOP Writers
- clee002 3
- Minkoo Lee 2
- 노재은[ 학부휴학 / 경제학과 2
- dspark 2
- mayvmoring 2
- 5647kr 2
- 손은눈보다빠르다 2