
ํ๋กํผํฐ = ์ปดํฌ๋ํธ์ โ์ต์
ํ ๊ธ ์ค์์นโ
๋์์ด๋๊ฐ ๋ง๋ ์ปดํฌ๋ํธ ์์์
๐ ๋ฒํผ ์์, ํ
์คํธ, ์์ด์ฝ ์์น ๋ฑ์
๐ โ๋ณ๊ฒฝ ๊ฐ๋ฅํ๊ฒ ๋ฏธ๋ฆฌ ์ ํด๋ ํญ๋ชฉ๋ค
๐ ์์: ๋ฒํผ ์ปดํฌ๋ํธ

โก ๋์์ด๋๊ฐ ์ด๋ ๊ฒ ๋ง๋ค์ด๋์ผ๋ฉด
โก ํ์์ ์ธ์คํด์ค ์ธ ๋ โ์ต์
๊ณ ๋ฅด๋ฏ์ดโ ๋ฒํผ์ ๋ฐ๊ฟ ์ ์์
๋ฒํผ์ ์์ด์ฝ ๋ถ์ผ๊น?
๋ฐฐ๊ฒฝ์์ ๋ญ๋ก ํ ๊น?
ํ ์คํธ๋ ๋ญ๋ก ๋ฐ๊ฟ๊น?
์ด๊ฑธ ํ๋ํ๋ ์ง์ ํด์ฒดํ๊ฑฐ๋ ๋ฏ์ง ์์๋
๐ ํ๋กํผํฐ ํจ๋์์ ์ต์
์ผ๋ก ์ค์ ๊ฐ๋ฅํจ

์ปดํฌ๋ํธ = ์บ๋ฆญํฐ
ํ๋กํผํฐ = ์บ๋ฆญํฐ ์ปค์คํฐ๋ง์ด์ง ๋ฉ๋ด
๋จธ๋ฆฌ์ ๋ฐ๊พธ๊ธฐ
์ฅ๋น ์ฐฉ์ฉ on/off
๋งํ์ ๋ฐ๊พธ๊ธฐ
ํฌ์ฆ ๋ณ๊ฒฝ
์ด๋ฐ ๊ฑธ ํ๋กํผํฐ๋ก ํ ๊ธํ ๊ธ ํด์ ์ธ ์ ์์
์ฝ๊ฐ ๋๋ ๋น์ทํ ๊ฑด ์์:
ํฌํ ์ต: ์ค๋งํธ ์ค๋ธ์ ํธ + ํ ์คํธ ๋ ์ด์ด + ๋ ์ด์ด ์คํ์ผ ์กฐํฉ
์ธ๋์์ธ: ์คํ์ผ + ๋ณ์ ๊ธฐ๋ฅ + ์ฌ๋ณผ ๋ฑ
๊ทผ๋ฐ ํผ๊ทธ๋ง๋ ๊ทธ๊ฑธ ํจ์ฌ ์ง๊ด์ & ํธํ๊ฒ ํ ๋๋
์ปดํฌ๋ํธ = ํ ํ๋ฆฟ
ํ๋กํผํฐ = ํ ํ๋ฆฟ ์์์ ๋ฐ๊ฟ ์ ์๋ ํญ๋ชฉ (๋์์ด๋๊ฐ ์ค์ ํด๋)
ํ์์ ๊ทธ ์ต์ ๋ง ๊ณจ๋ผ์ ๋๋ํ๊ฒ ๋์์ธ ๊ฐ๋ฅ
๋์์ด๋๊ฐ ๋ฒํผ "๋ชจ์" ์ด๋ "์ํ" ๋ง ์ ๋ฆฌํด ์ฃผ๋ฉด ๋!
๐ "์ฝ๋ฉ์ ๊ฐ๋ฐ์ ๋ชซ!"
๐ ๋์์ด๋๋ ์ฝ๋ฉ ์ ํด๋ ๋๋ ๊ตฌ์กฐ๋ก ๋์์ธ ์์คํ
์ง๋ ๊ฑฐ์
โ
๋ฒํผ ๋์์ธ ๋ง๋ค์ด์
โ
์๋ฅผ ๋ค์ด ์๋์ฒ๋ผ ์ํ ๊ตฌ๋ถํด๋๋ฉด ๋จ:

