Front-end 개발

📌 제목Canvas API로 브라우저에서 그래픽 그리기 — 2D 도형, 이미지 편집, 간단한 게임 예제📝 본문HTML5의 Canvas API는 브라우저에서 2D 그래픽, 애니메이션, 이미지 편집, 게임 제작까지 가능한 강력한 기능을 제공합니다.이번 글에서는 기본 도형 그리기, 이미지 처리, 간단한 게임 예제까지 단계별로 안내합니다.1️⃣ Canvas 기본 구조width, height: 캔버스 크기 지정CSS border로 영역 확인 가능JavaScript에서 그래픽 컨텍스트를 가져와 그리기const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d'); // 2D 컨텍스트2️⃣ 2D 도형 그리기2-1. 사각형과..

📌 제목HTML5 드래그 앤 드롭 API 활용법 — 이미지/파일/텍스트를 브라우저에서 직접 드래그하기📄 본문HTML5 Drag and Drop API는 브라우저에서 요소(텍스트, 이미지, 파일 등)를 마우스로 끌어다 놓을 수 있게 해주는 표준 기능입니다.이 글에서는 기본 동작 원리부터 텍스트/이미지/파일 드래그 앤 드롭, 드롭존 스타일링, 리스트 재정렬, 접근성/모바일 주의점까지 한 번에 정리합니다.1) Drag & Drop 동작 원리 핵심드래그 시작 요소: draggable="true" 속성을 가진 요소드롭 영역: dragover 이벤트에서 event.preventDefault()를 호출해야 드롭 가능데이터 전달: event.dataTransfer.setData(type, data)로 설정 → 드롭..

1. CSS(미디어쿼리) 사용하여 브라우저 내 특정 영역만 출력(PDF) 하기 미디어 쿼리 print(프린트) 선언하기 @media print { //프린트 출력시 비노출 영역 추가하기 #header, #sec_2{display:none} }​ background(백 그라운드)사용 시 해당 속성을 보여 주게 합니다. @media print { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } ※지원 가능 브라우저를 체크하세요. (IE, Firefox에서는 인쇄창에서 배경포함 인쇄를 선택 해야 보여집니다.) https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-a..