๋‚ด์ผ๋ฐฐ์›€์บ ํ”„ UXUI

[๋‚ด์ผ๋ฐฐ์›€์บ ํ”„ 48์ผ์ฐจ] ๊ธฐ๋ณธ ์ฝ”๋”ฉ

dmstj5923 2025. 6. 24. 17:50

์กธ๋ฆฐ ๋ˆˆ ๋ถ€์—ฌ์žก์œผ๋ฉฐ,,

์ฝ”๋”ฉ ์ฃผ๊ฐ„ ์‹œ์ž‘

 

 

 

<๊ธฐ๋ณธ ์ฝ”๋”ฉ>

ํ”„๋ ˆ์ด๋จธ ๋ฐฐ์šฐ๊ธฐ

 

 

 

 

 

 

์‹ค์Šตํ•˜๊ธฐ

 

Size

 

Position

<Overflow>

๋„˜์น˜๋‹ค๋Š” ๋œป์œผ๋กœ, CSS์—์„œ ์š”์†Œ์˜ ํฌ๊ธฐ๋ฅผ ๋„˜์–ด์„œ๋Š” ๋ฒ”์œ„๋ฅผ ์–ด๋–ป๊ฒŒ ์ฒ˜๋ฆฌํ•  ๊ฑด์ง€ ๋งํ•˜๋Š” ๊ฒƒ

  • Visible : ๋„˜์น˜๋Š” ๊ฑธ ๋ณด์—ฌ์คŒ
  • Hidden : ๋„˜์น˜๋Š” ๊ฑธ ์ˆจ๊น€
  • Scroll : ๋„˜์น˜๋Š” ๊ฑธ ์š”์†Œ ์•ˆ์—์„œ ์Šคํฌ๋กค๋ง๋  ์ˆ˜ ์žˆ๊ฒŒ ํ•จ

์บ”๋ฒ„์Šค์— ์Šคํƒ ์ ์šฉํ•ด์•ผ๋งŒ ํฌ์ง€์…˜ ์„ค์ • ๊ฐ€๋Šฅ, ์˜ค๋ฒ„ํ”Œ๋กœ์šฐ ๋น„์ง€๋ธ”๋กœ ์„ค์ •ํ•ด์•ผ ์Šคํ‹ฐํ‚ค ๊ฐ€๋Šฅ

 

๋™์˜์ƒ ์„œ๋น„์Šค๊ฐ€ ์ข…๋ฃŒ๋˜์–ด ํ•ด๋‹น ์ฝ˜ํ…์ธ ๋ฅผ ์žฌ์ƒํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

 

Distribute

Start : ์™ผ์ชฝ ์‹œ์ž‘ ์ •๋ ฌ

Center : ๊ฐ€์šด๋ฐ ์ •๋ ฌ

End : ์˜ค๋ฅธ์ชฝ ๋ ์ •๋ ฌ

Space Between : ์ฒซ ์š”์†Œ๋Š” ์‹œ์ž‘, ๋งˆ์ง€๋ง‰ ์š”์†Œ๋Š” ๋

Space Around : ๋ชจ๋“  ์š”์†Œ์˜ ์–‘์ชฝ์— ๋™์ผํ•œ ์—ฌ๋ฐฑ์„ ์ถ”๊ฐ€

Space Evenly : ๋ชจ๋“  ๊ณต๊ฐ„์„ ์™„์ „ํžˆ ๊ท ๋“ฑํ•˜๊ฒŒ ๋ถ„๋ฐฐ

 

Card

 

Button