Javascript 시작하기 - 국기콤보

국기 콤보 만들어보자.

 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>국기 이미지 콤보박스</title>

<style>
    body{
        margin:0;
        height:100vh;
        display:flex;
        justify-content:center;
        align-items:center;
        background:#eef3f8;
        font-family:Arial, sans-serif;
    }

    .card{
        width:360px;
        background:white;
        padding:25px;
        border-radius:20px;
        box-shadow:0 10px 25px rgba(0,0,0,0.15);
    }

    h2{
        margin-top:0;
        text-align:center;
    }

    .combo{
        position:relative;
        user-select:none;
    }

    .selected{
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:12px;
        border:1px solid #ccc;
        border-radius:12px;
        cursor:pointer;
        background:white;
        transition:0.2s;
    }

    .selected:hover{
        border-color:#4a90ff;
    }

    .selected-left{
        display:flex;
        align-items:center;
        gap:12px;
    }

    .selected img,
    .option img{
        width:40px;
        height:28px;
        object-fit:cover;
        border-radius:4px;
        border:1px solid #ddd;
    }

    .arrow{
        font-size:18px;
        transition:0.2s;
    }

    .combo.open .arrow{
        transform:rotate(180deg);
    }

    .options{
        position:absolute;
        width:100%;
        margin-top:8px;
        background:white;
        border-radius:12px;
        overflow:hidden;
        box-shadow:0 8px 20px rgba(0,0,0,0.15);
        display:none;
        z-index:100;
    }

    .option{
        display:flex;
        align-items:center;
        gap:12px;
        padding:12px;
        cursor:pointer;
        transition:0.15s;
    }

    .option:hover{
        background:#f1f5fb;
    }

    .preview{
        margin-top:25px;
        text-align:center;
    }

    .preview img{
        width:220px;
        border-radius:12px;
        border:2px solid #ddd;
        box-shadow:0 6px 15px rgba(0,0,0,0.15);
        transition:0.2s;
    }

    .country{
        margin-top:15px;
        font-size:28px;
        font-weight:bold;
    }
</style>
</head>
<body>

<div class="card">

    <h2>🌍 국기 선택</h2>

    <div class="combo" id="combo">

        <div class="selected" id="selected">

            <div class="selected-left" id="selectedLeft"></div>

            <div class="arrow">▼</div>

        </div>

        <div class="options" id="options"></div>

    </div>

    <div class="preview">
        <img id="previewImg">
        <div class="country" id="countryName"></div>
    </div>

</div>

<script>
/* =========================
   국기 데이터 배열
========================= */
const flagList = [

    {
        code : "kr",
        name : "대한민국",
        img  : "https://flagcdn.com/w320/kr.png"
    },

    {
        code : "us",
        name : "미국",
        img  : "https://flagcdn.com/w320/us.png"
    },

    {
        code : "jp",
        name : "일본",
        img  : "https://flagcdn.com/w320/jp.png"
    },

    {
        code : "cn",
        name : "중국",
        img  : "https://flagcdn.com/w320/cn.png"
    },

    {
        code : "fr",
        name : "프랑스",
        img  : "https://flagcdn.com/w320/fr.png"
    },

    {
        code : "gb",
        name : "영국",
        img  : "https://flagcdn.com/w320/gb.png"
    }

];

/* =========================
   요소
========================= */
const combo        = document.getElementById("combo");
const selected     = document.getElementById("selected");
const selectedLeft = document.getElementById("selectedLeft");
const options      = document.getElementById("options");

const previewImg   = document.getElementById("previewImg");
const countryName  = document.getElementById("countryName");

/* =========================
   선택 표시 함수
========================= */
function setSelected(item){

    selectedLeft.innerHTML = `
        <img src="${item.img}">
        <span>${item.name}</span>
    `;

    previewImg.src = item.img;
    countryName.textContent = item.name;

    previewImg.style.transform = "scale(1.05)";

    setTimeout(() => {
        previewImg.style.transform = "scale(1)";
    }, 150);
}

/* =========================
   옵션 생성
========================= */
flagList.forEach(item => {

    const div = document.createElement("div");

    div.className = "option";

    div.innerHTML = `
        <img src="${item.img}">
        <span>${item.name}</span>
    `;

    div.addEventListener("click", () => {

        setSelected(item);

        options.style.display = "none";

        combo.classList.remove("open");
    });

    options.appendChild(div);

});

/* =========================
   콤보 열기/닫기
========================= */
selected.addEventListener("click", () => {

    const isOpen = options.style.display === "block";

    options.style.display = isOpen ? "none" : "block";

    combo.classList.toggle("open");

});

/* =========================
   외부 클릭시 닫기
========================= */
document.addEventListener("click", (e) => {

    if(!e.target.closest(".combo")){

        options.style.display = "none";

        combo.classList.remove("open");
    }

});

/* =========================
   기본 선택
========================= */
setSelected(flagList[0]);

</script>

</body>
</html>