HTML5 Archives - icodebroker

[HTML/HTML5] input 엘리먼트 : onchange 속성을 사용해 값 변경시 처리하기

■ input 엘리먼트의 onchange 속성을 사용해 값 변경시 처리하는 방법을 보여준다. ▶ 예제 코드 (HTML)


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function onChange()
            {
                var value = document.getElementById("rangeInput").value;

                document.getElementById("valueSpan").innerHTML = value;
            }
        </script>
    </head>
    <body>
        <form>
            <p><input id="rangeInput" type="range" max="10" step="0.5" value="0" onchange="onChange();" /></p>
            <p><span id="valueSpan">0</span></p>
            <input type="submit" />
        </form>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function onChange()

{

var value = document.getElementById("rangeInput").value;

document.getElementById("valueSpan").innerHTML = value;

}

</script>

</head>

<body>

<form>

</form>

</body>

</html>

[HTML/HTML5] 메니페스트 파일 작성법

■ 메니페스트 파일 작성법을 보여준다. 메니패스트 파일은 네트워크가 단절된 오프라인 환경을 위해 로컬 캐시에 저장할 파일들 목록을 기술하는 일반 텍스트 파일이다. •

[HTML/HTML5] 아파치 웹 서버에서 메니패스트 MIME 타입 등록하기

■ 아파치 웹 서버에서 메니패스트 MIME 타입을 등록하는 방법을 보여준다. 아파치(Apache) 웹 서버의 설치 폴더 아래의 conf 폴더에 있는 mime.types 파일에 메니패스트

[HTML/HTML5] 오프라인 웹 애플리케이션 만들기

■ 오프라인 웹 애플리케이션을 만드는 방법을 보여준다. ▶ test.css


span
{
    font : 12pt 굴림체;
}

span

{

font : 12pt 굴림체;

}

▶ test.js


function clock()
{
    document.getElementById('output').innerHTML = new Date();

    setTimeout(clock, 1000);
}

function clock()

{

document.getElementById('output').innerHTML = new Date();

setTimeout(clock, 1000);

}

▶ test.manifest


CACHE MANIFEST
# 주석문입니다.
test.html
test.css
test.js

CACHE MANIFEST

# 주석문입니다.

test.html

test.css

test.js

※ 매니페스트 파일은 MIME 타입을 text/cache-manifest로

[HTML/HTML5] audio 엘리먼트 : 오디오 재생하기

■ audio 엘리먼트에서 오디오를 재생하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <audio controls preload autoplay>
            <source src="sample.ogg" />
        </audio>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</audio>

</body>

</html>

sample.ogg

[HTML/HTML5] video 엘리먼트 : 비디오 재생하기

■ video 엘리먼트에서 비디오를 재생하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <video width="600" height="480" controls preload autoplay style="border:1px solid black;">
            <source src="sample.mp4" type="video/mp4" />
        </video>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</video>

</body>

</html>

sample.mp4

[HTML/HTML5] canvas 엘리먼트 : setInterval 함수를 사용해 애니메이션 만들기

■ canvas 엘리먼트에서 setInterval 함수를 사용해 애니메이션을 만드는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            var canvas;
            var context;
            var rainArray;
            var count = 100;

            function rain()
            {
                var xPosition;
                var yPosition;
                var speed;
                var color;
            }

            function run()
            {
                this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);

                for(var i = 0; i < this.count; i++)
                {
                    this.context.fillStyle = this.rainArray[i].color;

                    this.context.fillRect(this.rainArray[i].xPosition, this.rainArray[i].yPosition, 10, 10);

                    this.rainArray[i].yPosition += this.rainArray[i].speed;

                    if(this.rainArray[i].yPosition > this.canvas.height)
                    {
                        this.rainArray[i].yPosition = 0;
                    }
                }
            }

            function onLoad()
            {
                this.canvas  = document.getElementById('canvas');
                this.context = this.canvas.getContext('2d');

                this.rainArray = [];

                for(var i = 0; i < this.count; i++)
                {
                    var xPosition = Math.floor(Math.random() * this.canvas.width);
                    var yPosition = 0;
                    var speed = Math.random() * 2;

                    this.rainArray[i] = new rain();

                    this.rainArray[i].xPosition = xPosition;
                    this.rainArray[i].yPosition = yPosition;
                    this.rainArray[i].speed     = speed;
                    this.rainArray[i].color     = 'rgb(' + Math.ceil(Math.random() * 255) + ',' + Math.ceil(Math.random() * 255) + ',' + Math.ceil(Math.random() * 255) + ')';
                }

                setInterval(run, 10);
            }
        </script>
    </head>
    <body onload="onLoad();">
        <canvas id="canvas" width="400" height="400" />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

