๊ธ€ ์ž‘์„ฑ์ž: ํƒ์‹œ ์šด์ „์‚ฌ
๋ฐ˜์‘ํ˜•

๐Ÿคฏ CSS ์ƒ‰์ƒ ์„ ์ •์„ ๋„์™€์ค„ ์‚ฌ์ดํŠธ ๋ชจ์Œ


๋“ค์–ด๊ฐ€๊ธฐ ์ „

์›น์‚ฌ์ดํŠธ ์ œ์ž‘์—์„œ ๊ฐ€์žฅ ๊ณ ๋ฏผ๋˜๋Š” ์ˆœ๊ฐ„ ์ค‘ํ•˜๋‚˜๊ฐ€ CSS(Cascading Style Sheets, ์—ฐ์†์  ์Šคํƒ€์ผ ์‹œํŠธ)์˜ ์ƒ‰์ƒ์„ ์„ ์ •ํ•˜๋Š” ์ˆœ๊ฐ„์ผ ๊ฒƒ์ด๋‹ค. ์ƒ‰์ƒ์— ๋”ฐ๋ผ ์›น์‚ฌ์ดํŠธ๊ฐ€ ํ’๊ธฐ๋Š” ์ด๋ฏธ์ง€๊ฐ€ ๋ฐ”๋€” ์ˆ˜๋„ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋‹ค๋ฅธ ์š”์†Œ๋“ค์ด ์ž˜ ๊ตด๋Ÿฌ๊ฐ„๋‹ค๊ณ ํ•ด๋„, ํ•œ ์ˆœ๊ฐ„ ๊ฑฐ๋ถ€๊ฐ์ด ๋“ค ์ˆ˜ ์žˆ๋Š” ๋ถ€๋ถ„์ด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ์œ ๋ช… ๋ธŒ๋žœ๋“œ๋“ค๋„ ๋ณธ์ธ๋“ค๋งŒ์˜ ๋กœ๊ณ  ์ƒ‰์ƒ์„ ํ†ตํ•ด ๋ธŒ๋žœ๋“œ์˜ ์ด๋ฏธ์ง€๋ฅผ ํ‘œํ˜„ํ•˜๊ณ  ์žˆ๋‹ค.


๋ธŒ๋žœ๋“œ๋ณ„ ์ƒ‰์ƒํ‘œ

๊ฐ€์‚ฐํ˜ผํ•ฉ

๊ฐ€์‚ฐ ํ˜ผํ•ฉ์ด๋ž€ ๋‹ค๋ฅธ ์ƒ‰์„ ์„ž์—ˆ์„ ๋•Œ ๋” ๋ฐ์€ ์ƒ‰์ด ๋˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ๋นจ๊ฐ•๊ณผ ์ดˆ๋ก์„ ์„ž์—ˆ์„ ๋•Œ, ๋‘ ๊ฐœ์˜ ์ปฌ๋Ÿฌ๋ณด๋‹ค ๋ฐ์€ ๋…ธ๋ž‘์ด ๋ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฐ ๋ฐฉ์‹์€ ์ฃผ๋กœ ๋น›์„ ์‚ฌ์šฉํ•˜์—ฌ ์ปฌ๋Ÿฌ๋ฅผ ํ‘œํ˜„ํ•˜๋Š” ์žฅ์น˜, ํ…”๋ ˆ๋น„์ „์ด๋‚˜ ์Šค๋งˆํŠธํฐ๊ฐ™์€ ๋””์Šคํ”Œ๋ ˆ์ด์— ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.


๊ฒฐ๋ก ์ ์œผ๋กœ ์ด๊ฒƒ์€ ๋น›์„ ์œ„ํ•œ ํ˜ผํ•ฉ์ด๊ธฐ ๋•Œ๋ฌธ์— ๋น›์˜ ์‚ผ์›์ƒ‰์ธ ๋นจ๊ฐ•(Red, R), ์ดˆ๋ก(Green, G), ํŒŒ๋ž‘(Blue, B)์„ ๊ธฐ๋ณธ์œผ๋กœ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์•ž์„œ ๋งํ•œ ๊ฒƒ ์ฒ˜๋Ÿผ, ๋‹ค๋ฅธ ์ƒ‰์ด ์„ž์ผ ์ˆ˜๋ก ๋” ๋ฐ์€ ์ƒ‰์ด ๋˜๊ณ , ์„ธ ๊ฐœ์˜ ์ƒ‰์ด ๋ชจ๋‘ ์„ž์ด๋ฉด ํ•˜์–€์ƒ‰์ด ๋ฉ๋‹ˆ๋‹ค.

๋น›์˜ ์‚ผ์›์ƒ‰ ๋นจ๊ฐ•, ์ดˆ๋ก, ํŒŒ๋ž‘

