-
[CSS] ๋ฏธ๋์ด ์ฟผ๋ฆฌ(Media Query) ์ฅ์น ํ๋ฉด ๋๋น ๋ธ๋ ์ดํฌํฌ์ธํธ ์ ๋ฆฌ
๋ฏธ๋์ด ์ฟผ๋ฆฌ(Media Query) ์ฅ์น ํ๋ฉด ๋๋น ๋ธ๋ ์ดํฌํฌ์ธํธ ์ ๋ฆฌ๋ค์ด๊ฐ๋ฉฐCSS์ ๋ฏธ๋์ด ์ฟผ๋ฆฌ(Media Query)๋ฅผ ์ด์ฉํ์ฌ ๋ฐ์ํ ๋์์ธ(Responsive Design)์ ๋ง๋ค ์ ์๋ค.์ด๋ ์ฌ์ฉํ ์ ์๋ ์ฅ์น(Device)์ ํ๋ฉด ๋๋น ๋ธ๋ ์ดํฌํฌ์ธํธ(Breakpoint)์ ๋ํด ์ ๋ฆฌํด๋ณธ๋ค. ์ฅ์น ํ๋ฉด ๋๋น ๋ธ๋ ์ดํฌํฌ์ธํธPortrait ๋ชจ๋๋ ์ธ๋ก ํ๋ฉด, Landscape ๋ชจ๋๋ ๊ฐ๋ก ํ๋ฉด์ ์๋ฏธํ๋ค.์ฅ์น๋ธ๋ ์ดํฌํฌ์ธํธ๋น๊ณ ๋ชจ๋ฐ์ผ320pxPortrait ๋ชจ๋์) iPhone 5, iPhone SE480pxLandscape ๋ชจ๋ํ๋ธ๋ฆฟ768pxPortrait ๋ชจ๋์) iPadํ๋ธ๋ฆฟ / ์ปดํจํฐ1024pxLandscape ๋ชจ๋์ปดํจํฐ1200px ์ด์Desktop, Laptop์์ ์ฝ๋/* ๋ชจ๋ฐ์ผ Port..
3
2024.11.05