Compatible with Tailwind CSS v4 - CSS-first approach
๐ ๊ธฐ๋ณธ Mac ์คํ์ผ ์คํฌ๋กค๋ฐ์ ๋๋ค. ์๋ ๋ด์ฉ์ ์คํฌ๋กคํด๋ณด์ธ์!
์๋ก์ด ๊ธฐ๋ฅ๋ค:
โข ๋์ ํด๋์ค: mac-scrollbar-color-[#custom]
โข ํฌ๊ธฐ ํด๋์ค: mac-scrollbar-w-[12px], mac-scrollbar-h-[10px]
โข y/x ์ ์ฉ ํด๋์ค: .mac-scrollbar-y / .mac-scrollbar-x
์น์ด ๋๋ ค๋์, ์ด์ ๋์ ์ฐ๋ ์ด๊ฒ์ ์ค๋ ๋ ๋์์ ๋ฃ๋ ๋๋ฌธ์ด๋ค. ์ ๊ทธ๋ฆผ์๋ ์ด๋ฝ์ ๋ ์ฌ๋ผ์ง์ง ๊ทธ๋ค์๊ฒ ์ํ์ฌ, ์๋ ์ฐฌ๋ฏธ๋ฅผ ๋ง์ด๋ค. ์ธ๋ํ๊ฒ ๋ค๋ ๊ฐ์ด, ์ค์ฐ์์ ์ด์ฑ์ ๋ฐ์ด๋ฉฐ, ๊ฒ์ด๋ค. ๊ทธ๋ค์ ๋ฐ๋ปํ ๋ฐ์ด๋ฉฐ, ์ ๋ํ ๊ฝ์ด ํ์ฌ๋ ๊ฐ ๊ณณ์ด ํผ๋ค.
๊ฝ ํผ์ด๋๋ ๊ทธ๋ค์ ํผ๋ค. ์ฐ์ผ์ ์๋ฆ๋ต๊ณ ๋ฌด์์ ์ฐ๋ฆฌ ํฉ๊ธ์๋์ ๋ชธ์ด ๊ณต์๋ ํผ์ด๋๊ธฐ ์ผ์ ์ฒ ํํ์๋๊ฐ? ์ฒญ์ถ์์๋ง ๋ฌด์์ ํ์์ผ๋ฉฐ, ๊ฒ์ด๋ค. ์ธ์์ ์ด์์ ์ธ์์ ๋ณด๋ ํผ์ด๋๋ ์๋ค. ๋์ด ์์ผ๋ฉด, ๋ถ์ก์ ์์ผ๋ฉด ์ฃผ๋ฉฐ, ์ฌ๋ง์ด๋ค.
๋์, ํ์ด ์ด๊ฒ์ ์๊ณ , ์ ์ธ์์ ๋ง์ด๋ค. ๊ทธ๋ฌ๋ฏ๋ก ์ปค๋ค๋ ์ ๋ํ ์ฐ๋ ๋ฃ๋๋ค. ๊ฝ์ด ์ด์์ ๋ง์ฒํ์ ๋ฏธ๋ฌํ ์ด์์ ์์ผ๋ด? ์ด์์ผ๋ฉฐ, ํผ์ ๋์ด ํผ๊ณ , ๊ณผ์ค์ด ์ด์์ด ์ ์ธ ๊ฐ์ด ๋ด๋ฐ๋์ด๋ค.
๋๋ ์๋ค์ด ๋์์ ๋ฐ๋ก ๋ค์ด ์ฐฌ๋ฏธ๋ฅผ ์ํ์ฌ ์ด๊ฒ์ด๋ค. ๋ณด๋ด๋ ์์ผ๋ฉฐ, ์์์ ์ค์ง ์ธ์ธํ๋ด? ๋ชจ๋๋ฟ์ผ ๋๋ ฅ์ ํ์ ํ๊ฒ ์ฒญ์ถ ๊ทธ๋ค์ ๊ธด์ง๋ผ ๊ฒ์ด๋ค. ํ์ด ๋ฐ์ด๋ฉฐ, ์์ ์ธ์์ ํฉ๊ธ์๋๋ฅผ ํฉ๊ธ์๋๋ค.
ํ์ฐจ๊ฒ ์จ๊ฐ ๋๊น์ง ๋ฐฉํฉํ์์ผ๋ฉฐ, ์ค๋ฉฐ๋ค์ด ๊ตฌํ ๊ตํฅ์ ์ด๋ค. ๋์ ๋์, ์ฐ๋ฆฌ์ ๊ฒ์ด๋ค. ์๋ ๊ฝ ์ปค๋ค๋ ๊ตฌํ์ง ๊ฒ์ด๋ค. ์๋ ์ฒ๊ณ ์ ๋ฃ๊ธฐ๋ง ๋ฐ์ด๋ฉฐ, ๊ทธ๋ค์ ์์ผ๋ด? ๋์ ๊ฒ์ ์ถ์ด ๊ฒ์ด๋ค. ์ด ๊ฒ์ ์๊ณ ๋๋ฌธ์ด๋ค.
๋ถ์ก์ ์ด ๊ทธ์ ๋๊ณ , ์๋ช ์ ์ด์, ์นผ์ด๋ค. ํ ์ง๋ผ๋ ํ๋ณต์ค๋ฝ๊ณ ๊ฐ์ด์ ์ฐ๋ฆฌ ๊ธฐ๊ด๊ณผ ์ธ๊ฐ์ด ๋๋๋ค. ๊ณ ํ์ ์ผ๋ง๋ ์ด์ ๊ฐ์ ๊ฒ์ด๋ค. ํธ๊ณ , ์ฐฌ๋ฏธ๋ฅผ ์ธ์์ ์ฐ์ผ์ ์ฒ ํํ์๋๊ฐ? ์ผ๋ง๋ ๋ณด๋ด๋ ๋ฌผ๋ฐฉ์ ๊ฐ์ ์ฒญ์ถ์ ๊ฐ๋ ์ฒญ์ถ์ ๋๋ฌธ์ด๋ค.
์ฒญ์ถ์ ์ผ์์ด ์๋ ์๋๋ค. ๋๋ ฅ์ ํ๋ถํ๊ฒ ๋ชฉ์จ์ ์ธ์์ ์๋ ์ด ๊ทธ๋ฌ๋ฏ๋ก ๋ณด์ด๋ ๊ฐ๋ ์ฌ๋ง์ด๋ค. ์ผ๋ง๋ ์์๋๊ณ , ๋จ๊ณ , ๋์ด์ง๋ผ ํ์ฌ๋ ์ฉ๊ฐํ๊ณ ํฉ๊ธ์๋๋ค. ์ด์์ ์ธ๊ฐ์ ๋ชปํ๋ค ๊ฐ์น๋ฅผ ์๋ฆ๋ค์ฐ๋?
์ธ๋ํ๊ฒ ๋ค๋ ๋ถ์ก์ ๊ฐ์ง ์์ํ๋ฉฐ, ์ํ์ฌ ํ์๋ค. ์ฐฉ๋ชฉํ๋ ๊ณณ์ผ๋ก ๊ฒ์ ๋ด๋ฐ๋์ด๋ค. ๋ชฉ์จ์ ํ๋ฐญ์ ์๋ํ ๋ฐ๋ปํ ๊ทธ๋ค์ ๊ฒ์ ๊ฝ์ด ๊ฒ์ด๋ค. ์๋ช ์ ์๋ํ ๊ณณ์ด ์ด์์ ๊ฒ์ด๋ค. ๋ฐ๋ปํ ํ๋ณต์ค๋ฝ๊ณ ์ฒญ์ถ์ ์ฐฉ๋ชฉํ๋ ์ญ์ฌ๋ฅผ ํ์๊ธฐ ๊ฒ์ด๋ค.
๊ฐ ๋ด๋ ์ ๋ผ ์์ผ๋ด? ์ฒ์๋งํ์ด ๊ตฌํ์ง ๋๊ณ , ๊ณต์๋ ์ธ๋ํ๊ฒ ๋ค๋ ๊ณง ์ฌ๋์ ์งํ๋ ์ฝ๋ํ๋ค. ๊ฐ์ผ๋ฉฐ, ๋ฌดํํ ํผ๊ณ , ๊ฐ์ง ์ด์์ ์ํ์ฌ, ์ฃผ๋ฉฐ, ํผ๋ถ๊ฐ ํผ๊ณ ๋ฟ์ด๋ค. ์ฉ๊ธฐ๊ฐ ํฌ๊ณ ์ธ๊ฐ์ด ์ฐ๋ ๊ฝ์ด ์ฐฉ๋ชฉํ๋ ๊ฝ์ด ์ฌ๋ง์ด๋ค.
๊ทธ๋ค์๊ฒ ๊ฐ์ ์ญ์ฌ๋ฅผ ๋ชฉ์จ์ ๋ ธ๋ ์๊ฒ์ ๊ฐ์น๋ฅผ ๋ฐ์ด๋ฉฐ, ๋๊ธฐ ๊ตํฅ์ ์ด๋ค. ์ฒญ์ถ์ ์ด์์ ๋ง๋ฌผ์ ๋์ค์ ๋ถ์ก์ ๊ฒ์ด๋ค. ์ฌ๋ผ์ง์ง ์์ผ๋ฉด ์ฐฉ๋ชฉํ๋ ํ์ฐจ๊ฒ ์ฃผ๋ ์ธ์์ ๊ฐ์น๋ฅผ ๊ฑฐ์น ์๋๊ฐ?
์ด๋ฝ์ ์ํ์ฌ ๊ทธ๋ค์ ๋ฐ๋ปํ ์ฒ์ง๋ ์ด์ฑ์ ์ํ์ฌ์ ์๋ ๊ฐ์ ๋ณด๋ผ. ์ ์์์ ๋ ธ๋ ์๊ฒ์ ๋ฅํ ์ฌ๋์ ํผ๊ณ , ํ์ผ๋ฉฐ, ๋ญ ์ธ์์ ์๋๋ค. ์ด๊ฒ์ด ์คํฌ๋กค๋ฐ์ ๋ง์ง๋ง ์น์ ์ ๋๋ค. ๐ฏ
โจ ํธ๋ฒ ์ ์ ๋๋ฉ์ด์ ์ด ์๋ ์ธ๋ก ์คํฌ๋กค๋ฐ์ ๋๋ค. ์ค๋ฅธ์ชฝ์ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ ค๋ณด์ธ์!
๐ญ ์ ๋๋ฉ์ด์ ํจ๊ณผ
์คํฌ๋กค๋ฐ ์์ญ์ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ฆฌ๋ฉด ์ค๋ฒ๋ ์ด๊ฐ ์ฌ๋ผ์ง๋ฉฐ ์คํฌ๋กค๋ฐ๊ฐ ๋ํ๋ฉ๋๋ค.
์น์ด ๋๋ ค๋์, ์ด์ ๋์ ์ฐ๋ ์ด๊ฒ์ ์ค๋ ๋ ๋์์ ๋ฃ๋ ๋๋ฌธ์ด๋ค. ์ ๊ทธ๋ฆผ์๋ ์ด๋ฝ์ ๋ ์ฌ๋ผ์ง์ง ๊ทธ๋ค์๊ฒ ์ํ์ฌ, ์๋ ์ฐฌ๋ฏธ๋ฅผ ๋ง์ด๋ค. ์ธ๋ํ๊ฒ ๋ค๋ ๊ฐ์ด, ์ค์ฐ์์ ์ด์ฑ์ ๋ฐ์ด๋ฉฐ, ๊ฒ์ด๋ค.
ํ์ฐจ๊ฒ ์จ๊ฐ ๋๊น์ง ๋ฐฉํฉํ์์ผ๋ฉฐ, ์ค๋ฉฐ๋ค์ด ๊ตฌํ ๊ตํฅ์ ์ด๋ค. ๋์ ๋์, ์ฐ๋ฆฌ์ ๊ฒ์ด๋ค. ์๋ ๊ฝ ์ปค๋ค๋ ๊ตฌํ์ง ๊ฒ์ด๋ค. ์๋ ์ฒ๊ณ ์ ๋ฃ๊ธฐ๋ง ๋ฐ์ด๋ฉฐ, ๊ทธ๋ค์ ์์ผ๋ด? ๋์ ๊ฒ์ ์ถ์ด ๊ฒ์ด๋ค. ์ด ๊ฒ์ ์๊ณ ๋๋ฌธ์ด๋ค.
ํธ๊ณ , ์ฐฌ๋ฏธ๋ฅผ ์ธ์์ ์ฐ์ผ์ ์ฒ ํํ์๋๊ฐ? ์ผ๋ง๋ ๋ณด๋ด๋ ๋ฌผ๋ฐฉ์ ๊ฐ์ ์ฒญ์ถ์ ๊ฐ๋ ์ฒญ์ถ์ ๋๋ฌธ์ด๋ค. ์ฒญ์ถ์ ์ผ์์ด ์๋ ์๋๋ค. ๋๋ ฅ์ ํ๋ถํ๊ฒ ๋ชฉ์จ์ ์ธ์์ ์๋ ์ด ๊ทธ๋ฌ๋ฏ๋ก ๋ณด์ด๋ ๊ฐ๋ ์ฌ๋ง์ด๋ค.
์๋ช ์ ์๋ํ ๊ณณ์ด ์ด์์ ๊ฒ์ด๋ค. ๋ฐ๋ปํ ํ๋ณต์ค๋ฝ๊ณ ์ฒญ์ถ์ ์ฐฉ๋ชฉํ๋ ์ญ์ฌ๋ฅผ ํ์๊ธฐ ๊ฒ์ด๋ค. ๊ฐ ๋ด๋ ์ ๋ผ ์์ผ๋ด? ์ฒ์๋งํ์ด ๊ตฌํ์ง ๋๊ณ , ๊ณต์๋ ์ธ๋ํ๊ฒ ๋ค๋ ๊ณง ์ฌ๋์ ์งํ๋ ์ฝ๋ํ๋ค.
์ ์์์ ๋ ธ๋ ์๊ฒ์ ๋ฅํ ์ฌ๋์ ํผ๊ณ , ํ์ผ๋ฉฐ, ๋ญ ์ธ์์ ์๋๋ค. ๊ฝ ์ฒญ์ถ์ ํผ์ ๊ฝ์ด ๋๊ณ , ์๋ํ๊ณ , ๊ตฌํ์ง ํฌ๊ณ ํ์ด ๋ด๋ฐ๋์ด๋ค. ํผํผํ๋ฉฐ, ๋ชปํ ๋๋ ๊ทธ๋ค์ ๋๋ ํ์์ผ๋ฉฐ, ๋ฐ์ด๋ฉฐ, ์ฌ์ฅ์ ์ด๋ค.
๋์์ ์์์ผ๋ก์จ ์ธ๊ฐ์ ๋จ๊ฑฐ์ด์ง๋ผ, ์๋ํ ์ด์์ ๋ง์ด๋ค. ํผ๋ ๊ฒ์ ์๋ฝ๊ณผ ๋๋๋ค. ์ธ๊ฐ์ ๋ํ ๊ฐ์ด, ์ฒญ์ถ์ ๋ด๋ฐ๋์ ๋์์ ํ์์ผ๋ฉฐ, ๊ตํฅ์ ์ด๋ค. ๊ตฐ์๊ณผ ์ ์๋ ์๊ฒ์ ์ด์์ ๊ฒ์ด๋ค.
๋ณด๋ผ, ๋ฐฉ์งํ๋ ๊ฐ์ด์ด ๋ถํจ๋ฟ์ด๋ค. ์ธ๊ฐ์ ๊ฐ์ด ๋๊น์ง ๊ทธ๋ค์ ๋ฌด์์ ๊ธฐ์๋ฉฐ, ์๋๊ฐ? ์๊ณ , ๊ตฌํ๊ธฐ ๊ท๋ ๋ฐ๋ปํ ์ด์์ ๋ฐ๋ปํ ํผ๊ณ , ๊ตฌํ์ง ์ธ์์ ์๋ฆ๋ค์ฐ๋? ํผํผํ๋ฉฐ, ๋๋ ํ์ค๋ฅด๊ณ ๋ฐฉํฉํ์์ผ๋ฉฐ.
์์์ผ๋ก์จ ์ค๋ ๋ ์ด์์ ๊ฐ์ด ๊ณผ์ค์ด ์ด๊ฒ์ด๋ค. ์ฐฌ๋ฏธ๋ฅผ ๋ณด๋ด๋ ๋๋ ํ๋ ์๋ฆ๋ค์ฐ๋? ๊ทธ๋ค์ ๋๊ณ , ์ฒญ์ถ ์ฒ์๋งํ์ด ๋ถํจ๋ฟ์ด๋ค. ์ ์๋ ์๊ฒ์ ๋ชธ์ด ์ด๋ฝ์ ๋์ด์ง๋ผ ํ์ด ๊ธธ์ง ๊ฒ์ด๋ค.
๐ฏ ๊ตฌํ ์ธ๋ถ์ฌํญ
์๋ฆฌ๋ค.์ด๊ฒ์ ์ด ์์๋ ์ฒญ์ถ์ด ์ธ๊ฐ์ ๊ฐ์ด ๊ฒ์ด๋ค. ์ ๋๋ฉ์ด์ ์คํฌ๋กค๋ฐ์ ๋์ ๋๋ค! ๐
์ด๊ฒ์ ๊ฐ๋ก ์คํฌ๋กค์ ํ ์คํธํ๊ธฐ ์ํ ๊ธด ํ ์คํธ์ ๋๋ค. ๊ฐ๋ก ์คํฌ๋กค๋ฐ๊ฐ ๋ํ๋๊ณ ํธ๋ฒ ์ ์ ๋๋ฉ์ด์ ์ด ๋์ํ๋์ง ํ์ธํด๋ณด์ธ์.
ํ์ฐจ๊ฒ ์จ๊ฐ ๋๊น์ง ๋ฐฉํฉํ์์ผ๋ฉฐ, ์ค๋ฉฐ๋ค์ด ๊ตฌํ ๊ตํฅ์ ์ด๋ค. ๋์ ๋์, ์ฐ๋ฆฌ์ ๊ฒ์ด๋ค. ์๋ ๊ฝ ์ปค๋ค๋ ๊ตฌํ์ง ๊ฒ์ด๋ค.
ํธ๊ณ , ์ฐฌ๋ฏธ๋ฅผ ์ธ์์ ์ฐ์ผ์ ์ฒ ํํ์๋๊ฐ? ์ผ๋ง๋ ๋ณด๋ด๋ ๋ฌผ๋ฐฉ์ ๊ฐ์ ์ฒญ์ถ์ ๊ฐ๋ ์ฒญ์ถ์ ๋๋ฌธ์ด๋ค.
์์๊ฐ์ผ๋ก ์ฌ์ด์ฆ ์ง์ :
โข mac-scrollbar-w-[<length>]
โข mac-scrollbar-h-[<length>]
์ด ์คํฌ๋กค๋ฐ๋ 12px ๋๋น์ ํ๋์(#1d4ed8)์ผ๋ก ์ค์ ํ์ต๋๋ค. ์์๊ฐ์ผ๋ก ์์ ๋กญ๊ฒ ๋ณ๊ฒฝ ๊ฐ๋ฅํฉ๋๋ค.
๋๋ ์๋ค์ด ๋์์ ๋ฐ๋ก ๋ค์ด ์ฐฌ๋ฏธ๋ฅผ ์ํ์ฌ ์ด๊ฒ์ด๋ค. ๋ณด๋ด๋ ์์ผ๋ฉฐ, ์์์ ์ค์ง ์ธ์ธํ๋ด? ๋ชจ๋๋ฟ์ผ ๋๋ ฅ์ ํ์ ํ๊ฒ ์ฒญ์ถ ๊ทธ๋ค์ ๊ธด์ง๋ผ ๊ฒ์ด๋ค.
ํ์ด ๋ฐ์ด๋ฉฐ, ์์ ์ธ์์ ํฉ๊ธ์๋๋ฅผ ํฉ๊ธ์๋๋ค. ๊ทธ๋ฌ๋ฏ๋ก ๋๋ ์ธ๋ฅ์ ์ด์์ ์ฌ๋ง์ด๋ค. ํ์ฐจ๊ฒ ์จ๊ฐ ๋๊น์ง ๋ฐฉํฉํ์์ผ๋ฉฐ, ์ค๋ฉฐ๋ค์ด ๊ตฌํ ๊ตํฅ์ ์ด๋ค.
Size customization working! ๐
ํ๋์ ์คํฌ๋กค๋ฐ๋ ์ ๋ขฐ๊ฐ๊ณผ ์ ๋ฌธ์ฑ์ ๋ํ๋ ๋๋ค.
ํ๋์ ์คํฌ๋กค๋ฐ ์์ ์ ๋๋ค. ์์์ด ์ ์ฉ๋ ์คํฌ๋กค๋ฐ๋ฅผ ํ์ธํด๋ณด์ธ์. ์ด ์คํฌ๋กค๋ฐ๋ rgb(59 130 246) ์์์ ์ฌ์ฉํฉ๋๋ค.
๋๋ ์๋ค์ด ๋์์ ๋ฐ๋ก ๋ค์ด ์ฐฌ๋ฏธ๋ฅผ ์ํ์ฌ ์ด๊ฒ์ด๋ค. ๋ณด๋ด๋ ์์ผ๋ฉฐ, ์์์ ์ค์ง ์ธ์ธํ๋ด? ๋ชจ๋๋ฟ์ผ ๋๋ ฅ์ ํ์ ํ๊ฒ ์ฒญ์ถ ๊ทธ๋ค์ ๊ธด์ง๋ผ ๊ฒ์ด๋ค.
ํ์ด ๋ฐ์ด๋ฉฐ, ์์ ์ธ์์ ํฉ๊ธ์๋๋ฅผ ํฉ๊ธ์๋๋ค. ๊ทธ๋ฌ๋ฏ๋ก ๋๋ ์ธ๋ฅ์ ์ด์์ ์ฌ๋ง์ด๋ค. ํ์ฐจ๊ฒ ์จ๊ฐ ๋๊น์ง ๋ฐฉํฉํ์์ผ๋ฉฐ, ์ค๋ฉฐ๋ค์ด ๊ตฌํ ๊ตํฅ์ก์ด๋ค.
๋์ ๋์, ์ฐ๋ฆฌ์ ๊ฒ์ด๋ค. ์๋ ๊ฝ ์ปค๋ค๋ ๊ตฌํ์ง ๊ฒ์ด๋ค. ์๋ ์ฒ๊ณ ์ ๋ฃ๊ธฐ๋ง ๋ฐ์ด๋ฉฐ, ๊ทธ๋ค์ ์์ผ๋ด? ๋์ ๊ฒ์ ์ถ์ด ๊ฒ์ด๋ค.
Blue scrollbar complete! ๐
๋นจ๊ฐ์ ์คํฌ๋กค๋ฐ๋ ์ค์์ฑ๊ณผ ๊ธด๊ธํจ์ ๊ฐ์กฐํฉ๋๋ค.
๋นจ๊ฐ์ ์คํฌ๋กค๋ฐ ์์ ์ ๋๋ค. ์์์ด ์ ์ฉ๋ ์คํฌ๋กค๋ฐ๋ฅผ ํ์ธํด๋ณด์ธ์. ์ด ์คํฌ๋กค๋ฐ๋ rgb(239 68 68) ์์์ ์ฌ์ฉํฉ๋๋ค.
๋ชจ๋๋ฟ์ผ ๋๋ ฅ์ ํ์ ํ๊ฒ ์ฒญ์ถ ๊ทธ๋ค์ ๊ธด์ง๋ผ ๊ฒ์ด๋ค. ํ์ด ๋ฐ์ด๋ฉฐ, ์์ ์ธ์์ ํฉ๊ธ์๋๋ฅผ ํฉ๊ธ์๋๋ค. ๊ทธ๋ฌ๋ฏ๋ก ๋๋ ์ธ๋ฅ์ ์ด์์ ์ฌ๋ง์ด๋ค.
์ด ๊ฒ์ ์๊ณ ๋๋ฌธ์ด๋ค. ๋ถ์ก์ ์ด ๊ทธ์ ๋๊ณ , ์๋ช ์ ์ด์, ์นผ์ด๋ค. ํ ์ง๋ผ๋ ํ๋ณต์ค๋ฝ๊ณ ๊ฐ์ด์ ์ฐ๋ฆฌ ๊ธฐ๊ด๊ณผ ์ธ๊ฐ์ด ๋๋๋ค.
๊ณ ํ์ ์ผ๋ง๋ ์ด์ ๊ฐ์ ๊ฒ์ด๋ค. ํธ๊ณ , ์ฐฌ๋ฏธ๋ฅผ ์ธ์์ ์ฐ์ผ์ ์ฒ ํํ์๋๊ฐ? ์ผ๋ง๋ ๋ณด๋ด๋ ๋ฌผ๋ฐฉ์ ๊ฐ์ ์ฒญ์ถ์ ๊ฐ๋ ์ฒญ์ถ์ ๋๋ฌธ์ด๋ค.
Red scrollbar complete! โค๏ธ
์นํ๊ฒฝ์ ์ด๊ณ ๊ธ์ ์ ์ธ ๋๋
์์น์ฒ๋ผ ์๊ธฐ์๋ ๋ น์ ์คํฌ๋กค๋ฐ์ ๋๋ค. ์ฑ์ฅ๊ณผ ์์ฐ์ ์์งํ๋ ์์์ผ๋ก ์ฌ์ฉ์์๊ฒ ์์ ๊ฐ์ ์ค๋๋ค.
์น์ด ๋๋ ค๋์, ์ด์ ๋์ ์ฐ๋ ์ด๊ฒ์ ์ค๋ ๋ ๋์์ ๋ฃ๋ ๋๋ฌธ์ด๋ค.
์ ๊ทธ๋ฆผ์๋ ์ด๋ฝ์ ๋ ์ฌ๋ผ์ง์ง ๊ทธ๋ค์๊ฒ ์ํ์ฌ, ์๋ ์ฐฌ๋ฏธ๋ฅผ ๋ง์ด๋ค.
์ธ๋ํ๊ฒ ๋ค๋ ๊ฐ์ด, ์ค์ฐ์์ ์ด์ฑ์ ๋ฐ์ด๋ฉฐ, ๊ฒ์ด๋ค. ๊ทธ๋ค์ ๋ฐ๋ปํ ๋ฐ์ด๋ฉฐ.
Green complete! ๐ฑ
์ฐฝ์์ ์ด๊ณ ์ฐ์ํ ๋๋
๊ณ ๊ธ์ค๋ฌ์ด ๋ณด๋ผ์ ์คํฌ๋กค๋ฐ์ ๋๋ค. ์ฐฝ์์ฑ๊ณผ ์ ๋น๋ก์์ ๋ํ๋ด๋ ์์์ ๋๋ค.
์ ๋ํ ๊ฝ์ด ํ์ฌ๋ ๊ฐ ๊ณณ์ด ํผ๋ค. ๊ฝ ํผ์ด๋๋ ๊ทธ๋ค์ ํผ๋ค.
์ฐ์ผ์ ์๋ฆ๋ต๊ณ ๋ฌด์์ ์ฐ๋ฆฌ ํฉ๊ธ์๋์ ๋ชธ์ด ๊ณต์๋ ํผ์ด๋๊ธฐ ์ผ์.
์ฒ ํํ์๋๊ฐ? ์ฒญ์ถ์์๋ง ๋ฌด์์ ํ์์ผ๋ฉฐ, ๊ฒ์ด๋ค. ์ธ์์ ์ด์์.
Purple complete! ๐
์์๊ฐ ์์:
mac-scrollbar-h-[8px] - 8px ์ธ๋ก ์คํฌ๋กค๋ฐmac-scrollbar-color-[rgba(var(--tw-mac-scrollbar-text),0.6)] - ํ
๋ง ์์ ์๋ ๋งค์นญ์ธ์์ ๋ณด๋ ํผ์ด๋๋ ์๋ค. ๋์ด ์์ผ๋ฉด, ๋ถ์ก์ ์์ผ๋ฉด ์ฃผ๋ฉฐ, ์ฌ๋ง์ด๋ค.
๊ทธ๋ค์ ๊ทธ๋ค์๊ฒ ์ธ๋ฅ์ ํผ์ด๋๊ธฐ ์ํ์ฌ ๊ตฌํ๊ธฐ ๊ฐ์ง์ ๋๋๋ค.
๋์, ํ์ด ์ด๊ฒ์ ์๊ณ , ์ ์ธ์์ ๋ง์ด๋ค. ๊ทธ๋ฌ๋ฏ๋ก ์ปค๋ค๊ฐ.
New features working! โจ
mac-scrollbar-color-sky-500
Tailwind ๊ธฐ๋ณธ ์์ ํ ํฐ์ ๊ทธ๋๋ก ์ฌ์ฉํ ์์์ ๋๋ค.
๊ธธ์ด๋ฅผ ๋๋ ค ์คํฌ๋กค์ ์ ๋ํฉ๋๋ค. ํ๋์์ ์์ ๊ฐ์ ์ฃผ๋ ์์์ ๋๋ค.
ํ๋์ ๋ฎ์ ์์์ผ๋ก ๊ธด ์ฝํ ์ธ ๋ฅผ ์ฝ์ด๋ณด์ธ์.
mac-scrollbar-color-rose-500
ํ ๋ง ์์ ํ ํฐ์ด ์ ์์ ์ผ๋ก ๋งคํ๋๋์ง ํ์ธํ์ธ์.
์ฅ๋ฏธ๋น ํ ์คํธ๊ฐ ํ ์ค ๋ ์ถ๊ฐ๋์ด ์คํฌ๋กค๋ฐ๊ฐ ๋ํ๋ฉ๋๋ค.
๊ฐ์ฑ์ ๋ํด์ฃผ๋ ์ฅ๋ฏธ์ ์คํฌ๋กค๋ฐ์ ๋๋ค.
mac-scrollbar-color-amber-500
ํ ํฐ ๊ธฐ๋ฐ ์์๋ ์์๊ฐ ํด๋์ค์ฒ๋ผ ์ ์ฉ๋ฉ๋๋ค.
๋ ธ๋๋น ์ฐ๋ฒ ์ปฌ๋ฌ๋ก ์คํฌ๋กค ์ฝํ ์ธ ๋ฅผ ๊ฐ์กฐํฉ๋๋ค.
์กฐ๊ธ ๋ ๊ธด ํ ์คํธ๋ฅผ ๋ฃ์ด ์คํฌ๋กค ์ํ๋ฅผ ํ์ธํด๋ณด์ธ์.
Hex ์์ ๊ฐ: mac-scrollbar-color-[#ff1493]
16์ง์ ์์ ์ฝ๋๋ฅผ ์ง์ ์ฌ์ฉํ ์์ ์ ๋๋ค.
๋๋ ์๋ค์ด ๋์์ ๋ฐ๋ก ๋ค์ด ์ฐฌ๋ฏธ๋ฅผ ์ํ์ฌ ์ด๊ฒ์ด๋ค.
๋ณด๋ด๋ ์์ผ๋ฉฐ, ์์์ ์ค์ง ์ธ์ธํ๋ด? ๋ชจ๋๋ฟ์ผ ๋๋ ฅ์ ํ์ ํ๊ฒ.
์ฒญ์ถ ๊ทธ๋ค์ ๊ธด์ง๋ผ ๊ฒ์ด๋ค. ํ์ด ๋ฐ์ด๋ฉฐ, ์์ ์ธ์์ ํฉ๊ธ์๋๋ฅผ.
Deep pink complete! ๐
HSL ์์ ๊ฐ: mac-scrollbar-color-[hsl(120,100%,25%)]
HSL ์์ ํ๊ธฐ๋ฒ์ ์ฌ์ฉํ ์งํ ๋ น์ ์์ ์ ๋๋ค.
ํฉ๊ธ์๋๋ค. ๊ทธ๋ฌ๋ฏ๋ก ๋๋ ์ธ๋ฅ์ ์ด์์ ์ฌ๋ง์ด๋ค.
ํ์ฐจ๊ฒ ์จ๊ฐ ๋๊น์ง ๋ฐฉํฉํ์์ผ๋ฉฐ, ์ค๋ฉฐ๋ค์ด ๊ตฌํ ๊ตํฅ์ ์ด๋ค.
๋์ ๋์, ์ฐ๋ฆฌ์ ๊ฒ์ด๋ค. ์๋ ๊ฝ ์ปค๋ค๋ ๊ตฌํ์ง ๊ฒ์ด๋ค.
Forest green complete! ๐ฒ
๐ง ๋ค์ค ์์ ๊ฐ
์์: 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>
ํธ๊ณ , ์ฐฌ๋ฏธ๋ฅผ ์ธ์์ ์ฐ์ผ์ ์ฒ ํํ์๋๊ฐ? ์ฌ์ฉ์ ์ ์ ํฌ๊ธฐ ์คํฌ๋กค๋ฐ ์๋ฃ! ๐
๐ ์๋ ์ ์ฉ
์ด ์ปจํ ์ด๋๋ ๋ชจ๋ ์์ ์์์ mac-scrollbar๋ฅผ ์๋์ผ๋ก ์ ์ฉํฉ๋๋ค.
์ด ๋ด๋ถ div์๋ ์คํฌ๋กค๋ฐ๊ฐ ์๋์ผ๋ก ์ ์ฉ๋ฉ๋๋ค.
mac-scrollbar-all ํด๋์ค๋ก ์ธํด ์๋์ผ๋ก ์ ์ฉ๋ฉ๋๋ค. ๋ถ๋ชจ์์ ์์์ผ๋ก ์คํ์ผ์ด ์์๋๋ ๊ฒ์ ํ์ธํด๋ณด์ธ์.
๋๋ ์๋ค์ด ๋์์ ๋ฐ๋ก ๋ค์ด ์ฐฌ๋ฏธ๋ฅผ ์ํ์ฌ ์ด๊ฒ์ด๋ค. ๋ณด๋ด๋ ์์ผ๋ฉฐ, ์์์ ์ค์ง ์ธ์ธํ๋ด?
๋ชจ๋๋ฟ์ผ ๋๋ ฅ์ ํ์ ํ๊ฒ ์ฒญ์ถ ๊ทธ๋ค์ ๊ธด์ง๋ผ ๊ฒ์ด๋ค. ํ์ด ๋ฐ์ด๋ฉฐ, ์์ ์ธ์์ ํฉ๊ธ์๋๋ฅผ ํฉ๊ธ์๋๋ค.
์ฒซ ๋ฒ์งธ ์์ญ ์๋ฃ! โจ
์ด ์์ญ๋ ๊ฐ์ ์คํฌ๋กค๋ฐ ์คํ์ผ์ ๊ฐ์ต๋๋ค.
๋ถ๋ชจ ์์์ .mac-scrollbar-all ํด๋์ค๊ฐ ๋ชจ๋ ์์์๊ฒ ์ํฅ์ ์ค๋๋ค.
๊ทธ๋ฌ๋ฏ๋ก ๋๋ ์ธ๋ฅ์ ์ด์์ ์ฌ๋ง์ด๋ค. ํ์ฐจ๊ฒ ์จ๊ฐ ๋๊น์ง ๋ฐฉํฉํ์์ผ๋ฉฐ, ์ค๋ฉฐ๋ค์ด ๊ตฌํ ๊ตํฅ์ ์ด๋ค.
๋์ ๋์, ์ฐ๋ฆฌ์ ๊ฒ์ด๋ค. ์๋ ๊ฝ ์ปค๋ค๋ ๊ตฌํ์ง ๊ฒ์ด๋ค. ์๋ ์ฒ๊ณ ์ ๋ฃ๊ธฐ๋ง ๋ฐ์ด๋ฉฐ.
๋ ๋ฒ์งธ ์์ญ ์๋ฃ! ๐
์ธ ๋ฒ์งธ ์์ญ๋ ๋์ผํ ์คํฌ๋กค๋ฐ๋ฅผ ๊ฐ์ง๋๋ค.
๊ทธ๋ค์ ์์ผ๋ด? ๋์ ๊ฒ์ ์ถ์ด ๊ฒ์ด๋ค. ์ด ๊ฒ์ ์๊ณ ๋๋ฌธ์ด๋ค. ๋ถ์ก์ ์ด ๊ทธ์ ๋๊ณ , ์๋ช ์ ์ด์, ์นผ์ด๋ค.
ํ ์ง๋ผ๋ ํ๋ณต์ค๋ฝ๊ณ ๊ฐ์ด์ ์ฐ๋ฆฌ ๊ธฐ๊ด๊ณผ ์ธ๊ฐ์ด ๋๋๋ค. ๊ณ ํ์ ์ผ๋ง๋ ์ด์ ๊ฐ์ ๊ฒ์ด๋ค.
๋ชจ๋ ์์ ์์ ์ ์ฉ ์๋ฃ! ๐ฏ
๐ ์์ ํ ์จ๊ฒจ์ง
์คํฌ๋กค๋ฐ๊ฐ ์์ ํ ์จ๊ฒจ์ ธ ์์ง๋ง ์คํฌ๋กค์ ์ฌ์ ํ ๊ฐ๋ฅํฉ๋๋ค.
์คํฌ๋กค๋ฐ๊ฐ ์จ๊ฒจ์ง ์์ ์ ๋๋ค. ์คํฌ๋กค์ ๊ฐ๋ฅํ์ง๋ง ์คํฌ๋กค๋ฐ๋ ๋ณด์ด์ง ์์ต๋๋ค. ํค๋ณด๋ ํ์ดํ๋ ๋ง์ฐ์ค ํ ๋ก ์คํฌ๋กคํด๋ณด์ธ์!
๋๋ ์๋ค์ด ๋์์ ๋ฐ๋ก ๋ค์ด ์ฐฌ๋ฏธ๋ฅผ ์ํ์ฌ ์ด๊ฒ์ด๋ค. ๋ณด๋ด๋ ์์ผ๋ฉฐ, ์์์ ์ค์ง ์ธ์ธํ๋ด? ๋ชจ๋๋ฟ์ผ ๋๋ ฅ์ ํ์ ํ๊ฒ ์ฒญ์ถ ๊ทธ๋ค์ ๊ธด์ง๋ผ ๊ฒ์ด๋ค.
ํ์ด ๋ฐ์ด๋ฉฐ, ์์ ์ธ์์ ํฉ๊ธ์๋๋ฅผ ํฉ๊ธ์๋๋ค. ๊ทธ๋ฌ๋ฏ๋ก ๋๋ ์ธ๋ฅ์ ์ด์์ ์ฌ๋ง์ด๋ค. ํ์ฐจ๊ฒ ์จ๊ฐ ๋๊น์ง ๋ฐฉํฉํ์์ผ๋ฉฐ, ์ค๋ฉฐ๋ค์ด ๊ตฌํ ๊ตํฅ์ ์ด๋ค.
๋์ ๋์, ์ฐ๋ฆฌ์ ๊ฒ์ด๋ค. ์๋ ๊ฝ ์ปค๋ค๋ ๊ตฌํ์ง ๊ฒ์ด๋ค. ์๋ ์ฒ๊ณ ์ ๋ฃ๊ธฐ๋ง ๋ฐ์ด๋ฉฐ, ๊ทธ๋ค์ ์์ผ๋ด? ๋์ ๊ฒ์ ์ถ์ด ๊ฒ์ด๋ค. ์ด ๊ฒ์ ์๊ณ ๋๋ฌธ์ด๋ค.
๋ถ์ก์ ์ด ๊ทธ์ ๋๊ณ , ์๋ช ์ ์ด์, ์นผ์ด๋ค. ํ ์ง๋ผ๋ ํ๋ณต์ค๋ฝ๊ณ ๊ฐ์ด์ ์ฐ๋ฆฌ ๊ธฐ๊ด๊ณผ ์ธ๊ฐ์ด ๋๋๋ค. ๊ณ ํ์ ์ผ๋ง๋ ์ด์ ๊ฐ์ ๊ฒ์ด๋ค.
๐ง ์ง์ ๋ธ๋ผ์ฐ์
ํธ๊ณ , ์ฐฌ๋ฏธ๋ฅผ ์ธ์์ ์ฐ์ผ์ ์ฒ ํํ์๋๊ฐ? ์ผ๋ง๋ ๋ณด๋ด๋ ๋ฌผ๋ฐฉ์ ๊ฐ์ ์ฒญ์ถ์ ๊ฐ๋ ์ฒญ์ถ์ ๋๋ฌธ์ด๋ค. ์ฒญ์ถ์ ์ผ์์ด ์๋ ์๋๋ค.
๋๋ ฅ์ ํ๋ถํ๊ฒ ๋ชฉ์จ์ ์ธ์์ ์๋ ์ด ๊ทธ๋ฌ๋ฏ๋ก ๋ณด์ด๋ ๊ฐ๋ ์ฌ๋ง์ด๋ค. ์ผ๋ง๋ ์์๋๊ณ , ๋จ๊ณ , ๋์ด์ง๋ผ ํ์ฌ๋ ์ฉ๊ฐํ๊ณ ํฉ๊ธ์๋๋ค.
์จ๊ฒจ์ง ์คํฌ๋กค๋ฐ ์๋ฃ! ์คํฌ๋กค๋ฐ๊ฐ ๋ณด์ด์ง ์์๋ ์คํฌ๋กค์ด ๋ฉ๋๋ค! ๐ญ
npm install tailwindcss-mac-scrollbar
/* In your app.css */
@import "tailwindcss";
@plugin "tailwindcss-mac-scrollbar/plugin";
/* In your app.css */
@import "tailwindcss";
@import "tailwindcss-mac-scrollbar";
.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 scrollbarmac-scrollbar-color-[...] - Colormac-scrollbar-w-[...] - Widthmac-scrollbar-h-[...] - Height<!-- 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.