Search

UI μš”μ†Œ

이름
ν…μŠ€νŠΈ
λ²„νŠΌ (Button)
Open
기본적인 UI μš”μ†Œλ‘œ, μƒν˜Έμž‘μš©μ„ μœ„ν•œ 클릭 κ°€λŠ₯ν•œ μš”μ†Œμž…λ‹ˆλ‹€.
ν…μŠ€νŠΈ μž…λ ₯ ν•„λ“œ (Text Input Field)
Open
μ‚¬μš©μž μž…λ ₯을 λ°›κΈ° μœ„ν•œ 기본적인 ν•„λ“œμž…λ‹ˆλ‹€.
μ²΄ν¬λ°•μŠ€ (Checkbox)
Open
μ—¬λŸ¬ μ˜΅μ…˜ 쀑 닀쀑 선택이 ν•„μš”ν•œ 경우 μ‚¬μš©ν•©λ‹ˆλ‹€.
λΌλ””μ˜€ λ²„νŠΌ (Radio Button)
Open
단일 μ˜΅μ…˜ 선택을 μ œκ³΅ν•˜λŠ” UI μš”μ†Œμž…λ‹ˆλ‹€.
ν…μŠ€νŠΈ μ˜μ—­ (Text Area)
Open
μ—¬λŸ¬ μ€„μ˜ ν…μŠ€νŠΈ μž…λ ₯을 μ§€μ›ν•˜λŠ” ν•„λ“œμž…λ‹ˆλ‹€.
λ“œλ‘­λ‹€μš΄ 메뉴 (Dropdown Menu)
Open
μ˜΅μ…˜μ„ 숨기고 클릭 μ‹œ νŽΌμ³μ§€λŠ” λ©”λ‰΄μž…λ‹ˆλ‹€.
μŠ€ν”Όλ„ˆ (Spinner)
Open
λ‘œλ”© μƒνƒœλ₯Ό λ‚˜νƒ€λ‚΄κ±°λ‚˜ κ°’ 쑰정에 μ‚¬μš©ν•©λ‹ˆλ‹€.
μŠ¬λΌμ΄λ” (Slider)
Open
값을 μ‘°μ •ν•  수 μžˆλŠ” λ“œλž˜κ·Έ κ°€λŠ₯ν•œ μ»¨νŠΈλ‘€μž…λ‹ˆλ‹€.
λͺ¨λ‹¬ (Modal)
Open
μΆ”κ°€ 정보λ₯Ό ν‘œμ‹œν•˜λŠ” νŒμ—… μ°½μž…λ‹ˆλ‹€.
ν† κΈ€ μŠ€μœ„μΉ˜ (Toggle Switch)
Open
두 μƒνƒœ κ°„μ˜ μ „ν™˜μ„ λ‚˜νƒ€λ‚΄λŠ” μŠ€μœ„μΉ˜μž…λ‹ˆλ‹€.
νƒ­ (Tabs)
Open
μ—¬λŸ¬ μ½˜ν…μΈ λ₯Ό νƒ­μœΌλ‘œ κ΅¬λΆ„ν•˜μ—¬ ν‘œμ‹œν•˜λŠ” μš”μ†Œμž…λ‹ˆλ‹€.
μ• λ“œμ˜¨ (Accordion)
Open
클릭 μ‹œ νŽΌμ³μ§€λŠ” μ½˜ν…μΈ  μ˜μ—­μž…λ‹ˆλ‹€.
ν”„λ‘œκ·Έλ ˆμŠ€ λ°” (Progress Bar)
Open
μž‘μ—… 진행 μƒνƒœλ₯Ό μ‹œκ°μ μœΌλ‘œ λ‚˜νƒ€λ‚΄λŠ” λ°”μž…λ‹ˆλ‹€.
배지 (Badge)
Open
μ•„μ΄μ½˜ μ˜†μ— μΆ”κ°€ μ •λ³΄λ‚˜ μ•Œλ¦Όμ„ ν‘œμ‹œν•©λ‹ˆλ‹€.
μ•„μ΄μ½˜ (Icon)
Open
μ‹œκ°μ  ν‘œν˜„μ„ μœ„ν•œ μž‘μ€ κ·Έλž˜ν”½μž…λ‹ˆλ‹€.
이미지 가러리 (Image Gallery)
Open
이미지λ₯Ό κ·Έλ¦¬λ“œ λ˜λŠ” μŠ¬λΌμ΄λ“œ ν˜•νƒœλ‘œ λ³΄μ—¬μ£ΌλŠ” κ΅¬μ„±μž…λ‹ˆλ‹€.
λŒ“κΈ€ (Comment)
Open
μ‚¬μš©μž ν”Όλ“œλ°±μ΄λ‚˜ μƒν˜Έμž‘μš©μ„ μœ„ν•œ μ˜μ—­μž…λ‹ˆλ‹€.
λ„€λΉ„κ²Œμ΄μ…˜ λ°” (Navigation Bar)
Open
μ›Ήμ‚¬μ΄νŠΈμ˜ 링크λ₯Ό ν¬ν•¨ν•˜λŠ” λ©”λ‰΄μž…λ‹ˆλ‹€.
μΉ΄λ“œ (Card)
Open
μ½˜ν…μΈ λ₯Ό λ‹΄λŠ” μ»¨ν…Œμ΄λ„ˆμž…λ‹ˆλ‹€.
λ°°λ„ˆ (Banner)
Open
상단에 κ³ μ •λœ κ΄‘κ³ λ‚˜ λ©”μ‹œμ§€μž…λ‹ˆλ‹€.
일정 (Calendar)
Open
λ‚ μ§œ 선택 λ˜λŠ” ν‘œμ‹œλ₯Ό μœ„ν•œ μΈν„°νŽ˜μ΄μŠ€μž…λ‹ˆλ‹€.
데이터 ν…Œμ΄λΈ” (Data Table)
Open
데이터λ₯Ό ν–‰κ³Ό μ—΄λ‘œ μ •λ¦¬ν•˜μ—¬ ν‘œμ‹œν•˜λŠ” μš”μ†Œμž…λ‹ˆλ‹€.