-
2022.06.16
[JavaScript] 키 코드(Key Code) 정리 (키보드 이벤트)
키 코드(Key Code) 정리 (키보드 이벤트) 들어가며 자바스크립트에서 사용할 수 있는 키 코드(Key Code)를 정리해본다. 키 코드(Key Codes) Key Code Key Code Unicode Description 0 Unidentified These keys do not have a key code 3 Cancel Pause break 8 Backspace Backspace ⌫ backspace / delete 9 Tab Tab ↹ tab 12 Clear NumLock ⌧ clear 13 Enter Enter ↵ Enter / Return 16 Shift ShiftLeft ⇧ shift 17 Control ControlLeft 18 Alt AltLeft ⎇ / ⌥ Alt / Option ..
-
2022.04.27
[JavaScript] 공백이 검색되지 않도록 하기 (검색창 구현)
공백이 검색되지 않도록 하기 (검색창 구현) 개요 검색창(Search Bar) 기능을 구현할 때, 자바스크립트(JavaScript)를 이용하여 공백의 내용이 검색되지 않도록 설정할 수 있다. 방법 검색창의 내용이 비어있는지 확인하는 알고리즘이 들어있는 함수를 생성한다. getElementById() 함수를 사용하여 검색창(searchbar)에 있는 값(value)을 가져온 후, trim() 함수를 이용하여 공백('')을 기준으로 잘라준다. trim() 함수를 사용한 후의 값의 공백일 경우, 내용이 비어있다는 메시지와 함께 함수를 종료시켜준다. 그렇지 않을 경우 검색 작업을 수행시키도록 한다. 전송(submit) 버튼의 onclick 속성에 함수를 넣어준다. 사용 예 HTML JavaScript funct..
-
2022.04.12
[JavaScript] Scroll Indicator 구현하기
Scroll Indicator 구현하기 개요 자바 스크립트를 이용하여 Scroll Indicator 를 구현할 수 있다. 코드 See the Pen Untitled by Sangsoon Kim (@starrykss) on CodePen.
-
2022.02.25
[HTML/CSS/JS] Scroll Indicator 만들기
Scroll Indicator 만들기 화면의 스크롤에 따라 이동된 양을 표시하는 Scroll Indicator 를 다음과 같이 쉽게 만들 수 있다. Scroll Indicator Scroll Down to See The Effect We have created a "progress bar" to show how far a page has been scrolled. It also works when you scroll back up. It is even responsive! Resize the browser window to see the effect. Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,..
