HTML5, CSS3, 자바스크립트 Javascript 등
소개 자바스크립트로 특정 두 날짜 사이의 간격을 시분초 또는 연일월 단위로 구하고 싶다면 어떻게 해아할까요? 방법은 아래와 같습니다. 방법 날짜 비교를 위한 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 프로젝트 더보기…
CSS MASK-IMAGE 아래와 같은 이미지를 마스킹(마스크 적용)하는 방법입니다. 참고: 이미지 마스킹(마스크)이란? 마스킹으로 덧씌울 PNG 이미지 파일을 준비합니다. 이 마스킹 이미지를 씌우면 투명한 부분은 표시되지 않고, 검은색 부분은 표시가 됩니다. HTML 파일에서 적용하고자 하는 요소에 다음 CSS를 삽입합니다. img { -webkit-mask-image: url(“ddmask.png”); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-image: 더보기…
자바스크립트는 아무 곳에서나 시스템의 변수, 함수, 객체들을 맘대로 덮어쓸 수 있다는 문제점이 있지만, 그 문제점을 역으로 이용하여 콘솔 로그를 브라우저 내에 표시하는 것이 가능합니다. 먼저 body 태그 내에 콘솔 로그를 표시할 영역을 생성합니다. <pre id=”console”></pre> 다음 자바스크립트에서 위의 pre 태그를 불러옵니다. const consoleDiv = document.getElementById(“console”) 아래의 consoleToHtml 함수를 작성합니다. const 더보기…