JavaScript

{
// 두번째 버튼 클릭했을때
    document.querySelector("#sample1 .btn1").addEventListener("click", function() {
        document.querySelector("#sample1 .view2").classList.add("selected");
    });

    document.querySelector("#sample1 .btn2").addEventListener("click", function() {
        document.querySelector("#sample1 .view2").classList.remove("selected");
    });

    // 버튼을 클릭하면 모든 이미지가 선택
    document.querySelector("#sample1 .btn3").addEventListener("click", function() {
        document.querySelectorAll("#sample1 .view > div").forEach(function (ele) {
            ele.classList.add("selected");
        });
    });

    // 버튼을 클릭하면 모든 이미지가 해제
    document.querySelector("#sample1 .btn4").addEventListener("click", function() {
        document.querySelectorAll("#sample1 .view > div").forEach(function (ele) {
            ele.classList.remove("selected");
        });
    });
}

{
//리셋
document.querySelector("#sample2 .btn0").addEventListener("click", function(){
    document.querySelectorAll("#sample2 .view > div").forEach(function(ele){
        ele.classList.remove("selected");
    })
});

document.querySelector("#sample2 .btn1").addEventListener("click", function(){
    document.querySelector("#sample2 .view2").classList.toggle("selected");
});

document.querySelector("#sample2 .btn2").addEventListener("click", function(){
    document.querySelectorAll("#sample2 .view > div").forEach(function(ele){
        ele.classList.toggle("selected");
    });
});

// 각각의 이미지를 클릭하면 각각 이미지가 선택 또는 해제
document.querySelectorAll("#sample2 .view > div").forEach(function(ele){
    ele.addEventListener("click", function(){
        ele.classList.toggle("selected")
    });
});
}

{
//버튼을 클릭하면 선택한 클래스를 찾아 삭제합니다
document.querySelector("#sample3 .btn1").addEventListener("click", function(){
    document.querySelectorAll("#sample3 .view > div").forEach(function(ele){
        if(ele.classList.contains("selected")){
            ele.classList.remove("selected");
        }
    });
});

//버튼을 클릭하면 리셋
document.querySelector("#sample3 .btn0").addEventListener("click", function(){
    document.querySelector("#sample3 .view2").classList.add("selected");
    document.querySelector("#sample3 .view4").classList.add("selected");
    document.querySelector("#sample3 .view6").classList.add("selected");
});

//버튼을 클릭하면 선택된 클래스를 찾아 색이 파란색으로 바뀌게 변경
document.querySelector("#sample3 .btn2").addEventListener("click", function(){
    document.querySelectorAll("#sample3 .view > div.selected").forEach(function(ele){
        if(ele.classList.contains("selected") == true){
            ele.classList.toggle("blue");
        }
    });
}