생각하다 생각하다

1. html에 투두리스트 뼈대 생성하기 1. html 파일에 투두리스트 틀 만들기 (input부분, 리스트 부분) index.html 1. 새로운 할 일을 입력할 Form태그를 생성하고 그 안에 input 태그를 생성한다. 2. 아래에 투두리스트를 보이게 하도록 ul 태그를 생성한다. 3. ul 안의 li 태그는 자바스크립트로 동적으로 생성할 것이다. 2. 자바스크립트에서 투두리스트 요소 가져오기 todo.js const toDoForm = document.getElementById("todo-form"); const toDoInput = document.querySelector("#todo-form input"); const toDoList = document.getElementById("todo-l..

1. 랜덤 명언 구현하기 1. 명언 배열 생성하기 (js 파일은 따로) quotes.js const quotes = [ { quote: "Well done is better than well said.", author: "Benjamin Franklin", }, { quote: "If you would thoroughly know anything, teach it to others.", author: "Tryon Edwards", }, { quote: "My personal hobbies are reading, listening to music, and silence.", author: "Edith Sitwell", }, { quote: "Reading is sometimes an ingenious de..

1. 매번 반복하기 setInterval() 부제: 매 초, 2초마다, 4초마다 등 원하는 간격으로 실행시키기 1) 매번 반복하기 - setInterval() setInterval(함수, 시간간격) //시간은 ms 기준 (million seconds) index.html 00:00 h1태그 위에 h2 태그 추가하기. id는 clock. 디폴트 세팅은 00시 00분. clock.js const clock = document.querySelector("h2#clock"); function sayHello() { console.log("hello"); } setInterval(sayHello, 5000); // -> 5초마다 sayHello 함수가 실행됨 2) 타이머 설정하기 - setTimeout() set..

tip. element 가져오기 - document가 아닌 다른 element 내에서도 가져올 수 있다. 아래 코드 참고하기 index.html Log In app.js const loginForm = document.getElementById("login-form"); const loginInput = loginForm.querySelector("input"); 1. Login Form 유효성 검사 1. JavaScript로 유효성 검사하기 (권장하지 않음) (1) 빈칸 검사 function onLoginBtnClick() { const value = loginInput.value; if (value === "") { alert("Please write your name"); } } loginButto..

innerText parseInt 0 +1 -1 const number = document.getElementById('number'); const increase = document.getElementById('increase'); const decrease = document.getElementById('decrease'); increase.onclick = () => { const current = parseInt(number.innerText, 10); number.innerText = current + 1; }; decrease.onclick = () => { const current = parseInt(number.innerText, 10); number.innerText = current -..

opacity로 투명도 조절하기 opacity: 숫자; 숫자 범위: 0~1 0 : 투명 -> 보이지 않음 0.5 : 반투명 -> 시스루 1 : 불투명 -> 투명하지 않음 opacity 특징 : 자식 요소에 투명도가 상속된다. 배경만 투명하게 하려면 자식 요소에는 투명도를 적용하고 싶지 않다면 opacity 말고 rgba를 사용하면 된다. background: rgba(76, 175, 80, 0.1);

디자인 HTML HR tag : 가로줄 넣기와 굵기 색상 정렬 등 속성 지정하는 방법 HTML에서 가로줄을 긋는 태그의 속성 지정 방법을 설명합니다 ojji.wayful.com z-index 사용하기 HTML DIV tag: 영역 겹치기와 보이기 순서 지정하는 방법 - Position, z-index HTML DIV 영역 2개 이상을 서로 겹치는 방법과 겹침 순서를 설정하는 방법을 설명합니다 ojji.wayful.com CSS z-index 사용방법 (우선순위) HTML 을 작성하다 보면 태그들이 서로 겹치는 경우가 있다. ex) default 이런 경우... HTML 에서는 나중에 배치된 것이 화면상에서 제일 위로 오게 되는데, 이때, z-index를 사용하여 뒤에 있는 태그를 끌 alcmskfl17...