비전공자 개발일기

Explore the Space Explore the Space Explore the Space Explore the Space Explore the Space @import url('https://fonts.googleapis.com/css2?family=Muli&display=swap'); * { box-sizing: border-box; } body { font-family: 'Muli', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .container { display: flex; width: 90vw; } .panel { back..

SPRING warm SUMMER hot AUTUMN cool WINTER cold @import url('https://fonts.googleapis.com/css?family=Open+Sans'); * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Open Sans', sans-serif; height: 100vh; } .slider-container { position: relative; overflow: hidden; width: 100vw; height: 100vh; } .left-slide { height: 100%; width: 35%; position: absolute; top: 0; left: 0; tran..

0% @import url('https://fonts.googleapis.com/css?family=Ubuntu'); * { box-sizing: border-box; } body { font-family: 'Ubuntu', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .bg { background: url('./1.jpg') no-repeat center center/cover; position: absolute; top: -30; left: -30; width: calc(100vw + 60px); height: calc(100vh + ..

배너 닫기 const banner = document.getElementById("banner"); const img = banner.getElementsByTagName("img"); const toggle = document.getElementById("toggle"); const sound_btn = document.getElementById("sound_btn"); // 배너의 높이 값 변수 let banner_height = getComputedStyle(banner).height; let cast = [] // 풍선 객체 // 풍선 객체 생성 함수 function set_balloon(num) { // 풍선의 속성 값을 랜덤으로 생성 let x = Math.floor(Math.random() ..

Desktop Style 3D Page page1 page2 page3 page4 const wrapper = document.querySelector(".wrapper"); const page = document.querySelectorAll(".page"); const indicator = document.getElementById("indicator"); let indicator_li = indicator.querySelectorAll("li"); let yDeg = 0; let indicator_num = 1; let indicator_length = page.length; let w = page[0].offsetWidth; let page_angle = 0; let page_vector = 0;..

계산기 caption { font-size: 32px; margin: 20px; } table { width: 320px; text-align: center; margin: 10px auto; } table, th { background: #333; } th { padding-right: 10px; height: 80px; } td { height: 75px; text-align: center; } th > input { width: 100%; border: none; background: #333; color: #fff; text-align: right; font-size: 48px; } td > input[type = "button"] { width: 100%; height: inherit; colo..

TV Show Search Search 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.elements.query.value = ""; }) const makeImages = (show..

★ 모든 method는 지정한 배열 내 요소들로 진행 array.map(x => x *2)이면 이때 x는 array[0], array[1].... 이 되는 것! // Array.map(함수) const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]; const doubles = numbers.map(function (num) { return num * 2; }) console.log(doubles) /////////////////////////////////////////////////////////////// // Array.forEach(함수) const numbers = [1, 2, 3, 4, 5, ..