비전공자 개발일기

Age Calculator Date Month Year body{ font-family: Arial, Helvetica, sans-serif; background-color: #2782e3; font-size: 15px; line-height: 1.5; padding: 0; margin: 0; } * { box-sizing: border-box; } .container{ width:520px; height: auto; margin: 100px auto; background-color: #eee; border-radius: 25px; } .base{ width: 100%; margin: 0; overflow: hidden; display: block; float: none; } .block{ width: ..

.hamburger { background-color: transparent; border: none; outline: none; cursor: pointer; } .hamburger .line { display: block; width: 40px; height: 3px; background-color: #6667ab; margin-block: 10px; border-radius: 4px; transition: transform .5s, opacity: .25s; } .hamburger.active .line:nth-child(1) { transform: translateY(13px) rotate(45deg); } .hamburger.active .line:nth-child(2) { opacity: 0;..

색깔 이미지 항목명 값 색깔 이미지

https://sweetalert.js.org/ SweetAlert You've arrived! How lovely. Let me take your coat. Oops! Seems like something went wrong! Delete important stuff? That doesn't seem like a good idea. Are you sure you want to do that? sweetalert.js.org 사용예시 var importantLabel = $(".importantLabel"); for(var i = 0; i < importantLabel.length; i++) { var val = $(importantLabel[i]).next("td").find("input"); if(!..

Update CSS Variables with JS Spacing: Blur: Base Color :root { --base: #ffc600; --spacing: 10px; --blur: 10px; } body { text-align: center; background: #193549; color: white; font-family: 'helvetica neue', sans-serif; font-weight: 100; font-size: 50px; } .h1 { color: var(--base); } .controls { margin-bottom: 50px; } a { color: var(--base); text-decoration: none; } input { width: 100px; } img{ pa..

TV Show Search Search body { text-align: center; } img { margin: 10px; } const form = document.querySelector("#searchForm") form.addEventListener("submit", async (e) => { e.preventDefault(); const searchTerm = form.elements.query.value; const res = await axios.get(`https://api.tvmaze.com/search/shows?q=${searchTerm}`); // console.log(res.data[0].show.image.medium); makeImages(res.data); form.ele..

To Do List Add list 제목: 1 제목: 2 제목: 3 제목: 4 body { text-align: center; } #add-btn { padding: 5px 10px; border: 0; background: #f80; color: #fff; border-radius: 5px; } .container1 { border: 5px solid #2244ff; border-radius: 20px; width: 30%; margin: 10px auto; background-color: antiquewhite; color: #a52a2a; } .container2 { border: 2px solid #000; border-radius: 20px; width: 70%; margin: 10px auto..

Light BOX 일본 사진 일본의 경치를 느낄 수 있는 사진들... 1 2 3 x * { margin: 0; } body { padding: 20px; } header img { width: 150px; } h1, p { font-weight: normal; margin: 5px 0; } /* 라이트 박스 컨테이너 */ #lightbox.active { position: absolute; overflow: hidden; background: #333; width: 800px; height: 540px; left: 50%; margin-left: -400px; top: 50%; margin-top: -250px; box-sizing: border-box; padding: 30px; z-index: 99;..