미미 공부/취미방

input radio 체크 기능 스크립트 구현하기 상황 input radio 디자인이 안 예뻐서 디자인을 수정하고 싶다. 디자인 구연하고 싶은 스타일 기본 세팅 HTML 사과 바나나 멜론 1. radio는 체크가 1개만 가능한 체크박스로, 체크가 1개만 됐는지 인식하기 위해서 'name'에 동일한 값을 주어서 그룹을 만들어 준다. (예시. 'fruits'라는 'name'을 갖은 그룹 중 1개) 2. input의 id는 label의 for 값과 일치해야 label과 input이 연결되고, label을 클릭하면 해당 input 에 전달이 된다. 3. label에 디자인을 위한 모든 HTML구조를 넣는다. *** input에 checked라는 속성을 넣으면 체크 박스가 체크된 상태 CSS li { width:..

GSAP 라이브러리 Javascript는 transform 애니메이션이 먹히지 않는다. 그래서 요소의 다양한 애니메이션 효과를 위해서 여러 애니메이션이 있는데, 패캠에서 한 번 사용해 본 GSAP을 사용하기 위해 사용법을 차근차근 업데이트해보려고 한다. Step 1 연결하기 파일 다운로드, CDN, NPM, GitHub, CodePen 으로 연결이 가능하다. CDN이 빠르고 간단해서 CDN으로 연결했다. Step 2 필요한 애니메이션 코드 사용하기 리스트를 보고 필요한 코드를 사용하면 끝! (코드에 대한 자세한 정리는 아래에) https://greensock.com/docs/v3/GSAP Docs Documentation for GreenSock Animation Platform (GSAP) greens..

객체 간의 상속 객체가 다른 객체 코드 가져오기(상속) class의 상속/확장 같지만 객체끼리 이루어지고 좀 더 작은 범위에서 행해지는 느낌이다. 객체상속 코드 2가지 알아보기 1. __proto__ : 표준이 아니지만 널리 사용되고 있어서 표준 같은 코드 var obj1 = { obj1Val : '1 val' } // __proto__ var obj2 = {}; obj2.__proto__ = obj1; console.log(obj2.obj1Val); // 결과. 1 val obj1과 obj2가 객체인 상태에서 가능하다. 2. Object.create() : 표준 코드. __proto__를 대체하기 위해 나온 코드 var obj1 = { obj1Val : '1 val' } // Object.create(..

프로토타입 프로토타입을 사용하는 이유 생성자 함수(Constructor Function)로 여러 개의 객체를 찍어낼 때, 생성자 함수가 가지고 있는 모든 값, 메서드를 모든 객체에 똑같이 계속 찍어내므로 메모리를 차지하게 된다. 그래서 한 번만 적어 놓고, 해당 생성자 함수로 만들어진 객체가 가져다 쓸 수 있게 한다. function Person () { this.name = 'kim', this.first = 10, this.second = 20 } var park = new Person(); var lee = new Person(); // Park과 Lee는 Person에 들어가 있는 동일한 내용을 각 각 가지고 있다. 원형(prototype) 지정하기 생성자함수명.prototype.key = 값; ..

객체, 생성자 함수 내가 이해한 '객체' 정의 1. 한 대상이 있고, 그 대상에 대한 다양한 정보/데이터/함수들을 따로 관리/활용할 수 있는 기능(?) 2. 이름을 한 개 붙여서, 그 이름 안에 다양한 정보/데이터/함수들을 묶어서 관리/활용할 수 있는 기능이다. 예. 곰인형(객체) - 색상, 재질, 음성 녹음 기능, 가격 등(데이터/정보)... 1. 객체 만들기 var teddyBear = { colour: 'black', texture: 'soft', recording: true, price: '10,000', record = function() { return true }, me = function() { console.log(this); } } 2. 객체 정보 읽기(불러오기) 방법1 teddyBea..

React Props 이해하기 커스텀 엘리먼트를 만들고 그 태그 안에 적는 모든 데이트를 props라고 부른다고 이해했다. props는 object(객체) 형태로 생성된다. 객체 데이터의 형태 { 이름 : 값, 이름 : 값 } 그래서 위의 코드에 props라는 매게변수도 object 형태로 전달전달전달전달전다랄ㄹㄹㄹ 된다. 1. 엘리먼트를 통해서 comment라고 선언된 객체 데이터의 date, text, author가 전달된다. 여기서 전달된 props의 형태 date: 날짜정보, text: "I hope you enjoy learning React", author: { name: "Hello Kitty", avatarUrl: "https://......" } 2. 함수 내부에서 user={props...