inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

css grid repeat() 에서 autofit 사용시

미해결

CSS Flex와 Grid 제대로 익히기

.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 600px)); /* grid-template-rows: repeat(3, minmax(100px, auto)); */ } </style> </head> <body> <div class="grid-container"> <div class="grid-item">a</div> <div class="grid-item">b</div> <div class="grid-item">c</div> minmax의 최소값은 적용이 안되고 최대값만 적용 되는게 맞나요?

  • HTML/CSS
  • flex
samkookji12 댓글 1 좋아요 0 조회수 225

빈 화면에서 tail 만 쳤을때 팝업도움말 나오게 하는 법 알려주세요.

미해결

TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!

컬러 및 배경, 보더 처리 00:43 여기보면 tail 만 쳐도 emmit 이라고 해야 되나요. 팝업도움말이 뜨는데 저는 저런게 전혀 뜨지 않는데요. 어떻게 해야 저런 도움말 팝업이 뜰 수 있나요? tailwind css intellisense 플러그인은 설치해놓은 상태입니다.

  • HTML/CSS
  • javascript
  • 반응형-웹
  • tailwindcss
테이크 댓글 2 좋아요 0 조회수 154

tailwind.config.js 파일을 통해 다크 모드 설정시 적용이 되지 않습니다.

미해결

TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!

