planet.forEach(planetName => { /* html */ $('.space').insertAdjacentHTML( 'beforeend', `<div class="solar_system" data-planet-name="${planetName}"> <div class="planet ${planetName}"> <div class="overlay"></div> <h2>${planetName}</h2> </div> </div>` ); });이렇게 처음부터 forEach로 요소를 만들어도 괜찮나요?

안녕하세요 선생님 1.어제 질문드린 내용(forEach로 다중 요소에 중복 이벤트 걸기)은 마지막에 말씀해주신'gsap.to(item,{rotation:”+=360”}) 으로 작성해보세요 ' 코드로 해결을 하였습니다. 감사합니다.그런데 그전에'그럴경우 애니메이션이 종료 후 애니메이션의 재생헤드를 처음으로 돌려놓는 코드를 작성해 주시거나' 라고 말씀해주셨는데... 이게 어떻게 하는건지 도저히 모르겠어요..ㅜㅜㅜ예시코드를 시간되실때 한번 보여주셨음 해요..(아직 많이 부족합니다..이해 부탁드려요..ㅜㅜ)시간되실 때 천천히 해주셔도 됩니다.항상 똑부러지는 강의 잘 듣고 있습니다.감사합니다. 

.item input:focus .fa-solid {background-color:dodgerblue;} 의 폰트어썸의 백그라운드 색상이 변하질 않습니다...item input:focus {border: 1px solid dodgerblue;box-shadow: 0 0 5px dodgerblue;} 요 부분은 잘 작동합니다!/* html */ <form action="info"> <div class="item"><i class="fa-solid fa-user"></i><input type="text" placeholder="Your Name"></div><div class="item"><i class="fa-solid fa-envelope"></i><input type="email" placeholder="Email"></div><div class="item"><i class="fa-solid fa-phone"></i><input type="tel" placeholder="Phone Number"></div></form>  /* CSS */ body { margin: 0;display: flex;justify-content: center;align-items: center;height: 100vh; /*높이값 있어야 수직정렬됨*/font-family: sans-serif;}a {text-decoration: none;}.item {margin: 10px;width: 300px;position: relative;}.item input {border: 1px solid lightgray;width: inherit;height: 40px;padding: 10px;box-sizing: border-box;border-radius: 5px;outline: none;padding-left: 50px;transition: 0.5s;}.item .fa-solid {position: absolute;top: 0;left: 0;height: 40px;line-height: 40px;width: 40px;text-align: center;color: #fff;background-color: gray;border-radius: 5px 0 0 5px;transition: 0.5s;}.item input:focus {border: 1px solid dodgerblue;box-shadow: 0 0 5px dodgerblue;}.item input:focus .fa-solid{background-color: dodgerblue;}.item input:focus::placeholder {visibility: hidden;} 

let tl = gsap.timeline(); tl.to(".dash",{opacity:1, backgroundColor:'yellow'})안녕하세요!강의를 듣다가, 궁금함이 생겨 문의 드립니다, #질문1. 애니메이션을 변수에 할당 할때, 변수의 let/cost 둘중에 어떤 것으로 정의해야 할까요?#질문2. GSAP에서는 애니메니션01, 애니메이션02, 와 같이 각각 애니메이션을 정의하고, 이것을 각각에 변수에 할당해 변수를 사용하는 컨셉인가요?#질문1. 애니메이션을 변수에 할당 할때, 변수의 let/cost 둘중에 어떤 것으로 정의해야 할까요?변수 tl과 같이, timeline()을 호출한 함수를 변수에 정의 할 때, let으로 해야 할지, const로 해야 할지궁금함합니다.const tl = gsap.timeline()let tl = gsap.timeline()함수를 할당하는 변수에 주로 const 변수에 담아 사용해와서,강좌에서는 let으로 정의해주신 부분에 의미가 있을까,궁금함이 생겼습니다!GSAP도 JS다 보니,사용자가 실수로 이미 정의한 tl 변수에 다른 애니메이션도 추가할 수 있는 위험이 있고 그럴까요??강의 초반부에 gsap에 다른 값을 할당하면 안된다는 부분과 어떤 연관성이 있는걸까요?GSAP도 JS 라이브러리 다보니, 변수 정의하는 것도 let과 const로 각각 정의할 때 차이점이 있지 않을까 해서 문의 드렸습니다! #질문2. GSAP에서는 애니메니션01, 애니메이션02, 와 같이 각각 애니메이션을 정의하고, 이것을 각각에 변수에 할당해 변수를 사용하는 컨셉인가요?GSAP 파트3을 수강하기 위해, 열심히 정주행중입니다!감사합니다!    

const box=gsap.utils.toArray('.box'); box.forEach(function(item){ item.addEventListener('click',function(){ gsap.to(item,{ rotationY:360, duration:1, ease:'none' }) }) }) 안녕하세요 강의 잘 보고있습니당공부하다가 질문이 생겨 문의드려요..gsap을 forEach안에서 사용해서 애니메이션을 줄려고합니다.위처럼 코드를 적으면 동작은 잘되는데 클릭이 한번밖에는 안되네요..이 문제를 해결할 수 있을까요?

안녕하세요.메뉴나 footer같은건 include해서 사용하는게 좋을것같은데요.html문서 안에 html파일은 include하는 방법은 없을까요?

HTML Snippets 안나오네요,, 없이 해도 상관없나요?

실무에서 html이 어떻게 사용되나요? 그리고 사용되면 태그들은 암기해서 사용하나요?

pc버전에서 브라우저 화면을 줄일 때 저렇게 화면이 깨지는데실제 다른 웹 사이트 처럼 화면을 줄여도 안 깨질려면 max-width 768 버전 말고 max-width 1200도 같이 만들어줘야 하나요?

개발자도구에서 모바일 버전으로 볼때 계속 인터넷 연결없음으로 나옵니다 ㅠㅠ그리고 폴더에 있는 index파일을 누르면 사진과 같이 기본 셋팅만 나오는데 왜 그런지 알 수 있을까요? 

이번에 업데이트 해주신 gsap 수업자료에 json 파일은 vscode를 사용해야지만 확인이 가능한건가요?이전 영상과는 수업자료가 조금 다른거같아 질문드립니다.

안녕하세요! 수업 잘 듣고 있습니다.너무 기초적인 질문이라 조금 꺼려졌는데 그래도 스스로 해결되지 않아서 질문드려요.id 태그는 "id는 원칙상, 하나의 id당 하나의 태그에만 적용" 한다고 공부했었는데 이와 같은 식으로 하나의 id가 여러 태그에 적용될 수 있는 것을 발견했습니다. 여러 id가 하나의 태그에는 적용되지 않는 것은 확인했습니다. 보통 다른 글에는 태그마다 전부 다른 id를 사용하였습니다. 제가 저 문장을 잘못 이해한 것인지 궁금합니다.(일반적으로 id는 유일한 태그에 사용하고 class 태그를 여러 묶었을 때 사용하는 것인가요?)

 style.scss가 사진처럼 여러 파일로 히스토리가 남게 저장됩니다. 삭제를 해도 watch css를 하면 다시 파일이 만들어지는데.. 아예 히스토리 안남게 하는 방법이 있을까요 ?

 인라인 요소는 블록 요소를 포함하면 안된다고 알고 있습니다.브라우저 종류 및 버전마다 특정 요소가 출력이 안되는 경우가 있다고 들었는데, 최근의 경우에는 대부분 정상적으로 출력되는 경우가 많다고 들었습니다. 이 부분에서 궁금한 점이 생겼습니다. 사용자가 어떤 브라우저를 사용할지 모르기 때문에, 유효성을 지켜야 된다고 생각해도 괜찮을까요?정상적으로 출력되는 브라우저는 유효성을 어기더라도, 사용자의 편의상 출력을 허용하도록 하는걸까요?

안녕하세요 강사님, <div id='parents'> <div id='child'></div> </div>여기서 이 밑 두 코드의 차이점을 알 수 있을까요?<style> #parents { width: 50%; } #child { max-width: 100%; } </style><style> #parents { width: 50%; } #child { width: 100%; } </style> 

블록요소기 때문에 슬라이드 밑줄에 위치되어야 하는걸로 아는데 왜 슬라이드와 겹쳐서 저렇게 페이지 맨 상단 왼쪽에 위치되는지 모르겠습니다.

gsap.set(), gsap.default() 두 가지 모두트윈의 값을 미리 셋팅하는 역할을 하는데 어떤 상황에서 어떤 것을 사용해야할지 감이 잡히지 않습니다.

const dragger = Draggable.create('#playhead', { type: 'x', cursor: 'pointer', trigger: '#playhead',　// #playhead bounds: { minX: 0, maxX }, onDrag(e) { // console.log(e); animation.pause(); animation.progress(this.x / maxX); }, });트리거를 #timeline으로 할 경우 타임라인드래그로 플레이헤드가 제어되는데이렇게 수정하면 안되나요?

안녕하세요.위 화면처럼 contents부분의 들어간 video가 옆에 세로 스크롤이 생깁니다.처음엔 가로, 세로 스크롤이 다 생겨서 다시했더니 이번엔 세로 스크롤이 생기네요.강의를 더 가면 object-fit: cover;로 맞추던데.. 그렇게 해도 스크롤은 사라지지 않아요.지금은 우선 여기까지 진도를 나갔지만..처음 진도를 나갈땐 visual title의 font-size: 70px;도 먹지않아 글씨가 작았는데....왜 그럴까요?

아이콘 부분이 너무 다닥다닥 붙어있는데 조금 띄우려면 어떻게 해야하나요ㅠㅠ