Viewport ๋ฏธ๋์ด์ฟผ๋ฆฌ ์์ฑ๊ธฐ
๋ฐ์ํ ์น์ ์ํ CSS ๋ฏธ๋์ด์ฟผ๋ฆฌ๋ฅผ ์์ฑํฉ๋๋ค.
๋ฏธ๋์ด์ฟผ๋ฆฌ ์ค์
๋ฏธ๋์ด์ฟผ๋ฆฌ ์กฐ๊ฑด์ ์ค์ ํ์ธ์
์กฐ๊ฑด 1
ํ๋ฆฌ์
์์ฃผ ์ฌ์ฉ๋๋ ๋ฏธ๋์ด์ฟผ๋ฆฌ ํจํด์ ์ ํํ์ธ์
์์ฑ๋ CSS
@media screen and (max-width: 768px) {
/* Your CSS rules here */
}์ผ๋ฐ์ ์ธ ๋ธ๋ ์ดํฌํฌ์ธํธ
๋ชจ๋ฐ์ผ:
max-width: 480pxํ๋ธ๋ฆฟ:
481px - 768px๋ฐ์คํฌํฑ:
min-width: 1024px๋ํ ๋ฐ์คํฌํฑ:
min-width: 1200px๋ฏธ๋์ด์ฟผ๋ฆฌ ๊ฐ์ด๋
์ฃผ์ ๋ฏธ๋์ด ํน์ฑ
- โข width/height: ๋ทฐํฌํธ์ ๋๋น/๋์ด
- โข min-width/max-width: ์ต์/์ต๋ ๋๋น ์กฐ๊ฑด
- โข orientation: ํ๋ฉด ๋ฐฉํฅ (portrait/landscape)
- โข resolution: ํ๋ฉด ํด์๋ (retina ๋์คํ๋ ์ด ๋ฑ)
- โข hover: ํธ๋ฒ ๊ธฐ๋ฅ ์ง์ ์ฌ๋ถ
- โข pointer: ํฌ์ธํฐ ์ ๋ฐ๋ (ํฐ์น/๋ง์ฐ์ค)
์ฌ์ฉ ํ
- โข Mobile First ์ ๊ทผ๋ฒ: min-width๋ฅผ ์ฌ์ฉํ์ฌ ์์ ํ๋ฉด๋ถํฐ ์ค๊ณ
- โข ๋ ผ๋ฆฌ ์ฐ์ฐ์๋ก ๋ณต์กํ ์กฐ๊ฑด ์กฐํฉ ๊ฐ๋ฅ
- โข print ๋ฏธ๋์ด ํ์ ์ผ๋ก ์ธ์์ฉ ์คํ์ผ ๋ณ๋ ์ง์
- โข resolution์ ์ฌ์ฉํ์ฌ ๊ณ ํด์๋ ๋์คํ๋ ์ด ๋์