<ul class="gnb"> <div class="wrap"> 차이무엇입니까?

안녕하세요,애니메이션 Timeline을 기획(정의)하는 법(방식)?에 대해 문의드립니다! 섹션, "3D 텍스트효과(2)" 에서인터벌 단위로,duration, stagger, pause, 각각의 value 계산 법을 알려주셨는데요 강좌에서 나온 예시 SVG 이미지 보면서,저렇게 애니메이션을 정의하면 되겠다,인사이트를 얻었습니다. 문득, 범쌤께서는 어떻게 애니메이션 flow를 정의 하시는지,관점이나, 포인트가 궁금해졌습니다!(이미 강의에서 SVG 이미지로 보여주셨지만, 혹시 더 있을까봐서요,,,) 강의 내용처럼,애니메이션을duration,stagger,pause,delay 단위로 배치하면, GSAP을 적용하는데 용이 하다 라고 이해하면 될까요?! 블럭 맞추듯 척척, 애니메이션이 구현되는 과정이 신기하네요! 감사합니다!  

초반부 messageA_opacity_in 을 콘솔로 찍었는데요,partScrollStart보다 currentYOffset이 작을때는rv에 values[0] 즉 '0'을 리턴해야하는데,그러지 않고 -1부터 0까지 쭉 커지다가 css가 적용되는 구간부터 1로 점점 커집니다...const sceneInfo = [ { //0 type:'sticky', heightNum:5,//브라우저 높이의 배수 세팅 scrollHeight:0, //각 씬의 스크롤 높이 objs:{ container: document.querySelector('#scroll-section-0'), messageA: document.querySelector('#scroll-section-0 .main-message.a'), messageB: document.querySelector('#scroll-section-0 .main-message.b'), messageC: document.querySelector('#scroll-section-0 .main-message.c'), messageD: document.querySelector('#scroll-section-0 .main-message.d') }, values:{ messageA_opacity: [0, 1, { start: 0.1, end: 0.2}], messageB_opacity: [0, 1, { start: 0.3, end: 0.4}] } }, { //1 type:'normal', heightNum:5,//브라우저 높이의 배수 세팅 scrollHeight:0, //각 씬의 스크롤 높이 objs:{ container: document.querySelector('#scroll-section-1') } }, { //2 type:'sticky', heightNum:5,//브라우저 높이의 배수 세팅 scrollHeight:0, //각 씬의 스크롤 높이 objs:{ container: document.querySelector('#scroll-section-2') } }, { //3 type:'sticky', heightNum:5,//브라우저 높이의 배수 세팅 scrollHeight:0, //각 씬의 스크롤 높이 objs:{ container: document.querySelector('#scroll-section-3') } } ];function calcValues(values, currentYOffset){ let rv; const scrollHeight = sceneInfo[currentScene].scrollHeight const scrollRatio = currentYOffset / scrollHeight if(values.length === 3){ // start ~ end 사이의 애니메이션 실행 const partScrollStart = values[2].start * scrollHeight; const partScrollEnd = values[2].end * scrollHeight; const partScrollHeight = partScrollEnd - partScrollStart; if(currentYOffset => partScrollStart && currentYOffset <= partScrollEnd){ rv = (currentYOffset - partScrollStart) / partScrollHeight * (values[1] - values[0]) + values[0]; } else if (currentYOffset < partScrollStart){ rv = values[0]; } else if (currentYOffset > partScrollEnd){ rv = values[1]; } } else { rv = scrollRatio * (values[1] - values[0]) + values[0]; } return rv; } function playAnimation(){ const objs = sceneInfo[currentScene].objs; const values = sceneInfo[currentScene].values; const currentYOffset = yOffset - prevScrollHeight; switch (currentScene){ case 0: let messageA_opacity_in = calcValues(values.messageA_opacity, currentYOffset) objs.messageA.style.opacity = messageA_opacity_in console.log(messageA_opacity_in) break; case 1: break; case 2: break; case 3: break; } } 도와주세요 ㅠ  

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() 두 가지 모두트윈의 값을 미리 셋팅하는 역할을 하는데 어떤 상황에서 어떤 것을 사용해야할지 감이 잡히지 않습니다.