개발자 페이지 (48) 썸네일형 리스트형 07 클래스 by 코어 자바스크립트 아래 내용은 '코어 자바스크립트' 정재남 저 | 위키북스의 내용을 발췌한 것으로 자세한 내용은 해당 서적을 확인 바랍니다. 자바 스크립트 내의 클래스(CLASS)는 사용자의 니즈에 따라 ES6에서 문법에 추가되었으며 다만 ES6의 클래스에서도 일정 부분은 프로토타입을 활용하고 있기 때문에, ES5 체제 하에서 클래스를 흉내내기 위한 구현방식을 학습하는 것은 여전히 큰 의미를 지닌다. 클래스와 인스턴스의 개념 이해 클래스는 하위로 갈수록 상위 클래스의 속성을 상속하면서 더 구체적인 요건이 후가 또는 변경된다. 물론 하위 클래스가 아무리 구체화되더라도 이들은 결국 추상적인 개념일 뿐이다. 클래스의 속성을 지니는 실존하는 개체를 일컬어 인스턴스라고 한다. :어떤 조건에 부합하는 구체적인 예시 -> 조건은 클래.. CSS / box-sizing: border-box 사용, 뜻 여기 width 100px 짜리 박스가 하나 있습니다. 왼쪽에 padding 10px 만큼 공간을 주고 싶은데, width 100px는 바뀌지 않았으면 합니다. padding-left: 10px; 를 추가하여 왼쪽에 10px 공간을 줍니다. 다음과 같은 결과물을 얻게됩니다. 총 width 110px 짜리 박스가 생겨버렸네요 ? 화면 설정은 100px로 고정할 생각이었는데 이거 뭔가 잘못돌아갑니다. width 100px 박스에 padding-left: 10px; 적용시 CSS default 는 다음과 같은 작업을 수행합니다. 기존 100px 박스 사이즈를 유지 + padding 10px 추가의 명령을 수행하기 위해 총 width를 110px으로 설정하게 됩니다. 아래와 같이 box-sizing: borde.. 06 프로토타입 by 코어 자바스크립트 아래 내용은 '코어 자바스크립트' 정재남 저 | 위키북스의 내용을 발췌한 것으로 자세한 내용은 해당 서적을 확인 바랍니다. 자바스크립트는 프로토타입 (prototype)기반 언어로 클래스 기반 언어에서는 '상속'을 사용하지만 프로토타입 기반 언어에서는 어떤 객체를 원형으로 삼고 이를 복제(참조)함으로써 상속과 비슷한 효과를 얻는다. 프로그래밍 언어의 상당수가 클래스 기반인 것에 비교하면 프로토타입은 꽤나 독특한 개념이라 할 수 있다. var instance = new Constructor(); instance 는 Constructor 앞에 new를 붙여서 새로운 객체를 만들어 낸것으로, Constructor가 해당 instance의 프로토타입이 되는 개념이다. 보통 Object.getPrototypeOf.. 05 클로저 by 코어 자바스크립트 아래 내용은 '코어 자바스크립트' 정재남 저 | 위키북스의 내용을 발췌한 것으로 자세한 내용은 해당 서적을 확인 바랍니다. 클로저의 의미 및 원리 클로저(closure)는 여러 함수형 프로그래밍 언어에서 등장하는 보편적인 특성으로, JS 고유 개념이 아니라 ECMA Script 에서도 클로저의 정의를 다루지 않고 있다. MDN(Mozilla Developer Network) "A closure is the combination of a function and the lexical environment within which that function was declared" 가비지 컬렉터 GC 는 어떤 값을 참조하는 변수가 하나라도 있다면 그 값은 수집대상에 포함시키지 않는다. 클로저란 어떤 함수 A에서 .. 04 콜백 함수 - by 코어 자바스크립트 아래 내용은 '코어 자바스크립트' 정재남 저 | 위키북스의 내용을 발췌한 것으로 자세한 내용은 해당 서적을 확인 바랍니다. 콜백 함수(callback function)는 다른 코드의 인자로 넘겨주는 함수이다. 콜백 함수를 넘겨받은 코드는 이 콜백 함수를 필요에 따라 적절한 시점에 실행하게 된다. 콜백 함수는 제어권과 관련이 깊다. 어떤 함수 X를 호출하면서 '특정 조건일 때 함수 Y를 실행해서 나에게 알려달라'는 요청을 함께 보내는 셈이다. 이 요청을 받은 함수 X의 입장에서는 해당 조건이 갖춰졌는지 여부를 스스로 판단하고 Y를 직접 호출할게 된다. 이처럼 콜백 함수는 다른 코드(함수, 메서드)에게 인자를 넘겨줌으로써 그 제어권도 함께 위임한 함수이다. 콜백 함수를 위임받은 코드는 자체적인 내부 로직에 .. CSS / relative, absolute, Pseudo Selectors CSS Styles 속성 position: relative position: absolute 부모를 position: relative 설정하지 않으면 자식 position은 body를 기준으로 설정되며, 부모가 relative 속성일경우 부모 contents안에서 활성화 된다. :first-child : 배열의 첫번째 식별자 :last-child : 배열의 마지막 식별자 :nth-child(odd) or :nth-child(2n+1) -> html table의 홀수열을 지정 :nth-child(even) or :nth-child(2n) -> html table의 홀수열을 지정 :nth-child(7n) Represents the seventh and all following elements: 7 [=0+.. 03 this - Javascript 아래 내용은 '코어 자바스크립트' 정재남 저 | 위키북스의 내용을 발췌한 것으로 자세한 내용은 해당 서적을 확인 바랍니다. 자바스크립트에서 가장 혼란스러운 개념을 고르라고 한다면 많은 이들이 this를 꼽을 것이다. 다른 대부분의 객체지향 언어에서 this는 클래스로 생성한 인스턴트 객체를 의미한다. 클래스에서만 사용할 수 있기에 혼란의 여지가 없거나 많지 않다. 그러나 자바스크립트에서의 this는 어디서든 사용할 수 있으며, 상황에 따라 this가 바라보는 대상이 달라진다. 함수와 객체(method)의 구분이 느슨한 자바스크립트에서 this는 실질적으로 이 둘을 구분 하는 거의 유일한 기능이다. 1. 상황에 따라 달라지는 this JS에서 this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정된다... CSS: inline, block default 값은 inline으로 left, rigth 영역에서만 margin, padding 값을 가질 수 있다. CSS 적용시 top, bottom에 margin, padding을 적용하기 원한다면 반드시 display: block; 코드로 inline -> block 으로 변경해줘야 한다. box의 경우 inline으로 적용될 시 높이가 적용되지 않아 화면에서 사라지는 현상을 겪기도 한다. CSS 설정시 .name {} 앞에 (.)을 쓰면 class를 지칭한다 .name {} 앞에 (#)을 쓰면 id 를 지칭한다. id는 unique 값으로 모든 변수 통틀어 단 1개만 존재할 수 있으며, class값은 여러개 중복 존재가 가능하다. class는 아래와 같이 사용되는데 class="one two t.. 이전 1 2 3 4 5 6 다음
