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๋ฅผ ํตํด ์ ๊ฐ ์ด๋ป๊ฒ ์ปดํฌ๋ํธ๋ฅผ ์ค๊ณ ํ์์ง ์ดํด๋ณด๋ ์๊ฐ์ด ๋๊ฒ ์ต๋๋ค.