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

01. ๋น„ํŠธ๋งต๊ณผ ๋ฒกํ„ฐ

by Youcodein 2022. 8. 10.
728x90
๋ฐ˜์‘ํ˜•

๋””์ง€ํ„ธ ์ด๋ฏธ์ง€(Digital Images)

๋””์ง€ํ„ธ ์ด๋ฏธ์ง€(Digital Image) ๋˜๋Š” "์ด๋ฏธ์ง€"๋ผ๊ณ  ๋ถˆ๋ฆฌ๋Š” ์šฉ์–ด๋Š” ๋””์ง€ํ„ธ ์นด๋ฉ”๋ผ๋ฅผ ์ด์šฉํ•˜์—ฌ ํ˜„์‹ค์„ธ๊ณ„์˜ ์‚ฌ๋ฌผ์„ ์ดฌ์˜ํ•˜๊ฑฐ๋‚˜ ์Šค์บ๋„ˆ๋ฅผ ์ด์šฉํ•˜์—ฌ ์‚ฌ์ง„์ด๋‚˜ ๊ทธ๋ฆผ์„ ๋””์ง€ํ„ธ ํ˜•ํƒœ๋กœ ๋ฐ›์•„๋“ค์ธ ๊ฒƒ์„ ๋งํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฏธ์ง€๋ฅผ ๋””์ง€ํ„ธํ™” ํ•˜๋Š” ๋ฐฉ์‹์€ ํฌ๊ฒŒ ๋น„ํŠธ๋งต ๋ฐฉ์‹๊ณผ ๋ฒกํ„ฐ ๋ฐฉ์‹์œผ๋กœ ๋‚˜๋‰ฉ๋‹ˆ๋‹ค.

Pixel

ํ”ฝ์…€์ด๋ž€ Picture(๊ทธ๋ฆผ) + Element(์›์†Œ)์˜ ํ•ฉ์„ฑ์–ด๋กœ์„œ ํ™”์†Œ๋ผ๊ณ ๋„ ํ•˜๋Š” ํ™”๋ฉด์„ ๊ตฌ์„ฑํ•˜๋Š” ๊ฐ€์žฅ ๊ธฐ๋ณธ์ด ๋˜๋Š” ๋‹จ์œ„์ž…๋‹ˆ๋‹ค. ์ด ์  ํ•˜๋‚˜์— ํ•ด๋‹น ์ƒ‰์˜ ์ •๋ณด(๋นจ๊ฐ„์ƒ‰, ๋…น์ƒ‰, ํŒŒ๋ž€์ƒ‰, ํˆฌ๋ช…๋„ ๋“ฑ)๊ฐ€ ๋‹ด๊ฒจ์ ธ ์žˆ์œผ๋ฉฐ, ์ด๋Š” ๊ณง ๊ทธ๋ฆผ์˜ ์šฉ๋Ÿ‰๊ณผ ์ง๊ฒฐ๋ฉ๋‹ˆ๋‹ค.

๋น„ํŠธ๋งต(Bitmap) ๋ฐฉ์‹

๋น„ํŠธ๋งต ๋ฐฉ์‹์€ '๋น„ํŠธ์˜ ์ง€๋„(Map of bits)'๋ผ๋Š” ๋œป์œผ๋กœ, ๊ฐ ํ”ฝ์…€์— ์ €์žฅ๋œ ๋น„ํŠธ ์ •๋ณด๊ฐ€ ์ง‘ํ•ฉ๋œ ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค. ์ฆ‰, ํ”ฝ์…€์˜ ์ ์ด ๋ชจ์—ฌ ์ด๋ฏธ์ง€๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ์‹ ์ž…๋‹ˆ๋‹ค. ๋ž˜์Šคํ„ฐ ์ด๋ฏธ์ง€๋ผ๊ณ ๋„ ๋ถˆ๋ฆฌ๋ฉฐ ํ”ฝ์…€์˜ ์  ํ•˜๋‚˜ํ•˜๋‚˜๊ฐ€ ๋ชจ์—ฌ ์ด๋ฏธ์ง€๋ฅผ ์ด๋ฃจ๊ธฐ ๋•Œ๋ฌธ์— ์ •๊ตํ•œ ์ด๋ฏธ์ง€ ํ‘œํ˜„์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ํ”ฝ์…€์˜ ์ˆ˜๊ฐ€ ๋งŽ์•„์งˆ์ˆ˜๋ก ํ™”์งˆ์€ ๋›ฐ์–ด๋‚˜์ง€๋งŒ ์šฉ๋Ÿ‰ ์—ญ์‹œ ์ปค์ง€๊ณ  ํฌ๊ธฐ๋ฅผ ํ™•๋Œ€ํ•˜๊ฑฐ๋‚˜ ์ถ•์†Œํ•˜๋ฉด ์ด๋ฏธ์ง€์— ์†์ƒ์ด ๊ฐ€ ๊นจ์ง ํ˜„์ƒ๊ณผ ์ด๋ฏธ์ง€ ํ’ˆ์งˆ ์ €ํ•˜๊ฐ€ ์ผ์–ด๋‚œ๋‹ค๋Š” ๋‹จ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฒกํ„ฐ(Vector) ๋ฐฉ์‹

