선생님 질문이 있습니다. 가상요소선택자를 이용해서 learn to html 옆에 타이핑바를 생성한 부분에서 top 값을 지우면 아래로 넘어가더라구요 여기서 질문이 있습니다. 1. display:block 으로 속성을 넣은 빈칸이 아래로 내려가면 다음 block 요소의 p태그 sucoding... 부분도 아래로 내려가야 하는거 아닌가요??? 내려가지 않고 겹쳐지던데 왜 그런건가요??? 2. 동일한 부분에서 선생님께서는 dynamic이라는 아이디 값에 가상요소선택자를 지정하셨는데 혼자 공부하면서 클래스에 적용해도 문제가 없어보이더라구요. 단지, 자바스크립트를 사용해야하기 때문에 그냥 id 값에 걸어주신건가요???
감사함에 머리 박고 갑니다. js 기초 문법 위주로 배웠는데 역시 실습이 재밌네요.. 자바스크립트에서 함수로 돌리는게 정말 단순한걸 반복하게 만드는 작업이군요. 이런 양질의 영상 많이 만들어주세요.! 그리고 js에서 궁금한게 있어요. 마지막 function randomString() { let stringArr let selectString let selectStringArr return ~ } 에서 제일 위 let target 밑에 선언한 변수 3개를 아래의 randomString 함수 안으로 이동하니까 깜빡이는 효과가 사라졌어요. 이것저것 만져보다 잘라내서 붙여넣기가 아니라 위에 변수 선언부분도 두고 함수 안으로 복사 붙여넣기 하니까 깜빡임 효과가 생기던데 위 변수 선언한 부분을 함수안으로 끌고 오는거랑 복사해서 중복되어 있는거랑 어떤 차이가 있나요?
귀한 강좌 감사합니다. 초보여서 잘 따라한다고 했는데, 오탈자를 많이 써서 혼자 헤매였네요. 그런데 혹시 랜덤으로 글자 전환 말고, 순서대로 나열해서 전환 해주는 스트립트 소스는 어떻게 되는지 알 수 있을까요? 좋은 강으로 랜덤으로 하는 법을 배웠는데, 순서대로 나열하는 것이 필요할 때도 있을 거 같아서요. 지정해서 쓰는 것은 숫자를 입력하면 되는데, 전체를 순서대로 표시하는 법을 몰라서 문의 드립니다. 좋은 강의 감사드립니다.
저 혹시 function dynanmics 에서 setTimeout 이용해서 다시 dynamics 함수를 받을 때 왜 setTimeout(dynamics(randomArr, 80);으로 하지 않고 setTimeout(function() {dynamics(randomArr);}, 80);으로 했는지 알 수 있을까요?? 그 부분에서 이해가 잘 안됩니다ㅠㅠ
우리가 해야하는 건 "함수의 호출을 예약"하는 것이지, "함수의 반환 결과"를 호출하는 게 아니여서요! 철철님이 제시하신 setTimeout(dynamics(randomArr, 80); 이건 함수의 호출을 예약하는 게 아니라 함수의 결과를 예약해서 순식간에 결과가 출력되버립니다. 왜냐면 함수를 실행할 때는 함수() 이렇게 실행하는거잖아요? 그래서 그런건데....!!! 이게 약간 글로 설명하기가 좀 어려워서 댓글 보셔도 설명이 어렵죠? ㅠㅠ 음... 만약 매개 변수가 없다면 setTimeout(dynamics, 180) 처럼 할 수 있었지만, 매개변수가 있어서 함수 안에서 함수를 호출하게 예약한거랍니다!
안녕하세요. 좋은 강의를 알게 돼서 초보의 수준이지만 hmtl,css javascript 기초강의를 곧 완강을 할 것 같습니다. 미니프로젝트 강의가 너무 기다려지는데요. 궁금하여서 미리 훑어보았는데 기초강의와는 수준차이가 좀 나는 것 같습니다. 이 프로젝트 부분의 난도를 잘 모르겠어서요. 방향성을 고민하다가 글 올리게 됐습니다. 다른 방법으로 좀 더 공부하고 이 프로젝트 부분을 들어야할지, 아니면 어렵더라도 반복하면서 따라가야할지요. 언제나 훌륭한 강의 올려주셔서 감사합니다.
기초랄게 거의 없이 무작정 따라해도 영상에서 이해하기 쉽게 설명을 너무 잘해주시네요! 그런데 재귀함수에서 왜 function{dynamic();}가 인자로 들어가는지 이해를 못했습니다.. 그냥 dynamic만 넣어도 될거라 생각했는데 그렇게 해보니 하나씩 늘어나지 않고 한번에 한줄씩 바뀌더라구요 이유가 뭔지 알 수 있나요?
웹 브라우저는 HTML 파일을 첫 번째 줄부터 순차적으로 해석하는데, head 태그 안에 script 태그를 사용해서 태그를 조작하려고 하면, 아직 body 태그가 해석되기 전이기 때문에 조작할 태그가 없어서 그럽니다 :) 그래서 모든 태그가 다 불러와지고 해석되는 시점인 body 태그 전에 넣으면 잘됩니다. head 태그에 넣어도 되게 할 순 있는데 권장하진 않습니다.
setInterval은 반복 실행이고 setTimeout은 한 번 실행입니다. setInterval 같은 경우는 내부에 콜 스택이 반복적으로 잡히기 때문에, clearInterval로 정상적으로 해제해 주지 않으면 실행 코드가 중첩되어서 종래에는 이상하게 작동하게 됩니다
if (radomaArr.length >0){ target.textContent +=radom.shift(); } 맨 앞에 " if " 기호는 어떻게 불러오는지요. else{ setTimeout(resetTyping, 3000);} 맨 앞에 " else " 기호는 어떻게 불러오는지요.
영상 열심히 보면서 공부중입니다. 31:20 부터 나오는 function randomString을 만들고 나서부터는 커서 깜빡임 효과가 들어가지 않게되네요. 임시 방편으로 function blink를 function dynamic(randomArr) 위로 올렸더니 깜빡임 효과가 들어가던데 혹시 뭐때문에 그러는건지 알수있을까요?
랜덤 텍스트가 출력되는 태그도 p 태그이고, 커서 모양도 p 태그의 ::after 선택자로 지정되어 있어서 두줄이 되었을 경우 커서도 크게 늘어납니다. 이를 해결하려면 텍스트가 출력되는 곳과 커서 모양을 분리하시면 됩니다 :) ..출력글자..커서 이런 느낌으로요. 텍스트는 print 쪽에만 출력시키면 커서는 자연스럽게 뒤로 밀려나면서 원하시는 기능 구현하실 수 있습니다.
강의 정말 좋습니다~~ 궁금한점이 있는데 randomString함수로 해주는 이유가 무엇인가요? 어차피 함수에서 selectStringArr값을 return 하는 거라면 그냥 함수 안만들고 변수로서 selectStringArr을 사용하면 안되는 이유가 무엇일까요? resetTyping함수에 dynamic(selectStringArr) 이렇게 변수로 넣으니깐 텍스트 삭제만 되고 다시 안나타나내요 ㅠ 이유를 잘 모르겠습니다.
안녕하세요. 말씀해주신것처럼 randomString 함수로 안하셔도 상관은 없습니다. 저는 연관 있는 기능을 모아주어 나중에 재활용성에 용이하기 위해서 묶어 놓은 것일 뿐, 함수로 안해도 결국 selectStringArr값을 return 하는 거라서 안해도 똑같습니다. :) 그리고 코드가 안되는 부분은 확인이 좀 필요해보이는데 sucoding@naver.com으로 이메일로 코드를 보내주시면 도움을 드릴 수 있을 것 같습니다. 감사합니다!
말로만 듣고 보는거보다 실습해보는거정말 중요한데 따라만 해도 코딩이뚝딱 근데 개인적으로 궁금한건, 프론트엔드 개발자분들은 이런 코드들을 전부외우고있는건가요??? 아님 필요할때마다 찾아서 쓰시는건가요..신기하네요... 기본문법 구조같은건 이해햇는데 이 수많은 코드를 사람이 다외운다는게 가능이나한건지 ㅎㅎ 암튼좋은 강의였습니다. 무료인데 이정도면 진짜 슈퍼 고퀄리티 강의라고생각합니다!
선생님 유익한 강의 감사합니다 잘 배우고 있습니다 ㅎㅎ 질문이 있는데요, 26:27 function dynamic(randomArr)를 입력하고 아래 내용을 적으면 빨간줄이 뜨고, 그 때부터 홈페이지에 js가 먹히질 않아요ㅠㅠㅠ 어떻게 해야하죠.... 그동안 가르쳐주신대로 다 해도 안 된 적은 없었는데, 제가 뭘 빼먹은 건지 도통 모르겠습니다ㅠㅠㅠㅠ
@@sucoding 선생님, 머리를 싸매고 코드를 뒤져보니 제가 오타 낸 소스가 한 두 개가 아니더라구요ㅠㅠㅠㅠ 그래서 아예 처음부터 다시 따라하면서 진행하니 프로그램이 원활하게 잘 돌아가게 되었습니다... 배우면 배울수록 이런 실수는 절대 없어야 할 텐데, 제가 한심스럽습니다ㅠㅠ 신경써주셔서 감사합니다
자바스크립트로 HTML 요소를 선택하면, 그 선택된 요소를 문서객체(Document Object)라고 지칭합니다. :) 그래서 보통 우리 생각에는 p 태그를 자바스크립트로 선택한 것 같지만, 자바스크립트로 선택하게 되면 엄밀히 따지면 p 태그에 대한 문서 객체를 선택하는 게 되는거에요!
해당에러는 문서객체를 잘못찾았을 경우에 발생하는건데요! 아래 사항을 확인해보시길 바랍니다. 1. script 태그가 태그 바로 전에 작성되어져 있는지(head 태그 사이에 사용되면 x) 2. html 태그에 id="dynamic" 요소가 있는지 3. js의 querySelector("#dynamic") 부분에 오타는 없는지 그래도 안되시면 sucoding@naver.com으로 코드 첨부해서 보내주세요 :)
let target = document.querySelector("#dynamic"); function randomString(){ let stringArr = ["Learn to HTML","Learn to CSS", "Learn to JavaScript","Learn to Python","Learn to Ruby"]; let selectString = stringArr[Math.floor(Math.random() * stringArr.length)] let selectStringArr = selectString.split(""); return selectStringArr; } //타이핑 리셋 function resetTyping(){ target.textContent = ""; dynamic(randomString()); } //한글자씩 텍스트 출력 함수 function dynamic(randomArr){ if(randomArr,length > 0){ target.textContent += randomArr.shift(); setTimeout(function(){ dynamic(randomArr); },80); }else{ setTimeout(resetTyping, 3000); } } dynamic(randomString()); //커서 깜빡임 효과 function blink(){ target.classList.toggle("active"); } setInterval(blink, 500); 영상보고 만든 js인데요 글씨가 안나타나서요 뭐가 문제인지 모르겟습니다
![[HTML+CSS] 3D Flip Button 만들기 / 애니메이션 / preserve-3d / 실습 / UI](http://i.ytimg.com/vi/hFvPP53kldk/mqdefault.jpg)
![[HTML+CSS] 3D Flip Button 만들기 / 애니메이션 / preserve-3d / 실습 / UI](/img/tr.png)
![[HTML+CSS+JS] 계산기(calculator) 만들기(with grid) / 웹 코딩 / HTML 코딩](http://i.ytimg.com/vi/rWFAR1mql8Q/mqdefault.jpg)
![ENG SUB)[HTML Basics 2] Create a Web site and publish it on the Internet with Netlify in 5 minute](http://i.ytimg.com/vi/LnGgndT308Q/mqdefault.jpg)
이제 js 시작했는데, 뭔 말 인지 모르겠지만, 이런 식으로 사용되는걸 알 수 있어서 좋아요.... 멋있어요...
또 다른 실습으로 조만간 찾아뵐께요!
내평생 좋아요 절로가는 영상이…. 유치원생도 알아먹겟어요
ㅎㅎㅎ 감사합니다
프론트개발자 꿈꾸고 있는 청년입니다. 국비지원으로 학원다니는중인데 학원 커리큘럼때문에 html,css,js 아직 제대로 배우지 못했는데 미리 배울수 있어서 너무 좋았습니다! 설명도 자세히 해주시고 유익한 정보얻었습니다! 다음 강의가 기대됩니다 ㅎㅎ
기문님 감사합니다 🙏
보시다가 불편한거 있으시면 의견주세요!
조만간 새 영상으로 인사드릴게요!!
@@sucoding 영상 설명도 좋아서 불편한점은 없습니다 ㅎㅎ 욕심이지만 이런 실습영상이 많고 실무에서 적용되는 혹은 포토폴리오 준비하는 예비개발자 준비생들이 도움이 될만한 정보 영상이 있으면 좋을듯 합니다 ㅎㅎ 너무 제 욕심잌....
@@김기문-n5r 네네 안그래도 조금씩 올리려고 생각중인데 참고하도록 하겠습니다 !
자바스크립트 기초 공부하고 어떻게 응용해야되는지 함수가 어떻게 이용해야하는지 막막했는데 제가 본 강의 중 최고에요 ㅜㅜ!! 감사합니다!!!
공부는 계속 하고 계시죠? 감사합니다 :)
간단하게 자바스크립트로 실습할 수 있는 영상 참 감사합니다 친절한 설명 덕분에 이해가 쏙쏙 잘되네요 !
도움이 되었다니 다행이네요! 감사합니다 :)
오와!! 타이핑 효과 구현하는거 너무 궁금했는데 완벽하게 이해됐어요ㅎㅎㅎ 정말 감사합니당~~ 구독하고 가용!
감사합니다!!
우아앙.. 자바스크립트 너무 지루하고 복잡했는데 실습해보면서 계속 익혀보려구요!!! 좋은 강의 감사합니다!!
감사합니다 🙏
디테일한 설명으로 이해가 빨라요!!
와 설명을 잘해주셔서 금방 이해하게 되었습니다 감사합니다.
보름 전에 자바스크립트 기초도 안돼있고 무작정 따라하다 포기 했는데 기초지식을 쌓고 다시들으니 정말 양질의 강의 였단걸 깨닫습니다 감사합니다 :)
와.. 열정이 대단하시네요 ^^!!
감사합니다 요즘 한참 자스 다시 공부중인데 도움이 많이되었습니다! 실무에서 홈페이지 제작할때 쓸법한 스킬 영상 많이올려주세요!
양질의강의 늘 감사드립니다 ㅎㅎ 동영상 빠짐없이 보고있는데 도움 정말 많이돼요 감사합니다 ^^
감사합니다
원래 댓글을 잘 안쓰는데 초보 개발자가 쉽게 따라 해볼 수 있게 좋은 영상을 만들어주셔서 정말 감사드려서 댓글 남깁니다! 감사합니다ㅎㅎ
감사합니다 🙏 도움이 되셨다니 다행이네요
간단하게 따라할 실습 찾고있었는데 이 영상이 적합하네요!! 물론 시간은 2배걸렸지만.. 유익한 컨텐츠 감사해요! 다른 실습도 올라왔으면 좋겠어요!
원래 영상 설명 듣고 코드 따라 치고 혼자서 쳐본 코드 이해하고 이러다보면 정말로 2배 정도 더 걸리는 것 같아요 ^^
html css Js활용한 클론코딩 영상이 간절했는데 너무 단비같아요. 정말 감사합니다!!! 앞으로도 이런 콘텐츠 많이 보고 싶어요🙏🏻🙇🏻💚
감사합니다 도움이 되셨다니 다행이네요 !!👍
좋은 강의 감사합니다
감사합니다~!
좋은 강의 너무너무 감사합니다!
좋은 댓글 감사합니다!
클론코딩 넘 좋아요! js는 역시 어렵네요ㅠㅠ 많이 해봐야할 듯요.
자주 접하다보면 차츰 익숙해지실거에요 :)
좋은 강의 너무 감사드려요 !!
혹시 이 예제를 랜덤이 아닌 순서대로 도출하려면 어떻게 코드를 바꿔야하는지 여쭈어봐도 될까요?
내용이 너무 담백하네요 ㅎ..
강의 영상 감사합니다. 덕분에 지식을 쌓고 갑니다. 역시 자바스크립트가 제일 중요한것 같습니다...HTML,CSS는 이해가 되더라도 자바스크립트는 차원이 다르네요 ㅠㅠ
많은 퍼블리셔 지망생들이 자바스크립트에서 무너집니다.. 하지만 포기하지마시고 천천히 꾸준히 하시면 정복하실 수 있으실거에요!
선생님 질문이 있습니다.
가상요소선택자를 이용해서 learn to html 옆에 타이핑바를 생성한 부분에서 top 값을 지우면 아래로 넘어가더라구요
여기서 질문이 있습니다.
1. display:block 으로 속성을 넣은 빈칸이 아래로 내려가면 다음 block 요소의 p태그 sucoding... 부분도 아래로 내려가야 하는거 아닌가요???
내려가지 않고 겹쳐지던데 왜 그런건가요???
2. 동일한 부분에서 선생님께서는 dynamic이라는 아이디 값에 가상요소선택자를 지정하셨는데
혼자 공부하면서 클래스에 적용해도 문제가 없어보이더라구요.
단지, 자바스크립트를 사용해야하기 때문에 그냥 id 값에 걸어주신건가요???
왜 똑같이 했는데 안되나 했는데 오타하나... ransdom ㄷㄷ ...그래도 문제를 찾아내고 해결해보니 재밋네요 좋은영상 감사합니다!
선생님
외부에서 icon가져온 css에 폰트 사이즈가 설정되어있어서 폰트사이즈를 10rem으로 고치려고 해도 안바뀌던데...이런 경우는 어떻게 해야되죠?외부 사이즈를 늘려도 icon크기가 변하지 않아요
!important 로 강제로 적용해보세요
width:10rem !important;
@@sucoding 됐어요!! 정말 감사합니다ㅠㅠ
진짜 세상좋아졌다 돈내고 배워야댈것들이 공짜로 풀리네 ㄷㄷ
감사합니다 ㅎㅎ
수코딩님 궁금한점이 있는데요! p태그 안에 id선택자와 class선택자를 2개 다 사용하시는 이유가 있는건가요??
id선택자나 class선택자만 사용해도 결과값은 동일하더라구요!
자바스크립트에서 문서객체 선택을 편하게 하기 위해서 입니다. 아이디 속성을 사용하면 #dynamic 처럼 자바스크립트에서 단일 요소 선택시 편하거든요! 물론 안쓰고 다르게 문서 객체를 찾아도 되긴 합니다 :)
@@sucoding 답변감사드립니다! 덕분에 이해하기 어려웠던 부분도 쉽게 배우면서 공부하고있습니다~ 너무 감사드려요!
감사함에 머리 박고 갑니다.
js 기초 문법 위주로 배웠는데 역시 실습이 재밌네요..
자바스크립트에서 함수로 돌리는게 정말 단순한걸 반복하게 만드는 작업이군요.
이런 양질의 영상 많이 만들어주세요.!
그리고 js에서 궁금한게 있어요.
마지막 function randomString() {
let stringArr
let selectString
let selectStringArr
return ~ } 에서
제일 위 let target 밑에 선언한 변수 3개를 아래의 randomString 함수 안으로 이동하니까 깜빡이는 효과가 사라졌어요.
이것저것 만져보다 잘라내서 붙여넣기가 아니라 위에 변수 선언부분도 두고
함수 안으로 복사 붙여넣기 하니까 깜빡임 효과가 생기던데
위 변수 선언한 부분을 함수안으로 끌고 오는거랑 복사해서 중복되어 있는거랑 어떤 차이가 있나요?
강의 잘 보았습니다. 천천히 설명해주셔서 좋았어요. 혹시 타이핑 이펙트가 적용되는 텍스트에 br태그나 span태그를 사용해서 텍스트 줄바꿈을 한다거나 텍스트 스타일을 변경하는건 어려울까요??
아닙니다 :) 조금만 응용하면 가능합니다!
선생님 혹시 8:20초에서 전체 선택자로 *모양을 사용하는게 맞나요? html 이랑 css 연결을 잘 했는데도 적용이 안되네요 ㅜㅠ
맞습니다. 일반적인 표준 Window pc 키보드로 따지면 숫자 8번과 함께 있는 특수키입니다. :) 저거빼곤 잘 적용되시는건가요? sucoding@naver.com 로 코드 보내주시거나 제가 볼 수 있는 링크주시면 봐드릴께요 ^^
귀한 강좌 감사합니다.
초보여서 잘 따라한다고 했는데, 오탈자를 많이 써서 혼자 헤매였네요.
그런데 혹시 랜덤으로 글자 전환 말고, 순서대로 나열해서 전환 해주는 스트립트 소스는 어떻게 되는지 알 수 있을까요?
좋은 강으로 랜덤으로 하는 법을 배웠는데, 순서대로 나열하는 것이 필요할 때도 있을 거 같아서요. 지정해서 쓰는 것은 숫자를 입력하면 되는데,
전체를 순서대로 표시하는 법을 몰라서 문의 드립니다.
좋은 강의 감사드립니다.
js를 공부중이라 그런지 아직 이해가 어렵네요 ㅎㅎ...
그래도 재미있게 해봤습니다 ㅎㅎ
열심히 하시네요!
@@sucoding 덕분에 재미있게 배우고 있습니다 ㅎㅎ
선생님 감사합니다.....
css에서 .active는 어디서 나온건가요?? 클래스명으로 active 지정을 안했는데 ㅠㅠ..
저 혹시 function dynanmics 에서 setTimeout 이용해서 다시 dynamics 함수를 받을 때 왜 setTimeout(dynamics(randomArr, 80);으로 하지 않고 setTimeout(function() {dynamics(randomArr);}, 80);으로 했는지 알 수 있을까요?? 그 부분에서 이해가 잘 안됩니다ㅠㅠ
우리가 해야하는 건 "함수의 호출을 예약"하는 것이지, "함수의 반환 결과"를 호출하는 게 아니여서요! 철철님이 제시하신 setTimeout(dynamics(randomArr, 80); 이건 함수의 호출을 예약하는 게 아니라 함수의 결과를 예약해서 순식간에 결과가 출력되버립니다. 왜냐면 함수를 실행할 때는 함수() 이렇게 실행하는거잖아요? 그래서 그런건데....!!! 이게 약간 글로 설명하기가 좀 어려워서 댓글 보셔도 설명이 어렵죠? ㅠㅠ 음... 만약 매개 변수가 없다면 setTimeout(dynamics, 180) 처럼 할 수 있었지만, 매개변수가 있어서 함수 안에서 함수를 호출하게 예약한거랍니다!
@@sucoding 자세히 설명해주셔서 정말 감사합니다 덕분에 이해가 됐어요!! 수코딩님 좋은 하루 되세요ㅎㅎ
안녕하세요. 좋은 강의를 알게 돼서 초보의 수준이지만 hmtl,css javascript 기초강의를 곧 완강을 할 것 같습니다.
미니프로젝트 강의가 너무 기다려지는데요. 궁금하여서 미리 훑어보았는데 기초강의와는 수준차이가 좀 나는 것 같습니다.
이 프로젝트 부분의 난도를 잘 모르겠어서요. 방향성을 고민하다가 글 올리게 됐습니다.
다른 방법으로 좀 더 공부하고 이 프로젝트 부분을 들어야할지, 아니면 어렵더라도 반복하면서 따라가야할지요.
언제나 훌륭한 강의 올려주셔서 감사합니다.
이 프로젝트는 난이도가 조금 높은 건 사실입니다. 아마 제 유튜브의 기초 영상으로는 다소 어려울 수 있습니다. 유튜브 영상 + 별도의 책으로 공부 한 번 완독 했다는 전제하에 보시면 좋을 것 같습니다!
기초랄게 거의 없이 무작정 따라해도 영상에서 이해하기 쉽게 설명을 너무 잘해주시네요! 그런데 재귀함수에서 왜 function{dynamic();}가 인자로 들어가는지 이해를 못했습니다.. 그냥 dynamic만 넣어도 될거라 생각했는데 그렇게 해보니 하나씩 늘어나지 않고 한번에 한줄씩 바뀌더라구요 이유가 뭔지 알 수 있나요?
컴퓨터가 코드를 실행하기 전 읽을 때 dynamic 함수를 실행시켜서 그럴 꺼에요 익명 함수function(){}으로 감싸거나 반복문을 사용해보세요
수코딩님 질문드립니다.
요즘 랜딩페이지는 반응형으로 만든다고 하던데 가로 2000에 pc용 만들고
모바일용을 가로 1200으로 따로 만드는건가요? 아니면 랜딩페이지 만들때
반응형으로 만드는 방식이 따로 있나요?
안녕하세요 !
PC용을 2000을 기준으로 만드는건 아직 이른감이 있고 아직은 대중적으로 FHD(1920)으로 만드는 추세입니다.
반응형 기준 역시 1200이라는 기준은 없기때문에 페이지 디자인에 따라 매번 달라질 수 있습니다.
@@sucoding 네이버 댓글 달았는데 카톡으로 잠시 대화드려도 되나요? 카톡아이디 ipopguys
항상 잘 보고 있습니다! 궁금한 게 있는데, 제가 head에 를 넣으면 JS가 작동을 안 하다가 위 영상처럼 body에 넣으면 작동이 되는데 혹시 그 이유가 뭘까요?
웹 브라우저는 HTML 파일을 첫 번째 줄부터 순차적으로 해석하는데, head 태그 안에 script 태그를 사용해서 태그를 조작하려고 하면, 아직 body 태그가 해석되기 전이기 때문에 조작할 태그가 없어서 그럽니다 :) 그래서 모든 태그가 다 불러와지고 해석되는 시점인 body 태그 전에 넣으면 잘됩니다. head 태그에 넣어도 되게 할 순 있는데 권장하진 않습니다.
setTimeout으로 설정하신 값을 setInterval로 값 변경없이 넣어 봤는데요 하나하나 타이핑 되는 효과가 안나네요. 호기심에 이 두개의 차이가 뭘까하고 넣어봤는데요. 이 둘의 차이가 뭔지 알고계시나요?
setInterval은 반복 실행이고 setTimeout은 한 번 실행입니다. setInterval 같은 경우는 내부에 콜 스택이 반복적으로 잡히기 때문에, clearInterval로 정상적으로 해제해 주지 않으면 실행 코드가 중첩되어서 종래에는 이상하게 작동하게 됩니다
if (radomaArr.length >0){
target.textContent +=radom.shift(); } 맨 앞에 " if " 기호는 어떻게 불러오는지요.
else{ setTimeout(resetTyping, 3000);} 맨 앞에 " else " 기호는 어떻게 불러오는지요.
안녕하세요 좋은 강의 감사합니다
질문이 있어 댓글 남깁니다!
타이핑 부분이 지워지고 재작동하는 resetTyping함수에 ,그냥 변수로 dynamic(selectStringArr)을 사용하면 제대로 작동을 안하는데
혹시 무엇이 문제일까요?ㅠ
selectStringArr은 영상의 코드 기준으로 randomString 함수 내부에 있는데, resetTyping 함수 내부에서는 ranomString() 함수 내부의 변수를 참조할 수 없기 때문입니다 :)
@@sucoding randomString함수로 안묶고 selectStringArr를 resetTyping함수 내에서 dynamic(selectStringArr)로 작성해도 안되던데 아래 숭어님 댓글처럼요!ㅜ
선생님
setTimeout(dynamic(randomArr), 80) 을 하면 오류가 나오는 이유를 알 수 있을까요????
setTimeout(dynamic(randomArr), 80) 이렇게하면 dynamic 함수가 바로 실행되버리기 때문입니다 :)
영상 열심히 보면서 공부중입니다. 31:20 부터 나오는 function randomString을 만들고 나서부터는 커서 깜빡임 효과가 들어가지 않게되네요.
임시 방편으로 function blink를 function dynamic(randomArr) 위로 올렸더니 깜빡임 효과가 들어가던데 혹시 뭐때문에 그러는건지 알수있을까요?
sucoding@naver.com으로 코드 보내주시면 한 번 봐드릴게요 :)
코드실행하는데 오른쪽 하단에 'Code language not supported or defined' 문구가 뜨면서 실행이 안되네요,,어제까지는 정상적으로 실행됬는데 갑자기 이렇게 뜨니까 멘탈이 나가네요,,뭐만진것도 없는데,,뭐가 문제일까요
abcdefgh123123.tistory.com/95 이 글 보시면 될 것 같네요 :)
영상 잘 보았습니다 선생님. 제가 파일 만들어서 친구에게 보내봤는데 친구는 안열어지더군요 어떠한 방법을 사용해야 될까요?
html 파일은 웹 브라우저만 있으면 언제 어디서든 열려야 합니다 :)
p tag가 2줄이 될 경우에는 블링크가 텍스트를 따라 가는 것이아니라 오른쪽 끝에서 높이 만큼으로 고정되어있는데요 혹시 줄 수와는 상관없이 동작 하게 하려면 어떤 방법으로 할 수 있을까요
랜덤 텍스트가 출력되는 태그도 p 태그이고, 커서 모양도 p 태그의 ::after 선택자로 지정되어 있어서 두줄이 되었을 경우 커서도 크게 늘어납니다. 이를 해결하려면 텍스트가 출력되는 곳과 커서 모양을 분리하시면 됩니다 :)
..출력글자..커서 이런 느낌으로요. 텍스트는 print 쪽에만 출력시키면 커서는 자연스럽게 뒤로 밀려나면서 원하시는 기능 구현하실 수 있습니다.
강의 정말 좋습니다~~
궁금한점이 있는데 randomString함수로 해주는 이유가 무엇인가요?
어차피 함수에서 selectStringArr값을 return 하는 거라면 그냥 함수 안만들고 변수로서 selectStringArr을 사용하면 안되는 이유가 무엇일까요?
resetTyping함수에 dynamic(selectStringArr) 이렇게 변수로 넣으니깐 텍스트 삭제만 되고 다시 안나타나내요 ㅠ
이유를 잘 모르겠습니다.
안녕하세요. 말씀해주신것처럼 randomString 함수로 안하셔도 상관은 없습니다. 저는 연관 있는 기능을 모아주어 나중에 재활용성에 용이하기 위해서 묶어 놓은 것일 뿐, 함수로 안해도 결국 selectStringArr값을 return 하는 거라서 안해도 똑같습니다. :)
그리고 코드가 안되는 부분은 확인이 좀 필요해보이는데 sucoding@naver.com으로 이메일로 코드를 보내주시면 도움을 드릴 수 있을 것 같습니다.
감사합니다!
@@sucoding 감사합니다. 수코딩님. 메일 보냈는데 확인부탁드립니다~
@@승어 메일 답장드렸습니다. 즐코딩되세요!
@@sucoding 감사합니다~해결됐어요~
저도 같은부분으로 궁금한데 혹시 selecstring으로 작성시 안됫던 이유가 무엇이엇는지 알수잇을까요?.ㅠㅠㅠ
말로만 듣고 보는거보다 실습해보는거정말 중요한데 따라만 해도 코딩이뚝딱
근데 개인적으로 궁금한건, 프론트엔드 개발자분들은 이런 코드들을 전부외우고있는건가요???
아님 필요할때마다 찾아서 쓰시는건가요..신기하네요...
기본문법 구조같은건 이해햇는데 이 수많은 코드를 사람이 다외운다는게 가능이나한건지 ㅎㅎ 암튼좋은 강의였습니다. 무료인데 이정도면 진짜 슈퍼 고퀄리티 강의라고생각합니다!
외운다는 측면으로 접근하기 보다는 이해하고 있다는 측면으로 접근하는 게 맞는 것 같아요. 이해하고 있으면, 필요할 때 꺼내서 작성할 수 있거든요 :) 좋은 평가 감사합니다.
자세히 더보기란에 "html + css 하이퍼링크"와 "js강의리스트 하이퍼링크"가 서로 바뀐것 같아요
감사합니다 :)
재귀함수 대신 반복문을 사용해서 구현해도 되나요?
네 상관없습니다.
원래 커서는 타이핑 할 때는 깜빡이지 않다가 타이핑 하고 있지 않을 때만 깜빡이지 않나요?
그렇게 볼 수도 있겠네요 😀
선생님 유익한 강의 감사합니다 잘 배우고 있습니다 ㅎㅎ
질문이 있는데요, 26:27 function dynamic(randomArr)를 입력하고 아래 내용을 적으면 빨간줄이 뜨고, 그 때부터 홈페이지에 js가 먹히질 않아요ㅠㅠㅠ 어떻게 해야하죠.... 그동안 가르쳐주신대로 다 해도 안 된 적은 없었는데, 제가 뭘 빼먹은 건지 도통 모르겠습니다ㅠㅠㅠㅠ
안녕하세요 ! sucoding@naver.com으로 소스 보내주시면 확인해드리겠습니다 :)
@@sucoding 선생님, 머리를 싸매고 코드를 뒤져보니 제가 오타 낸 소스가 한 두 개가 아니더라구요ㅠㅠㅠㅠ
그래서 아예 처음부터 다시 따라하면서 진행하니 프로그램이 원활하게 잘 돌아가게 되었습니다...
배우면 배울수록 이런 실수는 절대 없어야 할 텐데, 제가 한심스럽습니다ㅠㅠ 신경써주셔서 감사합니다
@@bmn7907 저도 많이 실수합니다 :) 그래도 찾으셨다니 잘하셨네요!
classList.toggle("active"); 에서 에러가 떠서 안먹혀요 어떻게 해야하나요?
[문서객체].classList 이기때문에 문서객체를 선택하는 부분에 문제가 있을 확율이 높습니다. 올바르게 객체를 선택했는지, 오타가 없는지 확인해주세요!
@@sucoding 넵 감사드립니다. 해볼게요
얼추 따라하긴했는데 영상을 안보고는 절대 못따라할것같아요 ... ㅠㅠ 팁있나요 ? 실무자들은 이걸 다들 안보고 하는건가요 ?
안보고 할 수 있어야 합니다. 결국은 지속적인 학습만이 답일 것 같아요!
텍스트 다 작성되고 나서 cursur 없앨 수는 없나용?
찾아보고 별 짓을 해도 모르겠어용 ㅠㅡㅠ
코드에서 글자가 다 출력되고 삭제 메서드가 실행되기 전에 css를 지워주시면 됩니다!!
TypeError: document.queryselector is not a function
at /script.js:1:22 이렇게 뜨는데 문제가 뭘까요 ㅎ..,
어제 오픈 채팅으로 답변 드렸습니다 :)
근데 p 태그에 대한 문서 객체? 의 의미가 궁금하네요
자바스크립트로 HTML 요소를 선택하면, 그 선택된 요소를 문서객체(Document Object)라고 지칭합니다. :)
그래서 보통 우리 생각에는 p 태그를 자바스크립트로 선택한 것 같지만, 자바스크립트로 선택하게 되면 엄밀히 따지면 p 태그에 대한 문서 객체를 선택하는 게 되는거에요!
9:51
나오는 글자들이 순서가 뒤죽박죽으로 나오는데 어떻게 해야하나요?
코드를 봐야 알 것 같은데, sucoding@naver.com으로 코드 첨부하셔서(zip 확장자를 zips로 변경하시면 첨부가능) 보내주시면 확인 후 회신드릴게요~!
29:43
수코딩님ㅠㅠ
첫번째 타이핑 되는 글자가 2개가 나옵니다..ㅠㅠ
영상 보고 다시 만들어봐도 그러네요
메일로 소스코드랑 문제 사진 보냈으니 확인 부탁드려요!!
안녕하세요 메일이 오지 않았습니다 !
@@sucoding 메일 다시 보냈습니다!
확인 부탁드려요.
24:00
다른 폰트 사이즈는 css에서 변경되는데 material-icons 의 폰트 사이즈만 변경이 안되네요~~그냥 스킵하고 구현은 끝냈는데요...왜 그런걸까요??😥
CSS가 적용 안되는 이유는 대부분 선택자가 틀렸을 경우가 많습니다. 제 영상을 잘 따라하신거라면 혹시 html에서 작성한 class속성의 값과 css에서 선택한 선택자의 스펠링이 똑같은지 확인해보세요!
@@sucoding 복사해서 붙여넣기 하고 몇 번을 확인했는데도 그것만 그러네요~ㅎ 다시 확인해볼께요~답변 감사합니당~:)
@@juheekim5269 끝까지 안되시면 sucoding@naver.com 으로 파일 보내주시면 확인해드릴께요 :)
style.css보다 material 파일을 먼저 불러오시면 됩니다! 메일로 답변해드렸으니 참고부탁드려요!
@@sucoding 와!!!그렇군요!!앞으로 그부분 꼭 체크하면서 작성할께요!!역시👍 그냥 넘어갔으면 매번 같은 실수할 뻔 했어요!!정말 감사해요:)
왜...안될까요...ㅠㅠlocalhost:8080이라고 뜨네여
서버 실행이 안되면 그냥 html 파일을 더블클릭해서 실행해보세요~!
영상과 똑같이 코드를 작성한거 같은데 왜 저는 안될까여 ㅠㅠ
구글 드라이브에 코드를 올리시고 sucoding@naver.com으로 다운로드 링크 공유 주시면 코드 한 번 봐드릴게요~!
@@sucoding 감사합니다! 처음부터 다시 다 살펴봤는데 스펠링 하나가 빠져 있더라구요 성공했습니다!
@@jjua1122 그렇게 한 글자 빠진 것들이 개발자를 힘들게 하죠.. ㅎㅎ 다행이네요!
function 을 funtion 이라고 쓴걸 한참 찿았네
20:00 에 있는 코딩 그대로 했는데
Cannot read property “classList” of null at blink 에러가 연속적으로 발생하는데 어떻게 해결해야 할까요...
해당에러는 문서객체를 잘못찾았을 경우에 발생하는건데요! 아래 사항을 확인해보시길 바랍니다.
1. script 태그가 태그 바로 전에 작성되어져 있는지(head 태그 사이에 사용되면 x)
2. html 태그에 id="dynamic" 요소가 있는지
3. js의 querySelector("#dynamic") 부분에 오타는 없는지
그래도 안되시면 sucoding@naver.com으로 코드 첨부해서 보내주세요 :)
와 ..빠른 문제해결 감사합니다 ㅠㅠ 100만 유투버 기원합니다!!!
수코딩님 메일 확인하셨나요?
답변드렸습니다 :)
@@sucoding 감사합니다!!
let target = document.querySelector("#dynamic");
function randomString(){
let stringArr = ["Learn to HTML","Learn to CSS",
"Learn to JavaScript","Learn to Python","Learn to Ruby"];
let selectString = stringArr[Math.floor(Math.random() * stringArr.length)]
let selectStringArr = selectString.split("");
return selectStringArr;
}
//타이핑 리셋
function resetTyping(){
target.textContent = "";
dynamic(randomString());
}
//한글자씩 텍스트 출력 함수
function dynamic(randomArr){
if(randomArr,length > 0){
target.textContent += randomArr.shift();
setTimeout(function(){
dynamic(randomArr);
},80);
}else{
setTimeout(resetTyping, 3000);
}
}
dynamic(randomString());
//커서 깜빡임 효과
function blink(){
target.classList.toggle("active");
}
setInterval(blink, 500);
영상보고 만든 js인데요 글씨가 안나타나서요 뭐가 문제인지 모르겟습니다
문제 없어보입니다. 혹시 html 문서와 css 파일은 잘 연결되었으며, html 문서에 id 속성의 값을 dynamic이라고 오타없이 잘 적으셨을까요?
@@sucoding 다 되어 있는데도 안되네요..
@@sucoding css와의 연결은 잘 되어있는거 같습니다
@@sheepspace3 sucoding@naver.com으로 소스 압축해서 보내주시면 확인해보겠습니다 :)
@@sucoding 네 !
감사합니다 요즘 한참 자스 다시 공부중인데 도움이 많이되었습니다! 실무에서 홈페이지 제작할때 쓸법한 스킬 영상 많이올려주세요!