자바스크립트 디지털 시계 만들기
안녕하세요. 이번 포스팅에서는 자바스크립트(라이브러리 미사용)를 이용해 디지털 시계 구현하는 방법에 대해 정리해보도록 하겠습니다. 자바스크립트를 막 공부하기 시작한 초보자들에게 적합한 소규모 프로젝트 성격의 예제입니다. 목표 웹페이지에 위와 같은 모습의 단순한 시계를 표시할 것입니다. 처음 페이지가 열렸을 때는 페이지가 열린 시점의 시간이 표시되고 시계가 멈춰있습니다. 그러다 GO 버튼을 누르면 GO 버튼을 누른 시점에서부터 시간이 흐르기 시작합니다. 그러다 STOP 버튼을 누르면 다시 시계가 멈춥니다. 코드 HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 디지털 시계 만들기 STOP GO 12 : 클래스가 clock인 div 요소가 실제 시계 역할을 ..
안녕하세요! 오늘은 모바일 전용 이미지 슬라이더를 간단하게 구현해보았습니다. 모바일에서는 손가락을 이용해 영역을 터치하면 터치이벤트가 발생하게 되는데, 이 터치의 시점과 위치를 잘 이용하면 버튼 없이 손가락만으로 움직일 수 있는 이미지 슬라이더 구현이 가능합니다. 그럼 바로 코드를 볼텐데, 참고로 코드 구성은 index.html + styles.css + script.css 세 가지입니다. index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 Slider for mobile SWIPE! 태그는 단순히 이미지 네 장을 포함하고 있는 블록 영역을 만드는 것 외에 특별한 사항이 없습니다. 이미지는 제가 개인적으로 보관하고 있는 제 개인 ..
[Javascript] 바닐라 자바스크립트란? What is Vanilla Javascript?
바닐라 자바스크립트 바닐라 자바스크립트(Vanila Javascript)란, 라이브러리나 프레임워크를 사용하지 않는 순수한 형태의 자바스크립트를 의미합니다. 좀 더 구체적으로 이야기하자면, 바닐라 자바스크립트는 프로그래밍 문제를 해결하기 위해 어떤 도우미 라이브러리나 프레임워크를 사용하는 것보다 코어 API나 유틸리티를 사용하여 코딩하는 방식을 의미합니다. 오늘날 대부분의 자바스크립트 프로그램은 제이쿼리, 리액트, 앵귤러 등 다양한 프레임워크 및 라이브러리에 의해 구현된 기능을 사용하고 있는데, 사실 이러한 라이브러리의 기능들은 모두 자바스크립트 언어를 기반으로 구현이 되어 있기에, 바닐라 자바스크립트 만으로도 구현이 가능한 것들입니다. ECMA Script (ES) 순수한 형태의 자바스크립트를 이야기할..