HTML class 속성 – 올바른 이해와 사용 방법

<style>
    div { /* 모든 div 요소의 스타일링 */
        padding: 0.5em;
        border: 1px solid red;
        margin-bottom: 0.5em;
    }
    .box { /* box 클래스를 가지고 있는 div 요소만 배경색 추가 */
        background-color: gold;
    }
</style>

<div class="box">box 클래스</div>
<div class="box">box 클래스</div>
<div class="box">box 클래스</div>
<div class="box">box 클래스</div>
<div>div</div>
<div>div</div>
<div class="box">box 클래스</div>
<div class="box">box 클래스</div>
<div>div</div>
<div class="box">box 클래스</div>
<button id="highlight-button" type="button">클릭해서 텍스트 바꾸기</button>

<script>
    const highlightButton = document.getElementById("highlight-button");

    highlightButton.addEventListener("click", () => {
        // 클래스 이름이 'box'인 모든 요소를 가져옵니다.
        const boxes = document.querySelectorAll(".box");

        boxes.forEach(box => {
            box.innerHTML = "box 클래스 반갑습니다.";
        });
    });
</script>