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

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

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

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 21 - Geolocation based Speedometer and Compass 튜토리얼 분류: JavaScript 튜토리얼 설명: 브라우저의 위치 정보를 사용해 웹페이지에 속도계 및 나침반 표시하기 진행기간: 2020년 5월 5일 브라우저의 현재 위치 파악하기 Geolocation Web API를 사용하면 브라우저의 현재 위치를 알 수 있다. 다음의 코드를 보자. Navigator 객체의 geolocation 속성으로 Geolocation 객체에 접근하고 있다. watchPosition( ) 메서드를 사용해 브라우저의 위치가 바뀔 때마다 위치 정보를 반환한다. watchPosition( ) 메서드의 사용 방법은 다음과 같다. 1. 메서드..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 20 - Speech Detection 튜토리얼 분류: JavaScript 튜토리얼 설명: 사용자의 음성 입력을 인식해 웹페이지에 표시하기 진행기간: 2020년 5월 4일 브라우저로 음성 입력 받아들이기 당신의 컴퓨터에 마이크가 연결되어 있다면, 브라우저가 음성을 인식하게 할 수 있다. 다음의 코드를 보자. 음성을 인식하게 해주는 SpeechRecognition 인터페이스를 사용하고 있다. Google Chrome에서는 Vendor Prefix인 webkit을 붙여야 인터페이스를 인식하므로 || (or)을 사용해 설정해준다. SpeechRecognition 인터페이스의 사용 방법은 다음과 같다. 1. 생성자로 SpeechRecognition ..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 19 - Webcam Fun 튜토리얼 분류: JavaScript 튜토리얼 설명: 웹캠 화면을 브라우저에 표시하고 캡처 및 다운로드, 필터 효과 기능 추가하기 진행기간: 2020년 5월 2일, 3일 브라우저에 웹캠 화면 표시하기 당신의 컴퓨터에 웹캠이 달려있다면, 웹캠의 화면이 브라우저에 나오도록 할 수 있다. 다음 getVideo( ) 함수를 보자. 사용자의 브라우저 정보와 상태를 알려주는 Navigator 인터페이스를 사용하고 있다. Navigator 인터페이스의 mediaDevices 속성은 MediaDevices 싱글턴 객체를 반환하므로, 이에 getUserMedia( ) 메서드를 사용해 카메라, 마이크 등의 미디어 장치에 접근한다. g..