본문 바로가기
[자바스크립트] 키보드 이벤트 처리 (Enter 키) 자바스크립트에서 키보드 이벤트는 사용자가 키보드를 눌렀거나 뗀 때 발생하는 이벤트를 의미합니다. 이러한 이벤트를 사용하여 사용자가 웹 페이지에서 무엇을 하는지 감지하고, 그에 따라 적절한 동작을 수행할 수 있습니다. 1. 기본 설명 키보드 이벤트는 다양한 종류가 있습니다. 대표적인 이벤트로는 keydown, keyup, keypress가 있습니다. 이들 이벤트의 차이점은 다음과 같습니다. keydown: 사용자가 키를 누를 때 발생하는 이벤트입니다. 이벤트 핸들러가 실행되기 전에 발생합니다. keyup: 사용자가 키를 뗄 때 발생하는 이벤트입니다. 이벤트 핸들러가 실행된 후에 발생합니다. keypress: 사용자가 키를 누르거나 뗄 때 발생하는 이벤트입니다. 이벤트 핸들러가 실행되기 전에 발생합니다. 이.. 2023. 3. 15.
[자바스크립트] LocalStorage 만료 시간 설정 LocalStorage는 브라우저에 데이터를 저장하기 위한 메커니즘 중 하나입니다. LocalStorage는 일반적으로 사용자가 브라우저 탭을 닫거나 컴퓨터를 종료해도 데이터가 유지되는 영구적인 저장소입니다. 하지만 LocalStorage는 만료 날짜를 설정하는 기능이 없습니다. 즉, 데이터는 무제한으로 유지됩니다. 따라서 LocalStorage를 사용할 때 데이터를 유효기간이 만료되면 자동으로 삭제되도록 설정해야합니다. 이를 위해서는 JavaScript를 사용하여 로컬 스토리지에 만료 시간을 설정해야합니다. 1. 예제 코드 LocalStorage에서 데이터를 저장할 때 데이터와 함께 유효기간을 함께 저장하면 된다. 예를 들어, 만료일을 현재 시간부터 7일 이후로 설정하려면 다음과 같이 코드를 작성할 수.. 2023. 3. 15.
[자바스크립트] 문자열을 숫자로 바꾸는 방법 (Number, parseInt) JavaScript에서 Number()와 parseInt() 함수는 문자열을 숫자로 변환하는 데 사용됩니다. 하지만 두 함수는 다른 방식으로 동작하며, 각각의 고유한 용도와 제약 사항이 있습니다. 1. Number() Number() 함수는 문자열을 숫자로 변환하는 가장 간단하고 일반적인 방법입니다. 이 함수는 인수로 전달된 값이 어떤 유형인지에 따라 다르게 동작합니다. 예를 들어: Number('123') // 123 Number('123.45') // 123.45 Number('0xFF') // 255 Number('1.23e+5') // 123000 Number('hello') // NaN Number(true) // 1 Number(false) // 0 Number(null) // 0 Number.. 2023. 3. 15.
[자바스크립트] 문자열 배열로 자르기 (split 함수) JavaScript의 split() 함수는 문자열을 특정 구분자(delimiter)를 기준으로 나누어 배열로 반환하는 함수입니다. 이 함수는 다양한 상황에서 사용될 수 있으며, 문자열을 처리하고 분석하는 데 유용합니다. 1. 설명 split() 함수는 다음과 같은 구문을 가집니다. string.split(separator, limit) split() 함수는 두 개의 매개변수를 가질 수 있습니다. separator: 필수 매개변수로, 문자열을 나눌 기준이 되는 구분자입니다. 이 매개변수는 문자열 또는 정규표현식으로 지정할 수 있습니다. 만약 생략된 경우, 문자열 전체가 하나의 배열 요소로 반환됩니다. limit: 선택적 매개변수로, 반환할 배열 요소의 최대 개수를 지정합니다. 이 매개변수가 생략된 경우, .. 2023. 3. 15.
[자바스크립트] 오디오 플레이어 (Audio Player) 만들기 예제 HTML, CSS 및 JavaScript를 사용하여 오디오 플레이어를 만들어보겠습니다. 이 예제는 HTML5 오디오 요소를 사용하여 오디오를 재생합니다. 1. HTML 코드 우선, HTML 코드를 작성하겠습니다. HTML 코드는 다음과 같습니다. 00:00 / 00:00 위의 코드는 기본적인 HTML 문서를 정의합니다. HTML5 오디오 요소를 포함하고 있으며, 이 요소는 id 속성이 "audio-player"로 지정되어 있습니다. 다음으로, 컨트롤러를 구성하는 요소를 추가하겠습니다. 이 요소들은 사용자가 오디오를 제어할 수 있는 버튼, 타임 라인, 현재 재생 시간 및 전체 재생 시간을 표시합니다. 2. CSS 코드 이제 CSS 코드를 작성하여 컨트롤러를 스타일링하겠습니다. 다음과 같이 코드를 작성합니다.. 2023. 3. 14.
[HTML/CSS] 구글 웹폰트 적용 방법 Noto Sans KR을 HTML, CSS에 적용하는 방법은 다음과 같습니다. 1. 구글 웹폰트 라이브러리 링크 가져오기 먼저, Noto Sans KR 폰트를 사용하기 위해서는 구글 웹폰트 라이브러리를 가져와야 합니다. 이를 위해서는 아래 코드를 HTML head 태그 안에 추가합니다. 2. CSS에서 Noto Sans KR 폰트 지정하기 Noto Sans KR 폰트를 사용하려면 CSS에서 해당 폰트를 지정해야 합니다. CSS에서 font-family 속성을 사용하여 폰트를 지정할 수 있습니다. 아래 코드를 CSS에 추가하여 Noto Sans KR 폰트를 지정합니다. body { font-family: 'Noto Sans KR', sans-serif; } 위 코드에서 sans-serif는 Noto San.. 2023. 3. 14.

티스토리툴바