깃허브를 이용하면 무료로 홈페이지를 만들 수 있습니다. 500Mb 저장 공간과 월 1Gb의 트래픽을 얻을 수 있습니다. 단일 파일은 최대 100Mb까지 허용합니다. 구글 포토와 깃허브를 이용하면 월 1Gb 트래픽으로도 충분히 멋진 홈페이지를 만들 수 있습니다. Pages 만드는 방법 로그인을 했고 Pages를 만들지 않았다면 메인화면 오른쪽에 'Create repository' 버튼이 보일텐데, 이 버튼을 클릭합니다. Pages를 접속할 수 있는 다른 방법으로는 …

표준 HTML, CSS, 또는 자바스크립트 소스 코드를 숨길 수 있는 방법이나 스크립트는 없습니다. 소스 코드 보호가 걱정된다면 다음과 같은 조치를 고려해 볼 수 있습니다. 하지만 웹 개발에 어느 정도 익숙한 사람이라면 이러한 제안들을 우회하거나 역설계를 통해 코드를 볼 수 있는 방법을 쉽게 찾아낼 수 있다는 점을 기억하세요. 다른 사람이 당신의 코드를 훔쳐갈까봐 걱정하는 대신, 다른 훌륭한 개발자와 프로그래머들의 코드를 볼 수 있는 기회라고 생각하세요. 서버 측 스크립트를 더…

iframe 의 표준 코드는 src URL을 html 코드로 대체하는 방법이 있습니다. MYSQL에서 HTML 본문을 로드할 때나 파일의 내용을 읽어 들인 문서를 프레임에 표시합니다. 일반적으로 아래 방법으로 프레임에 표시합니다. <iframe src="http://example.com" name="test" height="120" width="600">My Content</ifram…

마우스로 캔버스 영역에 드래그 하면 선을 그릴 수 있는 예제입니다. <style>canvas { border: 1px solid black; }</style> <canvas id="mycanvas"/> <script type="text/javascript"> var canvas, context; window.onload = function (){ canvas = document.getElemen…

캔버스에 그려진 이미지 파일 형식은 기본값이 PNG입니다. 이것을 image/jpg나 image/webp 형식을 지정하여 이미지 포맷을 변환할 수 있습니다. 메서드 설 명 toDataURL( [mime-type] [,encoderOptions] ) 이미지의 파일 형식을 변환 mime-type: Mime 형식. 선택사항 encoderOptions: 압축률. 선택사항  0~1사이의 수. 기본값: 0.92 …

캔버스는 이미지를 픽셀 단위로 편집할 수 있는 메서드를 제공합니다.  이미지를 구성하는 픽셀정보를 래스터(Raster)라고 부르고 곧 비트맵이라 합니다. 이 비트맵에는 직사각형 격자 화소, 색의 점 등 이미지에 어떤 그림이 그려져 있는지를 저장합니다. 예를 들어 그림을 확대해 보면 아래 그림처럼 픽셀단위로 되어있음을 확인할 수 있습니다. 화소를 영문으로 표기하면 픽셀입니다. 이런 래스터 데이터를 직접 조작하면 그리기로는 불가능한 섬세한 효과를 얻을 수 있습니다. …

원본 캔버스에서 모양과 크기의 영역을 자르는 메서드가 clip() 입니다. 영역이 잘리면 이후의 모든 그리기는 잘린 영역으로 제한됩니다. 따라서 자르기 전에 save()를 사용하여 설정을 저장한 다음 clip() 한 후 restore()로 이전 상태로 복원할 수 있습니다. <style>canvas { border: 1px solid black; }</style> <canvas id="mycanvas"/> <script …

globalCompositeOperation 은 새로운 이미지를 원래 이미지와 병합하여 새로운 이미지를 만들 수 있습니다. 새로운 이미지를 그리면 보통은 기존 이미지 위에 그려져 일정 영역을 가려지게 되는데, 가려 보이지 않게 하거나 특정 부분만 표시되게 할 수 있습니다. globalCompositeOperation = type type에는 아래 표를 사용할 수 있습니다. Type 설 명 source-ove…

캔버스는 도형이나 텍스트를 그리는 게 전부가 아닙니다. 캔버스에 이미지를 그릴 수 있는 흥미로운 기능을 제공합니다. jpg, bmp, gif 형식 등 브라우저가 지원하는 모든 형식의 이미지를 지원하며 <svg>, <video> 요소를 현재 이미지로 사용할 수 있습니다. 메서드 설 명 drawImage(img, x, y) 이미지를 캔버스에 바로 그리기 img: 삽입될 이미지 x: 캔…