프론트엔드박사되기: 6월 2016

코딩을 하다보면..(특히 반응형) 특정 박스의 세로 길이를 가로길이에 비례하게 줄이고 싶을 때가 있다.

이런 경우는 대부분 박스 안에 이미지가 들어있을 경우가 많다.

여러 방법을 찾아봤지만 지금까지 발견한 가장 좋은 방법은 padding의 %를 이용하는 것이다.

아래 링크를 살펴보자..

여기서의 핵심은 아래 css에 있다.

.lst_type_owen > ul > li .img{
    position: relative;
    height:0;
    padding-bottom:65%;
}

기본적으로 padding의 %는 자기 자신의 부모 엘리먼트의 가로 길이를 기준으로 계산한다.

즉 height를 0으로 주고, 부모 엘리먼트의 가로길이의 65%만큼을 padding-bottom으로 밀어서 가로길이에 비례하게 박스 크기를 변경시켜 주는 것이다.

물론 그안에 엘리먼트는 absolute로 띄워야 한다는게 좀 찜찜할 수 있지만... 박스의 세로길이를 가로길이에 고정했다는 것 자체가, 내부 엘리먼트의 세로길이 따위 신경 안쓰겠다는 것이기 때문에.. 접근성 측면에서도 문제는 없어보인다.

우리가 객체를 생성하는 방법을 크게 2가지로 배웠습니다.

1. 리터럴 방식

var o  = {x:1,y:2}

2.객체 생성자를 통한 방식

var o  = new Object();
o.x  = 1;
o.y  = 2;

모든 함수는 prototype이라는 프로퍼티를 가지고 있습니다. (함수도 객체이기 때문에 프로퍼티를 갖는게 가능합니다.)
이 prototype프로퍼티의 역할은, 이 함수를 통해 생성되는 객체에게 prototype프로퍼티의 값을 상속해주는 역할을 합니다.

객체를 생성하면 우리가 만든 객체는 Object라는 최상위 함수 객체의 prototype이라는 프로퍼티를 상속받게 됩니다.
즉 우리가 위에서 생성한 'o'라는 객체는, Object라는 함수 객체가 가지고 있는 prototype 프로티의 값들들 상속받는 것입니다. Object의 prototype 프로퍼티를 확인해보기 위해서는 콘솔을 찍어보면 되겠죠?
console.log(Object.prototype);

그러면 toString, valueOf등의 매쏘드 들이 보일겁니다. 즉 우리는 Object의 prototype로 부터 값들을 상속받아서 o.toString()같이 매쏘드들을 사용할 수 있는 것입니다.

한단계 더 들어가 보겠습니다.

var d  = new Date();
console.log(d.toString());

위 소스에서 우리는 Date라는 함수를 통해 d라는 객체를 만들었습니다.
그런데 d객체에서도 toString이라는 함수를 쓸수 있습니다. 이상합니다. 분명 toString은 Object라는 객체의 prototype에 있는 매쏘드라고 했는데... 여긴 Object가 등장 안하잖아요!

천천히 살펴보면 그 이유를 알 수 있습니다.
먼저 d객체는 Date라는 함수로 부터 생성되었습니다. 이에 따라 Date의 prototype 프로퍼티가 가지고 있는 요소들(getHours등..)을 사용할 수 있습니다.
그리고 요 Date라는 함수또한 객체이기 때문에 생성될 당시 Object객체로 부터 값들을 상속받습니다.

즉 모든 객체는 최상위 객체인 Object로 부터 상속을 받습니다. 따라서 배열, 함수등에도 toString이라는 매쏘드를 사용할 수 있는 것입니다.

그리고 d는 Date를 상속받고, Date는 Object를 상속받고... 이러한 관계를 프로토타입 체인이라고 합니다. 모든 자바스크립트의 객체는 이러한 방식으로 매쏘드를 상속받아 사용하는 것입니다. 스터디때도 봤지만 대표적인것이 dom의 프로토타입 체인입니다.
예 : document.getElementsByTagName('body').toString() 같은 매쏘드를 쓸 수 있죵.

-------------------
직접 프로토타입을 활용한 상속을 해봅시다.

var A  = function(){this.x  = 1;}
var obj  = new A();
A.prototype.y  = 2;
A.prototype.plus  = function(){
    return this.x  + this.y
}
console.log(obj.plus());

위에서 obj는 함수 A를 통해 만든 객체 입니다. 따라서 A의 프로토타입에 있는 항목들을 상속받습니다.
A,함수에서의 this는 함수를 호출한 놈. 즉 위에서는 obj를 가리킵니다.

헌데 5번라인까지는 A의 prototype이 없기 때문에 상속받을 것이 없습니다. 그 이후 7,8번 열에서 프로토타입이 정의 됩니다. 따라서 12번 열에서 obj객체가 plus라는 매쏘드를 사용할 수 있는 것입니다.

프로토타입 체인을 정리해보면..
obj는 A의 프로토타입 프로퍼티로부터 상속받고
A는 Object(최상위 객체)로 부터 값을 상속받습니다.

그렇다면 위 소스에서

var obj2  = new A();
console.log(obj2.plus());

를 추가하면 어떻게 될까요?
한번 생각해 보세요~

다음주는 객체 지향 프로그래밍을 좀 더 실용적인 예를 통해 스터디 하겠습니다.

프론트엔드박사되기

2016년 6월 29일 수요일

싱글 페이지를 위한 AngularJS Router 알아보기

2016년 6월 16일 목요일

웹폰트에 대한 고찰

div 박스 세로길이를 가로길이에 비례하게 만들기

객체 및 프로토타입 스터디정리