묻고 답해요
160만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결따라하며 배우는 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만 인 것 같은데 궁금합니다!
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
개별페이지 HTML+CSS+JS 퍼블리싱(프리로딩)에서 배경 이미지 관련 질문
안녕하세요.모바일 웹 퍼블리싱 수업을 차근차근 잘 듣고 있습니다.강의 중간중간 설명해주시는 부분이 많은 도움이 되고 있습니다. ^^오늘 프리로딩 퍼블리싱 파트를 들었는데요,배경 이미지가 피그마에서 완성한 디자인과 배율이 달라보이는데 이 부분을 효과적으로 조절하려면 css background 에서 어떻게 조절하면 좋은지 궁금합니다.
-
미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
5-3-1 강좌 섹션 질문 합니다.
안녕하세요, 수식 설명 강좌까지도 몇번이고 돌려봐도, 브러우저 스크롤 관점에서도, 애니메이션되는 요소 관점에서도 당최 명확하게 이해가 되지 않아서요,브라우저 스크롤 애니메이션 관련해서 이 강좌만큼 자세한 내용의 것이 없어서, 꼭 이해하고 싶어 이렇게 문의 드립니다.제가 이해한 것은1. 요소의 offsetTop과 scrollTop 값을 통해서 계산한 위치값 포인트에서, 모든 애니메이션이 시작한다(모든 애니메이션의 시작)2. 패럴럭스 애니메이션을 위해서, 해당 이미지가 일어날 섹션이 아닌, 그 위의 섹션 위치에서 애니메이션을 실행한다.3. 값은 1000이든 2000이든 어떤 값에서 0으로 줄어드는 로직으로 계산한다.이 세가지 내용입니다. parallaxThisTop = winScrollTop - parallaxOffsetTop; //패럴럭스가 시작될 위치값을 구함.해당 구문 이후로는 계속 이해가 가질 않아서요 텍스트로 길게 장황하게 라도 설명해주시면, 작성해주신 텍스트 내용 안에서 다시 이해해보는데 큰 도움이 될 듯합니다. 감사합니다.var parallaxSpeed = 1200; // 패럴럭스 요소의 스피드[질문]parallaxSpeed를 거리라고 강좌에서 말씀해주셨는데, 1200로 초기화 될 때, 이때 1200이란 어디를 start로, 기준으로 해서 이미지 요소가 반응하는 걸까요?숫자 1200은 브라우저를 스크롤 할 경우, 이미지 요소들이 반응?하기까지의 간격, 거리 라고 이해하고 있습니다.혹시 이 1200이란 숫자가 작동하기 시작하는 출발점이 parallaxThisTop인가요?거리라고 말씀하셨는데, parallaxSpeed 어디에서 어디까지의 거리를 의미하는지 궁금합니다.parallaxPercent = parallaxThisTop / parallaxSpeed * 100; // 이동할 거리 백분율 값을 담음[질문]여기서 이동할 거리가 브라우저 스크롤를 할 수 있는 거리라는 의미일까요?,이동하는 거리라면, 어디를 출발점으로 시작되는 간격(거리)일까요?강의에서 말씀하시는 거리라는 의미가 브라우저가 스크롤되는 거리와 이미지 요소가 반응하는 거리를 구분해서 의미하면 될까요var parallaxStartValue = 1000; //패럴럭스요소가 200 위치에서 시작하도록 설정합니다.[질문]패럴럭스 요소라 함은 이미지 요소라고 이해하고 있는데요, 200 위치라고 하는 게 어디를 시작점으로 200만큼 y축 아래로 내려온 것인가요?변수명의 의미와 용도에 대해서 다시 한번 설명 해주실 수 있을까요?패럴럭스가 시작할 위치라고 강좌에서 설명해주셨는데요, parallaxThisTop도 패럴럭스가 시작된 위치인 것과 어떤 차이점이 있는지요?var parallaxSpeed = 1200; // 패럴럭스 요소의 스피드var parallaxMoveDistance; // 패럴럭스 요소가 움직일 거리를 담을 변수 선업합니다[질문]첫번째 변수(parallaxSpeed)를 강좌에서 거리라고 설명해주셨는데, 변수명 parallaxMoveDistance의 거리랑 각각 어떤 다른의미의 거리인가요?parallaxPercent = parallaxThisTop / parallaxSpeed * 100; // 이동할 거리 백분율 값을 담음parallaxMoveDistance = Math.max(parallaxStartValue - parallaxStartValue, Math.min(parallaxStartValue, parallaxStartValue - (parallaxStartValue * (parallaxPercent/100)))); //패럴럭스 요소가 움직일 거리를 구함[질문]parallaxPercent는 브라우저의 스크롤되는 거리는 구하는 것이고,parallaxMoveDistance는 브라우저 스크롤 할때, 패럴럭스 되는 요소의 거리를 구하는 것인지요? 모든 변수명에 para~가 있어서 어떤 요소의 거리를 의미하는지 헷갈립니다.
-
해결됨[코드캠프] 강력한 CSS
섹션 5. position 강의 중 absolute와 relative의 사용법에 대한 질문 있습니다!
제가 06-04-z-index 실습을 진행하다가 position 속성에 대해 의문이 들어서 글을 쓰게 됐습니다. <body> <div class="container"> <div class="item item1"> z-index: 4 </div> <div class="item item2"> z-index: 2 </div> <div class="item item3"> z-index: 1 </div> <div class="item item4"> z-index: auto </div> </div> </body>.container { width: 100%; height: 400px; border: 2px solid blue; padding: 30px; } .item { width: 160px; height: 140px; border: 2px solid black; background: #dddddd; } .item1 { position: relative; z-index: 4; } .item2 { position: absolute; top: 70px; left: 70px; z-index: 2; }제가 추가적으로 웹 서핑을 통해 position: absolute와 position: relative의 차이를 공부하였고 'absolute'는 "가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치합니다. 단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼습니다."의 특성을 가진다는 것을 학습하였습니다. 그런데 item1의 css 코드에 position:relative가 부여되는 것에 대해 강사님께서 item1이 기준이 된다고 말씀하셔서 item2가 상위 요소인 container가 아닌 item1을 기준으로 한 것인가 생각이 들었는데, 웹페이지의 배치를 보니 item2는 container를 기준으로 한 것으로 보입니다. 그래서 item1이 "기준"이 되게 한다는 설명이 어떤 요소의 기준이 되는 것인지 자세히 알고 싶어 질문 드립니다! 참고로 해당 부분은 position 강의 21분경에 언급되었습니다
-
미해결[웹 개발 풀스택 코스] HTML&CSS 기초
spellcheck true 밑줄이 안생겨요
spellcheck 를 true로 놓고 저장해도 밑줄이안생겨요
