HTML5, CSS3, 자바스크립트 Javascript 등
소개 HTML과 자바스크립트를 이용해 아래와 같이 숫자(Transpose)를 조절하면 서버 상에 있는 오디오 음원의 음정(pitch, 음높이)이 높아지거나 낮아지게 할 수 있습니다. 웹 페이지에서 다른 음높이의 오디오 음원을 재생하고 싶을 때 사용합니다. 장점 외부 라이브러리를 사용하지 않습니다. 단점 음정을 높이면 속도도 같이 조절됩니다. (음정과 속도가 연동됩니다.) playbackRate를 조절하여 속도를 낮춰보려 했으나 속도를 더보기…
소개 아래와 같이 글자를 형광펜으로 칠한 듯한 효과를 주려면 어떻게 해야할까요? 아래와 같이 CSS를 추가하면 됩니다. <span class=”highlight-text”>Applications will open in February 2024 for three weeks.</span> .highlight-text { background: linear-gradient(104deg, #ffd6b2 0%, #ffc089 100%); padding: 0px 0px; box-shadow: 1px 2px 0px #ffd6b2, -4px 2px 0px #ffc089; border-radius: 4px; } 해설 더보기…
소개 자바스크립트로 특정 두 날짜 사이의 간격을 시분초 또는 연일월 단위로 구하고 싶다면 어떻게 해아할까요? 방법은 아래와 같습니다. 방법 날짜 비교를 위한 Date 인스턴스를 두 개 만듭니다. 이 두 인스턴스를 빼기 연산(-)을 한 뒤 절대값을 씌우면 두 날짜 사이의 밀리초(milliseconds) 차이가 됩니다. 이 값에 1일의 밀리초 단위인 (1000 * 더보기…
자바스크립트: 패스워드 안전도(강도; Strength) 표시하기 아래와 같이 입력받은 패스워드가 얼마나 안전한지 Progress Bar로 표시하는 예제입니다. 강력한 보안이 요구되는 서비스에서 패스워드가 털릴 위험이 있는지 사전 체크하는 용도로 쓰입니다. 위 움짤에서 특수문자, 영문 대소문자, 숫자들을 적절히 섞어서 안전한 패스워드라면 초록색의 꽉찬 그래프로 표시하고, 덜 안전할수록 그래프 진행 상황이 낮은 상태의 빨간색 더보기…
참고 자바스크립트: JSONP (JSON Padding) 사용법 PHP: cURL 기초 (정적 웹 페이지에서 정보 가져오기) 자바스크립트(JavaScript)에서 쿼리 파라미터(query parameter) 값을 알아내는 방법 PHP: CORS 에러를 회피하기 위한 API의 프록시(중계) 페이지 만들기 HTML + 자바스크립트를 이용해 웹 페이지를 만들 때 외부 API를 사용하는 과정에서 흔히 CORS 위반이라 불리는 에러를 많이 접할 더보기…
자바스크립트(JavaScript): 비트 연산자 (Bit Operator) 비트 연산자란 2진수(binary)를 연산할 때 사용하는 연산자입니다. 예를 들어 십진법으로 표기한 정수 70을 이진법 표기로 변환하면 1000110B 가 되는데, 이 이진법으로 변환된 값을 기준으로 연산을 수행하는 연산자가 비트 연산자입니다. 이하 별도의 표기법이 없는 경우는 전부 십진법 숫자이며, 이진법은 (이진법: 숫자) 또는 숫자 뒤에 B가 붙어 더보기…
노트 프로그래밍 방식으로 선택 먼저 ABCJS.renderAbc의 옵션 파라미터에서 add_classes가 true여야 합니다. (아래 노트 클릭(선택) 방지하기 단락의 코드 참조) add_classes: true, 추가하였다면 아래 클래스 목록을 참고하여 abcjs-[클래스이름] 의 HTML DOM에 abcjs-highlight 클래스를 추가하면 됩니다. (태그 이름은 <g>) 예를 들어 악보에서 네 번째 노트의 클래스 이름은 abcjs-n3 입니다. 0부터 시작(zero-based)이므로 더보기…
리액트가 아닌 일반 타입스크립트에 대한 이벤트 처리는 아래를 참고하세요, 타입스크립트(TypeScript): HTML 요소에 이벤트 추가 리액트 + 타입스크립트 (React + TypeScript): HTML 요소, 폼의 이벤트 처리 아래와 같이 폼에 대한 이벤트 처리를 하는 JSX를 사용한 리액트 Hook이 있다고 가정합니다. import { useState } from ‘react’ function App() { const [text, 더보기…
스켈레톤 로딩(Skeleton Loading), 스켈레톤 스크린 최근 여러 웹 사이트나 앱 등에서 유행하는 로딩 화면(프로그레시브 인디케이터)으로 스켈레톤 스크린이라는 것이 있습니다. 단순히 로딩 스피너나 막대기를 보여주는 대신, 화면의 레이아웃을 유지하면서 진행 상황을 표시하기 때문에 사용자의 입장에서 체감 로딩시간이 줄어든다는 장점이 있습니다. 구현 단계 실제 서비스에서는 훨씬 더 복잡하겠지만, 대략적인 구현 단계는 더보기…
타입스크립트(TypeScript): HTML 요소에 이벤트 추가 이벤트 할당 방법은 자바스크립트와 본질적으로는 동일하지만, 일반 자바스크립트와 다른 점이라면 타입스크립트 코드에서는 변수가 어떤 타입인지를 명시해야 한다는 점입니다. 타입을 제대로 지정하지 않을 경우 코드상에서 빨간 밑줄로 표시되는 에러가 발생합니다. 1: Typescript 프로젝트를 생성합니다. npm과 vite를 이용하면 타입스크립트 프로젝트를 만들 수 있습니다. 첫 vite 프로젝트 더보기…