묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
영상 오류 확인 요청 드립니다.
섹션 14 5차_업데이트(고정된 섹션에 하위 섹션 올라오는 인터렉티브)ScrollTrigger 실무활용_ScrollTrigger Script적용영상 오류 확인 요청 드립니다.4분 37초 정도 부터 30분 50초 정도 까지 블랙 화면(소리 X)으로 나옵니다.확인 후 회신 부탁 드립니다.
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
궁금합니다
선생님 input 을 왜 display none을 해서 없애는 건가요?? 그리고 label span 안에 width: 100% height 2px background-color: #000 을 준 상태에서label span:nth-child(1){}label span:nth-child(2){}label span:nth-child(3){}각각 자식 span 안에 퍼센트만 쓰면 높이 2px 길이가 100% 인 검은색 이 들어가는건가요 ??
-
해결됨[코드캠프] 시작은 프리캠프
버튼이 안 눌려요
버튼이 눌리지가 않아요.그리고 game.js 코드부분에 Unknown word 맨 아래 선언 또는 문이 필요하다는 어떻게 해야하나요..?
-
미해결[코드캠프] 시작은 프리캠프
블록지정
이거 블록 지정 어떻게 하나요 자꾸 흰색만 또는 파란색만 떠서요 ㅠㅠㅠㅠㅠ 맥북입니다 ㅠㅠ...
-
미해결따라하며 배우는 HTML, CSS
css 질문 있습니다 !!
안녕하세요, 강사님유튜브 사이트 기본 구조 생성하기 파트에서 css를 작성할 때 margin: 0;margin-top: 0;margin-bottom: 0;과 같이 0값을 왜 따로 주시는 지 궁금합니다 !!
-
해결됨[코드캠프] 시작은 프리캠프
회원가입 과제 질문
* { justify-content: center; align-items: center; } .hr { width: 470px; height: 0.998px; flex-shrink: 0; background: #e6e6e6; } .bak { width: 670px; height: 960px; border-radius: 20px; border: 1px solid #aacdff; background: #fff; box-shadow: 7px 7px 39px 0px rgba(0, 104, 255, 0.25); } .h2 { width: 466px; color: #0068ff; font-family: Noto Sans CJK KR; font-size: 32px; font-style: normal; font-weight: 700; line-height: normal; } .email { width: 158px; height: 23.649px; flex-shrink: 0; color: #797979; font-family: Noto Sans CJK KR; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; } .name { width: 158px; height: 23.649px; } .pw { width: 158px; height: 23.649px; } .pw { border: 1px solid blue; } .button { border-radius: 10px; border: 1px solid #0068ff; background: #fff; width: 470px; height: 75px; flex-shrink: 0; } .check { color: #000; font-family: Noto Sans CJK KR; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; } <!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link href="./02-signup.css" rel="stylesheet" /> </head> <body> <div class="bak"> <h2 class="h2">회원 가입을 위해<br>정보를 입력해주세요</h2> <input class="email" type="text" placeholder="이메일" /><br /><br /> <input class="name" type="text" placeholder="이름" /><br /><br /> <input class="pw" type="password" placeholder="비밀번호" /><br /><br /> <input class="pw" type="password" placeholder="비밀번호 확인" /><br /><br /> <select> <option disabled="true" selected="true">지역을 선택하세요</option> <option>서울</option> <option>경기</option> <option>인천</option> </select> <br /><br /> <input class="radio" type="radio" name="gender" />여성 <input class="radio" type="radio" name="gender" />남성 <br /><br /> <input class="check" type="checkbox" /> 이용약관 개인정보 수집 및 동의 <hr class="hr"> <br> <br> <button class="button">가입하기</button> <!-- <input type="button" value="가입하기" /> --> </body> </div> </html> 코드 작성한 게 저렇게 화면이 보여지는데 가운데 정렬을 하려면 어떻게 해야될까여..... flex랑 just로 시작하는 속성을 넣으면 이상하게 되더라구요 너무 어렵네요 ㅠㅠ
-
미해결따라하며 배우는 HTML, CSS
자료 pdf 파일로 보내 주실수 있는지 질문드립니다.
제가 자료에 다가 필기를 하면서 공부를 하고 싶은데 pdf 로 파일이 다운이 안되는 파일들이 몇 있습니다. 혹시 보내주실수 있는지 질문드립니다. 이메일은 spiderspoder@naver.com
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
Y축 섹션 고정스크롤애니메이션 강의중
Y축 섹션 고정스크롤애니메이션 강의에서 스크롤을 올리면 border-radius준 영역 밖으로 bg가 보이는데 어떻게 없애면 될까요??
-
해결됨애플 웹사이트 인터랙션 클론!
[#svg, #이미지프레임과 텍스트 싱크] 스크롤 값에 움직이는 svg path, 이미지프레임과 텍스트 싱크 맞추는 것, 2가지 질문이 있습니다.
안녕하세요,유익하고 좋은 강좌 만들어주셔서 감사드립니다! 덕분에 브라우저 스크롤 애니메이션에 대한 개념이해를 갖게 됐습니다!. 이런 내용을 바탕으로 '미려한' 애니메이션을 만들고 싶은 욕심이 생겼는데요,해당 강좌를 시청하며 2가지 문의사항이 있습니다.감사합니다! #질문1. svg의 path의 생성하는 법, 만들어주신 강좌 중 svg 강의를 보면 아이디어를 얻을 수 있을까요?보너스로 추가해주신 아이패드 강좌 부분을 보면서, svg의 path를 커스텀으로 만들고 싶은 생각이 들었습니다. 아직 svg 로딩 강좌 섹션은 보지 못했는데, 혹시 인터렉티브 로드맵 중 svg강좌를 들으면, path를 만들 수 있는 힌트를 얻을 수 있을까요? 예를 들어 '안녕하세요 반갑습니다' 라는 svg를 브라우저 스크롤 하면서 하나씩 그려내고 싶습니다.#질문2. 3번째 섹션, 이미지프레임과 fixed된 텍스트들을 서로 싱크를 맞추려면, 어떻게 한땀한땀 해야할까요?강좌에서 공부한 스크립트와 마크업/스타일을 바탕으로, 새로운 애니메이션을 만들때, 이미지/비디오 프레임과 fixed된 텍스트를 서로 싱크 맞추는 요령? 방법?이 무엇이 있을까요? 혹시 이미지 애니메이션을 완성하고, 수작업으로 텍스트의 fixed위치를 변경하면서, 수치를 정하는건가요?
-
해결됨[코드캠프] 시작은 프리캠프
복사붙여녛기가 끝인데
피그마 css에 나오는 부분을 복사붙여넣기 하면 끝인데 과제라는 의미가 있나요? 복붙만 하는 건데 도움이 되는 건가요?
-
미해결처음 만난 리액트(React)
여기서 백틱으로 감싸주는 이유가 궁금합니다.
const Wrapper = ~~~ 아래에 백틱으로 감싸주는 이유가 궁금합니다.그리고 왜 저는 강사님처럼 안나오고 전부 붉게 나올까요..?
-
미해결실전! 웹사이트제작! Step by Step! ('크루알라모드'_반응형웹 제작)
수업자료 오류
안녕하세요.수업자료 다운시 내용이 없습니다.압축폴더가 올바르지 않다며 풀리지도 않습니다.jaja29@naver.com으로 보내주실 수 있을까요?
-
미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
섹션12 보너스 챕터에 관한 질문입니다!
섹션12에서 텍스트가 나타나고 사라지는 인터렉션에서 처음 텍스트를 스크롤 하지 않고 처음 텍스트만 보이다가 스크롤이 시작되고 나서 사라지고 다음텍스트가 보이게 하려면 어떻게 코드를 작성해야할까요?
-
미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
결과 계산하기에서 콘솔이 다르게 찍힙니다.
다른 분들도 비슷한 오류가 있었는데 봐도 해결이 안되어서 질문드립니다.현재 결과 계산하기 파트에서 오류가 생겨 이후 강의는 작성하지 않은 상태입니다. 질문1goResult 함수에서 const select = [] 로 정의된 변수를 실행시키니 0번 인덱스가 비어있음으로 뜹니다. 어떻게 해야 첫번째 인덱스도 함께 나올수 있을까요?function goResult(){ qna.style.WebkitAnimation = "fadeOut 1s" qna.style.animation = "fadeOut 1s" setTimeout(() => { result.style.WebkitAnimation = "fadeIn 1s" result.style.animation = "fadeIn 1s" setTimeout(() => { qna.style.display = "none"; result.style.display = "block"; }, 450) }) console.log(select) calResult() }function goNext(qIdx){ if(qIdx === endPoint){ goResult() return } let q = document.querySelector(".qBox"); q.innerHTML = qnaList[qIdx].q; for (let i in qnaList[qIdx].a){ addAnswer(qnaList[qIdx].a[i].answer, qIdx, i); }; let status = document.querySelector(".statusBar") status.style.width = (100/endPoint) * (qIdx+1) + "%" } 질문 2calResult 함수에서 console.log(resultArray)를 찍으니 아무것도 나오지 않습니다.어디서부터 잘못된지 모르겠습니다..ㅠ function calResult() { let pointArray = [ { name: "mouse", value: 0, key: 0 }, { name: "cow", value: 0, key: 1 }, { name: "tiger", value: 0, key: 2 }, { name: "rabbit", value: 0, key: 3 }, { name: "dragon", value: 0, key: 4 }, { name: "snake", value: 0, key: 5 }, { name: "horse", value: 0, key: 6 }, { name: "sheep", value: 0, key: 7 }, { name: "monkey", value: 0, key: 8 }, { name: "chick", value: 0, key: 9 }, { name: "dog", value: 0, key: 10 }, { name: "pig", value: 0, key: 11 } ]; for (i = 0; i < endPoint; i++) { let target = qnaList[i].a[select[i]]; for (j = 0; j < target.type.length; j++) { for (k = 0; k < pointArray.length; k++) { if (target[j] === pointArray[k].name) { pointArray[k].value += 1; } } } } let resultArray = pointArray.sort(function (a, b) { if (a.value > b.value) { return -1; } if (a.value < b.value) { return 1; } return 0; }); console.log(resultArray); let resultword = resultArray[0].key; return resultword; } 소스 코드만 보내드리면 보시기 힘들어하시는것같아 깃 파일도 같이 첨부하였습니다!https://github.com/kihet77/psychologyTestWeb/tree/main/MyMBTI-main/start
-
미해결처음 만난 리액트(React)
chap05) 저는 왜 폰트가 사진에 딱 붙어서 나올까요?
CSS 코드는 올바르게 짠 것 같은데저는 사진에 착 달라붙어서 폰트가 출력되네요..뭐가 문제일까요?
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
트리거메뉴 제이쿼리
<!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'> <title>DesignWorks Architecture Agency</title> <!-- Page Scroll Effects JS & CSS --> <script src="/js/jquery-2.1.4.js"></script> <script src="js/velocity/modernizr.js"></script> <script src="js/velocity/velocity.min.js"></script> <script src="js/velocity/velocity.ui.min.js"></script> <script src="js/velocity/main.js"></script> <link rel="stylesheet" href="/js/velocity/velocity.css"> <!-- Custom JS & CSS --> <script src="/custom.js"></script> <link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/reponsive.css"> </head> <!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax --> <body data-hijacking="on" data-animation="rotate"> <div class="container"> <section class="cd-section visible" id="home"> <div> <div class="content"> <img src="/images/temp-section-01.jpg"> </div> </div> </section> <section class="cd-section" id="about"> <div> <div class="content"> <img src="/images/temp-section-02.jpg"> </div> </div> </section> <section class="cd-section" id="project"> <div> <div class="content"> <img src="/images/temp-section-03.jpg"> </div> </div> </section> <section class="cd-section" id="plan"> <div> <div class="content"> <img src="/images/temp-section-04.jpg"> </div> </div> </section> <section class="cd-section" id="awards"> <div> <div class="content"> <img src="/images/temp-section-05.jpg"> </div> </div> </section> <section class="cd-section" id="location"> <div> <div class="content"> <img src="/images/temp-section-06.jpg"> </div> </div> </section> <section class="cd-section" id="content"> <div> <div class="content"> <img src="/images/temp-section-07.jpg"> </div> </div> </section> <header> <div class="gnb-inner"> <div class="logo"> <a href="#none"><img src="/images/logo.png"></a> </div> <div class="gnb"> <div class="menu"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#project">Project</a> <a href="#plan">Plan & History</a> <a href="#awards">Awards</a> <a href="#location">Location</a> <a href="#contact">Contact</a> </div> <div class="slogan">We design places, not projects.</div> </div> <div class="trigger"> <span></span> <span></span> <span></span> </div> </div> </header> </div> <nav> <ul class="cd-vertical-nav"> <li><a href="#0" class="cd-prev inactive">Next</a></li> <li><a href="#0" class="cd-next">Prev</a></li> </ul> </nav> </body> </html>@media (max-width: 768px) { /* Entire Layout */ .cd-section { height: auto; } .cd-section > div { height: auto; } .content { position: static; width: 100%; height: 100%; } /* Header */ .menu { display: block; } .slogan { display: none; } .gnb { background-color: #fff; position: fixed; top: 0; right: -270px; width: 250px; height: 100vh; box-shadow: -5px 0 10px #0000002a; transition: 0.3s; } .gnb.active { right: 0; } .menu { line-height: 40px; margin-top: 60px; } .menu a { display: block; text-align: right; padding-right: 20px; color: black; font-size: 20px; } /* Trigger */ .trigger { display: block; width: 24px; height: 14px; position: absolute; right: 20px; top: 20px; } .trigger span { position: absolute; height: 1px; width: 100%; background-color: black; transition: 0.3s; } .trigger span:nth-child(1) { top: 0; } .trigger span:nth-child(2) { top: 50%; width: 90%; } .trigger span:nth-child(3) { top: 100%; } .trigger.active span:nth-child(1) { top: 50%; transform: rotate(45deg); } .trigger.active span:nth-child(2) { top: 50%; width: 90%; opacity: 0; } .trigger.active span:nth-child(3) { top: 50%; transform: rotate(-45deg); } }$(function(){ /* Trigger */ $('.trigger').click(function(){ $(this).toggleClass('active') $('.gnb').toggleClass('active') }) $('section, .menu a').click(function(){ $('.gnb').removeClass('active') }) }) 모바일에서 트리거메뉴 클릭시 제이쿼리(아이콘X로 변경 슬라이더메뉴 나오기)가 적용되지 않는데 왜 이럴까요 ㅠ 클레스네임부분에서 틀린게 없습니다
-
해결됨처음 만난 리액트(React)
알림이 1초마다 두 개씩 뜹니다.
분명히 코드를 그대로 따라 쳤는데 1초에 두 번씩 알림이 나오는 경우도 존재하나요?Warning: Each child in a list should have a unique "key" prop. 오류도 떴습니다. 각각 notification.jsx, notificationList.jsx 코드입니다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 Notificationimport React from 'react' import Notification from './notification' const reservedNotifications = [ { message: '안녕하세요, 오늘 일정을 알려드립니다.' }, { message: '점심식사 시간입니다.' }, { message: '이제 곧 미팅이 시작됩니다.' }, { message: '안녕하세요, 오늘 일정을 알려드립니다.' }, { message: '점심식사 시간입니다.' }, { message: '이제 곧 미팅이 시작됩니다.' }, { message: '안녕하세요, 오늘 일정을 알려드립니다.' }, { message: '점심식사 시간입니다.' }, { message: '이제 곧 미팅이 시작됩니다.' }, { message: '안녕하세요, 오늘 일정을 알려드립니다.' }, { message: '점심식사 시간입니다.' }, { 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) } }, 1000) } render() { return ( <div> {this.state.notifications.map(v => { return <Notification message={v.message}/> })} </div> ) } } export default NotificationList
-
미해결SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
figma 파일 임포팅이 되지 않습니다.
beyond insight > 피그마 원본 > 수강생 참고자료, 파일 임포팅이 되지 않습니다 ㅜ 파일명이 수강생 참고자료(Beyond Insight).fig..fig..fig 입니다.
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
트리거메뉴 제이쿼리
모바일에서 트리거메뉴 클릭시 제이쿼리(아이콘X로 변경 슬라이더메뉴 나오기)가 적용되지 않는데 왜 이럴까요 ㅠ 클레스네임부분에서 틀린게 없습니다
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
선생님 궁금합니다
■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. input type=radio 는 어차피 화면에 안보이게 할껀데왜 작성하나요? 화면에 보이는건 label만 인 것 같은데 궁금합니다!
