CSS ๊ทธ๋ผ๋์ธํธ โ ์ ํยท์ํ ๊ทธ๋ผ๋์ธํธ ์๋ฒฝ ๊ฐ์ด๋
CSS ๊ทธ๋ผ๋์ธํธ๋ ์ด๋ฏธ์ง ์์ด ์์ CSS๋ก ์์ ์ ํ ํจ๊ณผ๋ฅผ ๊ตฌํํฉ๋๋ค. linear-gradient๋ ์ง์ ๋ฐฉํฅ, radial-gradient๋ ์ํ์ผ๋ก ์์์ด ํผ์ง๋ ๋ฐฉ์์ ๋๋ค. ๊ทธ๋ผ๋์ธํธ๋ ๋ฐฐ๊ฒฝ, ๋ฒํผ, ํค๋, ์นด๋ ๋ฑ ๋ค์ํ UI ์์์ ์ ์ฉํ ์ ์์ผ๋ฉฐ ํ์ผ ํฌ๊ธฐ๊ฐ ์์ด ์ฑ๋ฅ ๋ถ๋ด์ด ์์ต๋๋ค.
๊ทธ๋ผ๋์ธํธ CSS ๊ธฐ๋ณธ ๋ฌธ๋ฒ:
linear-gradient(๋ฐฉํฅ, ์์1, ์์2, ...)
radial-gradient(shape, ์์1, ์์2, ...)
์์ฃผ ์ฐ์ด๋ ๊ทธ๋ผ๋์ธํธ ํจํด:
- ๋ฒํผ ๋ฐฐ๊ฒฝ: to right, #667eea, #764ba2
- ํ์ด๋ก ๋ฐฐ๊ฒฝ: to bottom, #0f0c29, #302b63, #24243e
- ์นด๋ ์ค๋ฒ๋ ์ด: to bottom, transparent, rgba(0,0,0,0.7)
๊ทธ๋ผ๋์ธํธ์ ํฌ๋ช ๋๋ฅผ ์ถ๊ฐํ๋ ค๋ฉด rgba() ์์ ํ๊ธฐ๋ฒ์ ์ฌ์ฉํฉ๋๋ค. ์๋ฅผ ๋ค์ด rgba(0,0,0,0)์ ์์ ํฌ๋ช , rgba(0,0,0,0.5)๋ ๋ฐํฌ๋ช ๊ฒ์ ์ ๋๋ค. ์ด๋ฅผ ์ด์ฉํด ์ด๋ฏธ์ง ์์ ์ฌ๋ ค๋๋ ์ค๋ฒ๋ ์ด ๊ทธ๋ผ๋์ธํธ๋ฅผ ์ฝ๊ฒ ๋ง๋ค ์ ์์ต๋๋ค.
์์ฃผ ๋ฌป๋ ์ง๋ฌธ (FAQ)
A: conic-gradient๋ ์ค์ฌ์ ์ ๊ธฐ์ค์ผ๋ก ํ์ ํ๋ฉฐ ์์์ด ๋ณํ๋ ์๋ฟํ ๊ทธ๋ผ๋์ธํธ์ ๋๋ค. ํ์ด ์ฐจํธ, ์์ํ, ๋ก๋ฉ ์คํผ๋ ์ ๋๋ฉ์ด์ ๋ฑ์ ํ์ฉ๋ฉ๋๋ค. ์ต์ ๋ธ๋ผ์ฐ์ ์์ ๋ชจ๋ ์ง์๋๋ฉฐ conic-gradient(red 0deg, yellow 120deg, blue 240deg, red 360deg)์ฒ๋ผ ์ฌ์ฉํฉ๋๋ค.
A: CSS๋ง์ผ๋ก๋ ์ง์ ์ ๋๋ฉ์ด์ ์ด ์ด๋ ต์ต๋๋ค(background-position ๋ณ๊ฒฝ์ผ๋ก simulate ๊ฐ๋ฅ). background-size๋ฅผ ํฌ๊ฒ ์ค์ ํ๊ณ background-position์ ์ด๋ํ๋ ํธ๋ฆญ์ผ๋ก ํ๋ฅด๋ ๊ทธ๋ผ๋์ธํธ ํจ๊ณผ๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค. ๋๋ CSS ๋ณ์(--color)๋ฅผ ํคํ๋ ์์ผ๋ก ๋ณ๊ฒฝํ๋ ๋ฐฉ์๋ ์์ต๋๋ค.
A: linear-gradient์ radial-gradient๋ IE10+๋ฅผ ํฌํจํ ๋ชจ๋ ํ๋ ๋ธ๋ผ์ฐ์ ์์ ์ง์๋ฉ๋๋ค. ๊ตฌํ WebKit ๋ธ๋ผ์ฐ์ ๋ฅผ ์ํ -webkit- ์ ๋์ฌ(prefix)๋ ํ์ฌ ๊ฑฐ์ ๋ถํ์ํฉ๋๋ค. conic-gradient๋ IE์ ๊ตฌํ Edge์์ ์ง์๋์ง ์์ผ๋ฉฐ Chrome 69+, Firefox 83+์์ ์ง์๋ฉ๋๋ค.