뭐라도 기억하기 위한 블로그

TO DO LIST enter

**CSS body { background: #eee; } .content { background: #fff; padding: 20px; width: 500px; margin: 0px auto; } form { display: inline-block; } form input[type='text'] { padding: 3px; } button { display: inline-block; color: #fff; font-weight: 700; border: none; background: #227db5; padding: 5px 10px; cursor: pointer; } button:hover { opacity: 0.8; } .list-wrap li{ font-size: 24px; padding: 10px;..

**HTML 전체 선택1 선택2 선택3 **SCRIPT function checkSelectAll() { // 전체 체크박스 const checkboxes = document.querySelectorAll('input[name="selectBtn"]'); // 선택된 체크박스 const checked = document.querySelectorAll('input[name="selectBtn"]:checked'); // select all 체크박스 const selectAll = document.querySelector('input[name="selectall"]'); if (checkboxes.length === checked.length) { selectAll.checked = true; } else ..

**CSS .popup-wrap{ display: none; position: fixed; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: rgba(0,0,0,.5); } .popup-content{ padding: 20px; position: absolute; background: #fff; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 300px; height: 300px; } .close{ cursor: pointer; } **HTML 텍스트 내용 popup content × **SCRIPT const popup = document.getElementById('p..

**html radioBtn01 radioBtn02 **CSS input[type="radio"]{ cursor: pointer; display: none; } label{ cursor: pointer; } input[type="radio"] + label .radio-custom{ display: inline-block; width: 10px; height: 10px; background: #ccc; } input[type="radio"]:checked + label .radio-custom{ width: 12px; height: 12px; background: #000; }