튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 26 - Stripe Follow Along Nav 튜토리얼 분류: JavaScript 튜토리얼 설명: 내비게이션 바의 드롭다운 메뉴의 나타나고 사라지는 효과 자연스럽게 이어지도록 하기 진행기간: 2020년 5월 10일 내비게이션 바 항목에 하위 링크를 연결하고 싶을 때 사용하는 드롭다운 메뉴. 가장 기본적인 드롭다운 메뉴는 링크에 마우스 커서를 올리면 나타나고, 마우스 커서를 떼면 사라진다. 이 드롭다운 메뉴를 좀 더 시각적으로 자연스럽게 보이도록, 링크 사이에서 이어지듯이 나타나고 사라지게 해보자. 드롭다운 메뉴 나타나고 사라지게 하기 우선 마우스를 올리면 나타나고, 떼면 사라지도록 만들어야 한다. 아래의 코드를 보자. 내비게이션 바의 모..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 22 - Follow Along Link Highlighter 튜토리얼 분류: JavaScript 튜토리얼 설명: 마우스 커서에 따라 웹페이지 하이라이트가 이어지는 듯한 효과 나타내기 진행기간: 2020년 5월 6일 웹페이지의 특정 요소 사이에서 마우스 커서가 이동시킬 때, 하이라이트 효과가 부드럽게 이어지는 듯한 시각적 효과를 줄 수 있다. 다음과 같이 프로그래밍하면 된다. 1. 하이라이트의 대상이 될 HTML 요소 지정 2. 하이라이트 효과를 표현할 HTML 요소 생성 3. 대상 요소에 마우스 커서가 위치할 경우 하이라이트 효과 활성화 4. 하이라이트 효과의 위치와 크기를 대상 요소와 같게 만듦 5. 사용자의 마우스 스크롤 추가 반영 순서..