์ด ๋ฌธ์„œ์˜ ์›๋ณธ์€ ์™ธ๋ถ€ ์œ„ํ‚ค์—์„œ ๊ฐ€์ ธ์™”์Šต๋‹ˆ๋‹ค.


1. ๊ฐœ์š”2. ํŠน์ง•3. ์ง€์› ํ”„๋กœ๊ทธ๋žจ

1. ๊ฐœ์š”[ํŽธ์ง‘]

Scalable Vector Graphics

์Šค์ผ€์ผ๋Ÿฌ๋ธ” ๋ฒกํ„ฐ ๊ทธ๋ž˜ํ”ฝ์Šค(Scalable Vector Graphics, SVG)๋Š” 2์ฐจ์› ๋ฒกํ„ฐ ๊ทธ๋ž˜ํ”ฝ์„ ํ‘œํ˜„ํ•˜๊ธฐ ์œ„ํ•œ XML ๊ธฐ๋ฐ˜์˜ ํŒŒ์ผ ํ˜•์‹์ด๋‹ค.

2. ํŠน์ง•[ํŽธ์ง‘]

๋ฒกํ„ฐ ์ด๋ฏธ์ง€์˜ ๊ณตํ†ต์  ํŠน์„ฑ์œผ๋กœ ํ™•๋Œ€๋ฅผ ํ•ด๋„ ํ”ฝ์…€์ด ๊นจ์ง€์ง€ ์•Š๋Š”๋‹ค. ๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— ๋†’์€ PPI์˜ ์Šค๋งˆํŠธํฐ๋“ค์ด ๋Œ€์ค‘ํ™”๋œ ์‹œ์ ์—์„œ ๋งŽ์€ ์›น์‚ฌ์ดํŠธ๋“ค์ด ์ž์ฃผ ์ด์šฉํ•œ๋‹ค. ๊ฒŒ๋‹ค๊ฐ€ ๋ณดํ†ต ์šฉ๋Ÿ‰๋„ ๊ธฐ์กด์˜ PNG๋‚˜ GIF๋ณด๋‹ค ์ž‘๋‹ค.

XML ํ˜•์‹์œผ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ๋‹ค. ํ…์ŠคํŠธ ์—๋””ํ„ฐ๋กœ ์—ด๋ฉด XML ์†Œ์Šค๊ฐ€ ๊ทธ๋Œ€๋กœ ๋‚˜์˜จ๋‹ค. ์ด๋ฅผ ์‘์šฉํ•ด์„œ ๋†’์€ ์งˆ์˜ ๊ทธ๋ž˜ํ”„๋ฅผ ๊ทธ๋ฆฌ๋Š” ๋“ฑ์˜ ํ™œ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

<svg>ํƒœ๊ทธ๋ฅผ ์ด์šฉํ•ด HTML์— SVG์˜ XML ์†Œ์Šค๋ฅผ ๋„ฃ๋Š” ๋ฐฉ์‹์œผ๋กœ ์ง์ ‘ ์ด๋ฏธ์ง€๋ฅผ ๋„ฃ์„ ์ˆ˜๋„ ์žˆ๊ณ , .svg ํŒŒ์ผ์„ ์ด์šฉํ•ด ๊ธฐ์กด์˜ ์ด๋ฏธ์ง€์ฒ˜๋Ÿผ ๋กœ๋”ฉํ•˜๋Š” ๊ฒƒ ์—ญ์‹œ ๊ฐ€๋Šฅํ•˜๋‹ค.

๊ณผ๊ฑฐ์—๋Š” ๋‚˜๋ฌด์œ„ํ‚ค์—์„œ ์—…๋กœ๋“œ๊ฐ€ ๋ถˆ๊ฐ€๋Šฅํ–ˆ์ง€๋งŒ, 2020๋…„ 11์›” ๊ฒฝ the seed ์—…๋ฐ์ดํŠธ๋กœ ์—…๋กœ๋“œ๊ฐ€ ๊ฐ€๋Šฅํ•ด์กŒ๋‹ค.

3. ์ง€์› ํ”„๋กœ๊ทธ๋žจ[ํŽธ์ง‘]

[1] IE 10๋ถ€ํ„ฐ ๋ณธ๊ฒฉ์ ์œผ๋กœ ์ง€์›.
[2] ๊ตฌ๊ธ€ ํฌ๋กฌ ๋ฐ ํฌ๋กœ๋ฏธ์›€ ๊ณ„์—ด ๋ณ€์ข…๋“ค, Safari ๋“ฑ.