본문 바로가기

HTML

(21)
HTML <canvas> 경로(path) 기본 개념 1. 경로(path) 경로(path)는 점들의 집합이며, 선의 한 부분으로 연결되어 여러가지 도형, 곡성을 이루고 두께와 색을 나타내게 됩니다. 경로를 이용하여 도형을 만들 때에는 몇가지 추가적인 단계를 거칩니다. 경로를 생성합니다. 그리기 명령어를 사용하여 경로상에 그립니다. 경로가 한번 만들어졌다면, 경로를 렌더링 하기 위해서 윤곽선을 그리거나 도형 내부를 채울 수 있습니다. 다음은 위의 단계들을 실행하기 위해 사용되는 함수입니다. beginPath() : 새로운 경로를 만듭니다. 경로가 생성됬다면, 이후 그리기 명령들은 경로를 구성하고 만드는데 사용하게 됩니다. Path 메소드 : 물체를 구성할 때 필요한 여러 경로를 설정하는데 사용하는 함수입니다. closePath() : 현재 점 위치와 시작 점..
HTML <canvas>를 이용한 직사각형 그리기 어떠한 도형을 그릴 때 정해야할 것이 있습니다. 어떤 모양의 도형인지 어떤 크키의 도형인지 어디에 그릴건지 먼저 는 기본적으로 직사각형의 도형을 제공합니다. 직사각형을 그리는데에는 세가지 함수가 있습니다. fillRect(x, y, width, height) : 색칠된 직사각형을 그리는 함수(기본 색은 검정) strokeRect(x, y, width, height) : 직사각형 윤곽선을 그리는 함수 clearRect(x, y, width, height) : 특정 부분의 직사각형을 지우는 함수(지운다 = 투명하게 만든다) 각가의 세 함수는 모두 같은 매개변수를 가집니다. x : 사각형 시작점의 x축 좌표 y : 사각형 시작점의 y축 좌표 width : 사각형의 너비, 양수값은 오른쪽 음수는 왼쪽으로 이동 ..
HTML <canvas> 란? 1. 란? 는 웹페이지에 그래픽을 그릴 때 사용하는 HTML 태그입니다. 예를 들면, 그래프, 사진합성, 애니메이션 등을 만들 수 있습니다. 그래픽을 그리기 위해서는 스크립트(보통 javascript)를 사용합니다. 태그는 IE8외에는 왠만한 브라우저에 모두 지원됩니다. 2. 기본 사용법 태그 속성으로는 width와 height 두가지 뿐이며 속성값을 지정하여 그래픽을 드로잉할 영역의 넓이와 높이를 설정합니다. 만약 두 속성을 지정하지않으면 width는 300px, height는 150px로 초기 설정됩니다. CSS로도 크기를 지정할 수 있지만 속성값으로 지정하는것을 추천합니다. (CSS 크기 지정이 초기 캔버스의 비율을 고려하지 않으면 왜곡되어 나타나기 때문) 요소는 일반적인 이미지 처러 스타일 적용이..
반응형 이미지맵 만들기 a~z 1. 이미지맵이란? HTML과 XHTML에서, 이미지 맵은 특정 이미지의 좌표 목록을 말하며, 이미지를 영역에 따라 다른 문서나 URL 등으로 연결하는 하이퍼링크를 생성하기 위해 만들어졌다. 2. 이미지맵 설정방법 1. HTML에 이미지넣기 **usemap 앞에는 #을 붙여 작성해야합니다. 2. css로 의 width값 설정하기 반응형 이미지맵을 만들거라 width값을 100%로 설정했습니다. 3. 이미지 좌표값 구하기 이미지의 좌표값을 구하기 위한 여러 방법이 있지만 가장 간단하게 구할 수 있는 사이트를 가져왔습니다. 아래의 사이트에 접속하면 이미지 좌표값은 물론 코드까지 친절하게 만들어주기때문에 복붙하기만 하면 된답니다. http://maschek.hu/imagemap/imgmap/ maschek.h..
HTML5 태그 종류 총 정리 1. 기본 태그 웹 문서의 유형을 html로 지정 문서를 html로 시작, 언어를 한국어로 지정 주로 브라우저의 정보를 입력하는 곳 메타 데이터 입력, 주로 처럼 입력 문서 제목 문서 내용을 입력 실행 가능한 코드를 웹 페이지에 포함시키거나 참조하기 위해 사용 스타일 css를 작성할때 사용하는 태그 외부 파일을 연결할 때 사용하는 태그 2. 문서 구조 태그 헤더 영역 메인 영역 콘텐츠 영역 사이드 바 영역 내비게이션 영역 / 문서 내 다른 위치, 다른 문서로 연결할 때 사용 독립적인 콘텐츠를 사용할 때 푸터 영역 다수의 - 요소를 묶을 때 사용 다른 엘리먼트를 감싸 그룹 정의, block 구조 보통 다른 텍스트와의 구별을 위해 사용, inline 구조 3. 텍스트 태그 , , ... 제목 단락 줄 바꿈,..