<section id="wrap" class="on">

        <article class="bg_on">1</article>

    </section>

  *{

            margin: 0;

            padding: 0;

        }

        #wrap{

            width: 500px;

            height: 500px;

            border: 10px solid black;

            padding: 100px;

            box-sizing: border-box;

            margin: 0 auto;

        }

        #wrap article{

            /*wrap의 자손 article선택*/

            width: 100%;

            height: 100%;

            background-color: forestgreen;

            transition: 1s;

        }

        #wrap.on article{

            /*wrap이면서 .on인 부모객체의 자손 article선택

              = 동일한 객체의 우선순위를 높여서 선택할 때, 

            동일한 객체의 선택자를 공백없이 붙여 모두 작성*/

            background-color: pink;

        }

        #wrap article.act{

            /*wrap의 자손 article이며 클래스명이 .act인 자손요소 선택*/

            background-color: darkcyan;

        }

        .bg_on{

            background-color: grey;

            text-align: center;

            line-height: 300px;

            font-size: 100px;

            color: black;

        }

        #wrap .bg_on{

            color: blue;

        }

  const article=document.querySelector('article')

//article.style.backgroundColor='skyblue' //css스타일을 직접 변경하여 삽입하는 방법

//1. 클래스 추가 명령

    //선택자.classList.add('클래스명');(클래스명에 .작성하지 않도록 주의)

    //addClass와 같은 기능을 수행

    wrap.addEventListener('click',()=>{

    article.classList.add('act') //wrap클릭시 article에 .act 클래스명 추가

​

//2. 클래스 제거 명령

    article.classList.remove('bg_on') //wrap클릭시 article에 .bg_on 클래스명 제거

​

// 3. 클래스 삽입 유무 확인

    // 선택자.classList.contains('확인클래스명')

    // 특정 클래스가 있으면 true, 없으면 false로 반환

    let isOn=wrap.classList.contains('on') //wrap에 on이란 클래스명 있는지 확인

    alert(isOn);

})