묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
공유하기 위에 따로 어떤 곳으로 가는 링크를 달고싶은데 그건 어떻게 해야할까요?
설명이 있고, 그 아래 또 하나의 사진 그 밑에 어떤 버튼이 있고 누르면 만들어놓은 어떤 링크로 가게 하고싶어요! 그리고 desc부분의 어떤 부분만 강조해서 글자색을 바꾸고싶으면 어떻게 해야할까요?
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
<html css js를 활용한 반응형 모던 웹페이지 만들기 3> 강의 영상 중 질문입니다.
<html css js를 활용한 반응형 모던 웹페이지 만들기 3> 강의 영상 중 질문입니다. const slidePreviewList = document.getElementsByClassName("slide-prev"); 로 상수를 선언하시고 그후 for문에서 for (let i = 0; i < slidePreviewList.length; i++) { let classList = slidePreviewList[i].parentElement.parentElement.nextElementSibling; let liList = classList.getElementsByTagName("li"); ...~} 여기서 slidePreviewList[i]는 어떤걸 지칭하는건가요? slidePreviewList[1]은 slide-prev라는 클래스 이름을 가지는 첫번재 요소를 가리키고 slidePreviewList[2]는 slide-prev라는 클레스 이름을 가지는 그다음 요소를 가리키는 방식인가요? 좋은강의 항상 감사합니다.
-
해결됨처음 만난 리액트(React)
NotificationList.jsx 챕터 6장 실습 내용 질문 - 동시에 2개씩 나옴
요약: 3개가 각각 1-1-1 로 1초 간격으로 나와야 하지만, 2-1 로 나옴. 즉 2개가 한번에 나오고 나머지 1개가 나옴, notification 개수를 5개로 늘려봤더니, 1-1-1-1-1이 나와야 하지만 2-2-1로 나옵니다. 어디가 문제일까요.. 1. NotificationList import React from "react"; import Notification from "./Notification"; const reservedNotifications = [ { message: "안녕하세요, 오늘 일정을 알려드립니다.", }, { message: "오전은 피곤합니다", }, { message: "점심식사 시간입니다.", }, { message: "30분 후 잠시 휴식하겠습니다.", }, { message: "퇴근합시다.", }, ]; var timer; class NotificationList extends React.Component { constructor(props){ super(props); this.state = { notifications: [], }; } componentDidMount() { const { notifications } = this.state; timer = setInterval( () => { if (notifications.length < reservedNotifications.length){ const index = notifications.length; notifications.push(reservedNotifications[index]); this.setState({ notifications : notifications }); } else { clearInterval(timer); } }, 5000); } render() { return ( <div> {this.state.notifications.map((notification) => { return <Notification message={notification.message}/>; })} </div> ); } } export default NotificationList; 2. Notification import React from "react"; const styles = { wrapper: { margin: 8, padding: 8, display: "flex", flexDirection: "row", border: "1px solid grey", borderRadius: 16 }, messageText: { color: "black", fontSize: 16 } }; class Notification extends React.Component { constructor(props) { super(props); this.state = {}; } render() { return ( <div style={styles.wrapper}> <span style={styles.messageText}>{this.props.message}</span> </div> ) } } export default Notification; 도와주세요!
-
미해결처음 만난 리액트(React)
강의보고 아무리 따라쳐도 안될것임.
/**/ import React from "react"; const styles = { wrapper: { margin : 9, padding : 9, display : "flex", flexDirection: "row", border: "1px solid grey", borderRadius : 15 }, messageText: { color: "black" ,fontSize : 15 }, }; class Notification extends React.Component{ constructor(props){ super(props); this.setState = {}; } render(){ return( <div style={styles.wrapper}> <span style={styles.messageText}>{this.props.message}</span> </div> ); } } export default Notification; /**/ import React from "react"; import Notification from "./Notification" const reservedNotifications = [ { message : "안녕하세요, 오늘 일정을 알려드립니다.", }, { message : "안녕하세요, 오늘 점심을 알려드립니다.", }, { message : "안녕하세요, 오늘 저녁을 알려드립니다.", }, ]; var timer ; class NotificationList extends React.Component{ constructor(props){ super(props) this.state = { notificationarr : [{ message : "안녕하세요 ." }] , } } componentDidMount(){ const { notificationarr } = this.state; timer = setInterval(() => { if(notificationarr && notificationarr.length < reservedNotifications.length){ const index = notificationarr.length; console.log(index); notificationarr.push(reservedNotifications[index]); this.setState({ notification: notificationarr, }); }else{ clearInterval(timer); return; } }, 1000); } render() { return( <div> { this.state.notificationarr.map((notification) => { return<Notification message={notification.message} /> })} </div> ); } } export default NotificationList
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
웹페이지 로딩 시간
안녕하세요, 강의 너무 잘 듣고있습니다. 다름이 아니라 현재 만들고 있는 웹페이지를 열 때 로딩 시간이 너무 오래 걸리는데 혹시 head단의 메타데이터 작성부분에서 로딩을 오래 걸리게 하는 요소가 있는 것인지 궁금합니다. 아니라면 이유를 모르겠어요 ㅠㅠ 제가 따로 html파일을 간단하게 만들어서 브라우저로 열때는 로딩이 길지 않아서요!
-
미해결처음 만난 리액트(React)
styled-components를 적용하려면
styled-components를 적용하려면 꼭 스타일을 위한 component를 만든다음에 그걸로 감싸야하나요? 그렇게 사용하다보면 리액트 콤포넌트와 스타일 콤포넌트가 섞여서 헷갈리지 않을까요?
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
대체 크롬 확장 프로그램 알려주세요!
안녕하세요! 크롬확장프로그램 1, 2탄 강의 수강 중 아래 4개 프로그램이 검색이 되지 않습니다. 혹시 대체할 만한 프로그램을 추천 해주실 수 있을까요?^^ 1탄 - page ruler redux, gallerify powerful image, Mobile RWD Tester 2탄 - maracopy
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
폰트가 이상해요 ㅠㅠ
before , after 의 텍스트 스타일이 다르게 나옵니다 이건 뭐가 문제일까요 ... ?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
안녕하세요! useParams에서 막혀서 질문 남깁니다 ㅠㅠ
우선 웹라이브러리 파트의 Link태그 적용 강의에서 후반부에 useParams 를 사용하게 되는데, 이부분부터 무언가 오류가 발생하네요.. 1. 메인화면 들어갔을때 오류화면 2. 상품클릭했을때 콘솔로그 상품을 클릭했을때 변경된 주소까지는잘 적용 되고, useParams 를 사용하기 전까지는 정상 작동 했는데, product 폴더의 index.js 에 useParams 만 넣으면 위처럼 오류가 발생합니다 이전에 소스에서는 문제가 안생겼군요 ㅠㅠ import { useParams } from "react-router-dom"; function ProductPage() { const { id } = useParams(); return <h1>상품 상세 페이지 {id} 상품</h1>; } export default ProductPage; 오타가 있나 싶어서 소스자료 복붙해도 마찮가지여서 문의로 남깁니다... react-router-dom 설치 할때 버전을 확인 못하고 그냥 설치했다가 나중에 확인해서 5.2 버전으로 다시 설치했는데, package.json 에는 5.2버전으로 정상적으로 보여지긴 하는데 오류내용이 버전이 충돌이 나서 그런건가 싶기도 하고.. 해결 방법이 있을까요? ㅠㅠ
-
미해결자바스크립트 : 기초부터 실전까지 올인원
질문있습니다
결과값이 이상해서요 마지막에 push한게 앞쪽 console.log에 반영이 되는거 같아요 다른영상들 보고 테스트 및 메모 한것들도 전부 콘솔찍어보면 저런식으로 되는거 같습니다 replit에 따로 설정한부분이있나요?
-
해결됨비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
jwtsecretkey
안녕하세요 jwtsecretkey 관련하여 질문드립니다. jwtsecretkey는 강의에 나와있는대로 그대로 사용했고, host는 AWS EC2에 명시된 퍼블릭 IP주소, User명에는 mysql 사용자명, port는 3306, password는 mysql 접속 시 비밀번호, 그리고 사용할 database명까지 입력을 해주었으나 localhost로 접속 시, Cannot get이라는 창만 계속해서 뜹니다. 혹시 이런경우에는 jwtsecretkey를 제것을 따로 생성하지 않아서 발생하는 문제인지 알고 싶습니다. 만약 jwtsecretkey의 문제라면 어떻게 생성하면되는지 알려주시면 감사하겠습니다.
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
강의 자료에 대하여
- 본 강의 영상 학습 관련 문의에 대해 답변을 드립니다. (어떤 챕터 몇분 몇초를 꼭 기재부탁드립니다)- 이외의 문의등은 평생강의이므로 양해를 부탁드립니다- 현업과 병행하는 관계로 주말/휴가 제외 최대한 3일내로 답변을 드리려 노력하고 있습니다- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요! 질 좋은 강의 너무 잘 듣고 있습니다. 따로 권한을 받아서 볼 수 있는 강의 자료도 정말 잘 정리되어 있어 공부하기 수월해요!! 감사드립니다. 강의자료에 대해서 여쭤볼게있는데요. 1. 권한은 수업과 동일하게 기한제한없이 볼 수 있는건가요? 2. 개인적인 궁금증으로써.. 보통 초보(혹은 중급)개발자분들은 이러한 모든 css특징들을 모두 외우시는지, 아니면 이러한 기능이 필요해! 할때 구글검색을 하며(혹은 강의자료) 그때그때 꺼내쓰는건지 궁금합니다
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
에러가 납니다ㅜㅜ
강의를 보며 그대로 따라했는데 const query = req.query; console.log("QUERY : ", query); 를 추가했을때 터미널에 node server.js를 하면 에러가 납니다ㅜㅜ
-
미해결애플 웹사이트 인터랙션 클론!
overflow-x:hidden을 사용했는데, 모바일 화면에서 우측이 잘리고 가로 스크롤이
d위 이미지처럼 가로 스크롤이 생기는 데 overflow-x: hidden 기능이 적용되지 않아서 생기는 문제일까요?
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
dots custom cs 수정
dots 커스텀cs 로 수정하는 강의는 어디서 확인가능한가요 ??
-
미해결애플 웹사이트 인터랙션 클론!
스크롤이 적용이 안되는것같아요!ㅜㅜ
스크롤도 늘어나질 않고 스티키도 안보이고 씬도 변하질 않고 계속 0에 있어요ㅜㅜ 첨부하겠습니당 const main = () => { let y0ffset = 0; const sceneInfo = [ { //0 type: 'sticky', heightNum: 5, //브라우저 높이의 5배로 scrollHeight 세팅 scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-0') } }, { //1 type: 'normal', heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-1') } }, { //2 type: 'sticky', heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-2') } }, { //3 type: 'sticky', heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-3') }, } ]; function setLayout() { //각 스크롤 섹션의 높이 세팅 for (let i = 0; i < sceneInfo.length; i++) { sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight; sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`; } console.log(sceneInfo); } function scrollLoop() { } window.addEventListener('resize',setLayout); window.addEventListener('scroll',() => { y0ffset = window.pageXOffset; scrollLoop(); }); setLayout(); }; main();
-
해결됨Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
DetailView 변수명
- 학습에 관련된 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. post_list.html에서는 변수를 소문자로 변환한 모델명 + _list 로 사용했는데 post_detail.html에서는 변수를 소문자로 변환한 모델명(post)로 사용한건가요? 어떤 방식으로 하는건지 설명이 없어서요...
-
해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
공지사항 갤러리 탭메뉴 div a태그
공지사항 갤러리 탭메뉴랑 공지사항 갤러리 별도 구성메뉴가 있는데 div 안에 '공지사항', '갤러리' 제목넣는 곳에 태그를 span은 별도메뉴에 쓰고, 탭메뉴에는 a태그로 쓰면 되나요? 상호작용이 들어가는 부분은 tab을 눌렀을 때 확인되어야 해서 a 임시링크를 걸어주는 걸로 기억하는데, 별도 구성인 경우엔 a태그 말고 span으로 줘도 무관한가요?
-
미해결<M.B.I.T> 테스트 페이지 만들기! with Django
js) 2/3 -> 3/3으로 안 넘어갑니다
1/3 -> 2/3 은 잘 되는데 2/3 -> 3/3은 안 넘어갑니다. const vheight를 .text가 아니라 영상대로 .test로 했을 땐 아예 넘어가지도 않았구요,(근데 이건 질문이랑 답, 버튼들 div class명이 text로 되어있어서 그런 것 같습니다.) 오타가 난 건가 확인을 해봐도 오타는 하나도 없는데 왜 안 되는지 모르겠습니다. 밑에는 자바스크립트 코드이구요. 혹시 css에서 수치를 잘 못 설정하면 이렇게 될 수도 있나요? 아니면 j query 때문일 수도 있나요.. ? 해결방법 아시는 분들 도움 부탁드립니다. (참고: alert창 나오는 부분은 일부러 코드를 적지 않았습니다. 커뮤니티 글 다 확인해보고 할 수 있는 수정은 다 해봤는데 안 됐습니다.)
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
소켓 프로그래밍 이란
질문있습니다. 소켓프로그래밍이라 하면 어떤것을 제작하는 것을 의미하나요 어렴풋이 서버 프로그래밍을 얘기하는 것 같은데.... 그리고 서버 어플리케이션을 만드는 것으 이야기하는지 서버의 운영체제를 만드는 것을 이야기하는지 잘 모르겠습니다. 도움말씀 부탁드려요..
