묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
id 태그 질문입니다.
안녕하세요 그랩님. 강좌 잘 듣고 있습니다. 제가 id값을 동일하게 지정해도 한 id값만 적용된다고 배웠는데, 실제로 해 보니 동일한 id값을 갖는 모든 텍스트가 색이 변했습니다. 이렇게 된다면 id와 class에 차이가 없는 것 아닌가요?? --------코드---------- <html> <head> <style type="text/css"> p { color: orange; } #id-test { color: skyblue; } .love { color: #BA68C8; font-size: 100; font-weight: 900; } .love2 { color: #00AAFF; font-size: 100; font-weight: 900; } </style> </head> <body> <p>Hello</p> <p>Hello!</p> <div id="id-test">id</div> <div id="id-test">id</div> <div class="love">class</div> <div class="love2">class</div> </body> </html>
-
해결됨[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
결과 값이 계속 1번만 출력이 됩니다. 수정해도 오류만 뜨네요
사용자 응답 사진으로 구현하기를 만들고 있는데 2번째 질문에서 이미지를 누르면 이런 에러가 뜹니다. function ImageFadeOut(qIdx, idx) { var left = document.querySelector('.leftImage'); var right = document.querySelector('.rightImage'); left.disabled = true; left.classList.remove("fadeIn"); left.classList.add("fadeOut"); right.disabled = true; right.classList.remove("fadeIn"); right.classList.add("fadeOut"); setTimeout(() =>{ if(qIdx+1 === endPoint) { goResult(); return; } else { setTimeout(() => { var target = qnaList[qIdx].a[idx].type; for(let i = 0; i < target.length; i++){ select[target[i]] += 1; } goNext(++qIdx); },300); } },300) } setTimeout 안에 있는 var target = qnaList[qIdx].a[idx].type에서 type을 빼면 결과 값이 출력이 되지만 첫번째 결과값만 출력이 되고 배열도 [0,0,0,0,0,0]으로 출력이 됩니다. data.js는 아무 이상이 없어 보이는데 뭐가 문제일까요
-
미해결애플 웹사이트 인터랙션 클론!
main-add.js 코드 오류 있습니다. 이거 보고 수정하세요
main-add.js 내용 적용했는데 section-2 부분의 messageC부분이 section3까지 넘어가서 뭔가 이상하다고 생각했습니다. 실제로, 강의 영상에 나온 것이랑 값이 차이나서 수정한 부분 올립니다. sceneInfo의 section2부분의 value만 변경해주시면 됩니다. values: { messageA_translateY_in: [20, 0, { start: 0.15, end: 0.2 }], messageB_translateY_in: [30, 0, { start: 0.5, end: 0.55 }], messageC_translateY_in: [30, 0, { start: 0.72, end: 0.77 }], messageA_opacity_in: [0, 1, { start: 0.15, end: 0.2 }], messageB_opacity_in: [0, 1, { start: 0.5, end: 0.55 }], messageC_opacity_in: [0, 1, { start: 0.72, end: 0.77 }], messageA_translateY_out: [0, -20, { start: 0.3, end: 0.35 }], messageB_translateY_out: [0, -20, { start: 0.58, end: 0.63 }], messageC_translateY_out: [0, -20, { start: 0.85, end: 0.9 }], messageA_opacity_out: [1, 0, { start: 0.3, end: 0.35 }], messageB_opacity_out: [1, 0, { start: 0.58, end: 0.63 }], messageC_opacity_out: [1, 0, { start: 0.85, end: 0.9 }], pinB_scaleY: [0.5, 1, { start: 0.5, end: 0.55 }], pinC_scaleY: [0.5, 1, { start: 0.72, end: 0.77 }], pinB_opacity_in: [0, 1, { start: 0.5, end: 0.55 }], pinC_opacity_in: [0, 1, { start: 0.72, end: 0.77 }], pinB_opacity_out: [1, 0, { start: 0.58, end: 0.63 }], pinC_opacity_out: [1, 0, { start: 0.85, end: 0.9 }], },
-
해결됨반응형 웹사이트 포트폴리오(Architecture Agency)
전체 레이아웃 와이어프레임 퍼블리싱(PC) - 전체레이아웃, 헤더영역
19분40초 overflow: hidden; 을 적용 하였으나, 여전히 이미지가 맞춰지지 않습니다. ㅠㅠ 그래서 .content > img { position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); } 을 적용 시켜서 이미지를 맞췄습니다. 하지만 다음 강의 모바일편에서 @media 를 적용시키니 이미지가 나오지가 않습니다.
-
미해결자바스크립트 제대로 배워볼래?
script 부분의 주석이 자꾸 //로 처리되지 않고 <!-- -->로 처리됩니다
수업과는 조금 관계없는 질문인데 한번에 여러줄 주석처리할 때마다 너무 불편해서요 ㅠㅠ script 태그 내인데도 ctrl + / 누르면 자꾸 <!-- --> 이렇게 주석처리가 됩니다 심지어 그러고도 빨간줄이 떠요 (...) 강사님께서 하시는 것처럼 //로 주석처리되게 하는 방법이 있을까요?
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
화면을 부드럽게 이동하는 scrollTo 제이쿼리에 대해서
코딩웍스 선생님 강의에서, 특정 버튼 클릭시 지정된 섹션으로 화면을 부드럽게 이동시켜주는 제이쿼리 플러그인으로 jquery.scrollTo.min.js라는 js 파일을 올려주시고 연결(<script src...>)시키는법을 알려주셨는데요. 그 후 적용해보는 강의 파트에서, 선택자에 명령어를 입력할때, $('선택자').click(function (e) { $.scrollTo(this.hash || 0, 900) }) 이렇게 써주시면서 , "이건 플러그인 제작자가 정한 공식이니 따라치면 된다." 라고만 설명하고 넘어가셨습니다. 여기서 $.scrollTo(this.hash || 0, 900)이 공식을 어디서 찾아낸 것인지 알고 싶은데 어떻게 찾아야 할까요? 욕심으로는 이것저것 다 물어보고싶긴 합니다만... - $뒤에 선택자가 없는 이유 - hash 는 무엇인지 - || 0, 900 는 무엇인지 ... 뿐만 아니라 다른 제이쿼리 플러그인들도 각각의 공식이 있을 것 같은데, 그걸 어떻게 찾아서 써야 하는 것일지 모르겠습니다!
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
application 에러가 발생하는 이유가 뭘까요...
heroku에 서버 배포한 후 링크에 접속하면 application error라는 화면과 함께 heroku logs --tail라는 명령어를 사용해 에러내역을 확인할 수 있다는 설명이 나오는데요 명령어를 치면 아래와 같은 에러 로그가 나옵니다.. at=error code=H10 desc="App crashed" method=GET path="/" 여기저기 찾아보면서 package.json scripts에 heroku-postbuild 추가하기 package.json engine에 node와 npm 버전을 입력하기 heroku 빌드팩 변경하기 heroku restart하기 procfile 생성하여 web:node index.js 입력하기 이외에도 여러 방법을 다 시도해봐도 해결이 안되네요...
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
코드 오류
안녕하세요 선생님.. 밑에 사진을 보면 알 수 있겠지만 선생님이 이 전 강의에서 예시로 작성하신 코드에다가 <Script ~~ /> 이 태그를 복습 겸해서 다시 사용해볼려고 했는데 사진처럼 Script로 다른 Aleart("~");이 있는 JS파일을 불러와서 저장하고 브라우저에서 봤는데 아무것도 안뜨고 하얀 화면 밖에 없는데 코드에 무슨 오류가 있길래 실행이 안되는 거에요ㅜㅜ?
-
미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
프로그레스바 로직 질문있어요....
ㅠ.ㅠ 저만 이해못하는지 질문이없네요.. 엔드포인트로 나누어서 인덱스+1 곱하시는 로직이 어떤 원리인지 궁금함미다...
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
TEST 폴더는 뭐죠?
grab-market-web 폴더에서 TEST로 바뀌었는데 TEST폴더로 시작하나요? npm install 다시 해야 하나요?
-
미해결인터랙티브 웹 개발 제대로 시작하기
-2550px 0 에 대한 제가 이해한 내용 그림으로 공유할게요!
제가 처음에 이해못할 때는 "보는 시각이 바뀌는거 아닌가?" 라고 생각하면서 첫번째 그림처럼 접근했어요. 이해가 됐을 때는 두번째 그림처럼 그림이 움직인다고 접근해서 이해했습니다. 두번째 그림의 부가설명을 하자면 처음 그림 포지션은 0 0 입니다. 1step -150px 0 만큼 그림이 왼쪽으로 움직입니다. 2step -150px 0 만큼 그림이 또 움직입니다 (총 -300px 0) ~~~~ 17step -150px 0 만큼 그림이 움직인다. (총 -2550px 0) 틀릴 수도 있습니다. 근데 전 이렇게 접근해보려구요!
-
미해결웹퍼블리셔가 알려주는 실무 웹사이트 따라만들기 Season1
default.css 가 적용이 안되요 ㅜㅜ
안녕하세요~ 선생님 블로그에서 default.css를 다운받아 <link rel="stylesheet" href="C:\Users\ASUS\Desktop\homepage\default.css"> <link rel="stylesheet" href="C:\Users\ASUS\Desktop\homepage\index.css"> 이렇게 html에 붙여넣기 했는데요 파일명은 속성-보안-개체이름에서 확인했습니다. index.css는 적용이 되는데 어째서인지 default.css는 적용이 안되네요 ㅜㅜㅜㅜㅜ 왜그럴까요 좀 알려주세요 ㅜㅜ
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
slick이 작동되지 않는 문제
안녕하세요, 슬릭 슬라이더가 작동되지않고 jQuery.Deferred exception: $(...).slick is not a function TypeError: $(...).slick is not a function 이런 메세지가 나오는데요... 첨부해주신 단계별 코드를 보면서 하나하나 다 비교도 해보고 slick js, css 파일도 옮겨서 덮어써보고, jquery도 최신으로 바꿔봐도 슬릭 슬라이더만 작동이 되지 않는데 왜 그런 걸까요? index.html <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DesignWorks Architecture Agency</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- Page Scroll Effects JS & CSS --> <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"> <!-- Smooth Scrolling --> <script src="js/jquery.scrollTo.min.js"></script> <!-- Slick.js --> <link rel="stylesheet" href="js/slick/slick.css"> <link rel="stylesheet" href="js/slick/slick-theme.css"> <script src="js/slick/slick.min.js"></script> <!-- Custom JS & CSS --> <script src="custom.js"></script> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="responsive.css"> <script src="https://kit.fontawesome.com/62a31d096f.js" crossorigin="anonymous"></script> </head> custom.js $(function(){ // Trigger $('.trigger').click(function(){ $(this).toggleClass('active') $('.gnb').toggleClass('active') }) $('section, .menu a').click(function(){ $('.gnb').removeClass('active') $('.trigger').removeClass('active') }) /* Smooth Scrolling */ $('.menu a, .gototop').click(function(e){ $.scrollTo(this.hash || 0, 900) }) // Change CSS with Scroll $(window).scroll(function(){ if($(window).scrollTop() > 50) { $('header, .gototop').addClass('active') } else { $('header, .gototop').removeClass('active') } }) // slick.js : history $('.history-slider').slick({ dots: true, infinite: false, speed: 300, slidesToShow: 4, slidesToScroll: 2, }) // slick.js : project photo $('.project-photo').slick({ dots: true, infinite: true, speed: 500, fade: true, autoplay: true, autoplaySpeed: 2000, cssEase: 'linear' }) })
-
미해결나만의 포트폴리오 블로그 만들기(feat. 티스토리 스킨)
티도리 버전 확인이 안됩니다.
티도리 설치되어 있는 디렉토리에 들어간다음 tidory --version을 쳤는데 오류메시지만 나옵니다. npm install은 잘 됬는데 왜 이런거죠?
-
미해결초보자를 위한 HTML 기초
dialog 미지원 브라우저를 위한 fallback 관련 질문입니다
만약, dialog를 사용할 경우, 미지원 브라우저를 위한 fallback을 사용하면 된다고 하셨는데, 혹시 코드로 예시를 알려주실 수 있나요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
자막...
질문은 아니고 이번 강의 안에 들어가는 자막에 유독 오타도 많고 크기가 커서 수정이 필요해보입니다.
-
해결됨애플 웹사이트 인터랙션 클론!
비디오에 맞춰 텍스트가 나타나는 타이밍 질문입니다
안녕하세요 선생님 강의 잘 듣고있습니다!! 다름이 아니라 스크롤 섹션 2의 경우에는 비디오 타이밍에 맞춰 텍스트가 나오는데 그 타이밍 설정은 직접 콘솔로 scrollRatio 값을 확인해가면서 정하면 되는걸까요??
-
해결됨애플 웹사이트 인터랙션 클론!
스크롤 이벤트 시작하는 위치 질문입니다
안녕하세요 선생님 강의 잘 듣고 있습니다. 다름이 아니라 스크롤 이벤트를 시작하는 위치 구하는 부분에서 이벤트가 실행될 scroll-section의 offsetTop으로 구하는 것과 이벤트가 실행될 scroll-section 위에 존재하는 scroll-section들의 높이 합으로 구하는 것이 차이가 있는지 궁금합니다.
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
안녕하세요 선생님 let , const 질문있습니다
안녕하세요 선생님 강의 너무 잘듣고있습니다. 다름이 아니라 지난 강의에서 와 이번강의를보고 let 과 const 는 블록스코프 할당시 사용하고 const는 상수처럼 한번 초기화되면 재 초기화 할수없다는것도 알겠습니다. 그런데 언제 let 을 쓰고 const 를 써야하는 지 감이오질않습니다 .. 그냥 let으로 코드를 다짜버리면 불이익이나 메모리 측면에서 손해가 있을까요? 죄송스럽지만 언제 let 을쓰고 const 를 써야하는지 예시를 부탁드려도 될까요? 감사합니다 :)
-
해결됨인터랙티브 웹 개발 제대로 시작하기
클릭 이벤트 질문입니다.
안녕하세요, 선생님^^ 이번 강의에서 나온 기능을 활용해서 버튼을 누르면 버튼과 상자의 색이 바뀌는 기능을 만들어봤는데요. 버튼과 박스를 하나의 부모 요소에 포함시키지 않으니 currneItem 변수를 할당하는 것이 너무 어렵습니다ㅜㅜ https://jsfiddle.net/yfrhv1u5/8/ 위의 코드와 같이하면 currentItem에 btn이 box로 재할당 되어서 원하는 기능 구현이 되지 않고 https://jsfiddle.net/ywmpLdvc/5/ 위의 코드와 같이 currentItems를 배열로 만들어서 값을 저장하면 원하는 기능이 구현은 되는데 active, inative 함수로 분리하는 방법을 모르겠습니다ㅜㅜㅜ 혼자 고민해봐도 모르겠어서 질문 드립니다.ㅜㅜ 답변 주시면 감사하겠습니다
