제가 쓴 책175 1.3 색상(color)과 스타일(style) 1.3 색상(color)과 스타일(style) canvas에서 직선이나 도형 등의 색과 스타일을 설정하기 위해서는 context의 다음과 같은 2 가지 형태의 속성을 이용합니다. 속성 설명 fillStyle 직선이나 도형 등의 내부 색상이나 스타일을 설정 strokeStyle 직선이나 도형 등의 외부 색상이나 스타일을 설정 먼저 직선이나 도형 등의 내부 색상이나 스타일을 설정하는 fillStyle 속성을 보면 다음과 같은 형식을 사용합니다. context.fillStyle=color | gradient | pattern fillStyle 속성값으로 color인 경우 CSS 색상값을 설정해주면 되는데 색상 키워드나 #+16진수 형태, 그리고 RGB, RGBA, 등과 같은 색상값을 설정해주면 됩니다. 다음으.. 2013. 8. 7. 4장 Canvas 4장 Canvas HTML5 기반 웹페이지를 작성할 때 기존의 웹페이지에 등장하는 직선이나 이차원(2D), 3차원(3D) 도형, 챠트(Chart), 애니메이션, 게임 등을 어떻게 구현할 수 있을까를 한번쯤 생각해보게 됩니다. HTML5에서는 이러한 작업을 수행할 수 있도록 canvas 라는 요소를 새롭게 정의하여 사용할 수 있게 되었습니다. 현재 2차원 작업은 W3C에서 HTML Canvas 2D Context 라는 제목으로 표준화가 진행중으로 사이트는 “http://dev.w3.org/html5/2dcontext/”입니다. 3차원 작업은 Canvas 3D에서 비영리 컨소시엄인 크로노스 그룹(Khronos)이 진행하는 OpenGL 2.0에 기반한 WebGL 형태로 발전하여 현재 1.0 버전이 사용 가능합.. 2013. 8. 6. 8.3 getElementById(), getElementsByTagName() 메서드를 이용한 접근 8.3 getElementById(), getElementsByTagName() 메서드를 이용한 접근 지금까지는 HTML DOM에서 “A를 부모 노드로 하는 자식 노드(들)은 어떤 것들이 있는가?”와 같이 조금은 불편하고 복잡한 방법으로 노드에 접근을 했습니다. 하지만 DOM에는 이보다 발전된 형태의 getElementById(), getElementsByTagName() 메서드 2개를 제공하여 원하는 노드에 직접 접근이 가능하도록 지원합니다. 첫 번째 메서드인 getElementById() 메서드는 id 속성을 이용하여 해당 속성을 가진 노드에 접근하는데 사용할 수 있는 메서드이고 두 번째 메서드인 getElementsByTagName() 메서드는 요소(Element) 이름을 이용하여 노드에 접근할 수.. 2013. 8. 6. 8.2.3 removeChild() 메서드를 이용한 노드의 삭제 8.2.3 removeChild() 메서드를 이용한 노드의 삭제 HTML DOM 트리(Tree)로부터 기존의 노드에 대한 삭제는 다음과 같은 형식의 removeChild() 메서드를 이용하며 자식 노드의 삭제이므로 기본적으로 삭제되는 자식 노드(들)을 가진 부모 노드로부터 호출되어야 합니다. 부모노드.removeChild(delNode) 부모노드의 자식 노드들 중에서 명시한 delNode 노드를 삭제하며 삭제된 노드를 반환합니다. 이제 메모장을 열어서 다음과 같이 코드를 작성합니다. 프로그래밍 운영체제 데이터베이스 위와 같이 id 속성값이 “software”인 div 요소 안에 3개의 p 요소를 작성합니다. 이번 예제에서는 id 속성값이 “os”인 p 요소 노드를 removeChild() 메서드를 이용하.. 2013. 8. 6. 이전 1 ··· 4 5 6 7 8 9 10 ··· 44 다음
