-
2022.09.27
[CSS] 다크/라이트 모드 구현 방법
다크/라이트 모드 구현 방법 들어가며 CSS를 이용하여 홈페이지에 다크/라이트 모드를 적용할 수 있다. 보통 토글(Toggle) 버튼을 만들어서 사용자가 기호에 따라 원하는 모드로 변경할 수 있도록 한다. (자바스크립트 또는 제이쿼리를 사용해서 구현할 수 있다.) 방법 방법 ① : prefers-color-scheme 미디어 쿼리 이용하기 prefers-color-scheme 미디어 쿼리는 사용자의 OS에 설정된 라이트/다크 모드를 실시간으로 감지하여 최적화된 CSS 스타일이 적용되도록 해준다. 감지하는 역할만 하기 때문에, 아쉽게도 토글 버튼 등을 이용하여 속성을 변경시킬 수는 없다. (light ↔ dark) @media (prefers-color-scheme: light) { /* 라이트 모드에 적..
-
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.06.03
[JavaScript] jQuery를 사용하지 않고 최상단 화면 이동 기능 구현하기
jQuery를 사용하지 않고 최상단 화면 이동 기능 구현하기 들어가며 제이쿼리(jQuery)를 사용하지 않고, 자바스크립트(JavaScript)만으로 화면의 최상단으로 이동할 수 있는 버튼을 만들 수 있다. 방법 1 : 스크롤 이동 효과를 주며 이동하기 ID가 "scrollup"인 버튼을 누르면 스크롤이 이동하는 효과와 함께 화면의 최상단으로 이동하도록 해보자. HTML JavaScript var scrollBtn = document.getElementById('scrollup'); // 10 밀리세컨드(ms) 마다 -50px 씩 스크롤된다. const scrollWindow = function () { if (window.scrollY != 0) { setTimeout(function () { wind..
-
2022.05.12
[JavaScript] 특정 요소를 새로운 새로운 창으로 띄우기
특정 요소를 새로운 창으로 띄우기 개요 자바스크립트를 이용하여 특정 요소를 새 창으로 띄울 수 있도록 할 수 있다. 코드 See the Pen PopUpElem (with JavaScript) by Sangsoon Kim (@starrykss) on CodePen.
-
2022.05.09
[JavaScript] 디데이 카운터(D-Day Counter) 만들기
디데이 카운터(D-Day Counter) 만들기 들어가며 자바스크립트를 이용하여 디데이 카운터를 만들어보자. 코드 See the Pen Untitled by Sangsoon Kim (@starrykss) on CodePen. 사파리(Safari) NaN 이슈 해결하기 사파리(Safari) 또는 IE8 이하의 브라우저를 사용할 경우, Date() 함수의 출력 결과가 NaN으로 표시된다. 이 문제를 해결하기 위해 입력값을 넣을 때, 다음과 같이 일(DD)과 시간(HH) 사이에 T를 넣어준다. new Date('2014-02-18T15:00:48') 혹은 다음과 같이 replace() 함수를 사용한다. new Date('2014-02-18T15:00:48'.replace(/\s/, 'T')). 참고 : htt..
-
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,..
-
2020.11.05
Checkbox, Radio, Select에서 선택된 항목 출력하기
Checkbox, Radio 또는 Select 에서 선택한 항목을 가져와 자바스크립트로 출력하는 코드각각 사용법이 다르다는 것을 명심하자. 1. Checkbox - 코드 1234567891011121314151617181920212223242526272829303132333435363738394041 Document function output(form) { var a = "당신의 취미는 \n"; if (form.check1.checked) { // checked 속성 확인 a += form.check1.value + "\n"; } if (form.check2.checked) { // checked 속성 확인 a += form.check2.value + "\n"; } if (form.check3.chec..