๋ฒกํ„ฐ ๋ฐฉ์‹์€ ์ˆ˜ํ•™์‹์œผ๋กœ ์ด๋ฃจ์–ด์ง„ ์ , ์ง์„ , ๊ณก์„ , ๋‹ค๊ฐํ˜• ๋“ฑ ์ˆ˜ํ•™์  ํ•จ์ˆ˜๋กœ ์ด๋ฏธ์ง€๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค. ๋ฒกํ„ฐ ๋ฐฉ์‹์œผ๋กœ ํ‘œํ˜„๋œ ์ด๋ฏธ์ง€๋Š” ์ด๋ฏธ์ง€๋ฅผ ํ™•๋Œ€/์ถ•์†Œํ•˜์—ฌ๋„ ์ด๋ฏธ์ง€ ์†์ƒ์ด ์ผ์–ด๋‚˜์ง€ ์•Š๋Š”๋‹ค๋Š” ์žฅ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋ฒกํ„ฐ ๋ฐฉ์‹์€ ๋ณต์žกํ•œ ์ด๋ฏธ์ง€๋Š” ํ‘œํ˜„ํ•˜๊ธฐ ์–ด๋ ต๋‹ค๋Š” ๋‹จ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

๋น„ํŠธ๋งต ๋ฐฉ์‹๊ณผ ๋ฒกํ„ฐ ๋ฐฉ์‹ ๋น„๊ต

๋น„ํŠธ๋งต ๋ฒกํ„ฐ
์ •์˜ ํ”ฝ์…€์˜ ์ง‘ํ•ฉ์œผ๋กœ ์ด๋ฃจ์–ด์ง„ ์ด๋ฏธ์ง€ ์ˆ˜ํ•™์  ํ•จ์ˆ˜๋กœ ๊ตฌํ˜„๋œ ์ด๋ฏธ์ง€
ํ•ด์ƒ๋„ ํ™•๋Œ€, ์ถ•์†Œ ๋“ฑ ์ด๋ฏธ์ง€ ๋ณ€ํ˜• ์‹œ ์ด๋ฏธ์ง€ ์†์ƒ ๆœ‰ ๋ณ€ํ˜• ์‹œ ์ด๋ฏธ์ง€ ์†์ƒ ็„ก
ํ™œ์šฉ ์‚ฌ์ง„ ํ•ฉ์„ฑ, ๋ณด์ • ์ž‘์—…/๋””์ง€ํ„ธ ํŽ˜์ธํŒ…๊ณผ ๊ฐ™์€ ๋ณต์žกํ•œ ์ž‘์—… ์‹œ ์‚ฌ์šฉ
ex)์˜ํ™” ํฌ์Šคํ„ฐ ๋“ฑ
๊ฐ„๋‹จํ•œ ๋„ํ˜•์ด๋‚˜ ๋กœ๊ณ  ์ž‘์—…, ๋””์ž์ธ ์ž‘์—… ์‹œ ์‚ฌ์šฉ
ex)๋กœ๊ณ , ์‹ฌ๋ณผ, ์บ๋ฆญํ„ฐ ๋””์ž์ธ ๋“ฑ
์žฅ์  ์‚ฌ์‹ค์  ํ‘œํ˜„ ๊ฐ€๋Šฅ, ํ’๋ถ€ํ•œ ์ƒ‰๊ฐ, ํŠน์ˆ˜ํšจ๊ณผ ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅ ์ด๋ฏธ์ง€ ๋ณ€ํ˜• ์‹œ์—๋„ ์ด๋ฏธ์ง€๊ฐ€ ์†์ƒ๋˜์ง€ ์•Š์•„ ๋Œ€ํ˜• ์ธ์‡„๋ฌผ, ์›น ์‚ฌ์ดํŠธ ์ œ์ž‘ ๋“ฑ์— ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅ
๋‹จ์  ์ž์—ฐ์Šค๋Ÿฌ์šด ์ด๋ฏธ์ง€ ํ‘œํ˜„์ด ๊ฐ€๋Šฅํ•˜์ง€๋งŒ ๋ณ€ํ˜•์‹œ ์ด๋ฏธ์ง€๊ฐ€ ๊นจ์ง€๊ณ , ์ž‘์€ ์ด๋ฏธ์ง€๋Š” ํ‘œํ˜„์ด ์–ด๋ ค์›€ ๋‹ค์–‘ํ•œ ์ƒ‰์ƒ์ด๋‚˜ ๋ณต์žกํ•œ ์ด๋ฏธ์ง€๋Š” ํ‘œํ˜„์ด ์–ด๋ ค์›€
ํŒŒ์ผ ํ™•์žฅ์ž BMP, GIF JPG/JPEG, PNG, EXIF, HEIF AI, PDF, SVG
728x90
๋ฐ˜์‘ํ˜•

'CSS' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

์ด๋ฏธ์ง€ ํ‘œํ˜„  (3) 2022.08.22
Scss๋กœ ๊ฐ•์•„์ง€ ๋งŒ๋“ค๊ธฐ  (7) 2022.08.18
Scss  (5) 2022.08.18
๋ฏธ๋””์–ด ์ฟผ๋ฆฌ  (5) 2022.08.16
CSS ๊ธฐ๋ณธ ๊ทœ์น™  (4) 2022.08.15

๋Œ“๊ธ€