프론트엔드/자바스크립트 (34) 썸네일형 리스트형 프로젝트 - 계산기 계산기 애플리케이션 index.html 1 2 3 - 4 5 6 + 7 8 9 * . 0 c / = main.css @import url('https://fonts.googleapis.com/css?family=Lato&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; background-color: rgb(149, 193, 231); display: flex; align-items: center; justify-content: center; font-size: 'Lato'; } .calculator { border-radius: 5px; width: 375px; } .screen { heig.. 클라이언트 측 데이터 저장소 - 인덱스드 디비 indexed db는 사용자의 브라우저에 데이터를 저장하는 기능을 말합니다. 클라이언트 측에 데이터를 저장한다는 점에서 웹스토리지와 비슷하지만 더 많은 데이터를 저장할 수 있는 장점이 있습니다. indexed db는 일반적인 데이터베이스처럼 생성, 저장, 활용하는 단계를 거칩니다. 생성하기 open("dbName", version): 데이터베이스 열기 (존재하지 않는 경우 새로 생성됨). 참고로 스키마 (데이터베이스의 구조)는 버전에 따라 달라집니다. const req = window.indexedDB.open("cars", 3); open 사용 시 바로 데이터베이스가 열리는 것이 아니라 요청에 대한 성공 또는 실패가 반환됩니다. 다만, 데이터베이스를 생성하거나 버전을 변경할 때는 '.onupgraden.. 클라이언트 측 데이터 저장소 - 웹 스토리지 (Web Storage) 웹 스토리지는 사용자의 브라우저에 데이터를 저장하는 기능을 말합니다. 웹 스토리지는 서버로 데이터를 전송하지 않는다는 점에서 쿠키를 사용하는 방식에 비해 안정성이 높고 쿠키에 비해 더 많은 데이터를 저장할 수 있습니다. HTML에서 제공하는 웹스토리지 객체는 아래와 같습니다. localStorage: 저장되는 데이터의 만료기한이 없음 sessionStorage: 브라우저 세션이 종료되면 데이터도 사라짐 사용방법 사용방법은 아래와 같이 저장할 정보를 'setItem('key', 'value')를 통해 추가하고 이후 getItem('key'), removeItem('key')를 사용하여 저장된 정보를 불러오거나 지우는 방법으로 활용합니다. 1. localStorage ▶ 데이터 저장 localStorage... 프로젝트 - to do To do 리스트 관리 애플리케이션 index.html To Do to do add item In Progress add item Completed add item on hold add item main.css @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: flex; flex-direction: column; text-transform: capitalize; font-family: 'Poppins'; background: linear-gradient( 90deg, r.. 프로젝트 - 뮤직 플레이어 뮤직 플레이어 애플리케이션입니다. index.html Takyon (Death Yon) Death Grips 00:00 00:00 main.css @import url('https://fonts.googleapis.com/css2?family=Spartan:wght@400;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; background: #c9cde3; display: flex; align-items: center; justify-content: center; font-size: 12px; font-family: 'Spartan'; } /* image styles */ .i.. 요소 지우기 생성된 DOM 요소를 제거하는 방법을 알아보겠습니다. index.html text Remove El 삭제는 해당 요소를 직접 지우거나 이를 포함하는 다른 요소를 통해서 지우는 방법이 있습니다. index.js .remove()를 사용하는 방법 (해당 요소를 직접 삭제) document.querySelector('button').addEventListener('click', () => { document.querySelector('.text').remove() }) .removeChild(target)를 사용하는 방법 (해당 요소의 부모를 활용하는 방법) document.querySelector('button').addEventListener('click', () => { document.body.remo.. 배열 안에 객체 밸류 바꾸기 배열 안에 저장된 객체의 밸류를 바꾸어보겠습니다. 먼저, 객체의 밸류는 아래와 같은 방법을 변경이 가능합니다. // 정의된 객체 let car = { year: 2000, model: 'good' } // 수정 let car = { year: 2000, model: 'better' } // 또는 let car = { ...car, model: 'better' } 배열 안에 값은 저장된 밸류들 중에서 수정하고자 하는 값을 찾아서 변경해 주면 됩니다. // 배열 let numbers = [1, 2, 3, 4] // 해당 값의 인덱스를 아는 경우 numbers[0] = 5 따라서 아래와 같은 방법으로 배열 안에 객체의 값을 변경 가능합니다. // 문법 1 cars = cars.map((car) => { if .. 드래그 앤 드랍 자바스크립트를 사용해서 드레그 앤 드랍 효과를 구현 해 보겠습니다. 구성하기 드래그하고자 하는 요소에 draggable="true" 속성을 추가합니다. 스타일을 통해 크기과 너비 등을 지정합니다. /* main.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: flex; align-items: center; justify-content: center; gap: 10px; } .img-box { height: 200px; width: 200px; border: solid 3px #000; border-radius: 50%; } img { object-fit: cover; object-positi.. 이전 1 2 3 4 5 다음
