본문 바로가기

2012/02

[음악재생] 음악파일 조작/addEventListener() [음악재생] 음악파일 조작/addEventListener() HTML5에는 음악 파일을 재생할 수 있는 태크가 추가되었습니다. 형식은 다음과 같습니다. audio 태그를 지원하지 않을 때 표시할 내용 iPad 및 iPhone(iOS 4이상)에서 실행하면 플레이어가 표시되며, 재생 버튼 누르면 음악이 재생됩니다. 하지만 iPhone OS 3.x 이하 버전에서는 먼저 플레이어가 실행된 후 바로 재생을 시작합니다. Android 1.6dms 태그를 지원하지 않기 때문에 MP3 파일을 다운로드하는 링크가 표시됩니다. 자바스트립트로도 음악 파일을 처리할 수 있습니다. 먼저 아래와 같은 형식으로 음악파일을 읽어 들여야합니다. var audio = new Audio("test.mp3"); [재생],.. 더보기
[그래픽 처리] 반사/box-reflect box-reflect 속성을 이용해 반사효과를 주거나, 그림 혹은 글자를 반전 시키겠습니다. -webkit-box-reflect:위치[거리px -webkit-gradient()]; box-reflect 속성의 '위치'에 지정할 수 있는 값 값 의미 above 위 below 아래 left 왼쪽 right 오른쪽 위치, 거리와 더불어 그라데이션 요소를 지정하는 -webkit-gradient() 메서드를 추가할 수 있습니다. 이것을 지정하면 반전한 그림이나 글자에 그라데이션 효과가 적용됩니다. 그림자의 위치는 아래로 하고 8px 거리로 반사효과가 나타납니다. 위에서 아래로 그라데이션이 나타납니다. 더보기
[그래픽 효과] 그라데이션(gradient)/color-stop() [그래픽 효과] 그라데이션(gradient)/color-stop() 그라데이션에 대해 앞에서도 다룬적이 있지만 여기서 다른 방식으로 한번더 다루어 보도록 하겠습니다. CSS3에서 그라데이션 사각형을 만드려면 background 속성(혹은 background-image 속성)에 gradient() 메서드로 값을 지정합니다. -webkit-gradient( linear, 시작위치, 종료위치 from(처음색), to(마지막 색)); 시작 위치와 종료 위치는 top, bottom, left, right를 조합하여 지정합니다. 아래 코드는 왼쪽 위에서 오른쪽 아래로 그라데이션을 적용 시 코드조합입니다. .box1{ background: -webkit-gradient(linear, left top, right bo.. 더보기
[그래픽 처리] 둥근 모서리/border-radius [그래픽 처리] 둥근 모서리/border-radius 이전에는 사각형의 모서리를 둥글게 하기 위해서 그림파일을 이용할 수 밖에 없었습니다. 하지만 CSS3에서는 border-radius 속성 값을 지정하는 것만으로도 구현할 수 있습니다. 형태는 아래와 같습니다. -webkit-border-radius : 15px; 위의 코드를 실행하면 사각형의 모서리가 둥그렇게 바뀝니다. 'box1'은 그냥 빨간 사각형을 둥글게하였습니다. 'box2'는 둥근 모서리 효과를 주고 그라데이션까지 주었습니다. 그라데이션 효과는 다음 파트에서 좀더 자세히 다루겠습니다. 'box3'도 똑같이 둥근 모서리 효과를 주었습니다. 그리고 그림자를 추가하였네요. 더보기
[그래픽 처리] CSS3 애니메이션/HTML5 애니메이션/animation-timing-function [그래픽 처리] CSS3 애니메이션/HTML5 애니메이션/animation-timing-function CSS3는 애니메이션 기능을 제공합니다. 속성 지정만으로도 간단하게 애니메이션을 구현할 수 있습니다. ● 애니메이션 관련 속성 속성 의미 animation-duration 애니메이션의 동작 시간 (ex) '1s', '0.5s' animation-iteration-count 애니메이션의 동작 회수('infinite' 지정시 무한 반복) animation-name 애니메이션의 이름 animation-timing-function 애니메이션의 타이밍 ● animation-timing-function 속성에 지정할 수 있는 값 속성 의미 ease 시작과 종료를 부드럽게 linear 일정 ease-in 서서히 시.. 더보기
[그래픽 처리] CSS3/글자 그림자/그림 그림자/box-shadow/text-shadow/변형 [그래픽 처리] CSS3/글자 그림자/그림 그림자/box-shadow/text-shadow/변형 CSS3를 통해 글자와 그림에 그림자, 반투명, 회전, 애니메이션 등의 다양한 효과를 넣을 수 있습니다. [1] 그림자 box-shadow 속성을 이용하면 블록 요소에 그림자를 추가할 수 있습니다. '-webkit-' : iPhone/iPad/Android용 표준 브라우저의 렌더링 엔진에서 동작하고자 할 때 사용 '-moz-' : Firefox에서 동작하고 싶을 때 사용 -webkit-box-shadow:[inset](X방향)(Y방향)(번짐효과) #(그림자의 색); 첫 번째 인수인 'insert'생략이 가능한데, 지정하게 되면 그림자를 블록의 안쪽에 렌더링할 수 있습니다. 'insert' 다음에는 X방향 거리.. 더보기
[그래픽 처리] 애니메이션/setInterval() [1] 공 튀기기 애니메이션 공이 캔버스의 모서리에 도달하면 반대 방향으로 움직이는 애니메이션 입니다. setInterval() 메서드를 이용하여 100일리초(msec)마다 drawBall() 함수를 호출하도록합니다. setInterval(drawBall, 100); 그리고 drawBall() 함수에서 화면을 초기화한 후 공을 렌더링합니다. 렌더링 처리에서는 우선 fillRect() 메서드로 캔버스의 배경을 흰색으로 한 후 arc() 메서드로 빨간 공을 렌더링합니다. 공의 이동은 dir_x/dir_y(공의 이동양과 방향을 지정하는 속성)만큼 공의 좌표를 증가시켜서 구현하는데, 이동 후의 좌표가 캔버스를 벗어날 경우에는 dir_x/dir_y에 '-1'을 곱하여 반대로 이동 시킵니다. ball.x += ba.. 더보기
[그래픽 처리] 변형 행렬의 저장과 복구/회전/save()/restore()/rotate() [그래픽 처리] 변형 행렬의 저장과 복구 [1] save(), restore() save()메서드와 restore()메서드의 형식은 다음과 같습니다. context.save() context.restore() 이 메서드들은 모두 스택(stack) 구조를 이용하고 있기 때문에 원하는 곳에서 원하는 횟수만큼 이용할 수 있습니다. 스택을 탑에 비유를 해보면, save() 메서드로 벽돌을 쌓고 restore() 메서드로 벽돌을 꺼내는 것에 해당합니다. save(), restore() 메서드로 저장/복구되는 정보는 다음과 같습니다. ● 변형 행렬 ● 렌더링 스타일 ● 현재의 패스 [2] rotate() rotate() 메서드는 도형을 회전시키는데, 아래의 형식을 가지고 있습니다. context.rotate(ang.. 더보기
[그래픽 처리] 변형 행렬의 이동과 확대/축소/translate()/scale() [그래픽 처리] 변형 행렬의 이동과 확대/축소 translate()메서드와 scale()메서드를 이용해보도록 하겠습니다. 좌표 (20,20)에 크기가 (50,50)인 사각형을 렌더링하는 drawRect() 메서드를 만듭니다. function drawRect(context, color){ context.fillStyle=color; context.fillRect(20,20,50,50); } //빨간 사각형은 그냥 호출하고, drawRect(ctx, "red"); //파란 사각형은 transform() 메서드로 평행이동 시키고, scale() 메서드로 가로를 확대하고 세로를 축소하였습니다. //이동 및 확대/축소를 지정하여 렌더링 ctx.translate(30,30); //평행이동 ctx.scale(2.5,.. 더보기
[그래픽 처리] 변형 행렬 메서드/setTransform()/transform()/rotate()/scale()/translate()/save()/restore() [그래픽 처리] 변형 행렬 메서드/settransform()/transform()/rotate()/scale()/translate()/save()/restore() ※ 변형 행렬 : 패스의 회전, 이동 및 확대/축소에 관련되는 기능 변형 행렬의 회전/이동 관련 메서드 메서드 설명 setTransform( m11, m12. m21, m22, dx, dy ) 변형 행렬 지정(기존 설정을 지움, 초기화) transform( m11, m12. m21, m22, dx, dy ) 변형 행렬 지정(중복 지정 가능) rotate(angle) 회전 scale(x, y) 확대/축소 translate(x, y) 이동/변형 변형 행렬의 저장/복구 관련 메서드 메서드 설명 save() 변형 행렬의 상태를 저장 restore().. 더보기
[그래픽 처리] 그래프 렌더링/꺽은선 그래프/모눈종이 [그래픽 처리] 그래프 렌더링/꺽은선 그래프/모눈종이 꺽은선 그래프를 렌더링하는 프로그램에 대해 설명하기 전에 먼저 캔버스에 기준선을 렌더링 해보겠습니다. [1] 모눈종이(눈금) 렌더링 배경을 그라데이션으로 렌더링한 후, 가로선과 세로선을 렌더링합니다. for 문을 이용해 선긋기를 반복합니다. 캔버스의 width속성, height속성을 이용해 캔버스 크기에 맞춰 렌더링 합니다. 10x10dml 모눈종이를 나타내기 위해 'grid_cols'와 'grid_rows' 값을 10으로 지정했습니다. for문을 통해 'col'이 'grid_cols' 값인 10 보다 작을 때 col에 하나씩 더해져 10까지 반복하게 합니다. 'row'도 마찬가지겠죠. 그리고 'cell_height'은 height속성을 이용해 a_c.. 더보기
[그래픽 처리] 그림 파일 렌더링/drawImage() [그래픽 처리] 그림 파일 렌더링/drawImage() 캔버스는 JPEG나 PNG와 같은 그림 파일을 읽어 들여 랜더링하는 기능 및 크기 변경, 잘라내기 등 세세한 조작을 할 수 있습니다. 1) 그림 파일 읽어 들이기 그림 파일을 밁어 들이려면 우선 이미지 객체를 작성하고 이미지 객체의 src 속성에 URL을 지정하면 됩니다. 읽어 들이기 후 onload 이벤트가 발생합니다. var image = new Image(); image.src = "그림파일의 URL" image.onload = function(){/* 그림 파일을 읽어 들였을 때 실행할 처리 */}; 2) 캔버스에 그림 파일 렌더링 drawImage() 메서드를 이용해 그림 파일을 포함하고 있는 이미지 객체를 캔버스 위에 렌더링합니다. (1).. 더보기
[그래픽 처리] 컨텍스트(Context)의 속성 [그래픽 처리] 컨텍스트(Context)의 속성 컨텍스트의 여러 설정을 담당하는 주요 속성에 대한 정리입니다.  속성 의미 fillStyle 채우기 색 font 글꼴 지정 globalAlpha 투명도(0 : 투명~1 : 불투명) globalCompositeOperation 겹칠 때의 동작 지정 lineCap 선 끝 유형을 지정(but, round, square) lineJoin 선 교차시 처리 방법(round, bevel, miter) lineWidth 선의 굵기 miterLimit lineJoin이 miter일 경우, 두 직선이 만나는 점의 처리 방식 shadowBlur 그림자의 흐림 정도를 지정 shadowColor 그림자의 색 shadowOffsetX 그림자의 x방향 거리 shadowOffsetY.. 더보기
[그래픽 처리] 그라데이션(gradation)/createLinearGradient()/CreateRadialGradient() [그래픽 처리] 그라데이션(gradation)/createLinearGradient()/CreateRadialGradient() [1] 선형 그라데이션 - createLinearGradient() 선형 그라데이션은 왼쪽에서 오른쪽(혹은 아래에서 위)으로 갈수록 점점 색이 변화하는 그라데이션을 말합니다. createLinearGradient() 메서드를 사용해 지정할 수 있습니다. addColorStop() 메서드의 첫 번째 인수인 시작 지점에 0~1.0까지의 실수를 지정하여, 어느 지점에 어떤 색을 표시할 것인지를 지정합니다. //CanvasGradient 객체 만듬 CanvasGradient = ctx.createLinearGradient(x1, y1. x2, y2) //그라데이션 색 추가 Canvas.. 더보기
[그래픽 처리] 렌더링 메서드/arc(), arcTo()/quadraticCurveTo(), bezieCurveTo()/rect() [그래픽 처리] 렌더링 메서드/arc(), arcTo()/quadraticCurveTo(), bezieCurveTo()/rect() [1] 원호 렌더링 - arc(), arcTo() 1. arc() 메서드 context.arc(x, y, 반경, 시작 각도, 종료 각도, 반시계방향 지정) 여기서 '반시계 방향 지정'을 true로 하면 시계방향으로 원호를 그립니다. 각도는 '라디안(radian)'이므로 '도(degree)'를 '라디안(rad)'으로 변환해야 할 때 아래의 계산식을 사용하면 됩니다. var rad = deg*Math.PI / 180; arc() 메서드로 원호를 그리는 프로그램 예제입니다. ※stroke() : 패스의 테두리 렌더링 원호가 아닌 완전한 원을 그리고 싶을 때는 arc() 메서드의 .. 더보기
[IIS] IIS 7.0 세팅가이드 [IIS] IIS 7.0 세팅가이드 ★모듈 기반 구조의 웹 서버 사용자가 필요로 하는 기능 모듈들만을 조합하여 가볍고 안정적인 웹 서버를 구성하는 것이 가능해진다 웹 서버 코어와 약 40여 개의 모듈들로 구성 IIS 6.0에서는 인증 방법에 익명 접근이 가능하도록 설정된 상태에서 ASP.NET 폼 인증 구현 특별한 경우에 windows 통합 인증을 사용하거나 실제 구현 코드에 의존한 폼 인증 유형이 많음. ISAPI 관련 기능, CGI 기능이 설치 되지만 비활성화 되었음. 서버의 메모리에 로드, CPU 싸이클을 소모, 웹 서버의 요청 파이프라인상에 존재되어 성능을 감소, 악의적인 사용자로부터 공격 가능성 ★메타베이스가 사라짐. IIS의 설정 정보를 담고 있는 메타베이스 자체가 사라짐. 대신 IIS 7.0.. 더보기
[그래픽 처리] 다각형 렌더링 [그래픽 처리] 다각형 렌더링 삼각형 렌더링 삼각형을 그리는 순서는 다음과 같습니다. 1. 캔버스의 렌더링 컨텍스트를 얻습니다. 2. beginPath() 메서드로 패스를 초기화 합니다. 3. moveTo(), lineTo() 메서드로 좌표를 지정합니다. 4. closePath() 메서드로 패스 지정을 종료합니다. 5. fill() 메서드로 삼각형을 렌더링합니다. moveTo() 메서드로 좌표의 시작점을 지정한 후, lineTo() 메서드로 선을 긋습니다. closePath()는 생략가능합니다. 터치한 곳에 직삼각형 그리기 예제를 통해 설명해 드리겠습니다. 캔버스에 onmousedown 이벤트를 설정해주어야 이벤트가 발생해 마우스로 터치한 부분에 삼각형이 렌더링 되겠죠. event 인수의 x와 y에 터치.. 더보기
[캡처 프로그램] 안카메라/Ancamera v4.0 [캡쳐 프로그램] 안카메라/Ancamera v4.0 안카메라는 간단한 캡처 프로그램입니다. 이제 프린트 스크린으로 하는 캡처에서 벗어나 봐야겠죠? 안카메라는 Naver 자료실에서 쉽게 다운받으실 수 있습니다. 동의을 하고 넘어가세요. 저는 '별집'이나 '별클리너'를 설치하지 않았습니다. 설치할 경로를 지정해주세요. 설치 후 안카메라를 바로 실행해보세요. 아래의 그림은 안카메라 캡처 모습입니다. 안카메라자체가 캡처를 하므로 캡쳐부위를 네모에 맞게 조절하고, 제일 우측 상단에 있는 버튼(F2 파일로 저장)을 누르면 그 부분만 캡처가 됩니다. 바로 '다른 이름으로 저장'할 수 있습니다. 이번엔 스크롤 캡처방법입니다. 캡처하고자 하는 부분에 일단 안카메라를 둡니다. 아래 그림의 빨간 네모에 있는 버튼(F9 자동.. 더보기
[그래픽 처리] 캔버스의 기초/RGB 색상표/HTML 색상표 [그래픽 처리] 캔버스의 기초/RGB 색상표/HTML 색상표 색 지정 방법 색을 지정하는 방법에는 여러가지가 있습니다. 1) #RRGGBB와 같은 형태의 기존 HTML방식 2) RGB에 0~255를 지정하는 rgb() 방식 3) RGB에 투명도(0~1)까지 지정하는 rgba()방식 ctx.fillStyle= "#FF0000" ; //HTML 방식 ctx.fillStyle= "rgb(255, 0 ,0)"; //RGB 방식 ctx.fillStyle= "rgba(255, 0, 0, 0.5)"; //RGB + 투명도방식 아래의 색상표들을 적절한 방식으로 적용해보시면 됩니다. RGB 색상표입니다. HTML 색상표 입니다. 더보기
[그래픽 처리] 캔버스의 기초/렌더링 컨텍스트 [그래픽 처리] 캔버스의 기초 HTML5의 신기능인 캔버스를 사용하면 도형을 그릴수 있습니다. HTML에 태그를 추가하고 캔버스 내에 도형을 렌더링하면 캔버스를 사용할 수 있습니다. 도형을 그리는 순서를 소개하겠습니다. 1. 캔버스 객체를 얻습니다. 자바스크립트에서 태그와 그 기능을 참조하기 위해 태그에 ID를 부여해 둡니다. document.getElementById() 메서드를 호출해 태그에 해당하는 캔버스 객체를 얻고 인수를 지정합니다. 2. 캔버스 객체로부터 렌더링 컨텍스트(Rendering Context)를 얻습니다. 렌더링 컨텍스트는 종이에 그림을 그리기 위한 색연필과 같습니다. 다음과 같이 캔버스 객체로부터 렌더링 컨텍스트를 얻어 변수 ctx에 저장합니다. 컨텍스트 종류에 따라 그림의 형태가.. 더보기