HTML Archives - 3 중 2 번째 페이지

[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>

[HTML/HTML5] HTML5에서 문자 인코딩 설정하기

■ HTML5에서 문자 인코딩을 설정하는 방법을 보여준다. 1. 전송 단계에서 HTTP 헤더에 Content-Type을 설정한다. 2. 문서 앞부분에 특수 유니코드 BOM(Byte Order Mark)

[HTML/HTML5] !DOCTYPE 태그 : HTML5 표준 방식 문서 선언하기

■ !DOCTYPE 태그 : HTML5 표준 방식 문서 선언하기 ▶ 예제 코드 (HTML)


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>HTML5</title>
    </head>
    <body>
        <p>테스트 문자열입니다.</p>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>테스트 문자열입니다.</p>

</body>

</html>

[C#/COMMON/HTMLAGILITYPACK/.NET6] RichEditControl 클래스 : HtmlText 속성에서 구한 HTML 문자열 파싱하기

■ RichEditControl 클래스의 HtmlText 속성에서 구한 HTML 문자열을 파싱하는 방법을 보여준다. ▶ Program.cs


using System.Text;
using System.Web;

using HtmlAgilityPack;

namespace TestProject;

/// <summary>
/// 프로그램
/// </summary>
class Program
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Static
    //////////////////////////////////////////////////////////////////////////////// Private

    #region 프로그램 시작하기 - Main()

    /// <summary>
    /// 프로그램 시작하기
    /// </summary>
    private static void Main()
    {
        HtmlDocument document = new HtmlDocument();

        document.Load("source.html", Encoding.UTF8);

        StringBuilder stringBuilder = new StringBuilder();

        HtmlNode bodyNode = document.DocumentNode.ChildNodes["html"].ChildNodes["body"];

        Parse(bodyNode, stringBuilder, 0);

        Console.WriteLine(stringBuilder.ToString());
    }

    #endregion
    #region 파싱하기 - Parse(parentNode, stringBuilder, nodeLevel)

    /// <summary>
    /// 파싱하기
    /// </summary>
    /// <param name="parentNode">부모 노드</param>
    /// <param name="stringBuilder">문자열 빌더</param>
    /// <param name="nodeLevel">노드 레벨</param>
    private static void Parse(HtmlNode parentNode, StringBuilder stringBuilder, int nodeLevel)
    {
        foreach(HtmlNode childNode in parentNode.ChildNodes)
        {
            if(childNode.Name == "#text")
            {
                continue;
            }

            if(nodeLevel > 0)
            {
                stringBuilder.Append(" ".PadRight(nodeLevel * 4));
            }

            int imageCount = 0;
            int tableCount = 0;

            if(childNode.Name == "p")
            {
                if(childNode.ChildNodes.Count > 0)
                {
                    if(childNode.ChildNodes[0].Name == "span")
                    {
                        if(childNode.ChildNodes[0].ChildNodes.Count > 0)
                        {
                            if(childNode.ChildNodes[0].ChildNodes[0].Name == "img")
                            {
                                imageCount++;

                                stringBuilder.AppendLine($"[이미지 {imageCount}]");
                            }
                            else
                            {
                                string text = childNode.InnerText.Trim();

                                if(string.IsNullOrEmpty(text))
                                {
                                    stringBuilder.AppendLine();
                                }
                                else
                                {
                                    stringBuilder.AppendLine($"[문단] {HttpUtility.HtmlDecode(text).Replace(" ", " ")}");
                                }
                            }
                        }

                        continue;
                    }

                    continue;
                }

                continue;
            }
            else if(childNode.Name == "table")
            {
                tableCount++;

                stringBuilder.AppendLine($"[표 {tableCount}]");
            }
        }
    }

    #endregion
}

100

101

102

103

104

105

106

107

108

109

110

111

112

using System.Text;

using System.Web;

using HtmlAgilityPack;

namespace TestProject;

/// <summary>

/// 프로그램

/// </summary>

class Program

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Static

//////////////////////////////////////////////////////////////////////////////// Private

#region 프로그램 시작하기 - Main()

/// <summary>

/// 프로그램 시작하기

/// </summary>

private static void Main()

{

HtmlDocument document = new HtmlDocument();

document.Load("source.html", Encoding.UTF8);

StringBuilder stringBuilder = new StringBuilder();

HtmlNode bodyNode = document.DocumentNode.ChildNodes["html"].ChildNodes["body"];

Parse(bodyNode, stringBuilder, 0);

Console.WriteLine(stringBuilder.ToString());

}

#endregion

#region 파싱하기 - Parse(parentNode, stringBuilder, nodeLevel)

/// <summary>

/// 파싱하기

/// </summary>

/// <param name="parentNode">부모 노드</param>

/// <param name="stringBuilder">문자열 빌더</param>

/// <param name="nodeLevel">노드 레벨</param>

private static void Parse(HtmlNode parentNode, StringBuilder stringBuilder, int nodeLevel)

{

foreach(HtmlNode childNode in parentNode.ChildNodes)

{

if(childNode.Name == "#text")

{

continue;

}

if(nodeLevel > 0)

{

stringBuilder.Append(" ".PadRight(nodeLevel * 4));

}

int imageCount = 0;

int tableCount = 0;

if(childNode.Name == "p")

{

if(childNode.ChildNodes.Count > 0)

{

if(childNode.ChildNodes[0].Name == "span")

{

if(childNode.ChildNodes[0].ChildNodes.Count > 0)

{

if(childNode.ChildNodes[0].ChildNodes[0].Name == "img")

{

imageCount++;

stringBuilder.AppendLine($"[이미지 {imageCount}]");

}

else

{

string text = childNode.InnerText.Trim();

if(string.IsNullOrEmpty(text))

{

stringBuilder.AppendLine();

}

else

{

stringBuilder.AppendLine($"[문단] {HttpUtility.HtmlDecode(text).Replace(" ", " ")}");

}

continue;

}

continue;

}

continue;

}

else if(childNode.Name == "table")

{

tableCount++;

stringBuilder.AppendLine($"[표 {tableCount}]");

}

#endregion

}

TestProject.zip