๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

css ๊ทธ๋ผ๋ฐ์ด์…˜1

CSS3 Gradient ๊ทธ๋ผ๋ฐ์ด์…˜ํšจ๊ณผ ํฌํ† ์ƒต์—์„œ๋‚˜ ์“ธ์ˆ˜ ์žˆ์—ˆ๋˜ ๊ทธ๋ผ๋ฐ์ด์…˜ ํšจ๊ณผ๋ฅผ CSS๋งŒ์œผ๋กœ ์›น์—์„œ ํ‘œํ˜„์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. CSS3์—์„œ ์ถ”๊ฐ€๋œ ๊ธฐ๋Šฅ์œผ๋กœ ์ตœ์‹  ๋ธŒ๋ผ์šฐ์ € ์ต์Šคํ”Œ๋กœ๋Ÿฌ 10์ด์ƒ ํ‘œํ˜„์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ํ•˜์œ„ ๋ธŒ๋ผ์šฐ์ € ๋ฒ„์ „์—์„œ๋Š” ์‚ฌ์šฉ์ด ๋ถˆ๊ฐ€๋Šฅํ•œ์  ์ฐธ๊ณ ํ•˜์‹œ๊ณ  ์‚ฌ์šฉํ•ด์ฃผ์‹œ๋ฉด ๋˜๊ฒ ์Šต๋‹ˆ๋‹ค. ํ‘œํ˜„๋ฐฉ์‹์€ ๋ผ์ธ๋ฐฉ์‹๊ณผ ์›ํ˜•๋ฐฉ์‹ ๋‘๊ฐ€์ง€๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ผ์ธ๋ฐฉ์‹์ด ๋งŽ์ด ์“ฐ์ด๊ธด ํ•˜์ง€๋งŒ ํ•„์š”์— ๋”ฐ๋ผ ์›ํ˜•๋„ ์‚ฌ์šฉ๋˜๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ํ•˜์œ„ ๋ธŒ๋ผ์šฐ์ €๋“ค ๋•Œ๋ฌธ์— ๋งŽ์ด ์‚ฌ์šฉํ•˜๊ธฐ ๊ป„๋„๋Ÿฌ์šด๋ฉด๋„ ๋งŽ์Šต๋‹ˆ๋‹ค. linear-gradient > ์ผ๋ฐ˜์ ์ธ ๋ผ์ธ๋ฐฉ์‹ ๋‘๊ฐœ์˜ ์ปฌ๋Ÿฌ๋ฅผ ์ง€์ •ํ•˜์—ฌ ์ง€์ •์˜์—ญ๋งŒํผ ๊ทธ๋ผ๋ฐ์ด์…˜์ด ํ‘œํ˜„๋ฉ๋‹ˆ๋‹ค. radial-gradient > ์›ํ˜•๋ฐฉ์‹์œผ๋กœ ์ง€์ •์˜์—ญ๋งŒํผ ๊ทธ๋ผ๋ฐ์ด์…˜์ด ํ‘œํ˜„๋ฉ๋‹ˆ๋‹ค. repeating-linear-gradient > ๊ฐ™์€ ๋ผ์ธ๋ฐฉ์‹์ด์ง€๋งŒ ๊ตฌ๊ฐ„๋ฐ˜๋ณต์œผ๋กœ.. 2017. 8. 10.

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”