var canvas;

var context;

var rainArray;

var count = 100;

function rain()

{

var xPosition;

var yPosition;

var speed;

var color;

}

function run()

{

this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);

for(var i = 0; i < this.count; i++)

{

this.context.fillStyle = this.rainArray[i].color;

this.context.fillRect(this.rainArray[i].xPosition, this.rainArray[i].yPosition, 10, 10);

this.rainArray[i].yPosition += this.rainArray[i].speed;

if(this.rainArray[i].yPosition > this.canvas.height)

{

this.rainArray[i].yPosition = 0;

}

function onLoad()

{

this.canvas = document.getElementById('canvas');

this.context = this.canvas.getContext('2d');

this.rainArray = [];

for(var i = 0; i < this.count; i++)

{

var xPosition = Math.floor(Math.random() * this.canvas.width);

var yPosition = 0;

var speed = Math.random() * 2;

this.rainArray[i] = new rain();

this.rainArray[i].xPosition = xPosition;

this.rainArray[i].yPosition = yPosition;

this.rainArray[i].speed = speed;

this.rainArray[i].color = 'rgb(' + Math.ceil(Math.random() * 255) + ',' + Math.ceil(Math.random() * 255) + ',' + Math.ceil(Math.random() * 255) + ')';

}

setInterval(run, 10);

}

</script>

</head>

</body>

</html>

[HTML/HTML5] canvas 엘리먼트 : 복합 변환을 사용해 사각형 그리기

■ canvas 엘리먼트에서 복합 변환을 사용해 사각형을 그리는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function onLoad()
            {
                var canvas  = document.getElementById('canvas');
                var context = canvas.getContext('2d');

                context.fillRect(0, 0, 100, 100);

                var angle = Math.PI * 45 / 180;

                context.transform(1, 0, 0, 1, 200, 10);
                context.transform(Math.cos(angle), Math.sin(angle), -Math.sin(angle), Math.cos(angle), 0, 0);
                context.transform(2, 0, 0, 2, 0, 0);

                context.fillRect(0, 0, 100, 100);
            }
        </script>
    </head>
    <body onload="onLoad();">
        <canvas id="canvas" width="400" height="400" />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function onLoad()

{

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

context.fillRect(0, 0, 100, 100);

var angle = Math.PI * 45 / 180;

context.transform(1, 0, 0, 1, 200, 10);

context.transform(Math.cos(angle), Math.sin(angle), -Math.sin(angle), Math.cos(angle), 0, 0);

context.transform(2, 0, 0, 2, 0, 0);

context.fillRect(0, 0, 100, 100);

}

</script>

</head>

</body>

</html>

[HTML/HTML5] canvas 엘리먼트 : 크기 변환을 사용해 사각형 그리기

■ canvas 엘리먼트에서 크기 변환을 사용해 사각형을 그리는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function onLoad()
            {
                var canvas  = document.getElementById('canvas');
                var context = canvas.getContext('2d');

                context.fillRect(100, 100, 100, 100);
                context.fillRect(200, 200, 200, 200);

                context.scale(0.5, 1);

                context.fillStyle = 'blue';

                context.fillRect(200, 200, 100, 100);
            }
        </script>
    </head>
    <body onload="onLoad();">
        <canvas id="canvas" width="400" height="400" />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function onLoad()

{

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

context.fillRect(100, 100, 100, 100);

context.fillRect(200, 200, 200, 200);

context.scale(0.5, 1);

context.fillStyle = 'blue';

context.fillRect(200, 200, 100, 100);

}

</script>

</head>

</body>

</html>

[HTML/HTML5] canvas 엘리먼트 : 회전 변환을 사용해 사각형 그리기

■ canvas 엘리먼트에서 회전 변환을 사용해 사각형을 그리는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function onLoad()
            {
                var canvas  = document.getElementById('canvas');
                var context = canvas.getContext('2d');

                for(var i = 0; i < 12; i++)
                {
                    context.save();

                    context.translate(100, 100);

                    var angle = (Math.PI * 30 * i) / 180;

                    context.rotate(angle);

                    context.fillStyle = 'rgb(0, 0, 255)';

                    context.fillRect(0, 0, 100, 10);

                    context.restore();
                }
            }
        </script>
    </head>
    <body onload="onLoad();">
        <canvas id="canvas" width="400" height="400" />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function onLoad()

{

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

for(var i = 0; i < 12; i++)

{

context.save();

context.translate(100, 100);

var angle = (Math.PI * 30 * i) / 180;

context.rotate(angle);

context.fillStyle = 'rgb(0, 0, 255)';

context.fillRect(0, 0, 100, 10);

context.restore();

}

</script>

</head>

</body>

</html>

[HTML/HTML5] canvas 엘리먼트 : 이동 변환을 사용해 사각형 그리기

■ canvas 엘리먼트에서 이동 변환을 사용해 사각형을 그리는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function onLoad()
            {
                var canvas  = document.getElementById('canvas');
                var context = canvas.getContext('2d');

                context.fillRect(0, 0, 100, 100);
                context.translate(100, 100);
                context.fillRect(0, 0, 100, 100);
            }
        </script>
    </head>
    <body onload="onLoad();">
        <canvas id="canvas" width="400" height="400" />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function onLoad()

{

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

context.fillRect(0, 0, 100, 100);

context.translate(100, 100);

context.fillRect(0, 0, 100, 100);

}

</script>

</head>

</body>

</html>

[HTML/HTML5] canvas 엘리먼트 : 컨텍스트 상태 저장/복원하기

■ canvas 엘리먼트에서 컨텍스트의 상태를 저장하고 복원하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function onLoad()
            {
                var canvas  = document.getElementById('canvas');
                var context = canvas.getContext('2d');

                context.fillStyle = 'blue';

                context.save();

                context.fillRect(0, 0, 100, 100);

                context.fillStyle = 'red';

                context.fillRect(100, 100, 100, 100);

                context.restore();

                context.fillRect(200, 0, 100, 100);
            }
        </script>
    </head>
    <body onload="onLoad();">
        <canvas id="canvas" width="400" height="400" />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function onLoad()

{

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

context.fillStyle = 'blue';

context.save();

context.fillRect(0, 0, 100, 100);

context.fillStyle = 'red';

context.fillRect(100, 100, 100, 100);

context.restore();

context.fillRect(200, 0, 100, 100);

}

</script>

</head>

</body>

</html>

[HTML/HTML5] canvas 엘리먼트 : 텍스트 그리기

■ canvas 엘리먼트에서 텍스트를 그리는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function process_loaded()
            {
                var canvas  = document.getElementById('canvas');
                var context = canvas.getContext('2d');

                context.font         = '40pt 궁서';
                context.textAlign    = 'left';
                context.textBaseline = 'top';

                context.fillText('텍스트', 50, 100);

                var length = context.measureText('텍스트').width;

                context.strokeText('텍스트', 50 + length + 20, 100);
            }
        </script>
    </head>
    <body onload="process_loaded();">
        <canvas id="canvas" width="400" height="400" />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function process_loaded()

{

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

context.font = '40pt 궁서';

context.textAlign = 'left';

context.textBaseline = 'top';

context.fillText('텍스트', 50, 100);

var length = context.measureText('텍스트').width;

context.strokeText('텍스트', 50 + length + 20, 100);

}

</script>

</head>

</body>

</html>

[HTML/HTML5] canvas 엘리먼트 : 그림자 그리기

■ canvas 엘리먼트에서 그림자를 그리는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function onLoad()
            {
                var canvas  = document.getElementById('canvas');
                var context = canvas.getContext('2d');

                image = new Image();

                image.onload = function()
                {
                    context.shadowOffsetX = 10;
                    context.shadowOffsetY = 10;
                    context.shadowBlur    = 10;
                    context.shadowColor   = 'rgb(0, 0, 0)';

                    context.drawImage(image, 10, 10, 200, 200);

                    context.shadowOffsetX = -10;
                    context.shadowOffsetY = 0;
                    context.shadowBlur    = 20;
                    context.shadowColor   = 'rgb(0, 0, 0)';

                    context.drawImage(image, 250, 10, 200, 200);
                };

                image.src = "rocks.jpg";
            }
        </script>
    </head>
    <body onload="onLoad();">
        <canvas id="canvas" width="500" height="500" />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function onLoad()

{

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

image = new Image();

image.onload = function()

{

context.shadowOffsetX = 10;

context.shadowOffsetY = 10;

context.shadowBlur = 10;

context.shadowColor = 'rgb(0, 0, 0)';

context.drawImage(image, 10, 10, 200, 200);

context.shadowOffsetX = -10;

context.shadowOffsetY = 0;

context.shadowBlur = 20;

context.shadowColor = 'rgb(0, 0, 0)';

context.drawImage(image, 250, 10, 200, 200);

};

image.src = "rocks.jpg";

}

</script>

</head>

</body>

</html>

[HTML/HTML5] canvas 엘리먼트 : 반복 이미지 패턴 그리기

■ canvas 엘리먼트에서 반복 이미지 패턴을 그리는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function onload()
            {
                var canvas  = document.getElementById('canvas');
                var context = canvas.getContext('2d');

                image = new Image();

                image.onload = function()
                {
                    context.fillStyle = context.createPattern(image, 'repeat');

                    context.fillRect(0, 0, 400, 400);
                };

                image.src = "ball.png";
            }
        </script>
    </head>
    <body onload="onload();">
        <canvas id="canvas" width="400" height="400" />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function onload()

{

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

image = new Image();

image.onload = function()

{

context.fillStyle = context.createPattern(image, 'repeat');

context.fillRect(0, 0, 400, 400);

};

image.src = "ball.png";

}

</script>

</head>

</body>

</html>

ball.png

[HTML/HTML5] canvas 엘리먼트 : 이미지 그리기

■ canvas 엘리먼트에서 이미지를 그리는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function onLoad()
            {
                var canvas  = document.getElementById('canvas');
                var context = canvas.getContext('2d');

                image = new Image();

                image.onload = function()
                {
                    context.drawImage(image,  10, 10);
                    context.drawImage(image, 150, 10, 24, 24);
                    context.drawImage(image, 200, 10, 96, 96);
                    context.drawImage(image,   0,  0, 48, 48, 300, 10, 24, 24);
                    context.drawImage(image,  48, 48, 48, 48, 350, 10, 24, 24);
                };

                image.src = "ball.png";
            }
        </script>
    </head>
    <body onload="onLoad();">
        <canvas id="canvas" width="400" height="400" />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function onLoad()

{

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

image = new Image();

image.onload = function()

{

context.drawImage(image, 10, 10);

context.drawImage(image, 150, 10, 24, 24);

context.drawImage(image, 200, 10, 96, 96);

context.drawImage(image, 0, 0, 48, 48, 300, 10, 24, 24);

context.drawImage(image, 48, 48, 48, 48, 350, 10, 24, 24);

};

image.src = "ball.png";

}

</script>

</head>

</body>

</html>

ball.png

[HTML/HTML5] canvas 엘리먼트 : 그라데이션 칠하기

■ canvas 엘리먼트에서 그라데이션을 칠하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function onLoad()
            {
                var canvas  = document.getElementById('canvas');
                var context = canvas.getContext('2d');

                var gradient = context.createLinearGradient(0, 0, 300, 0);

                gradient.addColorStop(0, '#ff0000');
                gradient.addColorStop(1, '#0000ff');

                context.beginPath();

                context.fillStyle = gradient;

                context.fillRect(10, 10, 500, 50);

                gradient = context.createRadialGradient(200, 200, 0, 200, 200, 50);

                gradient.addColorStop(0  , '#0000ff');
                gradient.addColorStop(0.5, '#ff0000');
                gradient.addColorStop(1  , '#00ff00');

                context.beginPath();

                context.fillStyle = gradient;

                context.arc(200, 200, 50, 0, Math.PI * 2, false);
                context.fill();
            }
        </script>
    </head>
    <body onload="onLoad();">
        <canvas id="canvas" width="400" height="400" />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function onLoad()

{

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

var gradient = context.createLinearGradient(0, 0, 300, 0);

gradient.addColorStop(0, '#ff0000');

gradient.addColorStop(1, '#0000ff');

context.beginPath();

context.fillStyle = gradient;

context.fillRect(10, 10, 500, 50);

gradient = context.createRadialGradient(200, 200, 0, 200, 200, 50);

gradient.addColorStop(0 , '#0000ff');

gradient.addColorStop(0.5, '#ff0000');

gradient.addColorStop(1 , '#00ff00');

context.beginPath();

context.fillStyle = gradient;

context.arc(200, 200, 50, 0, Math.PI * 2, false);

context.fill();

}

</script>

</head>

</body>

</html>

[HTML/HTML5] canvas 엘리먼트 : 선 그리기

■ canvas 엘리먼트에서 선을 그리는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function onLoad()
            {
                var canvas  = document.getElementById('canvas');
                var context = canvas.getContext('2d');

                context.lineWidth   = 2;
                context.lineJoin    = 'miter';
                context.lineCap     = 'butt';
                context.strokeStyle = 'gray';

                context.beginPath();
                context.moveTo(0, 80);
                context.lineTo(500, 80);
                context.stroke();

                context.beginPath();
                context.moveTo(0, 220);
                context.lineTo(500, 220);
                context.moveTo(0, 300);
                context.lineTo(500, 300);
                context.stroke();

                context.lineWidth   = 30;
                context.strokeStyle = 'black';

                context.lineJoin = 'miter';
                context.lineCap  = 'butt';

                context.beginPath();
                context.moveTo(0, 30);
                context.lineTo(100, 30);
                context.lineTo(100, 80);
                context.stroke();

                context.lineJoin = 'bevel';
                context.lineCap  = 'square';

                context.beginPath();
                context.moveTo(140, 30);
                context.lineTo(240, 30);
                context.lineTo(240, 80);
                context.stroke();

                context.lineJoin = 'round';
                context.lineCap  = 'round';

                context.beginPath();
                context.moveTo(280, 30);
                context.lineTo(380, 30);
                context.lineTo(380, 80);
                context.stroke();

                context.lineJoin   = 'miter';
                context.lineCap    = 'butt';
                context.miterLimit = 10;

                context.beginPath();
                context.moveTo(20, 220);
                context.lineTo(50, 300);
                context.lineTo(80, 220);
                context.lineTo(110, 300);
                context.lineTo(140, 220);
                context.stroke();

                context.miterLimit = 1;

                context.beginPath();
                context.moveTo(220, 220);
                context.lineTo(250, 300);
                context.lineTo(280, 220);
                context.lineTo(310, 300);
                context.lineTo(340, 220);
                context.stroke();
            }
        </script>
    </head>
    <body onload="onLoad();">
        <canvas id="canvas" width="400" height="400" />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function onLoad()

{

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

context.lineWidth = 2;

context.lineJoin = 'miter';

context.lineCap = 'butt';

context.strokeStyle = 'gray';

context.beginPath();

context.moveTo(0, 80);

context.lineTo(500, 80);

context.stroke();

context.beginPath();

context.moveTo(0, 220);

context.lineTo(500, 220);

context.moveTo(0, 300);

context.lineTo(500, 300);

context.stroke();

context.lineWidth = 30;

context.strokeStyle = 'black';

context.lineJoin = 'miter';

context.lineCap = 'butt';

context.beginPath();

context.moveTo(0, 30);

context.lineTo(100, 30);

context.lineTo(100, 80);

context.stroke();

context.lineJoin = 'bevel';

context.lineCap = 'square';

context.beginPath();

context.moveTo(140, 30);

context.lineTo(240, 30);

context.lineTo(240, 80);

context.stroke();

context.lineJoin = 'round';

context.lineCap = 'round';

context.beginPath();

context.moveTo(280, 30);

context.lineTo(380, 30);

context.lineTo(380, 80);

context.stroke();

context.lineJoin = 'miter';

context.lineCap = 'butt';

context.miterLimit = 10;

context.beginPath();

context.moveTo(20, 220);

context.lineTo(50, 300);

context.lineTo(80, 220);

context.lineTo(110, 300);

context.lineTo(140, 220);

context.stroke();

context.miterLimit = 1;

context.beginPath();

context.moveTo(220, 220);

context.lineTo(250, 300);

context.lineTo(280, 220);

context.lineTo(310, 300);

context.lineTo(340, 220);

context.stroke();

}

</script>

</head>

</body>

</html>

[HTML/HTML5] canvas 엘리먼트 : 베지어 곡선 그리기

■ canvas 엘리먼트에서 베지어 곡선을 그리는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function onLoad()
            {
                var canvas  = document.getElementById('canvas');
                var context = canvas.getContext('2d');

                context.beginPath();
                context.moveTo(0, 100);
                context.quadraticCurveTo(150, 20, 300, 100);
                context.strokeStyle = 'rgb(0, 255, 0)';
                context.stroke();

                context.beginPath();
                context.moveTo(0, 100);
                context.quadraticCurveTo(150, 180, 300, 100);
                context.strokeStyle = 'rgb(125, 125, 0)';
                context.stroke();

                context.beginPath();
                context.moveTo(0, 100);
                context.quadraticCurveTo(10, 20, 300, 100);
                context.strokeStyle = 'rgb(0, 125, 125)';
                context.stroke();

                context.beginPath();
                context.moveTo(0, 100);
                context.bezierCurveTo(200, 0, 400, 0, 300, 100);
                context.strokeStyle = 'rgb(255, 0, 0)';
                context.stroke();
            }
        </script>
    </head>
    <body onload="onLoad();">
        <canvas id="canvas" width="400" height="400" />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function onLoad()

{

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

context.beginPath();

context.moveTo(0, 100);

context.quadraticCurveTo(150, 20, 300, 100);

context.strokeStyle = 'rgb(0, 255, 0)';

context.stroke();

context.beginPath();

context.moveTo(0, 100);

context.quadraticCurveTo(150, 180, 300, 100);

context.strokeStyle = 'rgb(125, 125, 0)';

context.stroke();

context.beginPath();

context.moveTo(0, 100);

context.quadraticCurveTo(10, 20, 300, 100);

context.strokeStyle = 'rgb(0, 125, 125)';

context.stroke();

context.beginPath();

context.moveTo(0, 100);

context.bezierCurveTo(200, 0, 400, 0, 300, 100);

context.strokeStyle = 'rgb(255, 0, 0)';

context.stroke();

}

</script>

</head>

</body>

</html>

[HTML/HTML5] canvas 엘리먼트 : 원 그리기

■ canvas 엘리먼트에서 원을 그리는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function onLoad()
            {
                var canvas  = document.getElementById('canvas');
                var context = canvas.getContext('2d');

                context.beginPath();
                context.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2, 0, Math.PI * 2, false);
                context.fillStyle = 'rgb(255, 0, 0)';
                context.fill();

                context.beginPath();
                context.arc(canvas.width / 2, canvas.height / 2, canvas.width / 4, 0, Math.PI, false);
                context.fillStyle = 'rgb(0, 0, 255)';
                context.fill();

                context.beginPath();
                context.arc(canvas.width / 2, canvas.height / 2, canvas.width / 4, 0, Math.PI, true);
                context.fillStyle = 'rgb(0, 255, 0)';
                context.fill();
            }
        </script>
    </head>
    <body onload="onLoad();">
        <canvas id="canvas" width="400" height="400" />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function onLoad()

{

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

context.beginPath();

context.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2, 0, Math.PI * 2, false);

context.fillStyle = 'rgb(255, 0, 0)';

context.fill();

context.beginPath();

context.arc(canvas.width / 2, canvas.height / 2, canvas.width / 4, 0, Math.PI, false);

context.fillStyle = 'rgb(0, 0, 255)';

context.fill();

context.beginPath();

context.arc(canvas.width / 2, canvas.height / 2, canvas.width / 4, 0, Math.PI, true);

context.fillStyle = 'rgb(0, 255, 0)';

context.fill();

}

