[CSS] ๋ฐ˜์‘ํ˜• ์›น ๋ฏธ๋””์–ด ์ปค๋ฆฌ(@media) โœ๏ธ
ยท
CSS
๐Ÿ‘จ‍๐Ÿ’ป ๋ฏธ๋””์–ด ์ปค๋ฆฌ๋ž€?๋ฐ˜์‘ํ˜• ์›น ๋””์ž์ธ์—์„œ ๊ฐ€์žฅ ๊ธฐ๋ณธ์ ์ธ ๊ฐœ๋…์œผ๋กœ ์‚ฌ์ดํŠธ์— ์ ‘์†ํ•˜๋Š” ์žฅ์น˜์— ๋”ฐ๋ผ ํŠน์ •ํ•œ CSS ์Šคํƒ€์ผ์„ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค.์•„๋ž˜ ์˜ˆ์‹œ ์‚ฌ์ง„ ์ฒ˜๋Ÿผ, ๋ฏธ๋””์–ด ์ปค๋ฆฌ๋Š” ๋‹ค์–‘ํ•œ ๊ธฐ๊ธฐ์™€ ํ™”๋ฉด ํฌ๊ธฐ์— ๋Œ€์‘ํ•˜์—ฌ ์›น ์‚ฌ์ดํŠธ๋ฅผ ๋” ํšจ๊ณผ์ ์œผ๋กœ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•œ๋‹ค.๋ฏธ๋””์–ด ์ปค๋ฆฌ๋Š” ์‚ฌ์ด์— ์‚ฌ์šฉํ•˜๋ฉฐ ๊ธฐ๋ณธ์ ์œผ๋กœ ๋ฏธ๋””์–ด ์œ ํ˜•์„ ์ง€์ •ํ•˜๊ณ  ํ•„์š”ํ•œ ๊ฒฝ์šฐ์—๋Š” and ์—ฐ์‚ฐ์ž๋กœ ์กฐ๊ฑด์„ ์ ์šฉํ•œ๋‹ค.1. ์›น ํŽ˜์ด์ง€์˜ ์ตœ๋Œ€ ๊ฐ€๋กœ ๋„ˆ๋น„(max-width)๊ฐ€ 980px ์ดํ•˜์ธ ๊ฒฝ์šฐ@media screen and (max-width:980px) {    #page { width: 94%;}    #main {width: 65%;}    #sidebar {width: 30%;}}2. ์›น ํŽ˜์ด์ง€์˜ ์ตœ๋Œ€ ๊ฐ€๋กœ ๋„ˆ๋น„(max-width)๊ฐ€ 70..