스퐁지송 개발노트

OpenWheater 오픈 API를 사용해서 현재위치 뽑아오기 html js // const API_KEY = '93222063c13048e2ee959a1231e3217e'; // let name = document.querySelector('#name'); // let main = document.querySelector('#main'); // let temp = document.querySelector('#temp'); // function connect(position) { // const lat = position.coords.latitude; // const lon = position.coords.longitude; // const lang = 'kr'; // console.log(`위도:${l..

스크롤을 내리면 발생하는 이벤트 만들기 html 회원약관 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam reprehenderit necessitatibus nemo, dolorem vero aperiam ipsum fugit quo veritatis, praesentium voluptatem recusandae accusantium soluta dolorum! Ea omnis a voluptatum praesentium? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi cum dolorem, adipisci, eveniet inventore pariatur neque eo..

html 1 2 3 다음 css *{ margin: 0; padding: 0; } .carousel{ width: 300vw; transition: all 1s; } .box{ width: 100vw; float: left; } .box img{ width: 100%; } .wrapper{ overflow: hidden; } js // //다음버튼 // let no = 1; // //이미지박스위치를 알려주는 변수생성 // $('.next').on('click',function(){ // //이미지 박스가 몇번인지 알아야함 박스가 1번이면 1100vw이동 2번이면 -200vw이동 // if(no===1){ // $('.carousel').css('transform','translateX(-100vw)');..

버블링 한태그에서 이벤트 발생 => 그 태그에 이벤트가 실행 => 부모로 넘어가서 또 이벤트가 작동 => 부모가 또 있으면 또 넘어가서 작동 => 부모가 없을때 까지 반복 예제) html p태그임 css *{ border: 1px solid black; margin: 10px; } form{ background: green; position: relative; width: 150px; height: 150px; } div{ background: skyblue; position: absolute; top: 25px; left: 25px; width: 100px; height: 100px; } p{ background: pink; position: absolute; top: 25px; left: 25px; ..

html js let clock = document.querySelector('.clock'); function showClock(){ const date = new Date(); // ${여기안에 넣으면 문자열이 아닌 계산식으로 인식시킨다} let hour = String(date.getHours()).padStart(2,0); let min = String(date.getMinutes()).padStart(2,0); let sec = String(date.getSeconds()).padStart(2,0); //1시 1분1 초를 01시01분01초처럼 1의 자리수일때 앞에 0을 붙이기 위해사용 //.padStart(최대자릿수,빈자리매꾸는값) //String을 쓴이유 : .padStart는 문자열만 인식가..

메뉴바의 아이콘을 누르면 리스트가 세로로 나옴(부트스트랩사용) html An item A second item A third item A fourth item And a fifth one css /* list 숨기기 */ .list-group{ display: none; } /* list 보이기 */ .show{ display: block; } js document.querySelector('.navbar-toggler').addEventListener('click',function(){ document.querySelector('.list-group').classList.toggle('show'); // list-group에 css의 'show' 클래스 추가 }); 모달창만들기 html 로그인을 하세요..

다크모드 만들기 html 내용을 입력 js // let cnt = 0; //클릭횟수를 저장하는 변수 // document.querySelector('#mode').addEventListener('click', function(){ // cnt++; // //버튼 글씨 라이트 모드와 다크 모드 on/off // if(cnt % 2 == 1) { // // document.querySelector('#mode').setAttribute('value', '라이트모드'); // document.querySelector('#mode').value='라이트모드'; // //버튼 글씨 다크모드일때 배경색 검정 글꼴 흰색 // document.body.style.backgroundColor='black'; // doc..

요소(태그)들 추가/ 삭제 //태그.append : 해당 태그 끝에 추가 //태그.prepend : 해당 맨 앞에 추가 //태그.before : 해당 태그 이전에 삽입 //태그.after : 해당 태그 이후에 삽입 // let div = document.createElement('div'); // div.className = 'alert'; // div.innerHTML = ' hi '; // document.body.append(div); // //태그.append : 해당 태그 끝에 추가 // //태그.prepend : 해당 맨 앞에 추가 // //태그.before : 해당 태그 이전에 삽입 // //태그.after : 해당 태그 이후에 삽입 // ol.before('이전'); // ol.after(..

key,value값 자유자재로 추가하고 삭제하기 let user = { name: "kim", age: 30, }; //key,value값 추가하기 user.score = 70; alert(user.score); user["age"]=20; // user.age=20; console.log(user.age); //key값 지우기 delete user["name"]; console.log(user.name); key와 value 값이 있는지 없는지 ture와 false로 구분하기 let user = { name: "kim", age: 30, }; console.log("name" in user); console.log("asd" in user); for문으로 key,value값 출력하기 let user =..

boolean let a = true; let b = 5 > 1; console .log(b); //b의 식의 결과를 출력(true) Boolean의 설정값들 유형으로 false로 출력되는 경우 let a; //값을 저장하지않음 alert(Boolean(a)); let a = null; alert(Boolean(a)); let a = NaN; alert(Boolean(a)); 형변환 1.상수로 형변환(Number) 형변환 전 let a = prompt('나이 입력', 20) //한살 더 많게 설정하기 alert(typeof a); alert(`나는 ${a + 1 }살`); // 나는 201살이라고 출력 형변환 후 let a = Number(prompt('나이입력',20)); alert(typeof a);..