</script>

</head>

</body>

</html>

[HTML/HTML5] canvas 엘리먼트 : 삼각형 그리기

■ canvas 엘리먼트에서 삼각형을 그리는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function onLoad()
            {
                var canvas  = document.getElementById('canvas');
                var context = canvas.getContext('2d');

                context.beginPath();
                context.moveTo(canvas.width / 2, 0);
                context.lineTo(0, canvas.height);
                context.lineTo(canvas.width, canvas.height);
                context.closePath();

                context.strokeStyle = 'red';

                context.stroke();

                context.beginPath();
                context.moveTo(canvas.width / 2, 100);
                context.lineTo(100, canvas.height - 100);
                context.lineTo(canvas.width - 100, canvas.height - 100);
                context.closePath();

                context.fillStyle = 'blue';

                context.fill();
            }
        </script>
    </head>
    <body onload="onLoad();">
        <canvas id="canvas" width="400" height="400" />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function onLoad()

{

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

context.beginPath();

context.moveTo(canvas.width / 2, 0);

context.lineTo(0, canvas.height);

context.lineTo(canvas.width, canvas.height);

context.closePath();

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(canvas.width / 2, 100);

context.lineTo(100, canvas.height - 100);

context.lineTo(canvas.width - 100, canvas.height - 100);

context.closePath();

context.fillStyle = 'blue';

context.fill();

}

