묻고 답해요
148만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
footer가 product-card들과 충돌하고 겹칩니다
위처럼 procudt-card 영역에 footer가 넘어오는데 어떻게 해결해야 할지 감이 잘 잡히지 않습니다.아래에 작성한 코드 드립니다.//HTML <html> <head> <title>그랩마켓</title> <link href="index.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="header"> <div id="header-area"> <img src="images/images/icons/logo.png" /> </div> </div> <div id="body"> <div id="banner"> <img src="images/images/banners/banner1.png" alt="배너이미지"> </div> <h1>상품들</h1> <div id="product-list"> <div class="product-card"> <div> <img class="product-img" src="images/images/products/basketball1.jpeg"> </div> <div class="product-contents"> <span>농구공 1호</span> <span>10000원</span> </div> </div> <div class="product-card"></div> <div class="product-card"></div> <div class="product-card"></div> <div class="product-card"></div> <div class="product-card"></div> </div> </div> <div id="footer"> </div> </body> </html> //CSS /* *태그는 모든 선택자를 선택하는 것임 */ * { margin: 0; padding: 0; } body{ margin: 0; padding: 0; } #header{ height: 64px; display: flex; justify-content: center; border-bottom: 1px solid grey; } #body{ height: 100%; width: 1024px; margin: 0 auto; /* margin: 0 auto; 를 주면 부모로부터 스스로를 가운데 정렬 */ padding: 20px; } #footer{ height: 200px; background-color: red; } #banner{ height: 300px; } #banner > img { width: 100%; } #product-list{ display: flex; flex-wrap: wrap; margin-top: 12px; } #header-area{ width: 1024px;height: 100%; display: flex; align-items: center; /* header-area 아래에 속한 아이템들을 수직센터로 정렬. */ } #header-area > img { width: 128px; height: 36px; } #body >h1{ margin-top: 16px; } .product-card{ width: 180px; height: 300px; background-color: grey; border: 1px solid black; margin-bottom: 12px; margin-right: 12px; border-radius: 12px; overflow: hidden; } .product-img{ width: 100%; height: 210px; } .product-contents{ display: flex; flex-direction: column; padding: 8px; }
-
미해결웹 애니메이션의 새로운 표준, Web Animations API
Vue.js 적용 방법
안녕하세요. 강의 정말 재밌게 보았습니다 :)강의를 듣고 Vue2에 적용하려 하니 해당 에러가 발생합니다.js를 import해서 사용하는 것 만으로는 제약이 있는 것인가요..?😥😥
-
미해결웹디자인개발기능사 [2025년] 실기전체 A - F (카톡질문가능)
css로 메뉴 만드는 부분
안녕하세요? 강사님. 공부 중에 혹시 css로 메뉴 만드는 거 말고jquery로 메뉴 만드는 것도 가르쳐주시면 안될까요?물론 css가 쉽고 간편하지만 jquery도 알고 싶어 문의글 남깁니다. 확인부탁드립니다. 감사합니다:)
-
미해결웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)
실전사이트 제이쿼리소스
초반에 제이쿼리 소스를 넣을때 둘 중 하나만 언더바가 생겨요 ㅠㅠ
-
미해결카페 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 - F (카톡질문가능)
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 설치 후 파워쉘에서 검색하면 이렇게 나와요. 파워쉘 최신 버전 설치하라는 글씨도 보이는데, 파워쉘 최신 버전을 설치해야하나요?
