๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

#IT #JavaScript #CSS1

[CSS] ๋ฏธ๋””์–ด์ฟผ๋ฆฌ Media Query ์ ์šฉํ•˜๊ธฐ (์‚ฌ์ด์ฆˆ ๋ถ„๊ธฐ์  ๊ธฐ์ค€ px, ํ…Œ์ŠคํŠธ ๋ฐฉ๋ฒ•) ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์„ธ๊ณ„๋ฅผ ํƒ๊ตฌํ•ฉ์‹œ๋‹ค. ๋ฏธ๋””์–ด์ฟผ๋ฆฌ Media Query ์ ์šฉํ•˜๊ธฐ (์‚ฌ์ด์ฆˆ ๋ถ„๊ธฐ์  ๊ธฐ์ค€ px, ์‚ฌ์šฉ๋ฐฉ๋ฒ•) ์›น์„ ๊ธฐ์ค€์œผ๋กœ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•œ ํ›„ ํ•ด๋‹น ํŽ˜์ด์ง€๋ฅผ ๋ชจ๋ฐ”์ผ์—์„œ ๋ณด๋ฉด CSS๊ฐ€ ์ด์ƒํ•ด์ง€๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ(Media Queries)๋Š” ๋‹ค์–‘ํ•œ ๋””์Šคํ”Œ๋ ˆ์ด ์žฅ์น˜์˜ ๋ทฐํฌํŠธ(Viewport) ํฌ๊ธฐ์™€ ํ•ด์ƒ๋„์— ๋”ฐ๋ผ ์›น ํŽ˜์ด์ง€์˜ ์Šคํƒ€์ผ์„ ๋™์ ์œผ๋กœ ์ ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ๋ฐ˜์‘ํ˜• ์›น ๋””์ž์ธ(Responsive Web Design)์ด ๊ฐ€๋Šฅํ•ด์ง€๋ฉฐ, ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ํฌ๊ฒŒ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ํ™”๋ฉด์˜ ์‚ฌ์ด์ฆˆ๊ฐ€ ์ž‘์•„์ง€๋ฉด ์›๋ž˜ ์žˆ๋˜ ์นดํ…Œ๊ณ ๋ฆฌ ๋ชจ์–‘์„ ๋ฐ”๊พธ๊ฑฐ๋‚˜ ๊ธ€์ž ํฌ๊ธฐ๋ฅผ ์ค„์ด๋Š” ๋“ฑ CSS๋ฅผ ๋”ฐ๋กœ ์„ค์ •ํ•˜๋Š” ๊ฒƒ์„ ๋ฏธ๋””์–ด์ฟผ๋ฆฌ๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๋ฏธ๋””์–ด์ฟผ๋ฆฌ ๋ถ„๊ธฐ์  1. ๋…ธํŠธ๋ถ & ํƒœ๋ธ”๋ฆฟ ๊ฐ€๋กœ .. 2024. 1. 7.
loading

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”