css3
-
[CSS] linear-gradient() ์ฌ์ฉํ๊ธฐCoding 2024. 8. 12. 23:55
์น ํ๋ฉด์ ๊ฐ๋ฐํ๋ค ๋ณด๋ฉด ๊ฐ๋ ๊ทธ๋ผ๋ฐ์ด์ ๋ง์คํฌ๋ฅผ ์ฌ์ฉํด์ผ ํ ์ผ์ด ์๊น๋๋ค.์์ฃผ ์ฐ๋ ์คํ์ผ์ด ์๋๋ค ๋ณด๋ ๋งค๋ฒ ๊ฒ์ํ๊ฒ ๋ผ์ ๋ธ๋ก๊ทธ์ ๋จ๊ฒจ ๋ด ๋๋ค. linear-gradient()๋ ํ๋์ ์์์์ ๋ค๋ฅธ ์์์ผ๋ก ๋ถ๋๋ฝ๊ฒ ์ด์ด์ง๋ ๋ฐฐ๊ฒฝ์ ๋ง๋ค ์ ์์ต๋๋ค.๊ธฐ๋ณธ๋ฌธ๋ฒbackground: linear-gradient(direction, color-stop1, color-stop2, ...); direction (๋ฐฉํฅ): ๊ทธ๋ผ๋์ธํธ๊ฐ ์ ์ฉ๋ ๋ฐฉํฅ์ ์ง์ ํฉ๋๋ค. ๊ฐ๋(์: 45deg), ํค์๋(์: to right, to bottom), ๋๋ ๊ธฐ๋ณธ๊ฐ(to bottom)์ ์ฌ์ฉํ ์ ์์ต๋๋ค.color-stop (์์ ์ง์ ): ๊ทธ๋ผ๋์ธํธ๊ฐ ์์๋๊ฑฐ๋ ๋๋๋ ์์์ ์ง์ ํฉ๋๋ค. ์์ ์ด๋ฆ, HEX ์ฝ๋, RGB..