본문 바로가기

분류 전체보기106

props (소품) 2024. 2. 5.
변환기 (Flip) 뭔가 쉬운데 뭐랄까 복잡하다..? 2024. 2. 5.
Click event (vanilla vs react) ✳ 두 방법을 사용해 보고 비교해 보려고 한다. ◾ Vanilla js code Total Click: 0 Click ME ◾ react js code 익숙해서 그런지 뭔가 vanilla 가 더 편한 거 같은데 별로 react 가 와닿지 않는 거 같은 느낌이 든다. 2024. 2. 4.
random 💡 급하게 하지 말고 하나씩 흐름을 파악하기❗❗ 사용한 내장 함수 ◾ Math.floor() = 소수점 버리기 ◾ Math.random() = 메서드는 0보다 크거나 같고 1보다 작은 부동 소수점 의사 난수를 반환 ◾ length = 길이 ◾ linear-gradient = 그라데이션 1. html Give me color 2. js const btn = document.querySelector("button"); const colors = [ "#ef5777", "#575fcf", "#4bcffa", "#34e7e4", "#0be881", "#f53b57", "#3c40c6", "#0fbcf9", "#00d8d6", "#05c46b", "#ffc048", "#ffdd59", "#ff5e57", "#d2.. 2024. 2. 1.
D-day 만들기 💡 급하게 하지 말고 하나씩 흐름을 파악하기❗❗ 사용한 내장 함수 ◾ new Date() = 현재 날짜 및 시간 ◾ setInterval() = (사용할 함수명, 실행 간격(시간)) ✔ 1초는 1000 으로 표기한다. ◾ Math.floor() = 내림함수 ✔ (5.1 = 5 , 5.9 = 5) ◾ String() = 정수로 만들어주기 ◾ padStart = 지정한 빈공간 padding 넣어주기 (지정한 공간, 넣어줄 자료형) ✔ (2, "0") 1. html 크리스마스까지 남은 시간 2. js const clocked = document.querySelector("#clock"); function setclocked() { const setdate = new Date("2024-12-25T00:00:0.. 2024. 1. 31.
padStart 💡 급하게 하지 말고 하나씩 흐름을 파악하기❗❗ 📖 padStart (padding 을 추가해달라) ◾ js code (padStart 사용했을 시) const clocked = document.querySelector("#clock"); function setclocked() { const date = new Date(); const hours = String(date.getHours()).padStart(2, "0"); const minutes = String(date.getMinutes()).padStart(2, "0"); const seconds = String(date.getSeconds()).padStart(2, "0"); clocked.innerText = `${hours}:${minutes.. 2024. 1. 31.
Timeout 💡 급하게 하지 말고 하나씩 흐름을 파악하기❗❗ 📖 Timeout -> setTimeout 2024. 1. 31.
Interval 💡 급하게 하지 말고 하나씩 흐름을 파악하기❗❗ 📖 Interval (정한 시간마다 호출) -> setInterval ◾ html code 안녕하세요 반가워요 00:00:00 ◾ js code const clocked = document.querySelector("#clock"); function speaking() { console.log("1초마다 반복하기"); } setInterval(speaking, 1000); // 1000ms 1초 ✳ 시계 만들기 ◾ js code const clocked = document.querySelector("#clock"); function setclocked() { const date = new Date(); console.log(`${date.getHours().. 2024. 1. 31.
toggle 은 신이다. 💡 급하게 하지 말고 하나씩 흐름을 파악하기❗❗ 📖 toggle -> add(), remove(), replace(), toggle() -> 스마트폰 키고 끄기 -> className 를 사용 안하면 원래 사용하고 있던 class 가 없어지게된다. -> classList.contains , classList.remove , classList.add 를 사용해야 하는데 더 쉬운 방법이 있다. 그게 toggle이다. ✔ toggle 을 사용안했을 시 ◾ html code (class big 추가하기) 안녕하세요. ◾ js code const title = document.querySelector(".title h1"); function handleTitleClick() { const clickedClass .. 2024. 1. 30.

티스토리툴바