๐Ÿ“ฑ๐Ÿ’ปmedia query min-width, max-width

์ด์ค€์„ยท2024๋…„ 3์›” 23์ผ

๊ฐœ๋… ์ •๋ฆฌ

๋ชฉ๋ก ๋ณด๊ธฐ
5/11

๐Ÿ“ฑ๐Ÿ’ปmedia query์—์„œ min-width์™€ max-width๋ž€?

  • ํ™”๋ฉด์˜ ๋„ˆ๋น„๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํŠน์ • ์Šคํƒ€์ผ์„ ์ ์šฉํ•˜๋Š” ์กฐ๊ฑด์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. ๊ฐ„๋‹จํ•˜๊ฒŒ ๋งํ•˜์ž๋ฉด, min-width๋Š” "์ด ๋„ˆ๋น„๋ณด๋‹ค ํฌ๊ฑฐ๋‚˜ ๊ฐ™์„ ๋•Œ"(min-width >= x๋„ˆ๋น„)๋ฅผ ์˜๋ฏธํ•˜๊ณ , max-width๋Š” "์ด ๋„ˆ๋น„๋ณด๋‹ค ์ž‘๊ฑฐ๋‚˜ ๊ฐ™์„ ๋•Œ"(max-width <= x๋„ˆ๋น„)๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

  • min-width
    min-width๋Š” ์„ค์ •ํ•œ ์ตœ์†Œ ๋„ˆ๋น„์— ๋„๋‹ฌํ•˜๊ฑฐ๋‚˜ ๊ทธ๋ณด๋‹ค ํด ๋•Œ ์ ์šฉ๋˜๋Š” ์Šคํƒ€์ผ์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. ์ฆ‰, ํ™”๋ฉด์˜ ๋„ˆ๋น„๊ฐ€ min-width์—์„œ ์ •ํ•œ ๊ฐ’ ์ด์ƒ์ด๋ฉด ํ•ด๋‹น ์Šคํƒ€์ผ์ด ์ ์šฉ๋ฉ๋‹ˆ๋‹ค. ์ด๋Š” ํ™”๋ฉด์ด ์ปค์งˆ ๋•Œ ์ ์šฉ๋˜๋Š” ์Šคํƒ€์ผ์„ ์ •์˜ํ•  ๋•Œ ์ฃผ๋กœ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

@media (min-width: 600px) {
  body {
    background-color: lightblue;
  }
}

์ด ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ๋Š” ํ™”๋ฉด ๋„ˆ๋น„๊ฐ€ 600ํ”ฝ์…€ ์ด์ƒ์ผ ๋•Œ body์˜ ๋ฐฐ๊ฒฝ์ƒ‰์„ lightblue๋กœ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. ํ™”๋ฉด์ด 600ํ”ฝ์…€๋ณด๋‹ค ์ž‘์œผ๋ฉด ์ด ์Šคํƒ€์ผ์€ ์ ์šฉ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

  • max-width
    max-width๋Š” ์„ค์ •ํ•œ ์ตœ๋Œ€ ๋„ˆ๋น„์— ๋„๋‹ฌํ•˜๊ฑฐ๋‚˜ ๊ทธ๋ณด๋‹ค ์ž‘์„ ๋•Œ ์ ์šฉ๋˜๋Š” ์Šคํƒ€์ผ์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. ์ฆ‰, ํ™”๋ฉด์˜ ๋„ˆ๋น„๊ฐ€ max-width์—์„œ ์ •ํ•œ ๊ฐ’ ์ดํ•˜๋ฉด ํ•ด๋‹น ์Šคํƒ€์ผ์ด ์ ์šฉ๋ฉ๋‹ˆ๋‹ค. ์ด๋Š” ํ™”๋ฉด์ด ์ž‘์•„์งˆ ๋•Œ ์ ์šฉ๋˜๋Š” ์Šคํƒ€์ผ์„ ์ •์˜ํ•  ๋•Œ ์ฃผ๋กœ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.
@media (max-width: 599px) {
  body {
    background-color: lightcoral;
  }
}

์ด ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ๋Š” ํ™”๋ฉด ๋„ˆ๋น„๊ฐ€ 599ํ”ฝ์…€ ์ดํ•˜์ผ ๋•Œ body์˜ ๋ฐฐ๊ฒฝ์ƒ‰์„ lightcoral๋กœ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. ํ™”๋ฉด์ด 599ํ”ฝ์…€๋ณด๋‹ค ํฌ๋ฉด ์ด ์Šคํƒ€์ผ์€ ์ ์šฉ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

  • ์ •๋ฆฌ
    -min-width: ํ™”๋ฉด์ด ์ด ๋„ˆ๋น„ ์ด์ƒ์ผ ๋•Œ ์ ์šฉ๋˜๋Š” ์Šคํƒ€์ผ. ํ™”๋ฉด์ด ์ปค์งˆ ๋•Œ ์‚ฌ์šฉ.
    -max-width: ํ™”๋ฉด์ด ์ด ๋„ˆ๋น„ ์ดํ•˜์ผ ๋•Œ ์ ์šฉ๋˜๋Š” ์Šคํƒ€์ผ. ํ™”๋ฉด์ด ์ž‘์•„์งˆ ๋•Œ ์‚ฌ์šฉ.
    -์ด ๋‘ ์กฐ๊ฑด์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐ˜์‘ํ˜• ์›น ๋””์ž์ธ์„ ๊ตฌํ˜„ํ•  ๋•Œ ๋‹ค์–‘ํ•œ ํ™”๋ฉด ํฌ๊ธฐ์— ๋งž๋Š” ์Šคํƒ€์ผ์„ ์ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ถœ์ฒ˜-GPT-4

profile
ํ”„๋ก ํŠธ์—”๋“œ๋ฅผ ๊ณต๋ถ€ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€