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

작성일자

휜 그림자를 가진 카드

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

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를 사용하여 비슷하게 효과를 낼 수는 있습니다.

작성일자

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를 사용하시기 바랍니다.