[tailwind.config.js] /** @type {import('tailwindcss').Config} */ module.exports = { content: ['./src/**/*.{html,js}'], darkMode: 'selector', }; [practice-test.html] <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Tailwind CSS</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="bg-white dark:bg-gray-900 dark:text-white"> <main class="container max-w-5xl mx-auto min-h-screen flex items-center justify-center" > <div class="flex flex-col items-center"> <h1 class="font-extrabold text-3xl">Tailwind CSS 다크모드</h1> <p class="mt-4">이 페이지는 다크 모드를 지원합니다.</p> <button id="darkmode_btn" class="bg-blue-500 px-4 py-2 rounded-md text-white mt-4" > 다크 모드 전환 </button> <div class="px-10 py-6 bg-white rounded-md shadow-md mt-20 dark:bg-gray-800" > <p>이 박스는 다크 모드에서 배경이 어두운 색으로 변합니다.</p> </div> </div> </main> <script> document.querySelector('#darkmode_btn').addEventListener('click', () => { document.documentElement.classList.toggle('dark'); }); </script> </body> </html> tailwind.config.js 의 경로는 아래 스크린샷으로 첨부하였습니다. 제가 무슨 설정을 빠트린건지 명확히는 모르겠는데 <head> 태그 내부에 <script> 태그로 아래와 같이 설정하면 버튼을 클릭했을 때 다크모드와 원래 상태로 정상적으로 토글이 되는데 tailwind.config.js 로 설정만 하면 토글이 안되네요 모든 페이지에 다크모드를 설정하기 위해서는 tailwind.config.js 를 통해서 다크 모드 활성화를 하는 것이 좋을 것 같아서 질문 남깁니다! 좋은 강의 감사드립니다. tailwind.config = { // darkMode: 'media', // 운영 체제의 모드에 맞게 설정 darkMode: 'selector', // 수동으로 설정 };

  • HTML/CSS
  • javascript
  • 반응형-웹
  • tailwindcss
Droid 댓글 1 좋아요 0 조회수 324

menu 아이템 반응형 변경

미해결

CSS Flex와 Grid 제대로 익히기

@media (max-width: 310px) { .menu { flex-wrap: wrap; } .menu-item { width: 100%; flex: 1 auto; } } 크기가 좁아질때 일자로 배치를 해봤는데 메뉴 아이템에 호버가 걸려있어서 사이즈가 작아지는 경우가 생겨서 flex 로 사이즈 변경이 안되게 해줬는데 저런 경우에 똑같이 menu-item:hover 이런식으로 접근하는게 맞을까요?

  • HTML/CSS
  • flex
samkookji12 댓글 1 좋아요 0 조회수 121

테일윈드 @layer utilities를 활용하는 경우

미해결

Tailwind CSS 실전 포트폴리오 퍼블리싱

선생님께서, 테일윈드 @layer utilities를 언제 활용하시는지 궁금합니다! 영상을 보며 조금은 짐작이 가는 듯 하지만, 명확하지 않아 선생님의 답변을 구하고 싶습니다.

  • HTML/CSS
  • tailwindcss
정조윤 댓글 1 좋아요 1 조회수 178

React app 설치 시 문제

해결됨

처음 만난 리액트(React)

위와 같이 노드와 npm 이 을 설치하였습니다. 그리고 나서 PS C:\Users\Kim_Seung_Yeon> npx create-react-app my-app Creating a new React app in C:\Users\Kim_Seung_Yeon\my-app. Installing template dependencies using npm... npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: my-app@0.1.0 npm error Found: react@19.0.0 npm error node_modules/react npm error react@"^19.0.0" from the root project npm error npm error Could not resolve dependency: npm error peer react@"^18.0.0" from @testing-library/react@13.4.0 npm error node_modules/@testing-library/react npm error @testing-library/react@"^13.0.0" from the root project npm error npm error Fix the upstream dependency conflict, or retry npm error this command with --force or --legacy-peer-deps npm error to accept an incorrect (and potentially broken) dependency resolution. npm error npm error npm error For a full report see: npm error C:\Users\Kim_Seung_Yeon\AppData\Local\npm-cache\_logs\2024-12-10T07_05_37_613Z-eresolve-report.txt npm error A complete log of this run can be found in: C:\Users\Kim_Seung_Yeon\AppData\Local\npm-cache\_logs\2024-12-10T07_05_37_613Z-debug-0.log `npm install --no-audit --save @testing-library/jest-dom@^5.14.1 @testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0` failed 크리에이트 하게되면 위와같은 에러가 뜨네요 ... 어떻게 처리해야 할까요 ?

  • HTML/CSS
  • javascript
  • react
prince1401 댓글 3 좋아요 2 조회수 3785

수강평 이벤트

미해결

TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!

수강평 적었는데 쿠폰이 안들어와서 문의 드려요!

  • HTML/CSS
  • javascript
  • 반응형-웹
  • tailwindcss
dlsdl9037 댓글 2 좋아요 0 조회수 165

생성자 함수를 클래스 함수로 변경 하고 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 조회수 180

React 18.3.1 버전에서는 ReactDom에서 render할 수 없습니다.

미해결

처음 만난 리액트(React)

최신버전에서는 ReactDom의 Render가 더 이상 사용되지 않는군요.. 기존의 ReactDom으로 만든 root를 이용해서 render를 하도록 수업 내용이 변경되어야겠습니다.

  • HTML/CSS
  • javascript
  • react
  • 버전이슈
nimoya90 댓글 2 좋아요 1 조회수 527

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 조회수 445

스크롤이 중간 위치에 있을 때 창의 크기를 변환하면 생기는 문제

미해결

인터랙티브 웹 개발 제대로 시작하기

스크롤이 처음과 끝이 아닌 중간 위치에 있을 때 창의 크기를 변환하면 스크롤 비율이 달라져서 그런지 화면이 z축을 기점으로 순간이동을 합니다. 이것을 부드럽게 하기 위해서는 어떠한 방법이 있을까요?

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
유인준 댓글 1 좋아요 0 조회수 150

HomePage.vue에 작성한 내용이 화면엔 보이지 않습니다.

미해결

기획자님 이 정도 웹 개발은 배워보면 어떨까요? [이론+실습]

질문은 자세하게 적어주실 수록 좋습니다. 어느 부분을 수강중이신지 -> bmi 계산기 프로그램 완성하기 내가 어떻게 했는데, 어떤 결과가 나오기를 기대했는데, 다른 결과가 나왔는지 -> 노션의 코드들을 다 복사해서 붙여넣기 했는데 homepage 영역이 안나옵니다 작성하신 코드 및 오류 스크린샷 을 함께 첨부해주시면 좋아요!

  • HTML/CSS
  • javascript
  • vue.js
  • node.js
  • mongodb
  • 소프트스킬
댓글 2 좋아요 0 조회수 191

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 조회수 241

full reload 질문

미해결

반응형 웹사이트 포트폴리오(Architecture Agency)

선생님 처럼 영상을 보고 css full reload 를 설정 했는데 체크를 해제하면 css 수정 시 안올라가고 체크를 하면 올라 갑니다 또한 html 수정시 마다 매번 위(무한스크롤링)로 올라 갑니다. 해결방법이 있나요?

  • HTML/CSS
  • jquery
  • 웹-디자인
  • 반응형-웹
댓글 3 좋아요 1 조회수 220

영상 싱크가 맞지 않습니다!

미해결

SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma

영상 싱크가 맞지 않습니다 ㅠㅠ 헤더영역에 특히 그렇습니다 ㅠ

  • HTML/CSS
  • javascript
  • sass
  • jquery
  • scss
hangong16 댓글 2 좋아요 1 조회수 208

결과 이미지랑 글이 안떠요 왜일까요

미해결

[하루 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 조회수 161

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 조회수 239

폰트어썸

미해결

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

안녕하세요 css 기초이론을 따라하여 (아이콘) cdn 주소 링크에 넣고 i 태그도 위에 맞게 넣었습니다. 근데 항상 저는 네모에 엑스박스친 오류 상자만 뜹니다. 인강 당시와 cdn 주소가 변경된건지.. 알 수 있을까요?

  • HTML/CSS
  • jquery
gbs06193 댓글 2 좋아요 1 조회수 170

jsx 실습 관련 오류 npm start를 해도 강사 화면처럼 안떠요.

미해결

처음 만난 리액트(React)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 왼쪽의 화면처럼만 뜹니다. 그리고 강사처럼 npm start만 하면 이런 오류가 떠서 cd my-app , npm start하면 그나마 실행되는데 위의 사진처럼 결과 리액트가 아니라 로딩화면같이 뜹니다. 어떻게 해결해야하나요?

  • HTML/CSS
  • javascript
  • react
dbwls204605 댓글 3 좋아요 0 조회수 475

terminal에서 npx 명령어 입력해도 안떠요..

미해결

처음 만난 리액트(React)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 어떻게 해결해야할까요?

  • HTML/CSS
  • javascript
  • react
dbwls204605 댓글 2 좋아요 1 조회수 800

인기 태그

인프런 TOP Writers

주간 인기글