TIL - 21.08.11 πŸ‘¨β€πŸ’» - React

μ„±ν›ˆΒ·2021λ…„ 8μ›” 11일
TIL
0

TIL

λͺ©λ‘ 보기
49/59
post-thumbnail

TIL - 21.08.11 πŸ‘¨β€πŸ’»

λ¦¬μ•‘νŠΈλ‘œ UI νŒ¨ν„΄ κ΅¬ν˜„ν•˜κΈ°

λͺ¨λ‹¬ - Modal

사싀 fixed둜 λ§Œλ“€ μˆ˜λ„ μžˆμ—ˆλŠ”λ°, fixed둜 μ£Όλ©΄ λͺ¨λ‹¬μ°½ μ•ˆμ— λ‹«κΈ° λ²„νŠΌ 건듀기가 λ„ˆλ¬΄ νž˜λ“€μ–΄μ„œ 일단 μ €λŸ° μ‹μœΌλ‘œ ν•΄λ΄€λ‹€.

ν† κΈ€ - Toggle

말 κ·ΈλŒ€λ‘œ css의 transition을 μ΄μš©ν•œ κ°„λ‹¨ν•œ μ• λ‹ˆλ©”μ΄μ…˜μ„ κ΅¬ν˜„ν•΄λ΄€λ‹€.
transition이 μ§„μ§œ μ“Έ 곳이 λ§Žμ€ λ“― ν•˜λ‹€.

νƒ­ - Tab


νƒœκ·Έ - Tag


λΈ”λ‘œκΉ…ν•˜λ©΄μ„œ κ°€μž₯ 자주본 UI, Tag이닀.
μ§€κΈˆ ν¬μŠ€νŒ…ν•˜λŠ” 상단에도 νƒœκ·Έ 뢀뢄이 μžˆλŠ”λ° μƒλ‹Ήνžˆ μ΅μˆ™ν•΄μ„œ κ΅¬ν˜„ν•˜λ©° 즐거웠닀.

μžλ™μ™„μ„± - AutoComplete


이 μžλ™μ™„μ„±μ€ λ§Œλ“€κΈ°λŠ” μ‰½μ§€λ§Œ 검색 μ•Œκ³ λ¦¬μ¦˜μ„ λ§Œλ“œλŠ”κ²Œ μƒλ‹Ήνžˆ κΉŒλ‹€λ‘œμšΈ 것 κ°™λ‹€.
μ§„μ§œ ꡬ글 검색같은건 μ–΄λ–»κ²Œ λ§Œλ“ κ±΄μ§€ 막막~ν•˜λ‹€.

λˆŒλŸ¬μ„œ μˆ˜μ • - ClickToEdit


둜직 μžμ²΄λŠ” ν¬μ»€μŠ€κ°€ 주어지지 μ•ŠμœΌλ©΄ span같은 μˆ˜μ • λΆˆκ°€λŠ₯ν•œ μš”μ†Œλ₯Ό λ Œλ”ν•˜λŠ” 것이닀.

TO DO πŸ”₯

  • Redux μ„ ν–‰ν•™μŠ΅

Retrospect 🧐

CSS μ˜€λžœλ§Œμ— ν•΄λ΄μ„œ 정말 더듬더듬 μ§‘μ–΄κ°€λ©΄μ„œ ν–ˆμ§€λ§Œ, κ·Έλž˜λ„ 막상 κ΅¬ν˜„ν•΄λ†“μ€ UIλ₯Ό λ³΄λ‹ˆ λΏŒλ“―ν–ˆλ‹€.
이 μ—­μ‹œλ„ 이 만의 맀λ ₯이 λ„˜μΉ˜λŠ”κ΅¬λ§Œ.

profile
μ„±ν›ˆ
μ–΄λ–»κ²Œ 이걸 ν’€μ–΄λ‚Ό 수 μžˆμ„κΉŒ
이전 포슀트

TIL - 21.08.06 πŸ‘¨β€πŸ’» - express.js

λ‹€μŒ 포슀트

TIL - 21.08.12 πŸ‘¨β€πŸ’» - Redux

1개의 λŒ“κΈ€

comment-user-thumbnail
λ°•μ§„ν˜„
2021λ…„ 8μ›” 11일

λΈ”λ‘œκ·Έ 맀번 잘 λ³΄κ³ μžˆμ–΄μš”~~!!πŸ₯°

λ‹΅κΈ€ 달기