ChainSmoker’s Block

[02. 사각형 그리기] : 테두리만 있는 사각형은 strokeRect() 메서드를 사용하여 그리며, 색이 채워진 사각형은 fillRect() 메서드를 사용하여 그린다. 추가로 clearRect() 메서드를 사용하여 특정 영역을 지우는 메서드도 존재한다. strokeRect(x, y, width, height) : 테두리만 있는 사각형을 그린다. fillRect(x, y, width, height) : 색이 채워진 사각형을 그린다. clearRect(x, y, width, height) : 특정 영역을 지운다.

[02. 사각형 그리기] : 사각형을 그리기 위해서는 시작점인 x, y좌표와 너비, 높이를 나타내는 네 가지의 값을 요구(필요로)하게 된다. 캔버스를 기준으로 캔버스 왼쪽 맨 위의 꼭짓점이 x, y좌표인(0, 0)이 된다. (0, 0)좌표를 기준으로 각각이 지정한 (x, y)좌표를 시작으로 하여 너비(width), 높이(height) 크기의 사각형이 만들어지는 것이다.

[캔버스] 3_1-1. 웹에서의 캔버스_2에 이어 설명. [01. 캔버스] : 해당되는 id에 해당하는 캔버스를 불러와서 canvas 객체를 생성, 생성후 getContext(2d) 메서드를 호출하여 그리기 컨텍스트를 생성한다. 아직 3d 컨텍스트(context)는 완전하지 않기 때문에 2d 컨텍스트에 대해만 다루었다. 이후엔 실제로 JS로 그림을 그리는 방법에 대해 알려 줄 것이다.

[캔버스] 3_1-1. 웹에서의 캔버스에 이어 설명. [01. 캔버스] : 만약 canvas 요소에 너비나 높이를 지정하지 않으면 자동으로 너비(W) 300px, 높이(H) 150px의 캔버스가 생성된다. 캔버스가 만들어졌다. 이제 실제적 그림을 그릴 JS(자바스크립트)를 작성해야 한다. 생성했던 canvas 요소에 아이디canvas를 지정/부여했다.

[01. 캔버스] : 캔버스가 가장 주목받는 이유는 바로 단순히 브라우저에 그림을 표현하는 것을 넘어 여러 가지 효과를 주고, 텍스트를 표현하고, 간단한 애니메이션까지 표현 가능하게 된 것 때문이다. 브라우저에 그림을 그리기 위해서는 canvas 요소(태그)를 사용하여 그림을 그릴 영역을 지정하고 실제 그림을 그리는 것을 JS로 응용한다. 캔버스를 정의하기 위해선 canvas 요소(태그)의 속성값에 캔버스의 너비, 높이, 그리고 JS(자바스크립트)에서 사용할 아이디값을 지정해야 한다. 그리고 canvas 요소 사이에는 canvas 요소를 지원하지 않는 브라우저에서 표현할 이미지나 텍스트를 넣는다.

[01. 캔버스] : HTML5에서 가장 중요하고 주목이 필요한 것중 하나는 캔버스이다. 이 캔버스의 사전적인 의미는 유화를 그릴 때 쓰는 천이라는 뜻으로, HTML5에서는 '캔버스라는 브라우저에 그림을 그리기 위하여 놓는 것'이라고 생각하면 이해하기 쉬울 것이다. 앞으로 캔버스를 공부하면서 도형 및 선을 그리는 방법에 대해서 설명할 예정.

레이아웃을 위하여 추가된 요소 -header : 머리말을 나타내는 요소 -hgroup : 제목과 부제목을 묶는 요소 -nav : 메뉴 부분을 나타내는 요소 -article : 개별 콘텐츠를 나타내는 요소 -section : 제목별로 나눌 수 있는 요소 -aside : 좌우측의 사이드바를 나타내는 요소 -footer : 제작자의 정보나 저작권의 정보를 나타내는 요소 표현을 위하여 추가된 요소 -mark : 특정 텍스트를 강조하고자 할 때 사용하는 요소 -time : 시간 표현에 의미를 주고자 할 때 사용하는 요소 -meter : 일정 범위 안의 값이나 분포 비율 등을 나타낼 때 사용하는 요소 -progress : 어떠한 작업에 대하여 현재 진행 중인 상태를 나타낼 때 사용하는 요소

[시맨틱 웹을 위한 태그] 2_2-4. 시맨틱 웹에서의 현재 진행 중인 상태 표현_2에 이어 설명. [02. 표현을 위한 요소] : 콘텐츠 타입별 요소 분류 : HTML5에서 각 요소(엘리먼트/태그)가 가지고 있는 의미는 더 중요해져가고 있다. 이에 따라 WHATWG(www.whatwg.org)에선 각 요소(엘리먼트/태그)를 일곱가지 타입별로 분류하고 있다. Metadata 콘텐츠 : 콘텐츠의 모양, 동작을 설정하고 다른 문서와의 관계를 나타낼 때 사용한다. )EX( -> base, command, link, meta, noscript, script, style, title Flow 콘텐츠 : {body} 요소 아래에서 사용되는 대부분의 요소들이 포함됨. )EX( -> a, abbr, address, a..

[시맨틱 웹을 위한 태그] 2_2-4. 시맨틱 웹에서의 현재 진행 중인 상태 표현에 이어 설명. [02. 표현을 위한 요소] : -> progress 요소를 사용하여 최소값 0, 최대값 100의 Progress바를 생성하고 현재 수치로 72를 지정.

[02. 표현을 위한 요소] : 많은 파일을 복사 붙여넣기 하거나 파일 다운로드를 웹브라우저 내에서 할 때 작업 진행 상태를 확인 가능하다. progress 요소는 바로 어떠한 작업에 대하여 현재 진행 중인 상태를 나타낼 때 사용하는 요소이다. 단순히 progress 요소만을 사용한다면 멈춰져 있는 단순한 진행 상태 바를 확인할 수 있을 것이다. 그러므로 progress 요소는 필수적으로 자바스크립트(JS)와 연동해 사용해야 한다. value : 현재 진행 상태 값 min : 최소값 max : 최대값