<div id="sample01" class="sample">
       <h3 class="blue">01. 위치 및 크기를 표현하는 속성 메서드</h3>
       <div class="View">
           <div class="sbox">
               <span>
                   width: 400px <br>
                   margin: 20px <br>
                   border: 1px <br>
                   padding: 20px <br>
               </span>
           </div>
           <p class="sResult">여기에 결과값이 표시됩니다.</p>
       </div>
       <div class="button">
           <a href="#" class="btn1">박스의 가로값(clientWidth)을 구합니다.</a>
           <a href="#" class="btn2">박스의 세로값(clientHeight)을 구합니다.</a>
           <a href="#" class="btn3">박스의 Y축값(clientTop)을 구합니다.</a>
           <a href="#" class="btn4">박스의 X축값(clientLeft)을 구합니다.</a>
           <a href="#" class="btn5">박스의 가로값(offsetWidth)을 구합니다.</a>
           <a href="#" class="btn6">박스의 세로값(offsetHeight)을 구합니다.</a>
           <a href="#" class="btn7">박스의 Y축값(offsetTop)을 구합니다.</a>
           <a href="#" class="btn8">박스의 X축값(offsetLeft)을 구합니다.</a>
           <a href="#" class="btn9">박스의 getBoundingClientRect()을 구합니다.</a>
       </div>
   </div>

.sample {
    margin-bottom: 80px;
}
.sample .table {
    margin-bottom: 10px;
}
.sample .table table {
    width: 100%;
    border: 1px solid #e6e6e6;
    text-align: center;
}
.sample .table table tr th {
    
    font-weight: normal;
    background-color: #f5f5f5;
    padding: 3px;
}
.sample .table table tr td {
    border: 1px solid #e6e6e6; 
    padding: 6px;
}
.sample .table table tr td[class*="_P"] {
    color: #fff;
}
.sample .table table tr td[class*="_P"]:hover {
    color: #000;
    cursor: help;
}
.sample .table.left tr td {
    text-align: left;
}


.sample .table.left .ce {
    text-align: center;
}

.sample .box {
    background: #f5f5f5;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    color: #666;
}
.sample .View {
    border: 1px solid #e6e6e6;
    padding: 30px 20px 20px 20px;
}
.sample .blue {
    background: #d6e9ff;
    padding: 10px 20px;
    border-radius: 5px 5px 0 0;
    margin-bottom: 0;
    color: #6c7e9e;
    border: 1px solid #e6e6e6;
    border-bottom: 0;
    font-weight: bold;
}

.sample .sbox{
    width: 400px;
    height: 200px;
    background-color: #a2cbfa;
    border: 1px solid #4390e1;
    padding: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto;
    text-align: center;
    color: aliceblue;
}
.sample .sbox::after {
    content: '';
    width: 480px;
    height: 280px;
    border: 1px dashed #4390e1;
    position: absolute;
    left: -21px;
    top: -21px;
}
.sample .sbox::before {
    content: '';
    width: 398px;
    height: 198px;
    border: 1px dashed #4390e1;
    position: absolute;
    left: 20px;
    top: 20px;
}
.sample .sResult {
    text-align: center;
    padding-top: 10px;
}
.sample .button {
    border: 1px solid #e6e6e6;
    border-top: 0;
    padding: 20px;
}
.sample .button a {
    border: 1px solid #4390e1;
    color: #4390e1;
    border-radius: 10px;
    border-radius: 40px;
    padding: 10px 25px;
    display: inline-block;
    margin: 5px;
}
.sample .button a:hover {
    background-color: #4390e1;
    color: #e6e6e6;
}

const box1 = document.querySelector("#sample01 .sbox");

document.querySelector("#sample01 .btn1").addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector("#sample01 .sResult").innerHTML = "이 박스의 가로값은" + box1.clientWidth + "px(마진/보더 미포함, 패딩 포함) 입니다."
})

document.querySelector("#sample01 .btn2").addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector("#sample01 .sResult").innerHTML = "이 박스의 세로값은" + box1.clientHeight + "px(마진/보더 미포함, 패딩 포함) 입니다."
})

document.querySelector("#sample01 .btn3").addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector("#sample01 .sResult").innerHTML = "이 박스의 세로값은" + box1.clientTop + "px(부모 기준) 입니다."
})

document.querySelector("#sample01 .btn4").addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector("#sample01 .sResult").innerHTML = "이 박스의 가로값은" + box1.clientLeft + "px(부모 기준) 입니다."
})

document.querySelector("#sample01 .btn5").addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector("#sample01 .sResult").innerHTML = "이 박스의 가로값은" + box1.offsetWidth + "px(보더/패딩 포함) 입니다."
})

document.querySelector("#sample01 .btn6").addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector("#sample01 .sResult").innerHTML = "이 박스의 세로값은" + box1.offsetHeight + "px(보더/패딩 포함) 입니다."
})

document.querySelector("#sample01 .btn7").addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector("#sample01 .sResult").innerHTML = "이 박스의 세로값은" + box1.offsetTop + "px(문서 기준) 입니다."
})

document.querySelector("#sample01 .btn8").addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector("#sample01 .sResult").innerHTML = "이 박스의 가로값은" + box1.offsetLeft + "px(문서 기준) 입니다."
})

document.querySelector("#sample01 .btn9").addEventListener("click", (e) => {
    e.preventDefault();

    const box = document.querySelector("#sample01 .sbox");
    const result = document.querySelector("#sample01 .sResult");
    const rect = box.getBoundingClientRect();

    result.innerHTML = "";

    for(let key in rect) {
        if(typeof rect[key] !== "function") {
            let span = document.createElement("span");
            span.textContent = `${key}: ${rect[key]} `;
            result.appendChild(span);
        }
    }
})