튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 28 - Video Speed Scrubber 튜토리얼 분류: JavaScript 튜토리얼 설명: 영상 속도를 실시간으로 조절하고 보여주는 슬라이더 만들기 진행기간: 2020년 5월 13일 HTML Video 태그로 웹페이지에 삽입된 영상은 JavaScript를 사용해 속성을 다양하게 변경할 수 있다. 커서 위치에 반응하는 슬라이더를 만들어 영상 재생 속도를 실시간으로 조절해보자. 커서 위치에 따라 슬라이더의 높이 변경하기 우선, 현재 재생 속도를 시각적으로 나타내야 한다. 다음의 코드를 보자. speed는 슬라이더의 배경, bar는 슬라이더에 해당하는 DOM 요소이다. 슬라이더를 마우스 커서와 연동하려면 mousemove 이벤트에 이벤트 리..

웹페이지의 요소의 내용이 요소 자체의 크기를 초과할 경우, 스크롤이 되는 슬라이더가 자동으로 생깁니다. 일반적으로 마우스 휠을 사용해 스크롤하지만, JavaScript를 활용하면 드래그로도 스크롤을 할 수 있습니다. 이 글에선 드래그를 사용한 기본적인 좌우 스크롤을 구현합니다. 튜토리얼 정보 출처: JavaScript30 이름: Day 27 - Click and Drag to Scroll 언어: JavaScript 목표: 웹페이지 요소를 드래그하고 좌우로 움직였을 때 스크롤과 같은 효과 구현하기 진행 기간 2020년 5월 11일 마우스 이벤트와 슬라이더 연동시키기 마우스가 현재 드래그 중이라는 것을 인식시키기 위해, 관련 마우스 이벤트를 슬라이더와 연동시켜줘야 합니다. 현재 마우스가 클릭 중인지를 지속적..

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

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 25 - Event Capture, Propagation, Bubbling and Once 튜토리얼 분류: JavaScript 튜토리얼 설명: JavaScript 이벤트의 전파(Propagation)과 전파 방식 두 가지, 이벤트 버블링과 이벤트 캡쳐 진행기간: 2020년 5월 9일 웹페이지의 DOM 요소를 어떤 이벤트에 반응하게 하고 싶다면, 일반적으로 JavaScript의 addEventListener( ) 메서드를 활용해 해당 요소에 이벤트 리스너를 등록한다. 그런데 DOM 요소의 배치와 이벤트리스너가 등록된 상황에 따라 예상하지 못한 방식으로 동작할 수 있다. 중첩된 DOM 요소와 이벤트의 작동 방식 위처럼 여러 DOM 요소가 중첩되고..

일반적인 웹페이지는 아래로 스크롤하면 웹페이지의 내용도 따라서 움직이고, 브라우저의 높이보다 내용이 길 경우 상단의 경계를 넘어간 부분은 보이지 않게 됩니다. 그렇지만 JavaScript를 활용하면 스크롤과 상관없이 화면에 계속 남아있게 할 수 있습니다. 이번 튜토리얼에선 페이지 중간에 있다가, 스크롤을 내리면서 페이지 상단에 고정되는 내비게이션 바를 만듭니다. 튜토리얼 정보 출처: JavaScript30 이름: Day 24 - Sticky Nav 언어: JavaScript, CSS 목표: 페이지 중간에 있다가, 스크롤을 밑으로 내리면 페이지 상단에 고정되는 내비게이션 바 만들기 진행 기간 2020년 5월 8일 마우스 스크롤 이벤트와 내비게이션 바 연동시키기 내비게이션 바가 스크롤에 따라 올라가다가 화면..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 23 - Speech Synthesis 튜토리얼 분류: JavaScript 튜토리얼 설명: 브라우저에 내장된 음성 합성기를 이용해 텍스트 입력 음성으로 변환하기 진행기간: 2020년 5월 7일 대부분의 최신 브라우저는 음성 합성 인터페이스를 지원한다. 입력한 텍스트를 지정한 스타일의 음성으로 변환해주는 기본적인 음성 합성기를 만들어보자. 음성으로 합성될 메시지 지정하기 SpeechSynthesisUtterance는는 합성될 음성이 어떤 내용을 읽을지, 그리고 어떻게 읽을지에 대한 정보를 갖는 인터페이스이다. 먼저 생성자를 통해 SpeechSynthesisUtterance 객체를 만들고, 텍스트상자에 입력된 내용을 객체의 text 속성에 지정한..