전체 글 (464) 썸네일형 리스트형 프로젝트 - 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을 통해 입력된 값을 바로 보여주는 것도 가능합니다. .. 앵귤러 템플릿 - style binding & ngStyle 앵귤러 style 바인딩은 특정 요소에 동적으로 스타일을 추가하거나 제거하는 기능입니다. style 바인딩과 ngStyle 디렉티브는 기능이 동일하고 사용법이 유사하기 때문에 같이 설명하도록 하겠습니다. 사용방법 1. style binding 한 가지의 스타일을 추가하는 경우 아래와 같이 해당 속성을 지정 style. 뒤에 지정해 줍니다. 이때, 문법은 html 스타일 문법과 camelCase문법 둘 다 사용가능합니다. 단위를 가지는 스타일의 경우 아래와 같이 두 가지 방법으로 단위 지정이 가능합니다. 복수의 스타일을 적용하는 경우 아래와 같이 구현가능합니다. // class.componet.ts import { Component } from '@angular/core'; @Component({ sele.. 이전 1 ··· 47 48 49 50 51 52 53 ··· 58 다음
