묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨구글 애드센스 수익형 워드프레스 블로그 만들기
온라인 건물연구소 홈페이지
온라인 건물연구소 이미지로고를 쓰려고 찾아보니까 안나와서 그런데 혹시 주소가 바뀌었을까요?
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
강의화면에 height 가 vh가 아닌 vw라고 나와있는데 뭐가맞는거죠
주신 샌드박스 파일에서는 height가 50vh라고 되어있는데강의에서는 아래와 같이 height가 50vw라고 되어있네요 뭐가 맞는거죠? vh가 맞는것 아닌가요
-
미해결3D리플릿 만들기 - 인터랙티브 웹 프로젝트
페이지 클래스리스트 제거 해줬을때
(() => { const leaflet = document.querySelector('.leaflet'); const pagesElem = document.querySelector('.page'); let pageCount = 0; function getTarget(target,className) { while (!target.classList.contains(className)) { target = target.parentNode; if (target.nodeName === 'BODY') { return; } } return target; } leaflet.addEventListener('click', (e) => { let pageElem = getTarget(e.target, 'page'); pageElem.classList.add('page-flipped'); pageCount++; if (pageCount === 2) { document.body.classList.add('leaflet-opened'); } let closeElem = getTarget(e.target, 'close-btn'); if (closeElem) { console.log(pagesElem); closeElem.classList.remove('leaflet-opened'); pageElem.classList.remove('page-flipped'); pageCount = 0; } }); })(); page 첫번째를 선택을 해줘도 close 버튼을 클릭했을때 3번째 페이지의 page-flipped가 제거 되면서 세번째 페이지가 접어 지는데 이유가 뭔가요?
-
미해결입문자를 위한, HTML&CSS 웹 개발 입문
id 중복으로 해도 문제 없습니다
<h1 id="title">애국가</h1> <hr /> <h2 id="title">1절</h2>이렇게 id를 중복으로 선언해도 문제없이 둘다 css가 적용됩니다. 그런데 선생님은 id는 요소 하나에만 쓸 수 있다고 하셨습니다. 뭐가 맞는건지 궁금합니다
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
강의듣다가 궁금해져서 문의 남깁니다. (빼꼼이 슬라이드 반응형)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 선생님강의듣다가 궁금해져서 문의남깁니다.빼꼼이 슬라이드를 반응형에도 적용하고 싶을땐.good-suggestion-items{ width:430px }말고어떤 값을 줘야될지 궁금합니다.
-
미해결처음 만난 리액트(React)
import 코드 에러
23번 줄에 왜 에러가 뜨는지 이유를 모르겠습니다 npm을 실행하면 react 창에 다음과 같이 표출됩니다vscode를 껐다 켜도 동일한 상황이 발생해요
-
미해결처음 만난 리액트(React)
백틱
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 혹시 작은 따옴표와 백틱을 구분하여 사용해야 하나요?백틱을 써야하는데 작은 따옴표를 쓰면 오류가 나거나 그 반대 상황에서도 오류가 나는 경우가 있을까요?큰 따옴표도 궁금합니다!
-
미해결모바일 웹 퍼블리싱 포트폴리오 with CSS Nesting
섹션2 자료 확인 부탁드립니다~!
선생님 ~ 섹션2 [실습] HTML 와이어프레임 만들기 실습(커스텀 체크박스 로그인 폼) 듣고 있는데 자료 다운 폴더에 모바일 웹 HTML 와이어프레임 구조 폴더가 없는것 같습니다. HTML 와이어프레임 실습(로그인 폼), 모바일 웹 개별 페이지(PNG) 등 등, 그리고 피그마 주소도 보이지 않네요 ~! 자료 받을수 있을까요?
-
미해결프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
태그 닫는 단축키가 뭔가요?
저는 <div></div> 이렇게 해 놓고 시작하는데강의에서는 내용 입력하고 마지막에 </div>가 자동으로 작성되네요?
-
미해결CSS Flex와 Grid 제대로 익히기
css grid repeat() 에서 autofit 사용시
.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의 최소값은 적용이 안되고 최대값만 적용 되는게 맞나요?
-
미해결TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!
빈 화면에서 tail 만 쳤을때 팝업도움말 나오게 하는 법 알려주세요.
컬러 및 배경, 보더 처리00:43여기보면 tail 만 쳐도 emmit 이라고 해야 되나요. 팝업도움말이 뜨는데 저는 저런게 전혀 뜨지 않는데요.어떻게 해야 저런 도움말 팝업이 뜰 수 있나요?tailwind css intellisense 플러그인은 설치해놓은 상태입니다.
-
미해결TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!
tailwind.config.js 파일을 통해 다크 모드 설정시 적용이 되지 않습니다.
[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', // 수동으로 설정 };
-
미해결CSS Flex와 Grid 제대로 익히기
menu 아이템 반응형 변경
@media (max-width: 310px) { .menu { flex-wrap: wrap; } .menu-item { width: 100%; flex: 1 auto; } } 크기가 좁아질때 일자로 배치를 해봤는데 메뉴 아이템에 호버가 걸려있어서 사이즈가 작아지는 경우가 생겨서 flex 로 사이즈 변경이 안되게 해줬는데 저런 경우에 똑같이 menu-item:hover 이런식으로 접근하는게 맞을까요?
-
미해결Tailwind CSS 실전 포트폴리오 퍼블리싱
테일윈드 @layer utilities를 활용하는 경우
선생님께서, 테일윈드 @layer utilities를 언제 활용하시는지 궁금합니다! 영상을 보며 조금은 짐작이 가는 듯 하지만, 명확하지 않아 선생님의 답변을 구하고 싶습니다.
-
해결됨처음 만난 리액트(React)
React app 설치 시 문제
위와 같이 노드와 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크리에이트 하게되면 위와같은 에러가 뜨네요 ... 어떻게 처리해야 할까요 ?
-
미해결TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!
수강평 이벤트
수강평 적었는데 쿠폰이 안들어와서 문의 드려요!
-
미해결인터랙티브 웹 개발 제대로 시작하기
생성자 함수를 클래스 함수로 변경 하고 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를 가리키는 문제가 생겨서 변수를 그냥 넣어줘서 작동은 하는데 이렇게 하는게 맞는지 궁금합니다.
-
미해결처음 만난 리액트(React)
React 18.3.1 버전에서는 ReactDom에서 render할 수 없습니다.
최신버전에서는 ReactDom의 Render가 더 이상 사용되지 않는군요..기존의 ReactDom으로 만든 root를 이용해서 render를 하도록 수업 내용이 변경되어야겠습니다.
-
미해결TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!
font-weight가 왜 적용이 안될까요?
<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 으로 다른데, 보이는건 똑같네요.이유가 뭘까요?
-
미해결인터랙티브 웹 개발 제대로 시작하기
스크롤이 중간 위치에 있을 때 창의 크기를 변환하면 생기는 문제
스크롤이 처음과 끝이 아닌 중간 위치에 있을 때 창의 크기를 변환하면 스크롤 비율이 달라져서 그런지 화면이 z축을 기점으로 순간이동을 합니다. 이것을 부드럽게 하기 위해서는 어떠한 방법이 있을까요?