๊ทธ๋ฆฌ๊ณ ์ด๊ฑธ Variants + ํ๋กํผํฐ๋ก ์ฐ๊ฒฐํ๋ฉด ๊ฐ๋ฐ์๋ ๊ทธ๊ฑธ ๋ณด๊ณ โ ์ฝ๋๋ก ์ฐ๊ฒฐ (์: onClick ์ด๋ฒคํธ ๋ฑ)๋ง ํ๋ฉด ๋จ!
๋์์ด๋:
๋ฒํผ ์ปดํฌ๋ํธ ๋ง๋ค๊ณ
state ํ๋กํผํฐ: Default / Hover / Pressed / Disabled
icon: ์์ / ์์
text: ์ปค์คํ ๊ฐ๋ฅํ๊ฒ
๊ฐ๋ฐ์:
์ฝ๋์์ button.state = "hover" ์ฒ๋ผ ์ฌ์ฉ
์ค์ ๋์ (๋๋ฅด๋ฉด ๋ญ ์คํ๋จ)์ JS๋ ๋ฆฌ์กํธ๋ก ๊ฐ๋ฐ์๊ฐ ์ง์ค
ํผ๊ทธ๋ง๋ ๋์์ธ๊ณผ ํ์
์ ๊ธฐ์ค์ ์ ์ก์์ฃผ๋ ๊ฑฐ๊ณ
์ค์ ์ฑ์ ๊ตด๋ฆฌ๋ ์ฝ๋๋ โ ๊ฐ๋ฐ์๊ฐ ๊ตฌํ
๋์์ด๋๊ฐ ํด์ผ ํ๋ ๊ฑด:
"์ด ๋ฒํผ์ด ์ด๋ค ์ํฉ์์ ์ด๋ค ๋ชจ์ต์ด์ด์ผ ํด์"
๋ฅผ ๋ช
ํํ๊ฒ ๋ณด์ฌ์ฃผ๋ ๊ฒ!
๐งโ๐จ ๋์์ด๋:
๋ฒํผ์ ์ด ์, ์ด ์ํ, ์ด ๋ชจ์์ผ๋ก ๋์ฌ ๊ฑฐ์์~
๐จโ๐ป ๊ฐ๋ฐ์:
์~ ๊ทธ๋ผ ํด๋ฆญํ๋ฉด ์ด ํจ์ ์คํ๋๊ฒ ์ฝ๋ฉํ ๊ฒ์~
Q: ํ๋กํผํฐ๋ ์ด์ผํจ? ์์คํ ์?? ์๋ ๋ด๊ฐ ์ด๊ฑฐ ์ด๋ฌ์ผ ์จ์ฌ~ ํ๊ณ ์ค๋ช ํ๋ ๊ทธ ๊ณผ์ ์ ํ๋กํผํฐ๋ผ๊ณ ํจ?
A:
"์ปดํฌ๋ํธ์ ์ ์ฉ๋๋ ์กฐ์ ๊ฐ๋ฅํ ์ต์
๊ฐ"
โ ์์คํ
์ด์, ๋ค๊ฐ ์ง์ ์ค์ ํด์ ์ฐ๋ ๊ฑฐ์!
โโ์ด ์ปดํฌ๋ํธ๊ฐ ๋ฒํผ์ด๋ฉด,
๋ฒํผ์ ์ํ๋ฅผ ์ ํํ ์ ์์ด์ผ ํ์ง ์์๊น?โ
๊ทธ๋ผ ๋ง๋ ๋ค: state๋ผ๋ ํ๋กํผํฐ๋ฅผ!

์ฆ, ํ๋์ ๋ง์คํฐ ์ปดํฌ๋ํธ์ "์ด๋ ๊ฒ ๋ฐ๊ฟ์ธ ์ ์์ด์~" ๋ผ๊ณ ์ต์ ๋ถ์ฌ์ฃผ๋ ๊ฒ!
๋ง์คํฐ ์ปดํฌ๋ํธ ์ ํ
์ค๋ฅธ์ชฝ ์๋จ "Variants" ๋ง๋ค๊ธฐ
๊ฐ Variant(๋ณํ)์ state, icon, size ๊ฐ์ ํ๋กํผํฐ ์ด๋ฆ ๋ถ์ฌ
๊ฐ๋ ์ค์ (์: state=hover)
๊ทธ๋ผ ์ธ์คํด์ค์์ ๋๋กญ๋ค์ด์ฒ๋ผ ๊ณจ๋ผ์ ์ธ ์ ์์!
๋ง์คํฐ ์ปดํฌ๋ํธ = ๋ํ์ง
ํ๋กํผํฐ = ๋ถ์ด๋ ์์ ๋๊ตฌ ์ ํ
์ธ์คํด์ค = ๊ทธ๊ฑธ๋ก ๊ทธ๋ฆฐ ์ํ
๋๋ ๋ถ์ด๋ ์ ๋๊ตฌ ์ธํ
๊น์ง ๋ค ์ ํด์ฃผ๊ณ ,
๋๋ฃ๋ ๊ทธ๊ฑธ ๊ณจ๋ผ์ ํ์ํ ๋ฐ ์ฐ๋ ๊ตฌ์กฐ!
โ ํ๋กํผํฐ๋ ์์คํ
์ด๋ค.
ํผ๊ทธ๋ง์ ๊ธฐ๋ฅ์ด "๋ค์ด์๊ณ ",
๋ด๊ฐ ์ง์ ์ ํด์ ๋ถ์ด๋ ์ต์
๊ฐ์ด์ผ.
โ ์ผ์ข ์ ์ปดํฌ๋ํธ ์กฐ์ ์ค์์น ๊ฐ์ ๊ฑฐ!