728x90 TECH50 canvas canvas란 무엇인가?는 HTML5에서 도입된 그래픽 요소이다. 브라우저 화면에 픽셀 기반의 그래픽을 그릴 수 있게 만들어진 "캔버스(도화지)"이다. 화가가 캔버스에 그림을 그리듯이, 브라우저 안에서 Javascript 코드로 그림을 그릴 수 있도록 만들어주는 요소이다. HTML 코드 안에서 태그를 선언JavaScript를 통해 에 그리기 컨텍스트(CanvasRenderingContext2D 혹은 WebGL)를 연결선, 도형, 텍스트, 이미지 등을 픽셀 단위로 직접 그리기 canvas는 왜 사용하는가?자유롭게 2D 또는 3D 그래픽을 표현할 수 있다.• 게임 그래픽 (예: 2D 게임, 미니맵)• 데이터 시각화 (차트, 그래프)• 이미지 편집 도구• 애니메이션 효과• 시뮬레이션 (예: 물리 엔진)고성.. 2025. 5. 31. CSS에서 사용되는 단위들 CSS에서 사용되는 다양한 단위들이 있다.emremchexvhvwvminvmax천천히 알아보겠다.em이란?부모 요소의 font-size를 기준으로 한 상대 단위.parent { font-size: 16px;}.child { font-size: 1.5em; /* 부모의 font-size 16px * 1.5 = 24px */} rem이란?최상위 루트 요소(html)의 폰트 크기를 기준으로 한 상대 단위 (전체 사이트에서 일관된 크기로 설정하기 유용)r은 root(최상위)를 뜻한다.html { font-size: 16px;}.container { font-size: 2rem; /* 16px * 2 = 32px */}em과 rem의 다른점? Inner Divs html { .. 2025. 5. 28. as const as const는 Typescript에서 타입을 명시 (type assertion)해주는 키워드 중 하나이다. 리터럴 타입을 명시적으로 알려준다. 리터럴 타입이란?Typescript에서 값 자체를 타입으로 사용하겠다라는 의미를 나타낸다.let x = "hello";x는 기본적으로 string 타입으로 추론되는데 string 타입인 "world"나 "fruits"등이 다 가능하다. 그러나, "hello"만 가능하게 하고 싶을 때가 있는데 이럴 때 사용하는 것이 리터럴 타입이다.let x: "hello";x = "hello"; // OKx = "world"; // 오류! number, boolean 타입도 가능하다.let y: 30;y = 30; // OKy = 40 // 오류!let flag: tr.. 2025. 5. 27. setHTMLUnsafe setHTMLUnsafe란?React나 Vue, Svelte같은 프레임워크에서 HTML 콘텐츠를 동적으로 삽십할 때 사용되는 메서드 중 하나이름에 Unsafe가 붙는데 의미 그대로 안전하지 않다는 뜻을 가진다.프레임워크에서 XSS (Cross-Site Scripting) 보호를 위해 기본적으로 HTML 콘텐츠를 Escape 처리하지만, 개발자가 이를 우회하여 **"원시 HTML"**을 직접 삽입하고자 할 때 사용한다.XSS (Cross-Site Scripting) 란?악의적인 사용자가 웹 어플리케이션에 스크립트 (보통은 자바스크립트)를 삽입하여 다른 사용자에게 전달하고 실행하게 만드는 보안 취약점을 말한다.⇨ 악의적인 사용자가 웹사이트에 악성 코드(스크립트)를 심고, 그 코드를 다른 사용자의 브라우저에.. 2025. 5. 26. 이전 1 ··· 8 9 10 11 12 13 다음 728x90