์›น ๋˜๋Š” UI(์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค) ๋””์ž์ธ ์ž‘์—…์„ ํ•  ๋•Œ์— ์ผ๋ฐ˜์ ์œผ๋กœ ์ด ์„ธ ๊ฐœ์˜ ์ƒ‰(RGB)์„ ๊ฐ ์ปฌ๋Ÿฌ ๋‹น 256๋‹จ๊ณ„์˜ ๋ฐ๊ธฐ ์ค‘ ํ•˜๋‚˜, ์ฆ‰ 0๋ถ€ํ„ฐ 255๊นŒ์ง€์˜ ๊ฐ’ ์ค‘ ํ•˜๋‚˜๋ฅผ ์„ ํƒํ•˜์—ฌ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฐ ๋ฐฉ์‹์„ ํ†ตํ•ด ์ˆ˜์ฒœ๋งŒ ๊ฐœ์˜ ์ƒ‰์„ ๋งŒ๋“ค๊ณ  ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


๋Œ€ํ‘œ์ ์ธ CSS์˜ ์ƒ‰์ƒ๊ฐ’ ํ‘œํ˜„์€ 16์ง„์ˆ˜(hexadecimal)๊ณผ rgba()์ž…๋‹ˆ๋‹ค.

16์ง„์ˆ˜ ์ƒ‰์ƒ๊ฐ’

16์ง„์ˆ˜๋Š” CSS ์ƒ‰์ƒ๊ฐ’ ์ค‘ ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ๊ฐ ์ƒ‰์ƒ์„ 16์ง„์ˆ˜๋กœ ์ž…๋ ฅํ•˜์—ฌ 00๋ถ€ํ„ฐ FF๊นŒ์ง€ ๊ฐ’์„ ์“ธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ˆ˜๊ฐ€ ์ž‘์„ ์ˆ˜๋ก ๋ฐ๊ธฐ๊ฐ€ ๋‚ฎ์Šต๋‹ˆ๋‹ค. ๊ฐ’์„ ์ž…๋ ฅํ•  ๋•Œ #๋กœ ์‹œ์ž‘ํ•˜๊ณ , ๋นจ๊ฐ•, ์ดˆ๋ก, ํŒŒ๋ž‘ ์ˆœ์œผ๋กœ ์ž…๋ ฅํ•ฉ๋‹ˆ๋‹ค. ์ด ๋•Œ ๊ฐ ๊ฐ’์€ ๋„์–ด์“ฐ๊ธฐ ์—†์ด ์—ฐ์†์œผ๋กœ ์ž…๋ ฅํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ๋ฐ์€ ์ฃผํ™ฉ์„ ํ‘œํ˜„ํ•˜๋ ค๋ฉด #FFBA00์œผ๋กœ ์ž…๋ ฅํ•ฉ๋‹ˆ๋‹ค.


rgba() ์ƒ‰์ƒ๊ฐ’

rgba() ์ƒ‰์ƒ๊ฐ’์€ red, green, blue ๊ทธ๋ฆฌ๊ณ  alpha์˜ ์•ž ๊ธ€์ž๋ฅผ ๋”ฐ์˜จ ์ƒ‰์ƒ๊ฐ’์ž…๋‹ˆ๋‹ค. ์ด๋ฆ„์—์„œ ์•Œ ์ˆ˜ ์žˆ๋“ฏ์ด ๊ด„ํ˜ธ ์•ˆ์— ๋นจ๊ฐ•, ์ดˆ๋ก, ํŒŒ๋ž‘, ์•ŒํŒŒ ์ˆœ์œผ๋กœ ์ž…๋ ฅํ•ฉ๋‹ˆ๋‹ค. 16์ง„์ˆ˜ ์ƒ‰์ƒ๊ฐ’์€ ๊ฐ ์ƒ‰์ƒ์„ 16์ง„์ˆ˜๋กœ ์ž…๋ ฅํ–ˆ๋‹ค๋ฉด, rgba() ์ƒ‰์ƒ๊ฐ’์€ ์šฐ๋ฆฌ๊ฐ€ ์ฃผ๋กœ ์‚ฌ์šฉํ•˜๋Š” 10์ง„์ˆ˜๋กœ ์ž…๋ ฅํ•ฉ๋‹ˆ๋‹ค. ๊ฐ ์ƒ‰์ƒ๋‹น 0๋ถ€ํ„ฐ 255๊นŒ์ง€ ๊ฐ’์„ ์“ธ ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์•ŒํŒŒ๋Š” ์ƒ‰์˜ ๋ถˆํˆฌ๋ช…๋„๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. 0๋ถ€ํ„ฐ 1๊นŒ์ง€์˜ ๊ฐ’์„ ์“ธ ์ˆ˜ ์žˆ๊ณ , ์ž‘์„ ์ˆ˜๋ก ํˆฌ๋ช…ํ•ด์ง‘๋‹ˆ๋‹ค. ๊ฐ ๊ฐ’์€ ์‰ผํ‘œ๋กœ ๊ตฌ๋ถ„ํ•˜๋ฉฐ, ์˜ˆ๋ฅผ ๋“ค์–ด 45% ํˆฌ๋ช…๋„์˜ ์ฃผํ™ฉ์„ ํ‘œํ˜„ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด rgba(255, 150, 0, 0.55)๋กœ ์ž…๋ ฅํ•ฉ๋‹ˆ๋‹ค. ์•ŒํŒŒ๋ฅผ ๊ผญ ์ž…๋ ฅํ•  ํ•„์š” ์—†์ด rgb() ์ƒ‰์ƒ๊ฐ’์œผ๋กœ๋„ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.


