Tailwind CSS Mac Scrollbar v2.0

Compatible with Tailwind CSS v4 - CSS-first approach

Basic Mac Scrollbar (.mac-scrollbar)

๐ŸŒŸ ๊ธฐ๋ณธ Mac ์Šคํƒ€์ผ ์Šคํฌ๋กค๋ฐ”์ž…๋‹ˆ๋‹ค. ์•„๋ž˜ ๋‚ด์šฉ์„ ์Šคํฌ๋กคํ•ด๋ณด์„ธ์š”!

์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ๋“ค:

โ€ข ๋™์  ํด๋ž˜์Šค: mac-scrollbar-color-[#custom]

โ€ข ํฌ๊ธฐ ํด๋ž˜์Šค: mac-scrollbar-w-[12px], mac-scrollbar-h-[10px]

โ€ข y/x ์ „์šฉ ํด๋ž˜์Šค: .mac-scrollbar-y / .mac-scrollbar-x

์‹น์ด ๋˜๋ ค๋‹ˆ์™€, ์ด์ƒ ๋์— ์šฐ๋Š” ์ด๊ฒƒ์€ ์„ค๋ ˆ๋Š” ๋‘์†์„ ๋„ฃ๋Š” ๋•Œ๋ฌธ์ด๋‹ค. ์ˆ˜ ๊ทธ๋ฆผ์ž๋Š” ์—ด๋ฝ์˜ ๋“  ์‚ฌ๋ผ์ง€์ง€ ๊ทธ๋“ค์—๊ฒŒ ์œ„ํ•˜์—ฌ, ์•Š๋Š” ์ฐฌ๋ฏธ๋ฅผ ๋ง์ด๋‹ค. ์ธ๋„ํ•˜๊ฒ ๋‹ค๋Š” ๊ฐ™์ด, ์„ค์‚ฐ์—์„œ ์ด์„ฑ์€ ๋ฐ”์ด๋ฉฐ, ๊ฒƒ์ด๋‹ค. ๊ทธ๋“ค์˜ ๋”ฐ๋œปํ•œ ๋ฐ”์ด๋ฉฐ, ์›…๋Œ€ํ•œ ๊ฝƒ์ด ํ•˜์—ฌ๋„ ๊ฐ‘ ๊ณณ์ด ํ”ผ๋‹ค.

๊ฝƒ ํ”ผ์–ด๋‚˜๋Š” ๊ทธ๋“ค์€ ํ”ผ๋‹ค. ์‚ฐ์•ผ์— ์•„๋ฆ„๋‹ต๊ณ  ๋ฌด์—‡์„ ์šฐ๋ฆฌ ํ™ฉ๊ธˆ์‹œ๋Œ€์˜ ๋ชธ์ด ๊ณต์ž๋Š” ํ”ผ์–ด๋‚˜๊ธฐ ์–ผ์Œ ์ฒ ํ™˜ํ•˜์˜€๋Š”๊ฐ€? ์ฒญ์ถ˜์—์„œ๋งŒ ๋ฌด์—‡์„ ํ•˜์˜€์œผ๋ฉฐ, ๊ฒƒ์ด๋‹ค. ์ธ์ƒ์— ์ด์ƒ์€ ์ธ์ƒ์— ๋ณด๋Š” ํ”ผ์–ด๋‚˜๋Š” ์žˆ๋‹ค. ๋ˆˆ์ด ์—†์œผ๋ฉด, ๋ถ™์žก์•„ ์—†์œผ๋ฉด ์ฃผ๋ฉฐ, ์‚ฌ๋ง‰์ด๋‹ค.

๋•Œ์—, ํ’€์ด ์ด๊ฒƒ์€ ์•ˆ๊ณ , ์ƒˆ ์ธ์ƒ์— ๋ง์ด๋‹ค. ๊ทธ๋Ÿฌ๋ฏ€๋กœ ์ปค๋‹ค๋ž€ ์›…๋Œ€ํ•œ ์šฐ๋Š” ๋“ฃ๋Š”๋‹ค. ๊ฝƒ์ด ์ด์ƒ์˜ ๋งŒ์ฒœํ•˜์˜ ๋ฏธ๋ฌ˜ํ•œ ์ด์ƒ์€ ์žˆ์œผ๋žด? ์‚ด์•˜์œผ๋ฉฐ, ํ”ผ์— ๋†€์ด ํ”ผ๊ณ , ๊ณผ์‹ค์ด ์ด์ƒ์ด ์ „์ธ ๊ฐ™์ด ๋ด„๋ฐ”๋žŒ์ด๋‹ค.

๋“๋Š” ์‹œ๋“ค์–ด ๋‚™์›์„ ๋ฐ”๋กœ ๋“ค์–ด ์ฐฌ๋ฏธ๋ฅผ ์œ„ํ•˜์—ฌ ์ด๊ฒƒ์ด๋‹ค. ๋ณด๋‚ด๋Š” ์žˆ์œผ๋ฉฐ, ์†์—์„œ ์˜ค์ง ์“ธ์“ธํ•˜๋žด? ๋ชจ๋ž˜๋ฟ์ผ ๋™๋ ฅ์€ ํ˜„์ €ํ•˜๊ฒŒ ์ฒญ์ถ˜ ๊ทธ๋“ค์˜ ๊ธด์ง€๋ผ ๊ฒƒ์ด๋‹ค. ํ’€์ด ๋ฐ”์ด๋ฉฐ, ์žˆ์„ ์ธ์ƒ์„ ํ™ฉ๊ธˆ์‹œ๋Œ€๋ฅผ ํ™ฉ๊ธˆ์‹œ๋Œ€๋‹ค.

ํž˜์ฐจ๊ฒŒ ์˜จ๊ฐ– ๋๊นŒ์ง€ ๋ฐฉํ™ฉํ•˜์˜€์œผ๋ฉฐ, ์Šค๋ฉฐ๋“ค์–ด ๊ตฌํ•  ๊ตํ–ฅ์•…์ด๋‹ค. ๋์— ๋•Œ์—, ์šฐ๋ฆฌ์˜ ๊ฒƒ์ด๋‹ค. ์—†๋Š” ๊ฝƒ ์ปค๋‹ค๋ž€ ๊ตฌํ•˜์ง€ ๊ฒƒ์ด๋‹ค. ์—†๋Š” ์ฒœ๊ณ ์— ๋“ฃ๊ธฐ๋งŒ ๋ฐ”์ด๋ฉฐ, ๊ทธ๋“ค์˜ ์žˆ์œผ๋žด? ๋์— ๊ฒƒ์€ ์‹ถ์ด ๊ฒƒ์ด๋‹ค. ์ด ๊ฒƒ์€ ์ž‘๊ณ  ๋•Œ๋ฌธ์ด๋‹ค.

๋ถ™์žก์•„ ์ด ๊ทธ์™€ ๋‹๊ณ , ์ƒ๋ช…์„ ์ด์ƒ, ์นผ์ด๋‹ค. ํ• ์ง€๋ผ๋„ ํ–‰๋ณต์Šค๋Ÿฝ๊ณ  ๊ฐ€์Šด์— ์šฐ๋ฆฌ ๊ธฐ๊ด€๊ณผ ์ธ๊ฐ„์ด ๋“๋Š”๋‹ค. ๊ณ ํ–‰์„ ์–ผ๋งˆ๋‚˜ ์ด์ƒ ๊ฐ™์€ ๊ฒƒ์ด๋‹ค. ํŠธ๊ณ , ์ฐฌ๋ฏธ๋ฅผ ์ธ์ƒ์— ์‚ฐ์•ผ์— ์ฒ ํ™˜ํ•˜์˜€๋Š”๊ฐ€? ์–ผ๋งˆ๋‚˜ ๋ณด๋‚ด๋Š” ๋ฌผ๋ฐฉ์•„ ๊ฐ™์€ ์ฒญ์ถ˜์„ ๊ฐ€๋Š” ์ฒญ์ถ˜์˜ ๋•Œ๋ฌธ์ด๋‹ค.

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

์ธ๋„ํ•˜๊ฒ ๋‹ค๋Š” ๋ถ™์žก์•„ ๊ฐ™์ง€ ์ƒ์ƒํ•˜๋ฉฐ, ์œ„ํ•˜์—ฌ ํž˜์žˆ๋‹ค. ์ฐฉ๋ชฉํ•œ๋Š” ๊ณณ์œผ๋กœ ๊ฒƒ์€ ๋ด„๋ฐ”๋žŒ์ด๋‹ค. ๋ชฉ์ˆจ์„ ํ’€๋ฐญ์— ์•„๋‹ˆํ•œ ๋”ฐ๋œปํ•œ ๊ทธ๋“ค์€ ๊ฒƒ์€ ๊ฝƒ์ด ๊ฒƒ์ด๋‹ค. ์ƒ๋ช…์„ ์•„๋‹ˆํ•œ ๊ณณ์ด ์ด์ƒ์€ ๊ฒƒ์ด๋‹ค. ๋”ฐ๋œปํ•œ ํ–‰๋ณต์Šค๋Ÿฝ๊ณ  ์ฒญ์ถ˜์˜ ์ฐฉ๋ชฉํ•œ๋Š” ์—ญ์‚ฌ๋ฅผ ํ’ˆ์—ˆ๊ธฐ ๊ฒƒ์ด๋‹ค.

๊ฐ‘ ๋ด„๋‚ ์˜ ๋ผˆ ์žˆ์œผ๋žด? ์ฒœ์ž๋งŒํ™์ด ๊ตฌํ•˜์ง€ ๋‹๊ณ , ๊ณต์ž๋Š” ์ธ๋„ํ•˜๊ฒ ๋‹ค๋Š” ๊ณง ์‚ฌ๋ž‘์˜ ์ง€ํ˜œ๋Š” ์•ฝ๋™ํ•˜๋‹ค. ๊ฐ™์œผ๋ฉฐ, ๋ฌดํ•œํ•œ ํ”ผ๊ณ , ๊ฐ™์ง€ ์ด์ƒ์˜ ์œ„ํ•˜์—ฌ, ์ฃผ๋ฉฐ, ํ”ผ๋ถ€๊ฐ€ ํ”ผ๊ณ  ๋ฟ์ด๋‹ค. ์šฉ๊ธฐ๊ฐ€ ํฌ๊ณ  ์ธ๊ฐ„์ด ์šฐ๋Š” ๊ฝƒ์ด ์ฐฉ๋ชฉํ•œ๋Š” ๊ฝƒ์ด ์‚ฌ๋ง‰์ด๋‹ค.

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

๐Ÿ’ก ์Šคํฌ๋กค๋ฐ” ํŠน์ง•

  • ํˆฌ๋ช…ํ•œ ๋ฐฐ๊ฒฝ์œผ๋กœ ๊น”๋”ํ•œ ๋””์ž์ธ
  • ๋‘ฅ๊ทผ ๋ชจ์„œ๋ฆฌ๋กœ ๋ถ€๋“œ๋Ÿฌ์šด ๋А๋‚Œ
  • ์ ์ ˆํ•œ ํฌ๊ธฐ(6.4px)๋กœ ๋ฐฉํ•ด๋ฐ›์ง€ ์•Š์Œ
  • ๋‹คํฌ ๋ชจ๋“œ ์ž๋™ ์ง€์›

์—ด๋ฝ์˜ ์œ„ํ•˜์—ฌ ๊ทธ๋“ค์˜ ๋”ฐ๋œปํ•œ ์ฒœ์ง€๋Š” ์ด์„ฑ์€ ์œ„ํ•˜์—ฌ์„œ ์—†๋Š” ๊ฐ„์— ๋ณด๋ผ. ์ƒˆ ์†์—์„œ ๋…ธ๋…„์—๊ฒŒ์„œ ๋Šฅํžˆ ์‚ฌ๋ž‘์˜ ํ”ผ๊ณ , ํ’ˆ์œผ๋ฉฐ, ๋ญ‡ ์ธ์ƒ์„ ์•„๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ์Šคํฌ๋กค๋ฐ”์˜ ๋งˆ์ง€๋ง‰ ์„น์…˜์ž…๋‹ˆ๋‹ค. ๐ŸŽฏ

Vertical Scrollbar with Animation (.mac-scrollbar-y)

โœจ ํ˜ธ๋ฒ„ ์‹œ ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์žˆ๋Š” ์„ธ๋กœ ์Šคํฌ๋กค๋ฐ”์ž…๋‹ˆ๋‹ค. ์˜ค๋ฅธ์ชฝ์— ๋งˆ์šฐ์Šค๋ฅผ ์˜ฌ๋ ค๋ณด์„ธ์š”!

๐ŸŽญ ์• ๋‹ˆ๋ฉ”์ด์…˜ ํšจ๊ณผ

์Šคํฌ๋กค๋ฐ” ์˜์—ญ์— ๋งˆ์šฐ์Šค๋ฅผ ์˜ฌ๋ฆฌ๋ฉด ์˜ค๋ฒ„๋ ˆ์ด๊ฐ€ ์‚ฌ๋ผ์ง€๋ฉฐ ์Šคํฌ๋กค๋ฐ”๊ฐ€ ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค.

์‹น์ด ๋˜๋ ค๋‹ˆ์™€, ์ด์ƒ ๋์— ์šฐ๋Š” ์ด๊ฒƒ์€ ์„ค๋ ˆ๋Š” ๋‘์†์„ ๋„ฃ๋Š” ๋•Œ๋ฌธ์ด๋‹ค. ์ˆ˜ ๊ทธ๋ฆผ์ž๋Š” ์—ด๋ฝ์˜ ๋“  ์‚ฌ๋ผ์ง€์ง€ ๊ทธ๋“ค์—๊ฒŒ ์œ„ํ•˜์—ฌ, ์•Š๋Š” ์ฐฌ๋ฏธ๋ฅผ ๋ง์ด๋‹ค. ์ธ๋„ํ•˜๊ฒ ๋‹ค๋Š” ๊ฐ™์ด, ์„ค์‚ฐ์—์„œ ์ด์„ฑ์€ ๋ฐ”์ด๋ฉฐ, ๊ฒƒ์ด๋‹ค.

ํž˜์ฐจ๊ฒŒ ์˜จ๊ฐ– ๋๊นŒ์ง€ ๋ฐฉํ™ฉํ•˜์˜€์œผ๋ฉฐ, ์Šค๋ฉฐ๋“ค์–ด ๊ตฌํ•  ๊ตํ–ฅ์•…์ด๋‹ค. ๋์— ๋•Œ์—, ์šฐ๋ฆฌ์˜ ๊ฒƒ์ด๋‹ค. ์—†๋Š” ๊ฝƒ ์ปค๋‹ค๋ž€ ๊ตฌํ•˜์ง€ ๊ฒƒ์ด๋‹ค. ์—†๋Š” ์ฒœ๊ณ ์— ๋“ฃ๊ธฐ๋งŒ ๋ฐ”์ด๋ฉฐ, ๊ทธ๋“ค์˜ ์žˆ์œผ๋žด? ๋์— ๊ฒƒ์€ ์‹ถ์ด ๊ฒƒ์ด๋‹ค. ์ด ๊ฒƒ์€ ์ž‘๊ณ  ๋•Œ๋ฌธ์ด๋‹ค.

ํŠธ๊ณ , ์ฐฌ๋ฏธ๋ฅผ ์ธ์ƒ์— ์‚ฐ์•ผ์— ์ฒ ํ™˜ํ•˜์˜€๋Š”๊ฐ€? ์–ผ๋งˆ๋‚˜ ๋ณด๋‚ด๋Š” ๋ฌผ๋ฐฉ์•„ ๊ฐ™์€ ์ฒญ์ถ˜์„ ๊ฐ€๋Š” ์ฒญ์ถ˜์˜ ๋•Œ๋ฌธ์ด๋‹ค. ์ฒญ์ถ˜์˜ ์–ผ์Œ์ด ์žˆ๋Š” ์•„๋‹ˆ๋‹ค. ๋™๋ ฅ์€ ํ’๋ถ€ํ•˜๊ฒŒ ๋ชฉ์ˆจ์„ ์ธ์ƒ์— ์žˆ๋Š” ์ด ๊ทธ๋Ÿฌ๋ฏ€๋กœ ๋ณด์ด๋Š” ๊ฐ€๋Š” ์‚ฌ๋ง‰์ด๋‹ค.

์ƒ๋ช…์„ ์•„๋‹ˆํ•œ ๊ณณ์ด ์ด์ƒ์€ ๊ฒƒ์ด๋‹ค. ๋”ฐ๋œปํ•œ ํ–‰๋ณต์Šค๋Ÿฝ๊ณ  ์ฒญ์ถ˜์˜ ์ฐฉ๋ชฉํ•œ๋Š” ์—ญ์‚ฌ๋ฅผ ํ’ˆ์—ˆ๊ธฐ ๊ฒƒ์ด๋‹ค. ๊ฐ‘ ๋ด„๋‚ ์˜ ๋ผˆ ์žˆ์œผ๋žด? ์ฒœ์ž๋งŒํ™์ด ๊ตฌํ•˜์ง€ ๋‹๊ณ , ๊ณต์ž๋Š” ์ธ๋„ํ•˜๊ฒ ๋‹ค๋Š” ๊ณง ์‚ฌ๋ž‘์˜ ์ง€ํ˜œ๋Š” ์•ฝ๋™ํ•˜๋‹ค.

์ƒˆ ์†์—์„œ ๋…ธ๋…„์—๊ฒŒ์„œ ๋Šฅํžˆ ์‚ฌ๋ž‘์˜ ํ”ผ๊ณ , ํ’ˆ์œผ๋ฉฐ, ๋ญ‡ ์ธ์ƒ์„ ์•„๋‹ˆ๋‹ค. ๊ฝƒ ์ฒญ์ถ˜์˜ ํ”ผ์— ๊ฝƒ์ด ๋Œ€๊ณ , ์›๋Œ€ํ•˜๊ณ , ๊ตฌํ•˜์ง€ ํฌ๊ณ  ํ’€์ด ๋ด„๋ฐ”๋žŒ์ด๋‹ค. ํŠผํŠผํ•˜๋ฉฐ, ๋ชปํ•  ๋“๋Š” ๊ทธ๋“ค์˜ ๋“๋Š” ํ•˜์˜€์œผ๋ฉฐ, ๋ฐ”์ด๋ฉฐ, ์‹ฌ์žฅ์€ ์šด๋‹ค.

๋‘์†์„ ์žˆ์Œ์œผ๋กœ์จ ์ธ๊ฐ„์— ๋œจ๊ฑฐ์šด์ง€๋ผ, ์•„๋‹ˆํ•œ ์ด์ƒ์€ ๋ง์ด๋‹ค. ํ”ผ๋Š” ๊ฒƒ์€ ์˜๋ฝ๊ณผ ๋“๋Š”๋‹ค. ์ธ๊ฐ„์— ๋Œ€ํ•œ ๊ฐ™์ด, ์ฒญ์ถ˜์„ ๋ด„๋ฐ”๋žŒ์„ ๋‚™์›์„ ํ•˜์˜€์œผ๋ฉฐ, ๊ตํ–ฅ์•…์ด๋‹ค. ๊ตฐ์˜๊ณผ ์œ ์†Œ๋…„์—๊ฒŒ์„œ ์ด์ƒ์˜ ๊ฒƒ์ด๋‹ค.

๋ณด๋ผ, ๋ฐฉ์ง€ํ•˜๋Š” ๊ฐ€์Šด์ด ๋ถ€ํŒจ๋ฟ์ด๋‹ค. ์ธ๊ฐ„์— ๊ฐ™์ด ๋๊นŒ์ง€ ๊ทธ๋“ค์€ ๋ฌด์—‡์„ ๊ธฐ์˜๋ฉฐ, ์žˆ๋Š”๊ฐ€? ์•ˆ๊ณ , ๊ตฌํ•˜๊ธฐ ๊ท€๋Š” ๋”ฐ๋œปํ•œ ์ด์ƒ์€ ๋”ฐ๋œปํ•œ ํ”ผ๊ณ , ๊ตฌํ•˜์ง€ ์ธ์ƒ์˜ ์•„๋ฆ„๋‹ค์šฐ๋ƒ? ํŠผํŠผํ•˜๋ฉฐ, ๋“๋Š” ํƒ€์˜ค๋ฅด๊ณ  ๋ฐฉํ™ฉํ•˜์˜€์œผ๋ฉฐ.

์žˆ์Œ์œผ๋กœ์จ ์„ค๋ ˆ๋Š” ์ด์ƒ์˜ ๊ฐ™์ด ๊ณผ์‹ค์ด ์ด๊ฒƒ์ด๋‹ค. ์ฐฌ๋ฏธ๋ฅผ ๋ณด๋‚ด๋Š” ๋“๋Š” ํ•˜๋Š” ์•„๋ฆ„๋‹ค์šฐ๋ƒ? ๊ทธ๋“ค์€ ๋‹๊ณ , ์ฒญ์ถ˜ ์ฒœ์ž๋งŒํ™์ด ๋ถ€ํŒจ๋ฟ์ด๋‹ค. ์œ ์†Œ๋…„์—๊ฒŒ์„œ ๋ชธ์ด ์—ด๋ฝ์˜ ๋”์šด์ง€๋ผ ํ’€์ด ๊ธธ์ง€ ๊ฒƒ์ด๋‹ค.

๐ŸŽฏ ๊ตฌํ˜„ ์„ธ๋ถ€์‚ฌํ•ญ

  • CSS ::after ๊ฐ€์ƒ ์š”์†Œ๋กœ ์˜ค๋ฒ„๋ ˆ์ด ๊ตฌํ˜„
  • transition: all 0.5s๋กœ ๋ถ€๋“œ๋Ÿฌ์šด ํšจ๊ณผ
  • position: relative๋กœ ์˜ค๋ฒ„๋ ˆ์ด ์œ„์น˜ ์กฐ์ •

์†Œ๋ฆฌ๋‹ค.์ด๊ฒƒ์€ ์ด ์˜ˆ์ˆ˜๋Š” ์ฒญ์ถ˜์ด ์ธ๊ฐ„์˜ ๊ฐ™์ด ๊ฒƒ์ด๋‹ค. ์• ๋‹ˆ๋ฉ”์ด์…˜ ์Šคํฌ๋กค๋ฐ”์˜ ๋์ž…๋‹ˆ๋‹ค! ๐ŸŽ‰

Horizontal Scrollbar with Animation (.mac-scrollbar-x)

์ด๊ฒƒ์€ ๊ฐ€๋กœ ์Šคํฌ๋กค์„ ํ…Œ์ŠคํŠธํ•˜๊ธฐ ์œ„ํ•œ ๊ธด ํ…์ŠคํŠธ์ž…๋‹ˆ๋‹ค. ๊ฐ€๋กœ ์Šคํฌ๋กค๋ฐ”๊ฐ€ ๋‚˜ํƒ€๋‚˜๊ณ  ํ˜ธ๋ฒ„ ์‹œ ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ๋™์ž‘ํ•˜๋Š”์ง€ ํ™•์ธํ•ด๋ณด์„ธ์š”.

ํž˜์ฐจ๊ฒŒ ์˜จ๊ฐ– ๋๊นŒ์ง€ ๋ฐฉํ™ฉํ•˜์˜€์œผ๋ฉฐ, ์Šค๋ฉฐ๋“ค์–ด ๊ตฌํ•  ๊ตํ–ฅ์•…์ด๋‹ค. ๋์— ๋•Œ์—, ์šฐ๋ฆฌ์˜ ๊ฒƒ์ด๋‹ค. ์—†๋Š” ๊ฝƒ ์ปค๋‹ค๋ž€ ๊ตฌํ•˜์ง€ ๊ฒƒ์ด๋‹ค.

ํŠธ๊ณ , ์ฐฌ๋ฏธ๋ฅผ ์ธ์ƒ์— ์‚ฐ์•ผ์— ์ฒ ํ™˜ํ•˜์˜€๋Š”๊ฐ€? ์–ผ๋งˆ๋‚˜ ๋ณด๋‚ด๋Š” ๋ฌผ๋ฐฉ์•„ ๊ฐ™์€ ์ฒญ์ถ˜์„ ๊ฐ€๋Š” ์ฒญ์ถ˜์˜ ๋•Œ๋ฌธ์ด๋‹ค.

๐Ÿ“ Size & Color (mac-scrollbar-w-[12px] + mac-scrollbar-color-[#1d4ed8])

์ž„์˜๊ฐ’์œผ๋กœ ์‚ฌ์ด์ฆˆ ์ง€์ •:

โ€ข mac-scrollbar-w-[<length>]

โ€ข mac-scrollbar-h-[<length>]

์ด ์Šคํฌ๋กค๋ฐ”๋Š” 12px ๋„ˆ๋น„์˜ ํŒŒ๋ž€์ƒ‰(#1d4ed8)์œผ๋กœ ์„ค์ •ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ž„์˜๊ฐ’์œผ๋กœ ์ž์œ ๋กญ๊ฒŒ ๋ณ€๊ฒฝ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

๋“๋Š” ์‹œ๋“ค์–ด ๋‚™์›์„ ๋ฐ”๋กœ ๋“ค์–ด ์ฐฌ๋ฏธ๋ฅผ ์œ„ํ•˜์—ฌ ์ด๊ฒƒ์ด๋‹ค. ๋ณด๋‚ด๋Š” ์žˆ์œผ๋ฉฐ, ์†์—์„œ ์˜ค์ง ์“ธ์“ธํ•˜๋žด? ๋ชจ๋ž˜๋ฟ์ผ ๋™๋ ฅ์€ ํ˜„์ €ํ•˜๊ฒŒ ์ฒญ์ถ˜ ๊ทธ๋“ค์˜ ๊ธด์ง€๋ผ ๊ฒƒ์ด๋‹ค.

ํ’€์ด ๋ฐ”์ด๋ฉฐ, ์žˆ์„ ์ธ์ƒ์„ ํ™ฉ๊ธˆ์‹œ๋Œ€๋ฅผ ํ™ฉ๊ธˆ์‹œ๋Œ€๋‹ค. ๊ทธ๋Ÿฌ๋ฏ€๋กœ ๋“๋Š” ์ธ๋ฅ˜์˜ ์ด์ƒ์€ ์‚ฌ๋ง‰์ด๋‹ค. ํž˜์ฐจ๊ฒŒ ์˜จ๊ฐ– ๋๊นŒ์ง€ ๋ฐฉํ™ฉํ•˜์˜€์œผ๋ฉฐ, ์Šค๋ฉฐ๋“ค์–ด ๊ตฌํ•  ๊ตํ–ฅ์•…์ด๋‹ค.

Size customization working! ๐Ÿ“

๐Ÿ”ต Blue Scrollbar (mac-scrollbar-color-sky-500)

ํŒŒ๋ž€์ƒ‰ ์Šคํฌ๋กค๋ฐ”๋Š” ์‹ ๋ขฐ๊ฐ๊ณผ ์ „๋ฌธ์„ฑ์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.

ํŒŒ๋ž€์ƒ‰ ์Šคํฌ๋กค๋ฐ” ์˜ˆ์ œ์ž…๋‹ˆ๋‹ค. ์ƒ‰์ƒ์ด ์ ์šฉ๋œ ์Šคํฌ๋กค๋ฐ”๋ฅผ ํ™•์ธํ•ด๋ณด์„ธ์š”. ์ด ์Šคํฌ๋กค๋ฐ”๋Š” rgb(59 130 246) ์ƒ‰์ƒ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

๋“๋Š” ์‹œ๋“ค์–ด ๋‚™์›์„ ๋ฐ”๋กœ ๋“ค์–ด ์ฐฌ๋ฏธ๋ฅผ ์œ„ํ•˜์—ฌ ์ด๊ฒƒ์ด๋‹ค. ๋ณด๋‚ด๋Š” ์žˆ์œผ๋ฉฐ, ์†์—์„œ ์˜ค์ง ์“ธ์“ธํ•˜๋žด? ๋ชจ๋ž˜๋ฟ์ผ ๋™๋ ฅ์€ ํ˜„์ €ํ•˜๊ฒŒ ์ฒญ์ถ˜ ๊ทธ๋“ค์˜ ๊ธด์ง€๋ผ ๊ฒƒ์ด๋‹ค.

ํ’€์ด ๋ฐ”์ด๋ฉฐ, ์žˆ์„ ์ธ์ƒ์„ ํ™ฉ๊ธˆ์‹œ๋Œ€๋ฅผ ํ™ฉ๊ธˆ์‹œ๋Œ€๋‹ค. ๊ทธ๋Ÿฌ๋ฏ€๋กœ ๋“๋Š” ์ธ๋ฅ˜์˜ ์ด์ƒ์€ ์‚ฌ๋ง‰์ด๋‹ค. ํž˜์ฐจ๊ฒŒ ์˜จ๊ฐ– ๋๊นŒ์ง€ ๋ฐฉํ™ฉํ•˜์˜€์œผ๋ฉฐ, ์Šค๋ฉฐ๋“ค์–ด ๊ตฌํ•  ๊ตํ–ฅ์•ก์ด๋‹ค.

๋์— ๋•Œ์—, ์šฐ๋ฆฌ์˜ ๊ฒƒ์ด๋‹ค. ์—†๋Š” ๊ฝƒ ์ปค๋‹ค๋ž€ ๊ตฌํ•˜์ง€ ๊ฒƒ์ด๋‹ค. ์—†๋Š” ์ฒœ๊ณ ์— ๋“ฃ๊ธฐ๋งŒ ๋ฐ”์ด๋ฉฐ, ๊ทธ๋“ค์˜ ์žˆ์œผ๋žด? ๋์— ๊ฒƒ์€ ์‹ถ์ด ๊ฒƒ์ด๋‹ค.

Blue scrollbar complete! ๐Ÿ’™

๐Ÿ”ด Red Scrollbar (mac-scrollbar-color-rose-500)

๋นจ๊ฐ„์ƒ‰ ์Šคํฌ๋กค๋ฐ”๋Š” ์ค‘์š”์„ฑ๊ณผ ๊ธด๊ธ‰ํ•จ์„ ๊ฐ•์กฐํ•ฉ๋‹ˆ๋‹ค.

๋นจ๊ฐ„์ƒ‰ ์Šคํฌ๋กค๋ฐ” ์˜ˆ์ œ์ž…๋‹ˆ๋‹ค. ์ƒ‰์ƒ์ด ์ ์šฉ๋œ ์Šคํฌ๋กค๋ฐ”๋ฅผ ํ™•์ธํ•ด๋ณด์„ธ์š”. ์ด ์Šคํฌ๋กค๋ฐ”๋Š” rgb(239 68 68) ์ƒ‰์ƒ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

๋ชจ๋ž˜๋ฟ์ผ ๋™๋ ฅ์€ ํ˜„์ €ํ•˜๊ฒŒ ์ฒญ์ถ˜ ๊ทธ๋“ค์˜ ๊ธด์ง€๋ผ ๊ฒƒ์ด๋‹ค. ํ’€์ด ๋ฐ”์ด๋ฉฐ, ์žˆ์„ ์ธ์ƒ์„ ํ™ฉ๊ธˆ์‹œ๋Œ€๋ฅผ ํ™ฉ๊ธˆ์‹œ๋Œ€๋‹ค. ๊ทธ๋Ÿฌ๋ฏ€๋กœ ๋“๋Š” ์ธ๋ฅ˜์˜ ์ด์ƒ์€ ์‚ฌ๋ง‰์ด๋‹ค.

์ด ๊ฒƒ์€ ์ž‘๊ณ  ๋•Œ๋ฌธ์ด๋‹ค. ๋ถ™์žก์•„ ์ด ๊ทธ์™€ ๋‹๊ณ , ์ƒ๋ช…์„ ์ด์ƒ, ์นผ์ด๋‹ค. ํ• ์ง€๋ผ๋„ ํ–‰๋ณต์Šค๋Ÿฝ๊ณ  ๊ฐ€์Šด์— ์šฐ๋ฆฌ ๊ธฐ๊ด€๊ณผ ์ธ๊ฐ„์ด ๋“๋Š”๋‹ค.

๊ณ ํ–‰์„ ์–ผ๋งˆ๋‚˜ ์ด์ƒ ๊ฐ™์€ ๊ฒƒ์ด๋‹ค. ํŠธ๊ณ , ์ฐฌ๋ฏธ๋ฅผ ์ธ์ƒ์— ์‚ฐ์•ผ์— ์ฒ ํ™˜ํ•˜์˜€๋Š”๊ฐ€? ์–ผ๋งˆ๋‚˜ ๋ณด๋‚ด๋Š” ๋ฌผ๋ฐฉ์•„ ๊ฐ™์€ ์ฒญ์ถ˜์„ ๊ฐ€๋Š” ์ฒญ์ถ˜์˜ ๋•Œ๋ฌธ์ด๋‹ค.

Red scrollbar complete! โค๏ธ

๐ŸŸข Green (mac-scrollbar-color-emerald-500)

์นœํ™˜๊ฒฝ์ ์ด๊ณ  ๊ธ์ •์ ์ธ ๋А๋‚Œ

์ƒˆ์‹น์ฒ˜๋Ÿผ ์ƒ๊ธฐ์žˆ๋Š” ๋…น์ƒ‰ ์Šคํฌ๋กค๋ฐ”์ž…๋‹ˆ๋‹ค. ์„ฑ์žฅ๊ณผ ์ž์—ฐ์„ ์ƒ์ง•ํ•˜๋Š” ์ƒ‰์ƒ์œผ๋กœ ์‚ฌ์šฉ์ž์—๊ฒŒ ์•ˆ์ •๊ฐ์„ ์ค๋‹ˆ๋‹ค.

์‹น์ด ๋˜๋ ค๋‹ˆ์™€, ์ด์ƒ ๋์— ์šฐ๋Š” ์ด๊ฒƒ์€ ์„ค๋ ˆ๋Š” ๋‘์†์„ ๋„ฃ๋Š” ๋•Œ๋ฌธ์ด๋‹ค.

์ˆ˜ ๊ทธ๋ฆผ์ž๋Š” ์—ด๋ฝ์˜ ๋“  ์‚ฌ๋ผ์ง€์ง€ ๊ทธ๋“ค์—๊ฒŒ ์œ„ํ•˜์—ฌ, ์•Š๋Š” ์ฐฌ๋ฏธ๋ฅผ ๋ง์ด๋‹ค.

์ธ๋„ํ•˜๊ฒ ๋‹ค๋Š” ๊ฐ™์ด, ์„ค์‚ฐ์—์„œ ์ด์„ฑ์€ ๋ฐ”์ด๋ฉฐ, ๊ฒƒ์ด๋‹ค. ๊ทธ๋“ค์˜ ๋”ฐ๋œปํ•œ ๋ฐ”์ด๋ฉฐ.

Green complete! ๐ŸŒฑ

๐ŸŸฃ Purple (mac-scrollbar-color-[#a855f7])

์ฐฝ์˜์ ์ด๊ณ  ์šฐ์•„ํ•œ ๋А๋‚Œ

๊ณ ๊ธ‰์Šค๋Ÿฌ์šด ๋ณด๋ผ์ƒ‰ ์Šคํฌ๋กค๋ฐ”์ž…๋‹ˆ๋‹ค. ์ฐฝ์˜์„ฑ๊ณผ ์‹ ๋น„๋กœ์›€์„ ๋‚˜ํƒ€๋‚ด๋Š” ์ƒ‰์ƒ์ž…๋‹ˆ๋‹ค.

์›…๋Œ€ํ•œ ๊ฝƒ์ด ํ•˜์—ฌ๋„ ๊ฐ‘ ๊ณณ์ด ํ”ผ๋‹ค. ๊ฝƒ ํ”ผ์–ด๋‚˜๋Š” ๊ทธ๋“ค์€ ํ”ผ๋‹ค.

์‚ฐ์•ผ์— ์•„๋ฆ„๋‹ต๊ณ  ๋ฌด์—‡์„ ์šฐ๋ฆฌ ํ™ฉ๊ธˆ์‹œ๋Œ€์˜ ๋ชธ์ด ๊ณต์ž๋Š” ํ”ผ์–ด๋‚˜๊ธฐ ์–ผ์Œ.

์ฒ ํ™˜ํ•˜์˜€๋Š”๊ฐ€? ์ฒญ์ถ˜์—์„œ๋งŒ ๋ฌด์—‡์„ ํ•˜์˜€์œผ๋ฉฐ, ๊ฒƒ์ด๋‹ค. ์ธ์ƒ์— ์ด์ƒ์€.

Purple complete! ๐Ÿ’œ

โš™๏ธ New Features (mac-scrollbar-h-[8px])

์ž„์˜๊ฐ’ ์˜ˆ์‹œ:

  • mac-scrollbar-h-[8px] - 8px ์„ธ๋กœ ์Šคํฌ๋กค๋ฐ”
  • mac-scrollbar-color-[rgba(var(--tw-mac-scrollbar-text),0.6)] - ํ…Œ๋งˆ ์ƒ‰์ƒ ์ž๋™ ๋งค์นญ

์ธ์ƒ์— ๋ณด๋Š” ํ”ผ์–ด๋‚˜๋Š” ์žˆ๋‹ค. ๋ˆˆ์ด ์—†์œผ๋ฉด, ๋ถ™์žก์•„ ์—†์œผ๋ฉด ์ฃผ๋ฉฐ, ์‚ฌ๋ง‰์ด๋‹ค.

๊ทธ๋“ค์€ ๊ทธ๋“ค์—๊ฒŒ ์ธ๋ฅ˜์˜ ํ”ผ์–ด๋‚˜๊ธฐ ์œ„ํ•˜์—ฌ ๊ตฌํ•˜๊ธฐ ๊ฐ€์ง€์— ๋“๋Š”๋‹ค.

๋•Œ์—, ํ’€์ด ์ด๊ฒƒ์€ ์•ˆ๊ณ , ์ƒˆ ์ธ์ƒ์— ๋ง์ด๋‹ค. ๊ทธ๋Ÿฌ๋ฏ€๋กœ ์ปค๋‹ค๊ฐ„.

New features working! โœจ

๐ŸŒŠ Sky 500 (theme token)

mac-scrollbar-color-sky-500

Tailwind ๊ธฐ๋ณธ ์ƒ‰์ƒ ํ† ํฐ์„ ๊ทธ๋Œ€๋กœ ์‚ฌ์šฉํ•œ ์˜ˆ์‹œ์ž…๋‹ˆ๋‹ค.

๊ธธ์ด๋ฅผ ๋Š˜๋ ค ์Šคํฌ๋กค์„ ์œ ๋„ํ•ฉ๋‹ˆ๋‹ค. ํ•˜๋Š˜์ƒ‰์€ ์•ˆ์ •๊ฐ์„ ์ฃผ๋Š” ์ƒ‰์ƒ์ž…๋‹ˆ๋‹ค.

ํ•˜๋Š˜์„ ๋‹ฎ์€ ์ƒ‰์ƒ์œผ๋กœ ๊ธด ์ฝ˜ํ…์ธ ๋ฅผ ์ฝ์–ด๋ณด์„ธ์š”.

๐ŸŒน Rose 500 (theme token)

mac-scrollbar-color-rose-500

ํ…Œ๋งˆ ์ƒ‰์ƒ ํ† ํฐ์ด ์ •์ƒ์ ์œผ๋กœ ๋งคํ•‘๋˜๋Š”์ง€ ํ™•์ธํ•˜์„ธ์š”.

์žฅ๋ฏธ๋น› ํ…์ŠคํŠธ๊ฐ€ ํ•œ ์ค„ ๋” ์ถ”๊ฐ€๋˜์–ด ์Šคํฌ๋กค๋ฐ”๊ฐ€ ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค.

๊ฐ์„ฑ์„ ๋”ํ•ด์ฃผ๋Š” ์žฅ๋ฏธ์ƒ‰ ์Šคํฌ๋กค๋ฐ”์ž…๋‹ˆ๋‹ค.

๐ŸŒŸ Amber 500 (theme token)

mac-scrollbar-color-amber-500

ํ† ํฐ ๊ธฐ๋ฐ˜ ์ƒ‰์ƒ๋„ ์ž„์˜๊ฐ’ ํด๋ž˜์Šค์ฒ˜๋Ÿผ ์ ์šฉ๋ฉ๋‹ˆ๋‹ค.

๋…ธ๋ž€๋น› ์•ฐ๋ฒ„ ์ปฌ๋Ÿฌ๋กœ ์Šคํฌ๋กค ์ฝ˜ํ…์ธ ๋ฅผ ๊ฐ•์กฐํ•ฉ๋‹ˆ๋‹ค.

์กฐ๊ธˆ ๋” ๊ธด ํ…์ŠคํŠธ๋ฅผ ๋„ฃ์–ด ์Šคํฌ๋กค ์ƒํƒœ๋ฅผ ํ™•์ธํ•ด๋ณด์„ธ์š”.

๐Ÿ’– Deep Pink (mac-scrollbar-color-[#ff1493])

Hex ์ƒ‰์ƒ ๊ฐ’: mac-scrollbar-color-[#ff1493]

16์ง„์ˆ˜ ์ƒ‰์ƒ ์ฝ”๋“œ๋ฅผ ์ง์ ‘ ์‚ฌ์šฉํ•œ ์˜ˆ์ œ์ž…๋‹ˆ๋‹ค.

๋“๋Š” ์‹œ๋“ค์–ด ๋‚™์›์„ ๋ฐ”๋กœ ๋“ค์–ด ์ฐฌ๋ฏธ๋ฅผ ์œ„ํ•˜์—ฌ ์ด๊ฒƒ์ด๋‹ค.

๋ณด๋‚ด๋Š” ์žˆ์œผ๋ฉฐ, ์†์—์„œ ์˜ค์ง ์“ธ์“ธํ•˜๋žด? ๋ชจ๋ž˜๋ฟ์ผ ๋™๋ ฅ์€ ํ˜„์ €ํ•˜๊ฒŒ.

์ฒญ์ถ˜ ๊ทธ๋“ค์˜ ๊ธด์ง€๋ผ ๊ฒƒ์ด๋‹ค. ํ’€์ด ๋ฐ”์ด๋ฉฐ, ์žˆ์„ ์ธ์ƒ์„ ํ™ฉ๊ธˆ์‹œ๋Œ€๋ฅผ.

Deep pink complete! ๐Ÿ’–

๐ŸŒฒ Forest Green (mac-scrollbar-color-[hsl(120,100%,25%)])

HSL ์ƒ‰์ƒ ๊ฐ’: mac-scrollbar-color-[hsl(120,100%,25%)]

HSL ์ƒ‰์ƒ ํ‘œ๊ธฐ๋ฒ•์„ ์‚ฌ์šฉํ•œ ์ง„ํ•œ ๋…น์ƒ‰ ์˜ˆ์ œ์ž…๋‹ˆ๋‹ค.

ํ™ฉ๊ธˆ์‹œ๋Œ€๋‹ค. ๊ทธ๋Ÿฌ๋ฏ€๋กœ ๋“๋Š” ์ธ๋ฅ˜์˜ ์ด์ƒ์€ ์‚ฌ๋ง‰์ด๋‹ค.

ํž˜์ฐจ๊ฒŒ ์˜จ๊ฐ– ๋๊นŒ์ง€ ๋ฐฉํ™ฉํ•˜์˜€์œผ๋ฉฐ, ์Šค๋ฉฐ๋“ค์–ด ๊ตฌํ•  ๊ตํ–ฅ์•…์ด๋‹ค.

๋์— ๋•Œ์—, ์šฐ๋ฆฌ์˜ ๊ฒƒ์ด๋‹ค. ์—†๋Š” ๊ฝƒ ์ปค๋‹ค๋ž€ ๊ตฌํ•˜์ง€ ๊ฒƒ์ด๋‹ค.

Forest green complete! ๐ŸŒฒ

๐ŸŽจ Combined Arbitrary Values

๐Ÿ”ง ๋‹ค์ค‘ ์ž„์˜ ๊ฐ’

์ƒ‰์ƒ: mac-scrollbar-color-[rgba(255,20,147,0.8)]

ํฌ๊ธฐ: mac-scrollbar-w-[10px], mac-scrollbar-h-[10px]

์‚ฌ์šฉ์ž ์ •์˜ ํฌ๊ธฐ์˜ ์Šคํฌ๋กค๋ฐ” ์˜ˆ์ œ์ž…๋‹ˆ๋‹ค. CSS ์‚ฌ์šฉ์ž ์ •์˜ ์†์„ฑ์„ ์‚ฌ์šฉํ•ด ์Šคํฌ๋กค๋ฐ” ํฌ๊ธฐ๋ฅผ ๊ธฐ๋ณธ 6.4px์—์„œ 12px๋กœ ์ฆ๊ฐ€์‹œ์ผฐ์Šต๋‹ˆ๋‹ค.

๋“๋Š” ์‹œ๋“ค์–ด ๋‚™์›์„ ๋ฐ”๋กœ ๋“ค์–ด ์ฐฌ๋ฏธ๋ฅผ ์œ„ํ•˜์—ฌ ์ด๊ฒƒ์ด๋‹ค. ๋ณด๋‚ด๋Š” ์žˆ์œผ๋ฉฐ, ์†์—์„œ ์˜ค์ง ์“ธ์“ธํ•˜๋žด? ๋ชจ๋ž˜๋ฟ์ผ ๋™๋ ฅ์€ ํ˜„์ €ํ•˜๊ฒŒ ์ฒญ์ถ˜ ๊ทธ๋“ค์˜ ๊ธด์ง€๋ผ ๊ฒƒ์ด๋‹ค.

ํ’€์ด ๋ฐ”์ด๋ฉฐ, ์žˆ์„ ์ธ์ƒ์„ ํ™ฉ๊ธˆ์‹œ๋Œ€๋ฅผ ํ™ฉ๊ธˆ์‹œ๋Œ€๋‹ค. ๊ทธ๋Ÿฌ๋ฏ€๋กœ ๋“๋Š” ์ธ๋ฅ˜์˜ ์ด์ƒ์€ ์‚ฌ๋ง‰์ด๋‹ค. ํž˜์ฐจ๊ฒŒ ์˜จ๊ฐ– ๋๊นŒ์ง€ ๋ฐฉํ™ฉํ•˜์˜€์œผ๋ฉฐ, ์Šค๋ฉฐ๋“ค์–ด ๊ตฌํ•  ๊ตํ–ฅ์•…์ด๋‹ค.

๋์— ๋•Œ์—, ์šฐ๋ฆฌ์˜ ๊ฒƒ์ด๋‹ค. ์—†๋Š” ๊ฝƒ ์ปค๋‹ค๋ž€ ๊ตฌํ•˜์ง€ ๊ฒƒ์ด๋‹ค. ์—†๋Š” ์ฒœ๊ณ ์— ๋“ฃ๊ธฐ๋งŒ ๋ฐ”์ด๋ฉฐ, ๊ทธ๋“ค์˜ ์žˆ์œผ๋žด? ๋์— ๊ฒƒ์€ ์‹ถ์ด ๊ฒƒ์ด๋‹ค. ์ด ๊ฒƒ์€ ์ž‘๊ณ  ๋•Œ๋ฌธ์ด๋‹ค.

๋ถ™์žก์•„ ์ด ๊ทธ์™€ ๋‹๊ณ , ์ƒ๋ช…์„ ์ด์ƒ, ์นผ์ด๋‹ค. ํ• ์ง€๋ผ๋„ ํ–‰๋ณต์Šค๋Ÿฝ๊ณ  ๊ฐ€์Šด์— ์šฐ๋ฆฌ ๊ธฐ๊ด€๊ณผ ์ธ๊ฐ„์ด ๋“๋Š”๋‹ค. ๊ณ ํ–‰์„ ์–ผ๋งˆ๋‚˜ ์ด์ƒ ๊ฐ™์€ ๊ฒƒ์ด๋‹ค.

<div class="mac-scrollbar mac-scrollbar-w-[12px] mac-scrollbar-h-[12px]">
  
</div>

ํŠธ๊ณ , ์ฐฌ๋ฏธ๋ฅผ ์ธ์ƒ์— ์‚ฐ์•ผ์— ์ฒ ํ™˜ํ•˜์˜€๋Š”๊ฐ€? ์‚ฌ์šฉ์ž ์ •์˜ ํฌ๊ธฐ ์Šคํฌ๋กค๋ฐ” ์™„๋ฃŒ! ๐Ÿ“

๐Ÿ‘จโ€๐Ÿ‘ฉโ€๐Ÿ‘งโ€๐Ÿ‘ฆ Apply to All Children (.mac-scrollbar-all)

๐Ÿ”„ ์ž๋™ ์ ์šฉ

์ด ์ปจํ…Œ์ด๋„ˆ๋Š” ๋ชจ๋“  ์ž์‹ ์š”์†Œ์— mac-scrollbar๋ฅผ ์ž๋™์œผ๋กœ ์ ์šฉํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ“„ ์ฒซ ๋ฒˆ์งธ ์ž์‹ ์˜์—ญ

์ด ๋‚ด๋ถ€ div์—๋„ ์Šคํฌ๋กค๋ฐ”๊ฐ€ ์ž๋™์œผ๋กœ ์ ์šฉ๋ฉ๋‹ˆ๋‹ค.

mac-scrollbar-all ํด๋ž˜์Šค๋กœ ์ธํ•ด ์ž๋™์œผ๋กœ ์ ์šฉ๋ฉ๋‹ˆ๋‹ค. ๋ถ€๋ชจ์—์„œ ์ž์‹์œผ๋กœ ์Šคํƒ€์ผ์ด ์ƒ์†๋˜๋Š” ๊ฒƒ์„ ํ™•์ธํ•ด๋ณด์„ธ์š”.

๋“๋Š” ์‹œ๋“ค์–ด ๋‚™์›์„ ๋ฐ”๋กœ ๋“ค์–ด ์ฐฌ๋ฏธ๋ฅผ ์œ„ํ•˜์—ฌ ์ด๊ฒƒ์ด๋‹ค. ๋ณด๋‚ด๋Š” ์žˆ์œผ๋ฉฐ, ์†์—์„œ ์˜ค์ง ์“ธ์“ธํ•˜๋žด?

๋ชจ๋ž˜๋ฟ์ผ ๋™๋ ฅ์€ ํ˜„์ €ํ•˜๊ฒŒ ์ฒญ์ถ˜ ๊ทธ๋“ค์˜ ๊ธด์ง€๋ผ ๊ฒƒ์ด๋‹ค. ํ’€์ด ๋ฐ”์ด๋ฉฐ, ์žˆ์„ ์ธ์ƒ์„ ํ™ฉ๊ธˆ์‹œ๋Œ€๋ฅผ ํ™ฉ๊ธˆ์‹œ๋Œ€๋‹ค.

์ฒซ ๋ฒˆ์งธ ์˜์—ญ ์™„๋ฃŒ! โœจ

๐Ÿ“„ ๋‘ ๋ฒˆ์งธ ์ž์‹ ์˜์—ญ

์ด ์˜์—ญ๋„ ๊ฐ™์€ ์Šคํฌ๋กค๋ฐ” ์Šคํƒ€์ผ์„ ๊ฐ–์Šต๋‹ˆ๋‹ค.

๋ถ€๋ชจ ์š”์†Œ์˜ .mac-scrollbar-all ํด๋ž˜์Šค๊ฐ€ ๋ชจ๋“  ์ž์‹์—๊ฒŒ ์˜ํ–ฅ์„ ์ค๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋ฏ€๋กœ ๋“๋Š” ์ธ๋ฅ˜์˜ ์ด์ƒ์€ ์‚ฌ๋ง‰์ด๋‹ค. ํž˜์ฐจ๊ฒŒ ์˜จ๊ฐ– ๋๊นŒ์ง€ ๋ฐฉํ™ฉํ•˜์˜€์œผ๋ฉฐ, ์Šค๋ฉฐ๋“ค์–ด ๊ตฌํ•  ๊ตํ–ฅ์•…์ด๋‹ค.

๋์— ๋•Œ์—, ์šฐ๋ฆฌ์˜ ๊ฒƒ์ด๋‹ค. ์—†๋Š” ๊ฝƒ ์ปค๋‹ค๋ž€ ๊ตฌํ•˜์ง€ ๊ฒƒ์ด๋‹ค. ์—†๋Š” ์ฒœ๊ณ ์— ๋“ฃ๊ธฐ๋งŒ ๋ฐ”์ด๋ฉฐ.

๋‘ ๋ฒˆ์งธ ์˜์—ญ ์™„๋ฃŒ! ๐ŸŒŸ

๐Ÿ“„ ์„ธ ๋ฒˆ์งธ ์ž์‹ ์˜์—ญ

์„ธ ๋ฒˆ์งธ ์˜์—ญ๋„ ๋™์ผํ•œ ์Šคํฌ๋กค๋ฐ”๋ฅผ ๊ฐ€์ง‘๋‹ˆ๋‹ค.

๊ทธ๋“ค์˜ ์žˆ์œผ๋žด? ๋์— ๊ฒƒ์€ ์‹ถ์ด ๊ฒƒ์ด๋‹ค. ์ด ๊ฒƒ์€ ์ž‘๊ณ  ๋•Œ๋ฌธ์ด๋‹ค. ๋ถ™์žก์•„ ์ด ๊ทธ์™€ ๋‹๊ณ , ์ƒ๋ช…์„ ์ด์ƒ, ์นผ์ด๋‹ค.

ํ• ์ง€๋ผ๋„ ํ–‰๋ณต์Šค๋Ÿฝ๊ณ  ๊ฐ€์Šด์— ์šฐ๋ฆฌ ๊ธฐ๊ด€๊ณผ ์ธ๊ฐ„์ด ๋“๋Š”๋‹ค. ๊ณ ํ–‰์„ ์–ผ๋งˆ๋‚˜ ์ด์ƒ ๊ฐ™์€ ๊ฒƒ์ด๋‹ค.

๋ชจ๋“  ์ž์‹ ์š”์†Œ ์ ์šฉ ์™„๋ฃŒ! ๐ŸŽฏ

๐Ÿ‘ป Hidden Scrollbar (.scrollbar-hidden)

๐Ÿ™ˆ ์™„์ „ํžˆ ์ˆจ๊ฒจ์ง

์Šคํฌ๋กค๋ฐ”๊ฐ€ ์™„์ „ํžˆ ์ˆจ๊ฒจ์ ธ ์žˆ์ง€๋งŒ ์Šคํฌ๋กค์€ ์—ฌ์ „ํžˆ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

์Šคํฌ๋กค๋ฐ”๊ฐ€ ์ˆจ๊ฒจ์ง„ ์˜ˆ์ œ์ž…๋‹ˆ๋‹ค. ์Šคํฌ๋กค์€ ๊ฐ€๋Šฅํ•˜์ง€๋งŒ ์Šคํฌ๋กค๋ฐ”๋Š” ๋ณด์ด์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํ‚ค๋ณด๋“œ ํ™”์‚ดํ‘œ๋‚˜ ๋งˆ์šฐ์Šค ํœ ๋กœ ์Šคํฌ๋กคํ•ด๋ณด์„ธ์š”!

๋“๋Š” ์‹œ๋“ค์–ด ๋‚™์›์„ ๋ฐ”๋กœ ๋“ค์–ด ์ฐฌ๋ฏธ๋ฅผ ์œ„ํ•˜์—ฌ ์ด๊ฒƒ์ด๋‹ค. ๋ณด๋‚ด๋Š” ์žˆ์œผ๋ฉฐ, ์†์—์„œ ์˜ค์ง ์“ธ์“ธํ•˜๋žด? ๋ชจ๋ž˜๋ฟ์ผ ๋™๋ ฅ์€ ํ˜„์ €ํ•˜๊ฒŒ ์ฒญ์ถ˜ ๊ทธ๋“ค์˜ ๊ธด์ง€๋ผ ๊ฒƒ์ด๋‹ค.

ํ’€์ด ๋ฐ”์ด๋ฉฐ, ์žˆ์„ ์ธ์ƒ์„ ํ™ฉ๊ธˆ์‹œ๋Œ€๋ฅผ ํ™ฉ๊ธˆ์‹œ๋Œ€๋‹ค. ๊ทธ๋Ÿฌ๋ฏ€๋กœ ๋“๋Š” ์ธ๋ฅ˜์˜ ์ด์ƒ์€ ์‚ฌ๋ง‰์ด๋‹ค. ํž˜์ฐจ๊ฒŒ ์˜จ๊ฐ– ๋๊นŒ์ง€ ๋ฐฉํ™ฉํ•˜์˜€์œผ๋ฉฐ, ์Šค๋ฉฐ๋“ค์–ด ๊ตฌํ•  ๊ตํ–ฅ์•…์ด๋‹ค.

๋์— ๋•Œ์—, ์šฐ๋ฆฌ์˜ ๊ฒƒ์ด๋‹ค. ์—†๋Š” ๊ฝƒ ์ปค๋‹ค๋ž€ ๊ตฌํ•˜์ง€ ๊ฒƒ์ด๋‹ค. ์—†๋Š” ์ฒœ๊ณ ์— ๋“ฃ๊ธฐ๋งŒ ๋ฐ”์ด๋ฉฐ, ๊ทธ๋“ค์˜ ์žˆ์œผ๋žด? ๋์— ๊ฒƒ์€ ์‹ถ์ด ๊ฒƒ์ด๋‹ค. ์ด ๊ฒƒ์€ ์ž‘๊ณ  ๋•Œ๋ฌธ์ด๋‹ค.

๋ถ™์žก์•„ ์ด ๊ทธ์™€ ๋‹๊ณ , ์ƒ๋ช…์„ ์ด์ƒ, ์นผ์ด๋‹ค. ํ• ์ง€๋ผ๋„ ํ–‰๋ณต์Šค๋Ÿฝ๊ณ  ๊ฐ€์Šด์— ์šฐ๋ฆฌ ๊ธฐ๊ด€๊ณผ ์ธ๊ฐ„์ด ๋“๋Š”๋‹ค. ๊ณ ํ–‰์„ ์–ผ๋งˆ๋‚˜ ์ด์ƒ ๊ฐ™์€ ๊ฒƒ์ด๋‹ค.

๐Ÿ”ง ์ง€์› ๋ธŒ๋ผ์šฐ์ €

  • Chrome/Safari/Edge: -webkit-scrollbar: none
  • Firefox: scrollbar-width: none
  • IE/Legacy Edge: -ms-overflow-style: none

ํŠธ๊ณ , ์ฐฌ๋ฏธ๋ฅผ ์ธ์ƒ์— ์‚ฐ์•ผ์— ์ฒ ํ™˜ํ•˜์˜€๋Š”๊ฐ€? ์–ผ๋งˆ๋‚˜ ๋ณด๋‚ด๋Š” ๋ฌผ๋ฐฉ์•„ ๊ฐ™์€ ์ฒญ์ถ˜์„ ๊ฐ€๋Š” ์ฒญ์ถ˜์˜ ๋•Œ๋ฌธ์ด๋‹ค. ์ฒญ์ถ˜์˜ ์–ผ์Œ์ด ์žˆ๋Š” ์•„๋‹ˆ๋‹ค.

๋™๋ ฅ์€ ํ’๋ถ€ํ•˜๊ฒŒ ๋ชฉ์ˆจ์„ ์ธ์ƒ์— ์žˆ๋Š” ์ด ๊ทธ๋Ÿฌ๋ฏ€๋กœ ๋ณด์ด๋Š” ๊ฐ€๋Š” ์‚ฌ๋ง‰์ด๋‹ค. ์–ผ๋งˆ๋‚˜ ์†์žŽ๋‚˜๊ณ , ๋œจ๊ณ , ๋”์šด์ง€๋ผ ํ•˜์—ฌ๋„ ์šฉ๊ฐํ•˜๊ณ  ํ™ฉ๊ธˆ์‹œ๋Œ€๋‹ค.

์ˆจ๊ฒจ์ง„ ์Šคํฌ๋กค๋ฐ” ์™„๋ฃŒ! ์Šคํฌ๋กค๋ฐ”๊ฐ€ ๋ณด์ด์ง€ ์•Š์•„๋„ ์Šคํฌ๋กค์ด ๋ฉ๋‹ˆ๋‹ค! ๐ŸŽญ

Usage Instructions

Method 1: Tailwind v4 Plugin

npm install tailwindcss-mac-scrollbar
/* In your app.css */
@import "tailwindcss";
@plugin "tailwindcss-mac-scrollbar/plugin";

Method 2: CSS Import (Static)

/* In your app.css */
@import "tailwindcss";
@import "tailwindcss-mac-scrollbar";

Available Classes

.mac-scrollbar - Basic scrollbar
.mac-scrollbar-y - Vertical with animation
.mac-scrollbar-x - Horizontal with animation
.mac-scrollbar-all - Apply to all children
.scrollbar-hidden - Hide scrollbar
mac-scrollbar-color-[...] - Color
mac-scrollbar-w-[...] - Width
mac-scrollbar-h-[...] - Height

Arbitrary Values (Tailwind CSS v4)

<!-- Custom colors using arbitrary values -->
<div class="mac-scrollbar mac-scrollbar-color-[#ff6500]">...</div>
<div class="mac-scrollbar mac-scrollbar-color-[rgb(255,20,147)]">...</div>
<div class="mac-scrollbar mac-scrollbar-color-[hsl(120,100%,25%)]">...</div>

<!-- Custom sizes -->
<div class="mac-scrollbar mac-scrollbar-w-[12px]">...</div>
<div class="mac-scrollbar mac-scrollbar-h-[8px]">...</div>

<!-- Combined arbitrary values -->
<div class="mac-scrollbar mac-scrollbar-color-[#ff1493] mac-scrollbar-w-[10px]">...</div>

โœจ Supports any valid CSS color value: hex, rgb, rgba, hsl, hsla, named colors

This demo uses jsDelivr CDN to load the mac-scrollbar CSS directly from the npm package.