์ธํŒŒ

You Can Become A

Prog

๋Šฆ๊ฒŒ ์‹œ์ž‘ํ•ด๋„ ๋ˆ„๊ตฌ๋“ ์ง€ ๋…ธ๋ ฅํ•˜๋ฉด ๊ฐœ๋ฐœ์ž๊ฐ€ ๋ ์ˆ˜ ์žˆ์–ด์š” !

svg ํฌ๊ธฐ

๊ณต๋ถ€ํ•œ ๋‚ด์šฉ์„ ์ •๋ฆฌํ•ฉ๋‹ˆ๋‹ค
CSS

๐ŸŽจ SVG ๋‹ค๋ฃจ๊ธฐ ์ •๋ฆฌ (ํฌ๊ธฐ / ์ƒ‰์ƒ ๋ณ€๊ฒฝ)

SVG (Scalabe Vector Graphic) SVG๋Š” ํ™•์žฅ ๊ฐ€๋Šฅํ•œ ๋ฒกํ„ฐ ๊ทธ๋ž˜ํ”ฝ(Scalable Vector Graphics)์˜ ์ค„์ž„๋ง์ด๋‹ค. SVG ์ด๋ฏธ์ง€ ํŒŒ์ผ์€ XML ๋ฌธ๋ฒ•์„ ๊ธฐ๋ณธ์œผ๋กœ ํ•˜๋Š” ๋ฌธ์„œ์ด๋ฉฐ ๋กœ๊ณ ๋‚˜ ์•„์ด์ฝ˜, ๊ทธ๋ž˜ํ”„ ๋“ฑ ๋„๋ฆฌ ์‚ฌ์šฉ๋œ๋‹ค. ์ฆ‰, 2์ฐจ์› ๊ทธ๋ž˜ํ”ฝ์„ ํ‘œํ˜„ํ•˜๊ธฐ ์œ„ํ•ด ๋งŒ๋“ค์–ด์ง„ XMLํŒŒ์ผ ํ˜•์‹์˜ ๋งˆํฌ์—… ์–ธ์–ด์ด๋ผ๊ณ  ๋ด๋„ ๋œ๋‹ค. ๋‹ค๋ฅธ png๊ณผ jpg ์ด๋ฏธ์ง€ ํŒŒ์ผ์— ๋น„ํ•ด ํ…์ŠคํŠธ ํŽธ์ง‘๊ธฐ์—์„œ CSS๋‚˜ JS๋กœ ์ˆ˜์ •์ด ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ์ ์ด ๊ฐ€์žฅ ํฐ ์žฅ์ ์ด๋ผ ํ•  ์ˆ˜ ์žˆ๋‹ค. ๊ฐ€์žฅ ํฐ ํŠน์ง•์œผ๋กœ๋Š” ํ™•์žฅ์ด ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ์ ์—์„œ ํ™•๋Œ€ํ•ด๋„ ํ’ˆ์งˆ์ด ๋–จ์–ด์ง€์ง€ ์•Š๋Š”๋‹ค๋Š” ํŠน์ง•์ด ์žˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ํŒŒ์›Œํฌ์ธํŠธ์—์„œ ์ด๋ฏธ์ง€๋ฅผ ๋Š˜๋ฆฌ๊ฑฐ๋‚˜ ์ค„์ผ๋•Œ ํ™”์งˆ์ด ๊นจ์ง€์ง€ ์•Š๋Š” ๊ฒƒ๋„ ๋ฐ”๋กœ ์ด ์›๋ฆฌ๋ฅผ ์ด์šฉํ•œ ๊ฒƒ์ด๋‹ค. SVG ์ด๋ฏธ์ง€๋Š” ํฌ๊ธฐ๋ฅผ ์ค„์ด๊ฑฐ๋‚˜ ๋Š˜๋ฆฌ๋”๋ผ..

category_image
์ธํŒŒ_
2022.03.17
18