qr 코드 생성기

작성일자 글쓴이

<!DOCTYPE html>

<html>

<head>

    <meta charset=”utf-8″>

    <title>QR Code Generator</title>

    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>

    <script src=”https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js” integrity=”sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==” crossorigin=”anonymous” referrerpolicy=”no-referrer”></script>

    <style>

        body { font-family: Arial, sans-serif; }

        #qrcode-container { margin-top: 20px; }

        #qrcode-container img { border: 1px solid #ccc; }

    </style>

</head>

<body>

    <h1>QR 코드 생성기</h1>

    <input type=”text” id=”text” placeholder=”URL을 입력하세요” />

    <button onclick=”generateQRCode()”>QR 코드 생성</button>

    <div id=”qrcode-container”>

        <img id=”qrcode” src=”” alt=”QR Code” />

    </div>

    <script>

        function generateQRCode() {

            const text = document.getElementById(‘text’).value;

            if (text) {

                const qrcode = new QRCode(document.getElementById(“qrcode”), {

                    text: text,

                    width: 128,

                    height: 128,

                    colorDark : “#000000”,

                    colorLight : “#ffffff”,

                    correctLevel : QRCode.CorrectLevel.H

                });

                // 현재 텍스트를 지우고 새 QR코드를 그립니다.

                qrcode.makeCode(text);

            }

        }

    </script>

</body>

</html>