Class
-
[Javascript] 모던자바스크립트 딥 다이브 4일차 (~551p)웹/JavaScript 2023. 1. 25. 12:15
25. 클래스 constructor 생성자 함수와 유사하지만 몇 가지 차이가 있다. constructor는 클래스 내에 최대 한 개만 존재할 수 있다. 만약 2개 이상인 경우 문법 에러가 발생한다. constructor를 생략하면 빈 constructor가 암묵적으로 정의된다. return(명시적으로 원시값을 반환하면) 무시되고 암묵적으로 this가 반환된다. constructor 내부에서 명시적으로 this가 아닌 다른 값을 반환하는 것은 클래스의 기본 동작을 훼손한다. 따라서 return문을 반드시 생략해야 한다. 프로토타입 메서드 생성자 함수를 사용해서 인스턴스를 생성할 경우 명시적으로 프로토타입에 메서드를 추가해야 한다. 하지만 클래스 메서드는 기본적으로 프로토타입 메서드가 된다. 클래스 필드 클..
-
[Javascript] 클래스, static ,field,constructor웹/JavaScript 2023. 1. 11. 12:17
I. 클래스 class를 사용하여 인스턴스 만들기 👉 MDN 문서 보기 class YalcoChicken { constructor (name, no) { this.name = name; this.no = no; } introduce () { // 💡 메서드 return `안녕하세요, ${this.no}호 ${this.name}점입니다!`; } } const chain1 = new YalcoChicken('판교', 3); const chain2 = new YalcoChicken('강남', 17); const chain3 = new YalcoChicken('제주', 24); console.log(chain1, chain1.introduce()); console.log(chain2, chain2.introdu..
-
[CSS] 선택자 심화 - 속성 값으로 선택, 가상 클래스, css 컨텐츠웹/CSS 2023. 1. 8. 07:02
1. 특성 선택자 👉 특성 선택자 MDN 문서 /* 속성 값을 기준으로 선택 */ a[href="https://www.yalco.kr"] { color: #ff4e00; font-weight: bold; } /* 특정 속성이 있는 요소 선택 */ input[disabled]+label { color: lightgray; text-decoration: line-through; } /* 속성값이 특정 텍스트를 포함하는 요소 */ span[class*="item"] { text-decoration: underline; } /* 속성값이 특정 텍스트로 시작하는 요소 */ span[class^="fruit"] { color: tomato; } span[class^="vege"] { color: olivedrab;..
-
[HTML] 가독성을 위한 이름 - 태그 , class, BEM(Block Element Modifier)웹/HTML 2023. 1. 7. 16:39
A. 태그 위주 add_to_queue 새 창에서 열기 article { /* ... */ } article aside { /* ... */ } article aside figure { /* ... */ } article div header { /* ... */ } article ul li { /* ... */ } article div ul li { /* ... */ } article div ul li.special { /* ... */ } /* ... */ 장황한 선택자 CSS 선택자만으로 요소를 식별하기 어려움 위치와 태그가 같지만 종류가 다를 경우 B. 클래스 위주 add_to_queue 새 창에서 열기 .card { /* ... */ } .card .thumb { /* ... */ } .card ..