[카테고리:] HTML5

작성일자

div 안의 img에 Inner Shadow 적용하기

아래와 같은 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 요소에 안쪽 그림자 효과가 반영되어, 좀더 입체적으로 이미지가 표현되는 것을 확인할 수 있다.

작성일자

FingerEyes-Xr for HTML5 – ShapeMapLayer의 도형정보 및 속성 정보 접근

FingerEyes-Xr for HTML5의 레이어 중 ShapeMapLayer에 대해, 도형 정보 및 속성 정보에 접근하는 코드를 정리해 봅니다. 참고로 아래 코드는 Point 타입의 ShapeMapLayer에 대한 코드입니다.

var snodeLayerId = snode.layerId(); // Layer Id
var snodeNetworkId = snode.nodeId(); // 검색할 필드값
var snodeLayer = g_map.layers(snodeLayerId);
var snodeRowset = snodeLayer.shapeRowSet();
var snodeAttrRowset = snodeLayer.attributeRowSet();
var snodeFieldSet = snodeLayer.fieldSet();
var snodeRows = snodeRowset.rows();
var idxNetwordId = snodeFieldSet.fieldIndex('networkid'); // 검색 대상 필드명

for (var fid in snodeRows) {
    var attRow = snodeAttrRowset.row(fid);
    var vNetworkId = attRow.valueAsString(idxNetwordId);

    if (vNetworkId == snodeNetworkId) {
        var psRow = snodeRows[fid];
        var psData = psRow.shapeData();
        var pt = psData.data();

        alert(pt.x + " " + pt.y);

        break;
    }                    
}