비전공자 개발일기

HTML 태그 선택자 HTML, CSS, Javascript, JQuery, React.js, Vue.js, Node.js 속성 선택자 속성변환

제이쿼리 시작! 마우스 클릭! 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..