글

작성일자

휜 그림자를 가진 카드

표현하고자 하는 목표는 다음과 같습니다. 하단이 휜듯이 살짝 그림자가 들어간 카드입니다.

DOM 구조는 다음과 같습니다.


    

        

            
content

CSS는 다음과 같습니다.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card {
    position: relative;
    width: 300px;
    height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    box-shadow: 0px 0px 1px 1px rgba(0,0,0, 0.1);
}

.card .shadow {
    position: relative;
    width: 100%;
    height: 100%;
}

.card .shadow div {
    position: relative;
    width: 100%;
    height: 100%;
    background: #7f8c8d;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 10px solid #fff;
    color: #fff;
    font-size: 3em;
}

.card .shadow::after {
    content: '';
    position: absolute;
    bottom: 30px;
    left: 4%;
    width: 80%;
    height: 50%;
    background: #000;
    filter: blur(15px);
    opacity: 0.5;
    transform-origin: right;
    transform: skewY(-11deg);
    z-index: -1;
}

.card .shadow::before {
    content: '';
    position: absolute;
    bottom: 30px;
    right: 4%;
    width: 80%;
    height: 50%;
    background: #000;
    filter: blur(15px);
    opacity: 0.5;
    transform-origin: left;
    transform: skewY(11deg);
}

filter는 IE에서 적용되지 않습니다. 대신 box-shadow를 사용하여 비슷하게 효과를 낼 수는 있습니다.

작성일자

모바일 넥스젠의 공간 데이터 편집 시 자르기(Split)와 병합하기(Merge)

모바일 NexGen은 모바일 GIS 솔루션으로 공간 데이터 편집이 가능하며 기본적인 공간 데이터 편집 기능 외에도 공간 데이터를 자르거나 병합하는 등의 고급 편집 기능도 제공합니다. 아래의 동영상은 하나의 폴리곤을 원하는 형상을 갖도록 자르고 병합하는 공간 편집 기능에 대한 소개입니다.

아래는 글은 모바일 넥스젠의 기본적인 공간 데이터 편집에 대한 소개입니다.

모바일 넥스젠의 공간 데이터 편집

작성일자

모바일 NexGen 관리자

모바일 NexGen 관리자는 단말기를 통해 편집한 공간 데이터와 수집한 현장 데이터를 사용자 PC에 내려 받을 수 있는 프로그램입니다. 아래는 모바일 넥스젠과 관리자 프로그램 간의 업무 흐름에 대한 도식도입니다.

단말기를 사용자 PC의 USB에 연결하여 바로 데이터를 내려받을 수 있으며, 편집된 공간 데이터는 SHP 파일 형식으로 저장할 수 있으며, 수집한 위치 기반 현장 데이터에 대해서는 그 목적에 맞게 SHP, CSV, 이미지, 동영상 파일들로 저장됩니다.

모바일 넥스젠 앱이 설치된 단말기에서 공간 데이터를 편집하는 기능에 대한 소개는 다음 URL을 통해 살펴볼 수 있습니다.

모바일 넥스젠의 공간 데이터 편집

또한 현장에서 다양한 데이터를 수집하는 기능에 대한 소개는 다음 URL을 통해 살펴볼 수 있습니다.

모바일 넥스젠의 현장 데이터 수집

작성일자

C#에서 JSON 해석하기

.NET 5부터는 JSON을 해석하는 API가 기본적으로 제공되는 듯 하지만, 아직도 내 PC에는 .NET 5가 기본적으로 설치되어 있지 않으므로 다른 방안이 필요했고 Newtonsoft.Json이라는 매우 뛰어난 JSON 라이브러리가 있어 이를 사용하게 되었습니다.

설치는 간단이 Visual Studio의 Package Manager 기능을 통해 설치할 수 있으며 NuGet 사이트에서 제공하는 정보를 통해 쉽게 설치할 수 있습니다.

이제 다음과 같은 JSON을 해석해 봅시다. 이 JSON은 test.json이라는 파일이 저장되어 있습니다.

{
    "form0": {
        "metadata": {
            "title": "테스트"
        }
    },

    "form1": {
        "metadata": {
            "title": "연락처"
        }
    }
}

위에서 form0과 form1에 대한 정보를 얻어와야 하고, 각가게 대한 title 값을 얻어와야 합니다. 코드는 아래와 같습니다.

using Newtonsoft.Json;
using Newtonsoft.Json.Linq;

...

var strFormJson = Utility.ReadAllTextFromFile("test.json");
var jsonForm = JObject.Parse(strFormJson);
var iter = jsonForm.GetEnumerator();

while(iter.MoveNext())
{
    var keyValue = iter.Current;
    MessageBox.Show(keyValue.Key + " " + keyValue.Value["metadata"]["title"].ToString());
}

JSON에 대해 배열에 대한 처리는 JArray로 타입을 변환하면 됩니다. 코드의 예는 다음과 같습니다.

var jsonLayers = JObject.Parse(strLayersJson);
var arrayJsonLayers = jsonLayers["layers"] as JArray;
var iterLayers = arrayJsonLayers.GetEnumerator();

while(iterLayers.MoveNext())
{
    var value = iterLayers.Current;
    var layerName = value["name"].ToString();

    ...
}

시간이 좀더 흘려 .NET 5가 사용자의 PC에 기본적으로 설치되는 날이 오면 .NET 5에서 제공하는 JSON API를 사용하시기 바랍니다.