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

Media Queries1

CSS3 Media Queries ๋ฏธ๋””์–ด์ฟผ๋ฆฌ-๋ฐ˜์‘ํ˜•ํŽ˜์ด์ง€๋งŒ๋“ค๊ธฐ ์š”์ฆ˜์€ PC,ํƒœ๋ธ”๋ฆฟ,๋ชจ๋ฐ”์ผ๋“ฑ ๊ฐ์ข…๊ธฐ๊ธฐ๋ฅผ ํ†ตํ•œ ์ธํ„ฐ๋„ท์ ‘์†์ด ์ผ์ƒ์ƒํ™œํ™”๊ฐ€ ๋˜์–ด๊ฐ€๊ณ  ์žˆ๋Š”๊ฐ€์šด๋ฐ ์•„์ง๊นŒ์ง€๋„ PC๋ฒ„์ „ ๋ชจ๋ฐ”์ผ๋ฒ„์ „ ๋”ฐ๋กœ ์ž‘์—…ํ•˜๋Š” ์‚ฌ์ดํŠธ, ์‡ผํ•‘๋ชฐ๋“ค์ด ๋„ˆ๋ฌด๋‚˜๋„ ๋งŽ์Šต๋‹ˆ๋‹ค. ๋ฌผ๋ก ํ•„์š”์— ์˜ํ•ด์„œ ๋”ฐ๋กœ ์ž‘์—…ํ•˜๋Š”๊ฒŒ ๋„์›€์ด ๋  ๋•Œ๋„ ์žˆ์Šต๋‹ˆ๋‹ค๋งŒ. ์ž‘์—…์ž์—๊ฒŒ๋Š” ๋„ˆ๋ฌด๋‚˜๋„ ํฐ ๊ณ ํ†ต๊ณผ ๋‘๋ฒˆ์˜ ์ž‘์—…์„ ๊ฑฐ์ณ์•ผํ•˜๋Š” ๋ถˆํŽธํ•จ์ด ๋งŽ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๋ชจ๋“  ๊ธฐ๊ธฐ์— ๋น ๋ฅด๊ฒŒ ๋งž์ถฐ ๋Œ€์‘ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“ค์–ด ์ง„๊ฒƒ์ด ๋ฏธ๋””์–ด์ฟผ๋ฆฌ์ž…๋‹ˆ๋‹ค. ๋ฌผ๋ก  ๋ฏธ๋””์–ด์ฟผ๋ฆฌ๋„ ๋ฐ˜์‘ํ˜•์„ ์ƒ๊ฐํ•ด์„œ ๋””์ž์ธํ•ด์•ผํ•˜๊ณ  CSS๋„ ๋ณต์žกํ•ด ์งˆ ์ˆ˜ ์žˆ๋‹ค๋Š” ๋‹จ์ ์ด ์žˆ์ง€๋งŒ PC๋”ฐ๋กœ MOBILE๋”ฐ๋กœ ์ž‘์—…ํ•˜๋Š”๊ฒƒ๋ณด๋‹จ ํ›จ์”ฌ ๋น ๋ฅด๊ณ  ๊ฐ„ํŽธํ•˜๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋จผ์ € ํ•ด์ƒ๋„์—๋Œ€ํ•ด ๊ฐ„๋‹จํ•˜๊ฒŒ ์งš๊ณ ๋„˜์–ด๊ฐ€๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ํฌ๋กฌ ์š”์†Œ๊ฒ€์‚ฌ์ชฝ์œผ๋กœ๊ฐ€๋ฉด ์œ„์™€๊ฐ™์ด ํ•ด์ƒ๋„ ํƒญ์ด ์žˆ๋Š”๋ฐ์š”. ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ข…๋ฅ˜๋ฅผ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. 4K-2560.. 2017. 7. 30.