Posts
My thoughts and ideas
-
이미지 슬라이더 만들기
Toy Project ·두 번째 프로젝트로 이미지 슬라이드를 만들어 보자. html과 css를 이용해 이미지 슬라이드를 만들고, next, previous 버튼을 이용해 이미지 이동 버튼을 구현해보자. 그리고 indicator를 개발해서 원하는 index로 이미지가 이동하도록 해보자. 기본 상태가 autoplay 상태로 하고, stop을 할 수 있도록 구현해보자.
autoplay Icon 버튼
- Font Awesome이라는 오픈 소스 라이브러리를 사용해봤다. Font Awesome의 Free 버전에 있는 play 아이콘을 사용해보자.
-
가상 keyboard 만들기
Toy Project ·첫 프로젝트로 가상 키보드를 만들어 보자. 웹팩을 활용해서 개발환경을 설정하고, HTML과 CSS를 이용해 키보드 레이아웃을 하고, 다크 테마 기능과 폰트 변경 기능도 추가 해보자. 그리고 마지막으로 키 이벤트를 이용해 실제 키보드를 눌렀을 때 어떤 키가 눌러지는지 화면상으로 보여주도록 하자. 그리고 마우스 이벤트를 이용해서도 키 컨트롤을 눌렀을 때 입력이 가능하도록 하자.
웹팩 설정
- 가장 먼저, package.json을 초기화