묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결카페 24 베스트 쇼핑몰 디자인 클론코딩하기 (HTML + CSS)
궁금합니다.
'홈페이지 헤더만들기'에서 header__nav-box와 header__list-box를 사용해 div로 한번 묶고 ul, li를 적용하는데, 오른쪽 icon은 왜 div없이 ul, li로 바로 하는지 궁금합니다. <header> <nav> <ul> <li> <p> <ul> <li> 이 구조인데, nav 태그 없이 ul, li로만으로도 가능할거 같아서요.
-
해결됨처음 만난 리액트(React)
LifeCycle 문의
안녕하세요 강의 감사히 잘 듣고 있습니다.다름이 아니라 chapter06에서 코드는 같은데Notification의 componentDidUpdate() 한번씩 더 호출되는데 이유를 모르겠습니다.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 = {}; } componentDidMount() { console.log(`${this.props.id} componentDidMount() called.`); } componentDidUpdate() { console.log(`${this.props.id} componentDidUpdate() called.`); } componentWillUnmount() { console.log(`${this.props.id} componentWillUnmount() called.`); } 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 = [ { id: 1, message: "안녕하세요, 오늘 일정을 알려드립니다.", }, { id: 2, message: "점심식사 시간입니다.", }, { id: 3, 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 { this.setState({ notifications: [], }); clearInterval(timer); } }, 1000); } componentDidUpdate() { console.log(` parent componentDidUpdate() called.`); } componentWillUnmount() { if (timer) { clearInterval(timer); } } render() { return ( <div> {this.state.notifications.map((notification) => { return ( <Notification key={notification.id} id={notification.id} message={notification.message} /> ); })} </div> ); } } export default NotificationList;추가로 NotificationList의 componentDidUpdate()가 계속 호출되는데 이유가 있을까요?
-
미해결처음 만난 리액트(React)
item의 값을 어디서 얻어오는지 모르겠습니다..
안녕하세요 onClickItem에서 (item) 이 데이터를 어디서 가져오는지 이해가 가지 않아서요,,item이라고 명시된 값이 없는데 item을 어떻게 사용하는 건가요..???
-
미해결처음 만난 리액트(React)
chapter6 실습 그대로 했는데 오류가 납니다.
index.jsNotificationList.jsx에러코드 화면오타 확인도 해봤는데 아무리봐도 에러가 왜 나는지 못찼겠습니다.
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
css 슬라이드 애니메이션(크로스페이드 슬라이드)
이미지가 4개이면키프레임 구간을 어떻게 나누며@keyframes slide { 0% { opacity: 0;} 0% {} 0% {} 0% {} 100% {}}그리고 애니메이션 딜레이는 어떻게 주나요?.slide div a:nth-child(1) { animation-delay: 0s;.slide div a:nth-child(2) { animation-delay: 0s;.slide div a:nth-child(3) { animation-delay: 0s;.slide div a:nth-child(4) { animation-delay: 0s;가로 슬라이드와 세로 슬라이드는 이해도 되고 이미지 4개로 작업도 해보았습니다.그런데 크로스페이드는 도저히 응용이 안돼요
-
미해결웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)
A-3 유형 코드
header nav li .lnb{position: absolute; width: 200px; background: #000; height: 0; overflow: hidden; transition: .3s; z-index: 5;} 안녕하세요? 선생님. 다름이 아니오라 실습하면서 A-3 유형 코드에 z-index 속성이 빠져 있어서 제가 추가 해보니 슬라이드 위로 메뉴가 보입니다. 확인 부탁 드립니다.
-
미해결중상급 퍼블리싱을 위한 CSS3의 모든 것
로그인 폼 CSS 디자인 코드 질문 있습니다.
선생님, 제가 괄호 사용 코드에 대해 아직 지식이 부족해서이 부분을 이해를 못한 것 같아 질문 드립니다.input에 공통적인 css를 입력하는건데 [] 를 써서 각각의 이름을 입력 해야 하는 이유가 있을까요? 뒤에 대괄호를 사용하지 않아도, 라이브창에 보이는 효과는 같은 것 같아서요!
-
미해결입문자를 위한 CSS 기초 강의
font-weight가 적용이 안 되는데 어떻게 하나요?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>회사 웹 페이지 만들기</title> <style> body{ font-weight: 30px; } img{ display: flex; float: left; width: 130px; height: 30px; margin: 10px 0px 0px 8px; } img:hover{ cursor: pointer; } img, .menu_bar{ margin-right: 50px; } .menu_bar{ width: 100%; height: 70px; border: 2px solid black; text-align: center; display: flex; float: left; } input{ width: 110px; height: 45px; margin-right: 10px; margin-top: 12px; background-color: white; font-family: "돋움"; font-size: 15px; border: none; border-radius: 5px; } input:hover{ background-color: #f8f9fa; cursor: pointer; } #event, #freeStart{ width: 170px; } #freeStart{ color: white; background-color: #ff6464; } #freeStart:hover{ background-color: #DB4455; } #login{ margin-left: 100px; } div > #seeMore{ width: 20px; height: 20px; padding: 12px; } #seeMore:hover{ background-color: #f8f9fa; } </style> </head> <body> <div class="menu_bar"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/NHN_COMMERCE_CI.png/1600px-NHN_COMMERCE_CI.png" alt="회사로고"> <input type="button" name="쇼핑물" id="shop" value="쇼핑몰"> <input type="button" name="스토어" id="store" value="스토어"> <input type="button" name="마케팅" id="marketing" value="마케팅"> <input type="button" name="고객지원" id="customer" value="고객지원"> <input type="button" name="이벤트" id="event" value="혜택 ● 이벤트"> <input type="button" name="엔터프라이즈" id="enterprise" value="엔터프라이즈"> <input type="button" name="이전센터" id="center" value="이전센터"> <input type="button" name="로그인" id="login" value="로그인"> <input type="button" name="무료로 시작하기" id="freeStart" value="무료로 시작하기"> <img src="/image/메뉴바.png" id="seeMore" alt=""> </div> </body> </html>
-
미해결처음 만난 리액트(React)
npm start출력 시 미출력됩니다.
<Book.jsx><Library.jsx><index.js>입력 후 출력 시 오류값이 나오는데 설명부탁드립니다.
-
미해결프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
강의에 사용하는 예제 코드 자료 있나요?
안녕하세요. 강의에 사용하는 예제 코드 자료 있나요? PPT(https://www.inflearn.com/course/lecture?courseSlug=%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%9E%85%EB%AC%B8-%EC%9D%B8%ED%94%84%EB%9F%B0-%EC%98%A4%EB%A6%AC%EC%A7%80%EB%84%90&unitId=51363)자료만 있는 게 맞나요? 감사합니다.
-
미해결인터랙티브 웹 개발 제대로 시작하기
코드 작성 순서
안녕하세요 선생님~ 수업 잘 듣구있습니다 ㅎㅎㅎ door-opened 클래스를 add하고 remove하는 순서로 생각했는데 코드 작성 흐름이 거꾸로 역순으로 가는 이유가 있을까요...?^^;;;
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
a태그한 것들이 라이브화면에서 일자로 배치가 안되요
이미지파일이랑 텍스트랑 다같이 해보고 싶어서 이렇게 만들었는데 강의처럼 일렬로 예쁘게 배치가 안되고 유투브는 아래로 내려가 있습니다. 혹시 어떤게 잘못된걸까요??
-
미해결처음 만난 리액트(React)
JSX인지 어떻게 알 수 있나요?
JavaScript 코드와 XML/HTML 코드가 결합된 JSX라는걸 어떻게 알 수 있나요? 자료형이나 변수를 통해 할 수 있는건가요?
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
100vw 관련 질문
모던 웹을 위한 모던 CSS 단위 이해 및 정리 14:10에서 100vw를 하면 전체가 차지 되야 하는데 흰색 테두리가 있는 걸로 보아 100%꽉 채우지 않은 것 같아서요. 제가 예전에 어디서 배운 것 같기는 한데 정확하게 개념이 기억이 안나서 설명 부탁드립니다...!
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
값에 0대신 입력을 안해도 문제없나요?
border: 2px solid blue;box-shadow: inset 0 0 100px #000이렇게 여러 값 한번에 쓰는 속성에서 기본정보를 사용할때 0이나 black같은거는 입력안해도 라이브화면에서 원하는대로 보이는데 나중에 오류가 나거나 그러지않으면 아예 안적어도 되나요?
-
미해결처음 만난 리액트(React)
node js 설치 문의
node js 설치 후 파워쉘에서 검색하면 이렇게 나와요. 파워쉘 최신 버전 설치하라는 글씨도 보이는데, 파워쉘 최신 버전을 설치해야하나요?
-
미해결떠먹는 Three.js
camera.lookAt이 원래 이런건가요?
camera.lookAt부분에서 0, 0, 0으로 설정 되어 있어서 살짝 윗방향을 볼순 없나 싶어서 질문드려요0, 0, 0말고 다른값을 넣어도 계속 0, 0, 0만 보더라고요위 처럼 길쭉한 아바타를 불러 왔을때 시선이 자꾸 발쪽에 즉 0, 0, 0 쪽에 맞춰줘 있어서 그부분을 좀 고치고 싶은데 방법이 없을까요?
-
미해결처음 만난 리액트(React)
JSX의 장점 및 사용법 강의 영상 중 오타가 있습니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 코드 중 formatUser(user)가 formatName(user)인 거 같아요.
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
프론트 페이지 빠꼼이 슬라이더 마지막 부분 문의 드립니다.
추천상품 슬라이더 마지막 요소까지 당겼을 때도 마지막 요소가 빠꼼이로 반만 보이는데 슬라이더의 마지막 item은 온전히 다 보이게 하려면 어떻게 해야 할까요?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
duration과 stagger
안녕하세요 선생님! 수업 즐겁게 잘 듣고 있습니다!문득 duration과 stagger 사이의 궁금증이 생겨 문의드립니다. 제가 이해한 바로는duration = 애니메이션 진행시간의 총량stagger = 애니메이션 진행시 아이템간의 간격이렇게 이해하고 있습니다.그런데 만약 duration 1초,stagger 0.5초,item * 8(item) 0.5 (item) 0.5 (item) 0.5 (item) 0.5 ...duration이 설정한 1초를 아득히 넘어가게 되는데GSDevTools로 확인해보니 stagger로 인해 초과되는 시간만큼 늘어나는 것으로 확인이 됩니다.그렇다면 duration보다 stagger의 총합 길이가 더 우선이 되니 stagger의 총합 길이가 초과할 시 duration은 필요 없겠다라고 생각이 들었습니다.그런데 GSDevTools로 확인해본 결과 duration 1초 적용시 4.5초 / 미적용시 4초 라는 결과값을 확인했습니다. 어떤 상관이 있는지 궁금하여 질문 남깁니다..!