</script>

</head>

</body>

</html>

[HTML/HTML5] canvas 엘리먼트 : 사각형 그리기

■ canvas 엘리먼트에서 사각형을 그리는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function onLoad()
            {
                var canvas  = document.getElementById('canvas');
                var context = canvas.getContext('2d');

                context.strokeStyle = 'red';

                context.strokeRect(20, 20, 100, 100);

                context.fillStyle = 'rgb(0, 0, 255)';

                context.fillRect(120, 120, 200, 200);

                context.clearRect(140, 140, 160, 160);
            }
        </script>
    </head>
    <body onload="onLoad();">
        <canvas id="canvas" width="400" height="400" />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function onLoad()

{

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

context.strokeStyle = 'red';

context.strokeRect(20, 20, 100, 100);

context.fillStyle = 'rgb(0, 0, 255)';

context.fillRect(120, 120, 200, 200);

context.clearRect(140, 140, 160, 160);

}

</script>

</head>

</body>

</html>

[HTML/HTML5] 폼에서 입력 요소 사용하기

■ 폼에서 입력 요소를 사용하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function onChange()
            {
                var value = document.getElementById("userRange").value;

                document.getElementById("label").innerHTML = value;
            }
        </script>
    </head>
    <body>
        <form>
            <p>텍스트 <input type="text" /></p>
            <p>이메일 <input name="userEmail" type="email" /></p>
            <p>URL <input name="userURL" type="url" /></p>
            <p>
                범위 <input id="userRange" type="range" max="10" step="0.5" value="0" onchange="onChange();" />
                <span id="label">0</span>
            </p>
            <p>숫자 <input type="number" /></p>
            <p>전화번호 <input type="tel" placeholder="02)123-4567" /></p>
            <p>일자 <input type="date" /></p>
            <p>연월 <input type="month" /></p>
            <p>주 <input type="week" /></p>
            <p>시간 <input type="time" step="0.1" /></p>
            <p>UTC 시간 <input type="datetime" /></p>
            <p>지역 시간 <input type="datetime-local" /></p>
            <input type="submit" />
        </form>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function onChange()

