프로그래밍 – 페이지 169

아래와 같은 DOM 계층이 있다고 하자.

위의 div에 아래와 같은 스타일을 적용해 안쪽 그림자(Inner Shadow) 효과를 넣고자 한다면..

div {
    box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 10px inset;
}

div 요소의 자식인 img에 부모인 그림자 효과가 표시되어야 할 것이라고 기대했지만, 부모인 div의 그림자가 자식인 img에 가려져 아래와 같은 결과만을 볼 수 있다.

그렇다면 자식인 img에 의해 가려진 부모의 그림자를 들어내기 위해서 어떻게 해야할까? 부모의 그림자 역시 DOM 계층적으로 보면 또 하나의 공개되지 않은 DOM 요소이다. 이 그림자 DOM 요소가 img에 가려지므로 이 img의 z-index의 값과 z-index 속성값이 영향을 받도록 하기 위해 position 속성을 relative나 absolute로 지정하면 되는데, 아래와 같다.

img {
    position: relative;
    z-index: -1;
}

이제 그 결과를 보면, div 요소에 안쪽 그림자 효과가 반영되어, 좀더 입체적으로 이미지가 표현되는 것을 확인할 수 있다.

모던한(?).. 즉 현대적인 Javascript에서는 클래스를 정의하기 위한 class 키워드를 제공하기는 하지만, 현재의 IE에서 아직도 지원하지 않아 나름대로의 class 정의 방식을 사용하고 있습니다. 웹 기반의 GIS 엔진인 FingerEyes-Xr도 이러한 class 정의 방식으로 개발 되었습니다. 수백여개의 클래스를 이 방식으로 정의해 왔음에도 새로운 클래스를 정의할라치면 기존에 만들어진 소스를 Copy 해서 Paste 해 고치는 것이 세련미 떨어져.. 직접 키보드로 한땀 한땀 입력하고자 정리해 봅니다.

먼저 클래스 정의하는 최소한의 구문입니다.

MyClass = Xr.Class({
    /* name: "MyClass", */ // optional

    construct: function () { /* 생성자 */ }
});

private 변수를 추가하는 구문입니다. 반드시 생성자 안에서 밑줄(_)로 시작해서 정의합니다.

MyClass = Xr.Class({
    construct: function () {
        this._privateVariable = 0;
    }
});

맴버 함수를 추가하는 구문입니다. private는 밑줄로 시작하고, public은 밑줄이 아닌 영문 소문자로 시작합니다.

MyClass = Xr.Class({
    construct: function () {},

    methods: {
        _privateFunction: function() { },
        publicFunction: function() { },
    }
});

클래스 차원에서 접근할 수 있는 static 변수 정의입니다. 아래와 같다면, MyClass.STATIC_VARIABLE의 값은 0이 됩니다.

MyClass = Xr.Class({
    statics: {
        STATIC_VARIABLE: 0
    },

    construct: function () {}
});

[ToDo] 상속, 인터페이스에 대한 내용은 추후 필요하면 그때 정리할 것

[카테고리:] 프로그래밍

div 안의 img에 Inner Shadow 적용하기

JavaScript의 Class 정의 정리