์ถ”์ฒœ ์‚ฌ์ดํŠธ

1. HTML Color Names

HTML Color Names

์šฐ์„  ์ด๋ฆ„์ด ์žˆ๋Š” ์ƒ‰์ƒ์„ ๋จผ์ € ๊ณ ๋ คํ•ด๋ด…์‹œ๋‹ค, ์ด๋ฆ„์ด ์žˆ๋Š” ์ƒ‰์ƒ์˜ ๊ฒฝ์šฐ ์‚ฌ์šฉ ๋นˆ๋„๋„ ๋งŽ๊ณ  ์›ฌ๋งŒํ•œ ๊ฒฝ์šฐ ์‚ฌ์šฉ ํ–ˆ์„ ๋•Œ ํฌ๊ฒŒ ๊ฑฐ๋ถ€๊ฐ์ด ์•ˆ๋“œ๋Š” ๊ฐ’๋“ค๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ์‚ฌ์ดํŠธ๋Š” w3school์— ์˜ฌ๋ผ์˜จ ์ด๋ฆ„์ด ์žˆ๋Š” HTML ์ƒ‰์ƒ ํ‘œ๋ฅผ ๋ชจ์•„๋†“์€ ํŽ˜์ด์ง€์ž…๋‹ˆ๋‹ค. 


2. Flat UI Colors ๐ŸŽจ

ํŠน์ • ๊ตญ๊ฐ€๊ฐ€ ์ƒ๊ฐ๋‚˜๋Š” ์ƒ‰ ๋ฐฐ์—ด์„ ์›ํ•œ ๋‹ค๋ฉด ์ด ๊ณณ์ด ์ œ๊ฒฉ์ž…๋‹ˆ๋‹ค. ๋ฏธ๊ตญ๋ถ€ํ„ฐ ์ค‘๊ตญ, ์ธ๋„ ์—ฌ๋Ÿฌ ๋‚˜๋ผ๊ฐ€ ์ƒ๊ฐ ๋‚˜๋Š” ๋“ฏํ•œ ์ƒ‰๋“ค์„ ๋ชจ์•„๋†“์€ ์‚ฌ์ดํŠธ์ž…๋‹ˆ๋‹ค. ํด๋ฆญ๋งŒ์œผ๋กœ ์ƒ‰์ƒ๊ฐ’์ด ๋ณต์‚ฌ๋˜๊ธฐ ๋•Œ๋ฌธ์— ๊ต‰์žฅํžˆ ๊ฐ„ํŽธํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


3. BrandColors

ํŠน์ • ๋ธŒ๋žœ๋“œ๋Š” ์–ด๋–ค ์ƒ‰์ƒ์„ ์‚ฌ์šฉํ•˜๋Š” ์ง€ ๊ถ๊ธˆํ•˜๋‹ค๋ฉด BrandColors์— ๊ฒ€์ƒ‰ํ•ด๋ด…์‹œ๋‹ค, ๊ฐ ๋ธŒ๋žœ๋“œ๋ณ„ ์ƒ‰์ƒํ‘œ๊ฐ€ ์•„์ฃผ ์ž์„ธํ•˜๊ฒŒ ๋‚˜์™€์žˆ๋‹ค. Flat UI Colors์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ํด๋ฆญ๋งŒ์œผ๋กœ ์ƒ‰์ƒ๊ฐ’์ด ๋ณต์‚ฌ๋˜์–ด ํŽธํ•˜๊ฒŒ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.


4. cssgradient.io

์‚ฌ์ดํŠธ์— ๊ทธ๋ผ๋ฐ์ด์…˜ ์ƒ‰์ƒ์ด ์žˆ๋‹ค๋ฉด ์ข€ ๋” ๋ฉ‹์ ธ๋ณด์ด๊ฒ ๋‹ค๊ณ  ์ƒ๊ฐํ•œ ์  ์žˆ๋‹ค๋ฉด ์ด ์‚ฌ์ดํŠธ๊ฐ€ ํฐ ๋„์›€์„ ์ค„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. cssgradient๋Š” ํฌํ† ์ƒต์ฒ˜๋Ÿผ ์—ฌ๋Ÿฌ ์ข…๋ฅ˜์˜ ๊ทธ๋ผ๋ฐ์ด์…˜ ์ฝ”๋“œ๋ฅผ ๋งŒ๋“ค๊ณ  ์‹œ๊ฐ์ ์œผ๋กœ ํ™•์ธํ•ด๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 

๋ฐ˜์‘ํ˜•