๋ฏธ๋””์–ด์ฟผ๋ฆฌ(media query)

๋ฏธ๋””์–ด์ฟผ๋ฆฌ(media query) ๋ฏธ๋””์–ด์ฟผ๋ฆฌ๋Š” ๋ทฐํฌํŠธ์˜ ํ•ด์ƒ๋„์— ๋”ฐ๋ผ CSS๋ฅผ ๋ถ„๊ธฐ์‹œํ‚ค๋Š” ๋ฐ˜์‘ํ˜• ๊ธฐ๋ฒ•์ž…๋‹ˆ๋‹ค. 01. ์ตœ์†Œ ๊ฐ€๋กœํญ์ด 1000px๋ณด๋‹ค ๋„“์€ ํ•ด์ƒ๋„์ผ ๋•Œ style_pc.css๋ฅผ ์—ฐ๊ฒฐํ•œ๋‹ค๋Š” ๋œป์ž…๋‹ˆ๋‹ค. 02. @media @media all and (min-width: 1000px) { ๋ชจ๋“  ๊ธฐ๊ธฐ์—์„œ ํ•ด์ƒ๋„๊ฐ€ ์ตœ์†Œ 1000px ์ธ ๊ฒฝ์šฐ ์ ์šฉํ•  ์†์„ฑ๋“ค... } CSS ํŒŒ์ผ์„ ํ•˜๋‚˜๋กœ ๋งŒ๋“ค์–ด์„œ CSS ๋‚ด๋ถ€์—์„œ ์กฐ๊ฑด์— ๋”ฐ๋ผ ๋ถ„๊ธฐ์‹œํ‚ค๋Š” ๊ฒƒ์ด ์ผ๋ฐ˜์ ์ธ ํ˜•ํƒœ์˜ ๋ฐ˜์‘ํ˜•์›น CSS์ž…๋‹ˆ๋‹ค. all์€ Media Type์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. and ์ „, ํ›„์— ๋„์–ด ์”๋‹ˆ๋‹ค. Media Type ์„ค๋ช… all ๋ชจ๋“  ๋ฏธ๋””์–ด ์žฅ์น˜์— ์‚ฌ์šฉ (๊ธฐ๋ณธ๊ฐ’) print ํ”„๋ฆฐํ„ฐ์— ์‚ฌ์šฉ screen PC, ํƒœ๋ธ”๋ฆฟ, ์Šค๋งˆํŠธํฐ์— ์‚ฌ์šฉ speech ์Šค..

CSS 2022. 8. 13. 16:57
๊ณต์ง€์‚ฌํ•ญ