{

var value = document.getElementById("userRange").value;

document.getElementById("label").innerHTML = value;

}

</script>

</head>

<body>

<form>

<p>

범위 <input id="userRange" type="range" max="10" step="0.5" value="0" onchange="onChange();" />

</p>

</form>

</body>

</html>

[HTML/HTML5] style 태그 : CSS 사용하기

■ style 태그에서 CSS를 사용하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            p
            {
                width            : 200px;
                height           : 200px;
                background-color : #cccc00;
            }
        </style>
    </head>
    <body>
        <p>CSS3 테스트</p>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

{

width : 200px;

height : 200px;

background-color : #cccc00;

}

</style>

</head>

<body>

</body>

</html>

[HTML/HTML5] 구조 태그 사용하기

■ 구조 태그를 사용하는 방법을 보여준다. ▶ 예제 코드 (HTML)


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML5</title>
    </head>
    <body>
        <header>
            <hgroup>
                <h1>Header</h1>
                <h2>Sub title</h2>
            </hgroup>
        </header>
        <nav>
            <h1>Navigation</h1>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
        <section>
            <h1>Section</h1>
            <article>
                Article
            </article>
        </section>
        <section>
            <h1>Section</h1>
            <article>
                Article
            </article>
        </section>
        <aside>
            <h1>ASide</h1>
        </aside>
        <footer>
            <h1>Footer</h1>
        </footer>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Header</h1>

<h2>Sub title</h2>

</hgroup>

</header>

<nav>

<h1>Navigation</h1>

<ul>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

<h1>Section</h1>

Article

</article>

</section>

<h1>Section</h1>

Article

</article>

</section>

<aside>

<h1>ASide</h1>

</aside>

<h1>Footer</h1>

</footer>

</body>

</html>