본문 바로가기

전체 글72

npm version update 하는 법 갑자기 npm이 설치되지 않았다. error를 확인하다 발견된 이유는 npm 버젼이 너무 낮았기 때문! [npm version update 하는 법] 1. npm 버젼 확인하기 npm -v 2. npm 업데이트하기 npm install -g npm@latest 3. 정상적으로 업데이트가 되었는지 확인하기 npm -v ⭐️⭐️ npm error가 나면 터미널에서 현재 위치가 제대로 열려있는지 확인하자! ⭐️⭐️ 2022. 7. 25.
JavaScript 프로토타입 체인 [프로토타입 체인] JavaScript 객체 지향 프로그램에서 상속을 구현할 때 사용한다. 상속: 부모 클래스의 속성과 메서드를 자식 클래스가 물려받는 것 class 구문은 새로운 클래스를 작성함을 의미한다. Class 블록 내에서 모든 기능을 정의할 수 있다. class Person { constructor(first, last, age, gender, interests) { this.name = { first, last }; this.age = age; this.gender = gender; this.interests = interests; } greeting() { console.log(`Hi! I'm ${this.name.first}`); }; farewell() { console.log(`${t.. 2022. 7. 25.
CSS 셀렉터 [셀렉터] 1. 전체 셀렉터(universal selector) 문서의 모든 요소를 선택 * { } 2. 태그 셀렉터 같은 태그명을 가진 모든 요소를 선택 (복수 가능) h1 { } div { } section, h1 { } 3. ID 셀렉터 #id #only { } 4. class 셀렉터 .class 같은 class를 가진 모든 요소를 선택한다. .widget { } .center { } 5. attribute 셀렉터 같은 속성을 가진 요소를 선택 a[href] { } p[id="only"] { } p[class~="out"] { } p[class|="out"] { } section[id^="sect"] { } div[class$="2"] { } div[class*="w"] { } 6. 자식 셀렉터 자.. 2022. 7. 24.
CSS 박스모델 [박스모델] 모든 콘텐츠는 각자의 영역을 가지며, 일반적으로 하나의 콘텐츠로 묶이는 요소들이 하나의 박스라 한다. 1. block 박스 줄 바꿈이 되는 박스. , width, height 속성이 사용 가능하다. https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements 2. inline 박스 줄 바꿈이 일어나지 않고, 크기 지정을 할 수 없는 박스. width, height 속성이 사용 가능하지 않다. inline 박스의 너비는 콘텐츠가 차지하는 너비가 결정하게 된다. https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements 3. inline-block 박스 두 가지 박스 종류.. 2022. 7. 24.
Font Awesome 아이콘으로 이용하기/색깔 만들기 1. 폰트 어썸에 들어가 로그인 한다. https://fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 2. 원하는 아이콘을 찾는다. 3. 다운로드 버튼을 누른다. 4. 다운로드 된 파일을 텍스트 편집기로 열어 path 옆에 fill = "색깔이름"을 바꿔준다. 만약 없다면 입력해주면 된다. 5. 완성 2022. 7. 23.
JavaScript 프로토타입 [프로토타입(prototype)] JavaScript는 프로토타입(Prototype) 기반의 언어이며 프로토타입은 객체의 원형(origin)을 의미한다. 자바스크립트의 모든 객체는 하나 이상의 다른 객체로부터 상속을 받고, 이때 상속되는 정보를 제공하는 객체를 프로토타입이라고 한다. ➡️객체를 상속하기 위한 매커니즘이다. class Human { constructor(name, age) { this.name = name; this.age = age; } sleep() { console.log(`${this.name}은 잠에 들었습니다`); } } let kimcoding = new Human('김코딩', 30); Human.prototype.constructor === Human; // true Huma.. 2022. 7. 23.

티스토리툴바