블록요소 태그 : 컨텐츠의 그룹화나 화면의 레이아웃을 담당하는 태그 제목 제목태그 (h1~h6) 문단 글의 덩어리를 묶어주는 문단 태그 순서 없는 목록 순서없는 목록 순서없는 목록 순서없는 목록 순서 있는 목록 순서없는 목록 순서없는 목록 블록요소 그룹화 또는 공간분할 인라인요소 : 글에서 특정문구나 단어를 선택후 꾸미거나 강조 하는 태그 단어를 강조 강조할단어, 강조할단어 링크 링크이동 이미지 단어를 선택해 꾸미기 꾸며줄단어

const toDoForm = document.getElementById("todo-form"); const toDoInput = toDoForm.querySelector("input"); const toDoList = document.getElementById("todo-list"); const TODOS_KEY = "todos"; let toDos = []; function saveTodos() { localStorage.setItem(TODOS_KEY, JSON.stringify(toDos)); } function deleteTodo(event) { const li = event.target.parentElement; toDos = toDos.filter(todo => todo.id !== pars..

const images = ["0.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"]; const chosenImg = images[Math.floor(Math.random() * (images.length))]; const bgImg = document.createElement("img"); bgImg.src = `img/${chosenImg}`; document.body.appendChild(bgImg); img폴더에 갖고있는 이미지 파일의 이름과 같은 문자배열을 만들어준다 Math.random()을 이용해 0부터 1 사이의 랜덤한 숫자를 받아온다(소숫점 아래를 포함하는 float 형태) 내가 필요로 하는 숫자는 0부터 내가 가진 이미지의 총갯수까지의 숫자이기때..

body { padding: 0; margin: 0; } .slide { width: 100%; height: 500px; color: #fff; font-size: 50px; text-align: center; line-height: 500px; position: absolute; top: 0; left: 0; z-index: 0; opacity: 0; transition: all 1s ease-in-out; transform: scale(0.9); } .slide:nth-child(odd) { background-color: rgb(255, 188, 255); } .slide:nth-child(even) { background-color: rgb(168, 213, 255); } .showing { z..

const clock = document.querySelector("h2#clock") function getClock() { 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"); clock.innerText = `${hours}:${minutes}:${seconds}`; } getClock(); setInterval(getClock, 1000); new Date()를 실행시키면 현재 날짜, 시간을 객체..

Log In input이 가지고 있는 속성을 이용해 입력값의 길이를 제한하거나 필수로 입력값을 받아오도록 설정할 수 있다 해당 속성들을 이용하기위해선 form으로 input을 감싸고 있어야 함 const loginForm = document.querySelector("#loginForm") const loginInput = document.querySelector("#loginForm input"); const greeting = document.querySelector("#greeting"); const HIDDEN_CLASSNAME = "hidden" const USERNAME = "username" function onLoginsubmit(event) { event.preventDefault(); ..