코딩 스쿨 HTML

언어선택 : HTMLㅣ CSSㅣ JAVAㅣ JAVASCRIPTㅣ MYSQLㅣ SQLㅣ PHP
▶ HTML Graphics
HTML Graphics
HTML Canvas
HTML SVG

HTML Graphics

TML에서 그래픽을 표현하는 방법은 여러 가지가 있으며, 주로 다음과 같은 요소와 기술을 사용합니다:

1. <canvas> 요소

  • 설명: HTML5에서 추가된 <canvas> 요소는 자바스크립트와 함께 사용하여 2D 그래픽이나 애니메이션을 그릴 수 있는 공간을 제공합니다.
  • 사용법:
    • 먼저 <canvas> 요소를 HTML에 추가하고, 그 안에서 자바스크립트를 사용해 그래픽을 그립니다.
    • 주로 게임 개발, 데이터 시각화, 이미지 처리 등에 사용됩니다.

기본 예시:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>SVG 예시</title>
</head>
<body>
    <h1>SVG로 도형 그리기</h1>
    <svg width="400" height="400">
        <!-- 파란색 사각형 -->
        <rect x="50" y="50" width="150" height="100" fill="blue" />
        
        <!-- 노란색 원 -->
        <circle cx="200" cy="200" r="80" stroke="black" stroke-width="2" fill="yellow" />
        
        <!-- 빨간색 선 -->
        <line x1="50" y1="300" x2="300" y2="300" stroke="red" stroke-width="4" />
    </svg>
</body>
</html>

이 예시에서 <canvas>는 400x400 크기의 영역을 제공하며, 자바스크립트를 통해 빨간색 사각형과 원을 그립니다.

2. <svg> (Scalable Vector Graphics)

  • 설명: SVG는 벡터 그래픽을 HTML에서 직접 정의하고 렌더링하는 방법입니다. <svg> 요소를 사용하면 XML 기반 문법으로 그래픽을 표현할 수 있으며, 확대/축소해도 깨지지 않는 장점이 있습니다.
  • 사용법: 다양한 그래픽을 XML 태그를 사용하여 정의합니다. 주로 로고, 아이콘, 차트 등의 그래픽을 표현할 때 유용합니다.

기본 예시:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>SVG 예시</title>
</head>
<body>
    <h1>SVG로 도형 그리기</h1>
    <svg width="400" height="400">
        <!-- 파란색 사각형 -->
        <rect x="50" y="50" width="150" height="100" fill="blue" />
        
        <!-- 노란색 원 -->
        <circle cx="200" cy="200" r="80" stroke="black" stroke-width="2" fill="yellow" />
        
        <!-- 빨간색 선 -->
        <line x1="50" y1="300" x2="300" y2="300" stroke="red" stroke-width="4" />
    </svg>
</body>
</html>

이 코드는 SVG를 사용하여 파란색 사각형, 노란색 원, 빨간색 선을 그립니다. SVG는 크기를 자유롭게 조정할 수 있으며, 자바스크립트와 함께 애니메이션도 가능합니다.

3. CSS로 그래픽 구현

  • 설명: CSS를 사용하여 도형을 그리거나 애니메이션을 구현할 수 있습니다. CSS의 border, background, transform, clip-path 등의 속성을 활용해 다양한 그래픽을 만들 수 있습니다.
  • 사용법: CSS를 사용하여 사각형, 원, 삼각형 등 기본 도형을 만들 수 있고, keyframes를 이용해 애니메이션을 추가할 수도 있습니다.

기본 예시:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <style>
        .box {
            width: 150px;
            height: 150px;
            background-color: red;
        }
        .circle {
            width: 150px;
            height: 150px;
            background-color: green;
            border-radius: 50%;
        }
        .triangle {
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid blue;
        }
        .animation {
            width: 100px;
            height: 100px;
            background-color: orange;
            position: relative;
            animation: move 2s infinite;
        }
        @keyframes move {
            0%   { left: 0; }
            50%  { left: 200px; }
            100% { left: 0; }
        }
    </style>
    <title>CSS 그래픽 예시</title>
</head>
<body>
    <h1>CSS로 도형 그리기</h1>
    <div class="box"></div>
    <div class="circle"></div>
    <div class="triangle"></div>
    <div class="animation"></div>
</body>
</html>
  • 결과: 이 코드는 CSS로 빨간 사각형, 초록색 원, 파란색 삼각형을 만들고, keyframes를 사용하여 주황색 상자가 왼쪽에서 오른쪽으로 움직이는 애니메이션을 구현합니다.

4. WebGL

  • 설명: WebGL은 HTML5의 <canvas> 요소를 통해 3D 그래픽을 렌더링하는 기술입니다. 자바스크립트와 함께 GPU를 활용하여 고성능의 3D 그래픽을 표현할 수 있습니다. 주로 3D 게임이나 데이터 시각화에 사용됩니다.
  • 사용법: WebGL은 자바스크립트 API를 사용하여 그래픽을 구현하므로 복잡하지만, 매우 강력한 성능을 제공합니다.

WebGL 사용 예시 (Three.js 라이브러리 사용):

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>WebGL 예시 (Three.js)</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
    <h1>WebGL로 3D 그래픽 구현 (Three.js)</h1>
    <div id="container"></div>
    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        var geometry = new THREE.BoxGeometry();
        var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        var cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
        camera.position.z = 5;
        var animate = function () {
            requestAnimationFrame(animate);
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        };
        animate();
    </script>
</body>
</html>
  • 결과: 이 예시는 Three.js 라이브러리를 사용하여 회전하는 3D 큐브를 구현합니다. Three.js는 WebGL을 쉽게 다룰 수 있도록 도와주는 라이브러리입니다.

5. 차트와 그래프

  • 설명: 차트와 그래프를 사용하여 데이터를 시각화할 때, Chart.js, D3.js와 같은 자바스크립트 라이브러리를 사용할 수 있습니다. 이 라이브러리들은 다양한 형태의 차트 (바 차트, 라인 차트, 파이 차트 등)를 쉽게 생성할 수 있습니다.

Chart.js 예시:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Chart.js 예시</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <h1>차트 그리기 (Chart.js)</h1>
    <canvas id="myChart" width="400" height="200"></canvas>
    <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>
</body>
</html>
  • 결과: Chart.js를 사용하여 바 차트를 그리는 예제입니다. 데이터와 차트 유형을 지정하면, 간단하게 차트를 그릴 수 있습니다.

요약:

  • <canvas>: 자바스크립트를 사용해 2D 또는 3D 그래픽을 그립니다.
  • <svg>: 벡터 기반의 그래픽을 HTML에 직접 삽입하여 사용합니다.
  • CSS: 도형 및 애니메이션을 CSS만으로 구현할 수 있습니다.
  • WebGL: 고성능 3D 그래픽을 표현할 수 있는 자바스크립트 API입니다.
  • 차트 라이브러리: 데이터를 시각화하는 데 유용한 라이브러리들이 많습니다.

이 외에도 HTML5와 함께 사용할 수 있는 많은 그래픽 기술과 도구들이 있으며, 각 기술의 장단점을 이해하고 적절하게 사용하는 것이 중요합니다.

copyright ⓒ 스타트코딩 all rights reserved.
이메일 : startcodingim@gamil.com