173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.01
vs코드에서 코드를 입력하고 확인을 해보면 강사님 영상처럼 자연스럽지가 않고 .... gsap . to ( '.box' ,{ y: - 200 , stagger: 0.5 }); 예를 들어 위에처럼 소스 입력하면 5개의 컬러박스가 있으면 강사님 영상에서는 첫번째것부터 차례대로 stagger가 되는데요, 근데 제가 확인을 할땐 첫번째 박스는 이미 위에 올라가있는 상태고 2번째거 올라가는걸로 확인이 됩니다. 아래 비슷한 질문이 있어서 함수로도 해보고 duration 을 해봐도 동일해서....
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
잊어버리고 있다 다시 시작 할려는데 교제를 찾을수 없네요.. car4000@naver.com 아니면 다운 받는곳이 있나요?
미해결
웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)
안녕하십니까? 강사님. 다름이 아니라 F1 실무코드로 변경해서 만드신 코드도 한번 보고 싶은데... 가능할까요? 파일 있으시다면 업로드 시켜주시면 감사하겠습니다:)
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
.container{} .container>div{} .container{}만 하고 .container>div{} 는 하지 않는 경우도 있고 .container>div{} 를 하는 경우도 있는데 .container>div{} 어떤 경우에 해야 합니까?
미해결
Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
안녕하세요. 요즘에 'aws lightsail 로 프로젝트 옮기기'를 듣고 있습니다. 거기서 블로그 글을 참고하라고 하셔서, 블로그를 들어갔더니, 해당 블로그 게시판이 작동하지 않습니다. 확인 부탁드려도 될까요? 감사합니다.
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
강의에서처럼 선 안쪽경계에 자식요소가 부모요소 너비만큼 이동했을때 선안쪽경계에 붙는게 아니라 예제처럼 선바깥쪽경계에 딱 붙게하려면 어떻게 하는게 가장 좋은 방법인가요? 같은 질문이 있긴한데 border-box를 줘도 선두께만큼 배치한 자식요소도 같이 따라 가서 결국 똑같이 되서요
미해결
웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)
강사님. F1 메뉴 제이쿼리 로 제작된 파일은 업로드 되지 않아 혹시나 싶어 문의글 남깁니다^^;;
해결됨
[코드캠프] 시작은 프리캠프
수업에서 그 회원가입 페이지 만들고 다음 날에 다시 켜니까 코드는 바뀐게 전혀 없고 잘 저장되어 있는데 페이지에 다시 들어가니까 글씨가 이상한 말로 적혀있어요! 근데 또 빨간 테두리는 잘 반영이 됩니다… 뭐가 문제인가요???!
미해결
웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)
.slide {width: calc(100% - 600px); 라고 되어 있는데 %를 사용하려면 html, body{height:100%;} 코드를 작성해야 되지 않나요? 왜 슬라이드에서 % 사용이 가능한지 궁금합니다. 추가적으로 width: 100vw - 600px 는 사용이 불가 한지 알고싶습니다. 강사님께서 픽셀이야기를 하시긴 했는데 이해가 안되어서... 비율과 정확한 단위 이야기 인건지... 질문남깁니다.
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
위처럼 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
안녕하세요. 강의 정말 재밌게 보았습니다 :) 강의를 듣고 Vue2에 적용하려 하니 해당 에러가 발생합니다. js를 import해서 사용하는 것 만으로는 제약이 있는 것인가요..? 😥 😥
미해결
웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)
안녕하세요? 강사님. 공부 중에 혹시 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)
안녕하세요 강의 감사히 잘 듣고 있습니다. 다름이 아니라 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)
안녕하세요 onClickItem에서 (item) 이 데이터를 어디서 가져오는지 이해가 가지 않아서요,, item이라고 명시된 값이 없는데 item을 어떻게 사용하는 건가요..???
미해결
처음 만난 리액트(React)
index.js NotificationList.jsx 에러코드 화면 오타 확인도 해봤는데 아무리봐도 에러가 왜 나는지 못찼겠습니다.
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
이미지가 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년] 실기전체 (카톡질문가능)
header nav li .lnb{position: absolute; width: 200px; background: #000; height: 0; overflow: hidden; transition: .3s; z-index: 5;} 안녕하세요? 선생님. 다름이 아니오라 실습하면서 A-3 유형 코드에 z-index 속성이 빠져 있어서 제가 추가 해보니 슬라이드 위로 메뉴가 보입니다. 확인 부탁 드립니다.
미해결
중상급 퍼블리싱을 위한 CSS3의 모든 것
선생님, 제가 괄호 사용 코드에 대해 아직 지식이 부족해서 이 부분을 이해를 못한 것 같아 질문 드립니다. input에 공통적인 css를 입력하는건데 [] 를 써서 각각의 이름을 입력 해야 하는 이유가 있을까요? 뒤에 대괄호를 사용하지 않아도, 라이브창에 보이는 효과는 같은 것 같아서요!
