tag.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="tag-container">
        <input type="text" id="tag-input" placeholder="&nbsp;&nbsp;&nbsp;&nbsp;태그를 입력하세요.">
    </div>

    <!--css-->
    <style>
        #tag-input{ 
            background-color: transparent;
            border: none;
            border-radius: 15px;
            /*class 말고 id 꾸미기*/
        }
        .tag {
            display: inline-block;
            padding: 5px 10px;
            margin: 5px;
            border-radius: 12px;
            cursor: pointer;
            background-color: #ddd;
            color: #008000;
            font-weight: bold
        }
    </style>


    <!--javascript-->
    <script>
        const tagContainer = document.getElementById("tag-container");
        const tagInput = document.getElementById("tag-input");

        const tagSet = new Set(); /*중복된 태그 확인*/

        tagInput.addEventListener("keydown", (event) => {
            if (event.key === "Enter") {
                const tagText = tagInput.value.trim(); /*입력창에서 Enter 키를 누르면 새 태그 생성*/

                if (tagText && !tagSet.has(tagText)) {
                    createTag(tagText);
                    tagSet.add(tagText);
                    tagInput.value = ""; /*중복 검사*/
                }
            }
        });

        function createTag(tagText) {
            const tagElement = document.createElement("div");
            tagElement.classList.add("tag");
            tagElement.textContent = tagText;
            tagContainer.appendChild(tagElement);


            tagElement.addEventListener("click", () => {
                tagContainer.removeChild(tagElement);
                tagSet.delete(tagText);
            });/*태그 삭제*/
        }
    </script>

</body>
</html>