상세 컨텐츠

본문 제목

[자바스크립트] 색상자 배치

카테고리 없음

by esoesmio 2023. 5. 23. 20:57

본문

<!DOCTYPE html>
<html lang="en">

<!--//랜덤으로 사각형 5개 색 만든다-->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            display: inline-block;
            margin: 20px;
        }
    </style>
</head>
<body>
<div class="container"></div>
<script>
    let i = 0;
    const colorArr = ['black', 'red', 'green','blue','yellow'];
    let strDiv = "";
    const container = document.getElementsByClassName("container")[0];

    while(i<5){

        strDiv += `<div class = "box" id = "box${i}" style = "background : ${colorArr[i]};"></div>`;
        i++;
    }
    container.innerHTML = strDiv;
</script>
</body>
</html>

댓글 영역