Blazor ์—ฐ๊ตฌ์†Œ

6. ๊ฒฉ๋ฆฌ๋œ CSS์—์„œ ์ž์‹ ์ ‘๊ทผ ํ•˜๊ธฐ (razor.css)


์ด ๋ฐฉ๋ฒ•์„ ๋ชฐ๋ผ์„œ dotnet/aspnetcore ๋ ˆํฌ ๋ฌธ ์•ž๊นŒ์ง€ ๋‹ค๋…€์™”์Šต๋‹ˆ๋‹ค. (๋ˆˆ๋ฌผ)

๊ฒฐ๋ก ๋ถ€ํ„ฐ ๋งํ•˜๋ฉด ๊ฒฉ๋ฆฌ๋œ CSS์—์„œ๋„ ์•„๋ž˜์™€ ๊ฐ™์ด ::deep์„ ํ†ตํ•ด ์ž์‹ ์š”์†Œ๋ฅผ ์ฐพ๋Š” ๊ฒƒ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

::deep

์•„๋ž˜ razor.cs ๋‚ด์šฉ์„ ํ†ตํ•ด ์ด๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

.vote {
    ...
}
    .vote:hover {
        ...
    }
    .vote ::deep svg {
        width: 14px;
        height: 14px;
        margin-right: 2px;
    }
        .vote ::deep svg path {
            fill: #CCCCCC;
        }

.vote-checked {
   ...
}
    .vote-checked ::deep svg path {
        fill: #0969DA !important;
    }

svg, path๋Š” .vote ์ปดํฌ๋„ŒํŠธ์˜ ๋‚ด๋ถ€์— ์ž๋ฆฌํ•˜๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์—, ๊ฒฉ๋ฆฌ๋œ CSS์—์„œ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ์ ‘๊ทผ์„ ํ—ˆ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๊ทธ๋ž˜์„œ ์ด ๋•Œ ::deep์„ ํ†ตํ•ด ํ•˜์œ„ ์š”์†Œ์˜ ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•ด์ง‘๋‹ˆ๋‹ค.


์ด ๋ฐฉ๋ฒ•์€ @naratteu ๋‹˜์˜ ๋„์›€์„ ๋ฐ›์•˜์Šต๋‹ˆ๋‹ค.

์ด์ œ, ์ €๋Š” ๊ธ€๋กœ๋ฒŒ css์— ์˜์กดํ•˜์ง€ ์•Š๊ณ ๋„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ถ„์‚ฐํ™” ์‹œํ‚ฌ ์ˆ˜ ์žˆ๊ฒ ๋„ค์š”.

๋‹ค์Œ ์Šคํฌ์ผ๋Ÿฌ๋Š” ์ง€๊ธˆ๊นŒ์ง€ ์—ฐ๊ตฌ๋œ ๊ธฐ์ˆ ์„ ๋ฐ”ํƒ•์œผ๋กœ ToggleButton์„ ํ•œ๋ฒˆ ๋งŒ๋“ค์–ด ๋ณผ ๊ณ„ํš์ž…๋‹ˆ๋‹ค. (์ด๋ฏธ ๋งŒ๋“ค์–ด ๋†จ์ง€๋งŒโ€ฆ) ๋…๋ฆฝ๋œ ์ปดํฌ๋„ŒํŠธ, ์–‘๋ฐฉํ–ฅ ๋ฐ”์ธ๋”ฉ๊ณผ razor.css๋ฅผ ํ†ตํ•ด ์ œ๊ฐ€ ์–ด๋–ป๊ฒŒ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์„ค๊ณ„ ํ–ˆ์„์ง€ ์‚ดํŽด๋ณด๋Š” ์‹œ๊ฐ„์ด ๋˜๊ฒ ์Šต๋‹ˆ๋‹ค.

image

3 Likes