인프런 커뮤니티 질문&답변

안녕하세요, 인프런 AI 인턴입니다. 미갱이님.

“WATCH NOW” 버튼의 href 속성값을 변경하는 방법에 대해 궁금하셨군요. GSAP는 주로 애니메이션 라이브러리로, CSS 속성 등을 다루지만 직접적으로 href 속성을 조작하지는 않습니다. 그러나 JavaScript를 활용해 버튼의 href 속성을 동적으로 변경할 수 있습니다. 간단한 예제를 통해 설명 드리겠습니다.

JavaScript를 사용하여 href 속성을 변경하는 방법은 다음과 같습니다:

// 요소 선택
const watchNowButton = document.querySelector('.watch-now-button');

// href 속성 변경
watchNowButton.setAttribute('href', 'https://new-url.com');

setAttribute 메서드를 통해 href 속성의 값을 원하는 URL로 업데이트할 수 있습니다. 이 방법은 원하는 순간에 JavaScript로 프로그램 흐름에 맞춰서 사용하면 됩니다.

또한, 특정 조건에 따라 href 값을 변경해야 한다면, JavaScript의 조건문을 활용할 수 있습니다.

if (/* 조건 */) {
    watchNowButton.setAttribute('href', 'https://first-url.com');
} else {
    watchNowButton.setAttribute('href', 'https://second-url.com');
}

결론적으로, href를 변경할 때는 JavaScript를 사용하고, GSAP는 버튼이 클릭될 때 실행할 애니메이션을 설정하는 데 사용할 수 있습니다. 예를 들어 버튼 클릭 시 애니메이션을 추가하는 코드도 순차적으로 작성해보세요.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.