three.js로 웹 장면을 만들다 보면 캔버스 뒤에 있는 HTML 요소가 비치도록 배경을 투명하게 처리해야 하거나, 반대로 특정 배경색을 지정해야 하는 경우가 있습니다. 이 두 가지 모두 WebGLRenderer의 옵션과 setClearColor() 메서드를 활용하면 간단하게 해결할 수 있습니다.1. three.js 배경을 투명하게 만들기투명한 배경을 사용하려면 렌더러 생성 시 생성자에 alpha 옵션을 true로 전달해야 합니다. 그런 다음 setClearColor()의 두 번째 인자(알파 값)를 0으로 설정하면 배경이 완전히
HTML5의 로컬 스토리지(localStorage)는 브라우저에 데이터를 영구적으로 저장할 수 있는 편리한 기능이지만, 무제한으로 사용할 수 있는 것은 아닙니다. 저장 용량에는 명확한 크기 제한이 존재합니다.로컬 스토리지의 기본 크기 제한일반적으로 로컬 스토리지의 표준 용량 제한은 도메인(정확히는 오리진, origin)당 5MB 또는 10MB입니다. HTML5 표준 명세에서는 오리진당 5MB를 권장하고 있습니다.하위 도메인을 이용한 우회 시도에 대한 경고흥미로운 점은, HTML5 명세에서는 사이트가 자신의 오리진과 연관된 다른 하위
HTML5의 File API와 jQuery의 AJAX 기능을 조합하면 페이지를 새로고침하지 않고도 파일을 비동기적으로 업로드할 수 있습니다. 아래에서는 클라이언트 측과 서버 측 처리 과정을 단계별로 살펴보겠습니다.1. 클라이언트 측: 폼 제출 시 파일 읽기사용자가 폼을 제출하면 기본 제출 동작을 가로채고, 다음 코드 스니펫을 실행하여 파일을 업로드합니다.// File 1 var myFile = document.getElementById(fileBox).files[0]; var reader = new FileReader(); read
오디오 재생 상태 확인하기HTML5에서 오디오가 현재 재생 중인지 확인하려면 paused 속성을 활용하면 됩니다. 다음 함수를 사용하면 간단하게 재생 여부를 판단할 수 있습니다.function isPlaying(audelem) { return !audelem.paused;}위 코드는 오디오가 재생 중인지 아닌지를 확인하는 역할을 합니다. 오디오 태그에는 paused 속성이 내장되어 있으며, 이 속성은 해당 오디오 또는 비디오가 일시정지 상태인지 여부를 불리언(Boolean) 값으로 반환합니다
캔버스(<canvas>) 요소 안에 그려진 도형들은 DOM에 별도의 표현(representation)을 갖지 않습니다. 캔버스에는 픽셀과 색상 정보만 존재할 뿐이며, 그리기 작업은 즉시 모드(immediate mode)로 비트맵을 그리는 방식으로 처리됩니다.따라서 캔버스 위의 특정 도형에서 클릭 이벤트를 감지하려면, 캔버스 HTML 요소 자체에서 클릭 이벤트를 받은 뒤 마우스 좌표를 계산하여 어떤 도형이 클릭되었는지 직접 판별해야 합니다. 이를 위해서는 각 도형의 위치(left, top)와 크기(width, height)
캔버스의 이미지 데이터 URL을 얻으려면 toDataURL() 메서드를 사용합니다. 이 메서드는 캔버스에 그려진 내용을 Base64로 인코딩된 PNG 형식의 데이터 URL 문자열로 변환해 줍니다. toDataURL() 메서드란? canvas.toDataURL()은 캔버스의 현재 화면 상태를 그대로 이미지 데이터로 직렬화하여 반환합니다. 기본 출력 형식은 PNG이며, 필요에 따라 매개변수를 지정해 JPEG나 WebP 같은 다른 이미지 형식으로도 변환할 수 있습니다. PNG(기본값): 배경이 투명하게 유지되며 무손실 압축을 지원합니다
HTML5로 클라이언트 측에서 파일 크기 확인하기 HTML5가 등장하기 전에는 웹에서 파일 크기를 확인하려면 플래시(Flash)에 의존해야 했습니다. 그러나 보안 및 성능 문제로 인해 최근 웹 애플리케이션에서는 플래시 사용을 지양하고 있습니다. 다행히 HTML5의 File API를 활용하면 별도의 플러그인 없이 자바스크립트만으로 클라이언트 측에서 파일 크기를 손쉽게 확인할 수 있습니다. File 객체의 size 속성 사용하기 파일 입력 요소(<input type=file>)에서 선택된 파일은 files 배열에 저장되며,
드롭다운 메뉴를 열어두고 다른 곳을 클릭하면 자동으로 닫히는 동작을 한 번쯤은 보셨을 것입니다. 기본적으로 부트스트랩은 드롭다운 외부 영역을 클릭하면 메뉴를 즉시 닫도록 설계되어 있습니다.hide.bs.dropdown 이벤트로 드롭다운 열린 상태 유지하기클릭한 후에도 드롭다운 메뉴가 닫히지 않고 계속 열려 있게 하려면 아래 코드처럼 hide.bs.dropdown 이벤트에서 false를 반환하면 됩니다.$(#myDropdown).on(hide.bs.dropdown, function () { return false; });이 방
웹 페이지에서 배경색이 동적으로 변하는 경우, 텍스트가 어떤 배경 위에서도 항상 잘 보이도록 만들고 싶다면 배경의 평균 밝기를 계산하여 그 결과에 따라 글자 색을 검정 또는 흰색으로 전환하는 방법을 사용할 수 있습니다. 아래 예제는 jQuery를 활용해 이 기능을 구현한 코드입니다. 핵심 원리: YIQ 밝기 계산 공식 텍스트 색상을 결정하는 핵심은 RGB 값을 하나의 밝기 값으로 변환하는 것입니다. 일반적으로 널리 쓰이는 공식은 다음과 같습니다. 밝기 = (R × 299 + G × 587 + B × 114) / 1000 여기서 사
HTML5 캔버스에서 fillText() 줄 바꿈 문제HTML5 캔버스의 fillText() 메서드는 캔버스에 채워진(filled) 텍스트를 그리는 기능을 제공합니다. 하지만 이 메서드는 \n과 같은 개행 문자를 자동으로 처리하지 않기 때문에, 텍스트에 줄 바꿈이 포함되어 있어도 한 줄로 이어져 그려집니다.해결 방법: 텍스트를 분리하여 여러 번 호출하기줄 바꿈을 구현하려면 텍스트를 개행 문자(\n)를 기준으로 분리한 뒤, 각 줄마다 fillText()를 반복 호출하면 됩니다. 이렇게 하면 텍스트가 여러 줄로 나뉘어 각각 따로 그려지
h1은 제목이 아니라 헤딩입니다많은 개발자가 <h1>을 문서 전체의 제목(title)으로 오해하지만, 사실 h1은 헤딩(heading) 요소입니다. HTML5에서는 각 섹셔닝(sectioning) 요소에 독립적인 헤딩 요소를 부여할 수 있으며, 이 때문에 h1이 반드시 페이지 전체의 유일한 제목일 필요는 없습니다.즉, h1은 해당 섹션의 대표 헤딩 역할을 하며, 각각의 <article>이나 <section>은 자신만의 고유한 제목을 가질 수 있습니다. 다만 <h1>은 문서 내에서 가장 중요
개요웹 페이지에서 이미지가 사용자에 의해 임의로 드래그되거나 선택(하이라이트)되는 것을 막고 싶은 경우가 있습니다. JavaScript를 작성하지 않아도 CSS의 user-select 속성과 브라우저별 접두사 속성만으로 이를 간단하게 해결할 수 있습니다.아래 코드 스니펫을 이미지에 적용하면 드래그와 선택이 모두 차단됩니다.img { user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-
UIWebView의 allowsInlineMediaPlayback 속성이란?네이티브 앱 내부의 iOS 웹 브라우저(UIWebView)에는 allowsInlineMediaPlayback이라는 속성이 있습니다. 이 속성은 웹 페이지 안에서 동영상을 인라인(화면 일부 영역에 삽입된 형태)으로 재생할 수 있도록 허용하거나 차단하는 역할을 합니다.iPhone과 iPad의 기본 설정 차이흥미로운 점은 이 속성의 기본값이 기기마다 다르다는 것입니다.iPhone: 기본값이 NO로 설정되어 있어, 동영상을 재생하면 네이티브 전체 화면 플레이어가 자
HTML5에서 캔버스(canvas) 요소를 중앙에 배치하려면, 캔버스 태그를 <div> 태그로 감싼 뒤 해당 div에 가운데 정렬 스타일을 적용하는 방법을 사용할 수 있습니다. div가 중앙 정렬되면 그 안에 포함된 캔버스도 함께 중앙에 배치됩니다.기본 예제<!DOCTYPE html> <html> <body> <div style = "text-align:center;"&g
웹에서 그래픽을 다룰 때 자주 사용되는 HTML의 <canvas> 요소는 무제한으로 크기를 설정할 수 있는 것이 아닙니다. 모든 웹 브라우저는 캔버스의 너비(width), 높이(height), 그리고 전체 면적(area)에 각각 상한선을 두고 있습니다.따라서 고해상도 이미지 처리나 대형 그래픽 작업을 수행할 때는 사용 중인 브라우저의 최대 크기 제한을 반드시 확인해야 합니다. 이 한도를 초과하면 캔버스가 정상적으로 렌더링되지 않거나 빈 화면만 표시될 수 있습니다.브라우저별 canvas 최대 크기Google Chrome크롬
@font-face를 통해 로드한 웹 폰트로 HTML5 <canvas>에 텍스트를 그리면, 처음에는 텍스트가 의도한 서체대로 표시되지 않는 문제가 자주 발생합니다.문제의 원인이 현상의 원인은 브라우저가 아직 네트워크에서 해당 폰트를 완전히 불러오지 못했기 때문입니다. 폰트 로딩이 끝나기 전에 캔버스에 텍스트를 그리면, 브라우저는 시스템에 이미 있는 기본 폰트를 대신 사용합니다. 그 결과 화면에는 의도했던 서체가 아닌 다른 글꼴로 렌더링됩니다.즉, 폰트는 반드시 사용하기 전에 완전히 로드되어야 합니다.해결 방법 1: 숨겨진
HTML5 로컬 저장소에서 키 존재 여부 확인하기웹 개발을 하다 보면 로컬 저장소(localStorage)에 특정 키가 저장되어 있는지 확인해야 하는 경우가 자주 발생합니다. 이럴 때 활용할 수 있는 대표적인 방법은 두 가지가 있으며, 각각의 특징을 이해하고 상황에 맞게 사용하는 것이 좋습니다.1. getItem() 메서드 사용하기getItem(key) 메서드는 하나의 매개변수(키)를 받아 해당 키와 연결된 값을 반환합니다. 만약 지정한 키가 저장소에 존재하지 않으면 null을 반환하므로, 이 성질을 활용해 키의 존재 여부를 손쉽게
HTML5의 <audio> 태그는 충분히 스타일을 지정할 수 있습니다. 다만 어떤 방식을 선택하느냐에 따라 결과가 크게 달라지는데, 핵심은 브라우저가 제공하는 기본 컨트롤을 그대로 사용할 것인지, 아니면 자체 UI를 직접 구현할 것인지입니다. 1. controls 속성과 브라우저 기본 플레이어 <audio> 태그에 controls 속성을 추가하면 브라우저가 기본으로 제공하는 재생 바(재생·일시정지 버튼, 볼륨 조절, 진행 상태 표시줄 등)가 화면에 나타납니다. 이 방식은 구현이 매우 간단하지만, UI 디자인이
웹 페이지를 개발하다 보면 브라우저가 이전 버전의 파일을 캐시에 저장해 두어 최신 내용이 반영되지 않는 문제를 겪게 됩니다. 이럴 때 HTML 메타 태그를 활용하면 브라우저에게 페이지를 캐시하지 않도록 지시할 수 있습니다.1. 메타 태그로 캐시 방지하기다음과 같은 세 가지 메타 태그를 <head> 영역에 추가하면 브라우저가 해당 페이지를 캐시하지 않도록 설정할 수 있습니다.<meta http-equiv = cache-control content = no-cache><meta http-equiv = expi
getImageData() 오류, 왜 발생할까요?캔버스(Canvas)에서 getImageData()를 호출할 때 캔버스가 교차 출처(cross-origin) 데이터에 의해 오염되었습니다라는 오류가 발생하는 경우가 있습니다. 이는 보안 정책과 관련된 문제로, 원인을 이해하면 간단히 해결할 수 있습니다.crossOrigin 속성이란?crossOrigin 속성을 사용하면 외부 출처(도메인)에서 불러온 이미지를 마치 현재 사이트에서 로드한 것처럼 캔버스에서 사용할 수 있습니다.반대로 CORS 승인 없이 다른 도메인의 이미지를 캔버스에 그리