[Blazor] css 이용하여 Pizza 메뉴판 만들기

Pizza 메뉴 판을 만드는 방법으로 css 를 이용해 디자인하여 화면에 표시합니다.
우선 피자메뉴판에 사용될 Image 를 추가합니다. (이미지는 하단 깃헙 주소 참고)
wwwroot/img/pizzas

css 에 아래 내용을 추가합니다.
wwwroot/css/app.css

.pizza-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, 20rem);
    grid-gap: 2rem;
    justify-content: center;
    padding-left: 0;
}

    .pizza-cards > li {
        height: 10rem;
        position: relative;
        background-size: cover;
        border-radius: 0.5rem;
        list-style-type: none;
        box-shadow: 0 3px 4px rgba(0,0,0,0.4);
        transition: 0.1s ease-out;
    }

        .pizza-cards > li:hover {
            transform: scale(1.02);
        }


.pizza-info {
    border-radius: 0.5rem;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    background: linear-gradient(rgba(0,0,0,0.7) 30%, rgba(0,0,0,0) 80%);
    padding: 1rem 1rem;
    color: #fff2cc;
    cursor: pointer;
    text-shadow: 0 2px 2px rgba(0,0,0,0.5);
    line-height: 1.25rem;
}

    .pizza-info .title {
        color: white;
        font-size: 1.4rem;
        display: block;
        margin: 0.2rem 0 0.4rem 0;
        font-family: 'Bahnschrift', Arial, Helvetica, sans-serif;
        text-transform: uppercase;
    }

    .pizza-info .price {
        position: absolute;
        bottom: 0.5rem;
        right: 1rem;
        font-size: 1.5rem;
        font-weight: 700;
        padding: 0rem 0.7rem;
        border-radius: 4px;
        background-color: #08af08;
        color: white;
        line-height: 2rem;
    }

메뉴판에 사용될 항목을 정의합니다.

PizzaSpecial.cs

namespace Blazor.AppTest.Data
{
    public class PizzaSpecial
    {
        public int Id { get; set; }

        public string? Name { get; set; }

        public decimal BasePrice { get; set; }

        public string? Description { get; set; }

        public string? ImageUrl { get; set; }

        public string GetFormattedBasePrice() => BasePrice.ToString("0.00");
    }
}

화면에 css 정의한 내용을 class 에 설정하고 데이터를 만들어 화면에 나타낼수 있도록 합니다.

Pizza.razor

@page "/pizza"
@using Blazor.AppTest.Data

<h3>Pizza</h3>

<div class="main">
    <h1>Blazing Pizzas</h1>
    <ul class="pizza-cards">
        @if (specials != null)
        {
            @foreach (var special in specials)
            {
                <li style="background-image: url('@special.ImageUrl')">
                    <div class="pizza-info">
                        <span class="title">@special.Name</span>
                        @special.Description
                        <span class="price">@special.GetFormattedBasePrice()</span>
                    </div>
                </li>
            }
        }
    </ul>
</div>

@code {
    List<PizzaSpecial> specials = new();

    protected override void OnInitialized()
    {
        specials.AddRange(new List<PizzaSpecial>
        {
            new PizzaSpecial { Name = "The Baconatorizor", BasePrice =  11.99M, Description = "It has EVERY kind of bacon", ImageUrl="img/pizzas/bacon.jpg"},
            new PizzaSpecial { Name = "Buffalo chicken", BasePrice =  12.75M, Description = "Spicy chicken, hot sauce, and blue cheese, guaranteed to warm you up", ImageUrl="img/pizzas/meaty.jpg"},
            new PizzaSpecial { Name = "Veggie Delight", BasePrice =  11.5M, Description = "It's like salad, but on a pizza", ImageUrl="img/pizzas/salad.jpg"},
            new PizzaSpecial { Name = "Margherita", BasePrice =  9.99M, Description = "Traditional Italian pizza with tomatoes and basil", ImageUrl="img/pizzas/margherita.jpg"},
            new PizzaSpecial { Name = "Basic Cheese Pizza", BasePrice =  11.99M, Description = "It's cheesy and delicious. Why wouldn't you want one?", ImageUrl="img/pizzas/cheese.jpg"},
            new PizzaSpecial { Name = "Classic pepperoni", BasePrice =  10.5M, Description = "It's the pizza you grew up with, but Blazing hot!", ImageUrl="img/pizzas/pepperoni.jpg" }
        });
    }
}

실행결과

* 실행해 보니 디자인(디자이너)의 중요성을 깨닫게 되네요.

[Source]
https://github.com/kei-soft/Blazor.AppTest