비전공자 개발일기

제이쿼리 시작! 마우스 클릭! JQuery: 오픈 소스 기반의 자바스크립트 라이브러리 제이쿼리의 기본 문법 ㄴ$(선택자).동작함수(); 「window.onload = function() { 자바스크립트 코드; };」 = 「$(document).ready(function() {제이쿼리 코드;});」 = 「$(function() {제이쿼리 코드;});」

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;..

Calendar 이전 달 년 월 다음 달 일 월 화 수 목 금 토 * { text-align: center; margin: 10px auto; } #calendar_wrap { background: #333; width: 350px; } caption { font-size: 1.5em; color: #ffa500; padding: 10px; } caption #prev, caption #next { display: inline-block; font-size: 5px; text-decoration: none; color: #fff; padding: 5px; margin: 10px; } table, th, td { color: #fff; border: 1px solid #666; border-collapse..

Dark mode @import url('https://fonts.googleapis.com/css?family=Heebo:300&display=swap'); * { box-sizing: border-box; } :root { --primary-color: #000; --secondary-color: #fff; } html { transition: all 0.5s ease-in; } html.dark { --primary-color: #fff; --secondary-color: #333; } html.dark { background-color: #111; color: var(--primary-color); } body { font-family: 'Heebo', sans-serif; display: fle..

My Website Home About Services Contact Welcome To My Website Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores, consequuntur? Content One Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione dolorem voluptates eveniet tempora ut cupiditate magnam, sapiente, hic quo in ipsum iste soluta eaque perferendis nihil recusandae dolore officia aperiam corporis similique. Faci..