min-width์™€ max-width์˜ ์ฐจ์ด

TIP
BY soríโฃ
300x250

1. min-width (์ตœ์†Œ ๋„ˆ๋น„)

  "์ด ํฌ๊ธฐ ์ด์ƒ์ผ ๋•Œ ์ ์šฉ"์„ ์˜๋ฏธ.

  ์ฃผ๋กœ PC์ฒ˜๋Ÿผ ํ™”๋ฉด์ด ๋„“์€ ํ™˜๊ฒฝ์— ์Šคํƒ€์ผ์„ ์ ์šฉํ•  ๋•Œ ์‚ฌ์šฉ

 

min-width

 

 

2. max-width (์ตœ๋Œ€ ๋„ˆ๋น„)

  "์ด ํฌ๊ธฐ ์ดํ•˜์ผ ๋•Œ ์ ์šฉ"์„ ์˜๋ฏธ.

  ์ฃผ๋กœ ๋ชจ๋ฐ”์ผ์ฒ˜๋Ÿผ ํ™”๋ฉด์ด ์ž‘์€ ํ™˜๊ฒฝ์— ์Šคํƒ€์ผ์„ ์ ์šฉํ•  ๋•Œ ์‚ฌ์šฉ.

 

max-width

 

 

์–ด๋–ป๊ฒŒ ํ™œ์šฉํ•˜๋Š๋ƒ๊ฐ€ ์ค‘์š”

   ๋ชจ๋ฐ”์ผ์„ ๊ธฐ๋ณธ์œผ๋กœ ์žก๊ณ , PC ์Šคํƒ€์ผ์„ ๋”ฐ๋กœ ๋ฎ์–ด์“ฐ๊ณ  ์‹ถ๋‹ค๋ฉด **min-width**๋ฅผ ์ฃผ๋กœ ์‚ฌ์šฉ

   ๋ฐ˜๋Œ€๋กœ PC๋ฅผ ๊ธฐ๋ณธ์œผ๋กœ ์žก๊ณ , ๋ชจ๋ฐ”์ผ ์Šคํƒ€์ผ์„ ๋”ฐ๋กœ ๋ฎ์–ด์“ฐ๊ณ  ์‹ถ๋‹ค๋ฉด **max-width**๋ฅผ ์‚ฌ์šฉ

 

์ž‘์€ ๐ŸฏํŒ

๋ชจ๋ฐ”์ผ ์šฐ์„  ์ „๋žต:
์ž‘์€ ํ™”๋ฉด(๋ชจ๋ฐ”์ผ)์„ ๊ธฐ๋ณธ ์Šคํƒ€์ผ๋กœ ์ž‘์„ฑํ•œ ๋’ค, ํ™”๋ฉด์ด ์ปค์งˆ์ˆ˜๋ก (min-width) ์Šคํƒ€์ผ์„ ์ถ”๊ฐ€๋กœ ๋ฎ์–ด์“ฐ๊ธฐ

์žฅ์ : ์š”์ฆ˜ ๋ชจ๋ฐ”์ผ ์‚ฌ์šฉ์ž๊ฐ€ ๋งŽ์œผ๋‹ˆ๊นŒ ๊ธฐ๋ณธ ์„ค์ •์œผ๋กœ ํšจ์œจ์ .

 

PC ์šฐ์„  ์ „๋žต:
ํฐ ํ™”๋ฉด(PC)์„ ๊ธฐ๋ณธ ์Šคํƒ€์ผ๋กœ ์ž‘์„ฑํ•œ ๋’ค, ํ™”๋ฉด์ด ์ž‘์•„์งˆ์ˆ˜๋ก (max-width) ์Šคํƒ€์ผ์„ ๋ฎ์–ด์“ฐ๊ธฐ

์žฅ์ : PC ์ค‘์‹ฌ์˜ ๋””์ž์ธ์— ์ ํ•ฉ.

 

 

728x90