프론트엔드 (108) 썸네일형 리스트형 클라이언트 측 데이터 저장소 - 웹 스토리지 (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.. 전역속성 (global attribute) 전역속성는 이름처럼 HTML의 모든 요소가 사용할 수 있는 속성를 말합니다 (다만, 전역요소를 사용하는 요소가 해당 속성효과를 사용할 수 있는지는 별론). 전역속성 목록 Global attributes - HTML: HyperText Markup Language | MDN Global attributes are attributes common to all HTML elements; they can be used on all elements, though they may have no effect on some elements. developer.mozilla.org HTML 기본 전역속성 contenteditable contenteditable contenteditable은 모든 HTML요소에 적용가능한.. 요소 지우기 생성된 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.. contenteditable contenteditable은 모든 HTML요소에 적용가능한 전역요소로 요소 안에 글을 수정할 수 있게 해 줍니다. index.html text text text 위와 같이 설정 시 브라우저에서 아래처럼 수정이 가능합니다. 하위 요소는 부모의 editable속성을 물려받습니다. 따라서, 부모가 편집가능 상태이면 자손도 편집이 가능합니다. child 마무리 이상으로 HTML 전역요소 contenteditable에 대해서 알아보았습니다. 참고 contenteditable - HTML: HyperText Markup Language | MDN The contenteditable global attribute is an enumerated attribute indicating if the element shou.. 배열 안에 객체 밸류 바꾸기 배열 안에 저장된 객체의 밸류를 바꾸어보겠습니다. 먼저, 객체의 밸류는 아래와 같은 방법을 변경이 가능합니다. // 정의된 객체 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 .. 앵귤러 directive - ngModel ngModel은 앵귤러 디렉티브의 하나로 폼컨트롤을 생성하고 폼 안에 사용된 개개의 필드를 폼과 연결하는 역할을 합니다. 사용법 연결은 해당 필드에 name 속성을 추가하고 'ngModel' 디렉티브를 사용하여 폼과 연결하여 사용합니다. 요소에 name 속성으로 지정된 이름 외 다른 이름을 사용하고 싶은 경우 아래와 같이 'ngModelOptions' 속성에 property binding 형식으로 옵션추가가 가능합니다. 폼 안에 특정 필드를 폼 데이터에서 제외하고 싶은 경우 'strandalone' 옵션을 추가하면 됩니다. ngModel을 활용한 template-driven-form 보러 가기 이외에도 특정 요소와 연결하여 two-way binding을 통해 입력된 값을 바로 보여주는 것도 가능합니다. .. 이전 1 ··· 6 7 8 9 10 11 12 ··· 14 다음
