...

๋ฏธ๋์ด ์ฟผ๋ฆฌ(Media Query) ๋?

๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ CSS์์ ์ด๋ค ์คํ์ผ์ ์ ํ์ ์ผ๋ก ์ ์ฉํ๊ณ ์ถ์ ๋ ์ฌ์ฉํ๋ค.
@media ํค์๋๋ก ์์ํ๋ ๋ฏธ๋์ด ์ฟผ๋ฆฌ์ ๋ฌธ๋ฒ ๊ตฌ์กฐ๋ ์๋์ ๊ฐ๋ค.
@media (์กฐ๊ฑด) {
์คํ์ผ
}
์คํ์ผ ๋ถ๋ถ์๋ ์ผ๋ฐ์ ์ธ CSS ์ฝ๋๊ฐ ๋ค์ด๊ฐ๋๋ฐ, ์กฐ๊ฑด ๋ถ๋ถ์ด ๋ง์กฑ๋ ๋๋ ์คํ์ผ์ด ์ ์ฉ๋๊ณ , ๋ง์กฑ๋์ง ์์ ๋๋ ์คํ์ผ์ด ๋ฌด์๋๋ค.
๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํด์ css์ ์ ์ฉํ๋ ๋ฐฉ๋ฒ์ ์๋์ ๊ฐ์ด 3๊ฐ์ง๊ฐ ์๋ค.
โ
1. HTML์ linkํ๊ทธ์ media์์ฑ์ ๊ฐ์ ์ค์ ํด ์ฃผ๋ ๋ฐฉ๋ฒ
<link href="css/common.css" rel="stylesheet" type="text/css"
media="screen and (min-width:0px) and (max-width:480px)">
2. cssํ์ผ ๋ด์ ์ง์ media๋ฅผ ์ค์ ํด ์ฃผ๋ ๋ฐฉ๋ฒ
@media all and (min-width:480px) { ... }
3. media query๋ฅผ ์ค์ ํ ํ์ผ์ cssํ์ผ ๋ด์์ import ํด์ ์ ์ฉ์์ผ์ฃผ๋ ๋ฐฉ๋ฒ
/* common.css */
@import "../media.css";
๋ฏธ๋์ด ์ฟผ๋ฆฌ ํ์
- all : ๊ธฐ๋ณธ๊ฐ. ๋ชจ๋ ๋ฏธ๋์ด ์ฅ์น์ ์ฌ์ฉ ๋จ
- print : ํ๋ฆฐํฐ์ ์ฌ์ฉ
- screen : ์ปดํจํฐ ์คํฌ๋ฆฐ, ํ ๋ธ๋ฆฟ, ์ค๋งํธํฐ ๋ฑ
- speech : ํ์ด์ง๋ฅผ ์ฝ์ด์ฃผ๋ ํ๋ฉด ๋ญ๋ ๊ธฐ
๊ธฐ๊ธฐ๋ช | ์ค๋ช | |
all | ๋ชจ๋ ์ฅ์น | |
์ธ์ ์ฅ์น | ||
screen | ์ปดํจํฐ ํ๋ฉด ์ฅ์น ๋๋ ์ค๋งํธ ๊ธฐ๊ธฐ์ ํ๋ฉด | |
tv | ์์๊ณผ ์์ฑ์ด ๋์์ ์ถ๋ ฅ๋๋ ์ฅ์น | |
projection | ํ๋ก์ ํฐ ์ฅ์น | |
handheld | ์์ ๋ค๊ณ ๋ค๋๋ ์ํ์ฅ์น | |
speech | ์์ฑ ์ถ๋ ฅ ์ฅ์น | |
aural | ์์ฑ ํฉ์ฑ ์ฅ์น(ํ๋ฉด์ ์ฝ์ด ์๋ฆฌ๋ก ์ถ๋ ฅํด ์ฃผ๋ ์ฅ์น) | |
embossed | ์ ์ ์ธ์ ์ฅ์น(ํ๋ฉด์ ์ฝ์ด ์ข ์ด์ ์ ์ง๋ฅผ ์ฐ์ด๋ด๋ ์ฅ์น) | |
tty | ๋์คํ๋ ์ด ๊ธฐ๋ฅ์ด ์ ํ๋ ์ฅ์น | |
braille | ์ ์ ํ์ ์ฅ์น |
/* ์ผ๋ฐ ํ๋ฉด(screen)๊ณผ ์ธ์์ฅ์น ๋ณ๋ก ์๋ก ๋ค๋ฅธ style์ ์ง์ ํ๋ ์ */
@media screen {
* {
color: red;
}
}
@media print {
* {
color: blue;
}
}
๋ฏธ๋์ด ์ฟผ๋ฆฌ ์ฐ์ฐ์
- and ์ฐ์ฐ์ : ์ฌ๋ฌ ๋ฏธ๋์ด ํน์ง๋ค์ ํ๋๋ก ๊ฒฐํฉํจ .
- , (or)์ฐ์ฐ์ : ์ผํ๋ก ๋ถ๋ฆฌ๋ ๊ฐ ๋ชฉ๋ก์ ๊ฐ๊ฐ ๊ฐ๋ณ ๋ฏธ๋์ด ์ฟผ๋ฆฌ์.
- not ์ฐ์ฐ์ : ์ ์ฒด ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ๋ถ์ ํ๊ธฐ ์ํด ์ฌ์ฉ ํจ.
- only ์ฐ์ฐ์ : ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ง์ํ์ง ์๋ ๋ธ๋ผ์ฐ์ ๊ฐ ์ฃผ์ด์ง ์คํ์ผ์ ์ ์ฉํ๋ ๊ฒ์ ๋ฐฉ์ง
* only ํค์๋๋ ๋ฏธ๋์ด ์ฟผ๋ฆฌ ๊ฒฐ๊ณผ์ ์๋ฌด๋ฐ ์ํฅ์ ๋ฏธ์น์ง ์์ต๋๋ค.
์ค๋๋ ๋ธ๋ผ์ฐ์ ๋ screen and (color)๋ฅผ 'screen'์ผ๋ก ๋ฒ์ญ ํ๊ฒ๋์ด ๋จ์์๋ ์ฟผ๋ฆฌ๋ฅผ ๋ฌด์ํ๊ฒ ๋ฉ๋๋ค.
๊ทธ๋ฆฌํ์ฌ ๋ชจ๋ ์คํฌ๋ฆฐ์ ์คํ์ผ์ ์ ์ฉํ๊ฒ ๋๋๋ฐ, ์๋ ค์ง์ง ์์ ๋ฏธ๋์ด ํ์ only๋ฅผ ์ง์ ํจ์ผ๋ก์จ ๋ฌด์ํ๊ฒ ๋๋ค.
@media only screen {} /*๋ฏธ๋์ด์ฟผ๋ฆฌ๋ฅผ ์ง์ํ์ง ์๋ ๋ธ๋ผ์ฐ์ (IE8 ์ดํ)์์๋ ํด๋น ์คํ์ผ์ ๋ฌด์ */
* not์ด๋ only๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด ๋ฏธ๋์ด ํ์ ์ ๊ท์ ํด์ผ ํจ.
* ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ ๋์๋ฌธ์ ๊ตฌ๋ณํ์ง ์๋๋ค
๋ฏธ๋์ด ์ฟผ๋ฆฌ ์์ฑ
์กฐ๊ฑด๋ฌธ | ์ค๋ช | ์กฐ๊ฑด๊ฐ | min/max ์ฌ์ฉ ์ฌ๋ถ |
width | ์นํ์ด์ง์ ๊ฐ๋ก ๋๋น๊ฐ | width์์ฑ์์ ์ฌ์ฉํ ์ ์๋ ๋ชจ๋ ์์ฑ๊ฐ | ์ฌ์ฉํจ |
height | ์นํ์ด์ง์ ์ธ๋ก ๋์ด๊ฐ | ||
device-width | ๊ธฐ๊ธฐ์ ๊ฐ๋ก ๋๋น๊ฐ | ||
device-height | ๊ธฐ๊ธฐ์ ์ธ๋ก ๋์ด๊ฐ | ||
orientation | ๊ธฐ๊ธฐ์ ํ๋ฉด ๋ฐฉํฅ | portrait(์ธ๋ก) , landscape(๊ฐ๋ก) | ์ฌ์ฉ์ํจ |
aspect-ratio | ํ๋ฉด๋น์จ | ๋ธ๋ผ์ฐ์ ํ๋ฉด๋น์จ(1) ๋ธ๋ผ์ฐ์ ์ข ํก๋น(16/9) ๋ธ๋ผ์ฐ์ ํด์๋(1280/720) |
์ฌ์ฉ์ํจ |
device-aspect-ratio | ๋จ๋ง๊ธฐ์ ํ๋ฉด๋น์จ | ๊ธฐ๊ธฐ ํ๋ฉด๋น์จ(1) ๊ธฐ๊ธฐ ์ข ํก๋น(16/9) ๊ธฐ๊ธฐ ํด์๋(640/320) |
์ฌ์ฉํจ |
color | ๊ธฐ๊ธฐ์ ๋นํธ ์ | 8(bit ๋จ์) | |
color-index | ๊ธฐ๊ธฐ์ ์์ ์ | 128(์์ ์ ๋จ์) | |
monochrome | ๊ธฐ๊ธฐ๊ฐ ํ๋ฐฑ์ผ๋ ํฝ์ ๋น ๋นํธ ์ | 1(bit ๋จ์) | |
resolution | ๊ธฐ๊ธฐ์ ํด์๋ ฅ | 300dpi/dpcm | |
scan | TV์ ์ค์บ ๋ฐฉ์ | progressive/interlace | ์ฌ์ฉ์ํจ |
grid | ๊ธฐ๊ธฐ์ ๊ทธ๋ฆฌ๋/๋นํธ๋งต | 0(๋นํธ๋งต ๋ฐฉ์) / 1(๊ทธ๋ฆฌ๋ ๋ฐฉ์) |
โ
min-width / max-width
: ๋ทฐ ์์ญ์์์ ์ต์ ๋์ด. ์ฆ ์ง์ ํ ์ฌ์ด์ฆ๋ณด๋ค ๋์ ๊ฒฝ์ฐ ์ ์ฉ (์ด์) / ๋ทฐ ์์ญ์์์ ์ต๋ ๋์ด. ์ฆ ์ง์ ํ ์ฌ์ด์ฆ๋ณด๋ค ์์ ๊ฒฝ์ฐ ์ ์ฉ (์ดํ)
/* ๋ทฐํฌํธ ๋๋น๊ฐ 768px ์ด์ '๊ทธ๋ฆฌ๊ณ ' 1024px ์ดํ์ด๋ฉด ์คํ */
@media all and (min-width:768px) and (max-width:1024px) { โฆ }
/* ๋ทฐํฌํธ ๋๋น๊ฐ 768px ์ด๊ฑฐ๋ '๋๋' 1024px ์ด๋ฉด ์คํ */
@media all and (width:768px), (width:1024px) { โฆ }
/* ๋ทฐํฌํธ ๋๋น๊ฐ 768px ์ด์ '๊ทธ๋ฆฌ๊ณ ' 1024px ์ดํ๊ฐ '์๋๋ฉด' ์คํ */
@media not all and (min-width:768px) and (max-width:1024px) { โฆ }
max-device-width / min-device-width
: ๋๋ฐ์ด์ค ์ฌ์ด์ฆ์ ์ต๋ ๋์ด. ์ด ์ฌ์ด์ฆ๋ณด๋ค ์์ ๊ฒฝ์ฐ ์ ์ฉ / ๋๋ฐ์ด์ค ์ฌ์ด์ฆ์ ์ต์ ๋์ด. ์ด ์ฌ์ด์ฆ๋ณด๋ค ๋์ ๊ฒฝ์ฐ ์ ์ฉ
๊ทธ๋ฌ๋๊น ๋ด ๋ชจ๋ํฐ ํด์๋๊ฐ FHD์ด๊ฑฐ๋ QHD์ ๋ฐ๋ผ ๋ค๋ฅด๊ฒ ์ ์ฉ,
์ค๋งํธํฐ ํด์๋์ ๋ฐ๋ผ ๋ค๋ฅด๊ฒ ์ ์ฉ
/* ์คํฌ๋ฆฐ ๋๋น๊ฐ 320px '๊ทธ๋ฆฌ๊ณ ' ๋์ด๊ฐ 480px ์ด๋ฉด ์คํ */
@media all and (device-width:320px) and (device-height:480px) { โฆ }
/* ์คํฌ๋ฆฐ ๋๋น๊ฐ ์ต์ 320px ์ด์ '๊ทธ๋ฆฌ๊ณ ' ๋์ด๊ฐ ์ต์ 480px ์ด์์ด๋ฉด ์คํ */
@media all and (min-device-width:320px) and (min-device-height:480px) { โฆ }
orientation
: ์ธ๋ก ๊ธธ์ด ํน์ ๊ฐ๋ก๊ธธ์ด์ ๋ ์ค ํ๋๋ก ๊ธฐ์ค์ ์ ์ฉ
- portrait : ์ธ๋ก ๊ธธ์ด ์ค์ฌ์ ๊ฒฝ์ฐ
- landscape : ๊ฐ๋ก๊ธธ์ด ์ค์ฌ์ ๊ฒฝ์ฐ
์๊ธฐ ์ฝ๊ฒ ์๋ฅผ ๋ค์๋ฉด,
portrait๋ ์ค๋งํธํฐ์ ๊ทธ๋๋ก ์ธ๋ก๋ก ๊ธธ๊ฒ ๋ณผ ๊ฒฝ์ฐ์ ํด๋นํ๊ณ
landscape๋ ๊ฐ๋ก๋ก ๋๊ณ ๋ณผ ๊ฒฝ์ฐ์ ํด๋นํ๋ค๊ณ ์๊ฐํ๋ฉด ๋ฉ๋๋ค.
@media screen
and (max-device-width: 760px) /* ๋๋ฐ์ด์ค๊ฐ ๋ชจ๋ฐ์ผ์ผ๋(device-width 0 ~ 768px) */
and (orientation: landscape) { /* ๊ทธ๋ฆฌ๊ณ ๊ฐ๋ก๋ก ๋ณผ๋ */
* { color: blue;}
}
โ
aspect-ratio
๋ทฐํฌํธ์ ๋๋น์ ๋์ด์ ๋ํ ๋น์จ. โ๋๋น/๋์ดโ ์์ผ๋ก ์กฐ๊ฑด์ ์์ฑํ๋ค.
min/max ์ ๋์ฌ๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋น ๊ฐ์ ์ต์/์ต๋ ๋น์จ์ ์ ํ ์ ์๋ค.
/* ๋ทฐํฌํธ ๋๋น๊ฐ 5, ๋์ด๊ฐ 4 ๋น์จ์ด๋ฉด ์คํ */
@media all and (aspect-ratio:5/4) { โฆ }
/* ๋ทฐํฌํธ ๋๋น๊ฐ 5/4 ๋น์จ ์ด์์ด๋ฉด ์คํ */
@media all and (min-aspect-ratio:5/4) { โฆ }
/* ๋ทฐํฌํธ ๋๋น๊ฐ 5/4 ๋น์จ ์ดํ๋ฉด ์คํ */
@media all and (max-aspect-ratio:5/4) { โฆ }
device-aspect-ratio
์คํฌ๋ฆฐ์ ๋๋น์ ๋์ด์ ๋ํ ๋น์จ. โ๋๋น/๋์ดโ ์์ผ๋ก ์กฐ๊ฑด์ ์์ฑํ๋ค.
min/max ์ ๋์ฌ๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋น ๊ฐ์ ์ต์/์ต๋ ๋น์จ์ ์ ํ ์ ์๋ค.
/* ์คํฌ๋ฆฐ ๋๋น๊ฐ 5, ๋์ด๊ฐ 4 ๋น์จ์ด๋ฉด ์คํ */
@media all and (device-aspect-ratio:5/4) { โฆ }
/* ์คํฌ๋ฆฐ ๋๋น๊ฐ 5/4 ๋น์จ ์ด์์ด๋ฉด ์คํ */
@media all and (min-device-aspect-ratio:5/4) { โฆ }
/* ์คํฌ๋ฆฐ ๋๋น๊ฐ 5/4 ๋น์จ ์ดํ๋ฉด ์คํ */
@media all and (max-device-aspect-ratio:5/4) { โฆ }
color
์ถ๋ ฅ ์ฅ์น์ ์์์ ๋ํ ๋นํธ ์. ์ถ๋ ฅ ์ฅ์น๊ฐ ์ปฌ๋ฌ๊ฐ ์๋ ๊ฒฝ์ฐ 0์ ๊ฐ์ ๋์ํ๋ค.
@media all and (color) { โฆ } /* ์ถ๋ ฅ ์ฅ์น๊ฐ ์ปฌ๋ฌ๋ฅผ ์ง์ํ๋ฉด ์คํ */
@media all and (color:0) { โฆ } /* ์ถ๋ ฅ ์ฅ์น๊ฐ ์ปฌ๋ฌ๊ฐ ์๋๋ฉด ์คํ */
@media all and (color:8) { โฆ } /* ์ถ๋ ฅ ์ฅ์น๊ฐ 8๋นํธ ์์์ด๋ฉด ์คํ */
@media all and (min-color:8) { โฆ } /* ์ถ๋ ฅ ์ฅ์น๊ฐ 8๋นํธ ์ด์ ์์์ด๋ฉด ์คํ */
@media all and (max-color:8) { โฆ } /* ์ถ๋ ฅ ์ฅ์น๊ฐ 8๋นํธ ์ดํ ์์์ด๋ฉด ์คํ */
monochrome
์ถ๋ ฅ ์ฅ์น๊ฐ ํ๋ฐฑ์ธ ๊ฒฝ์ฐ ํฝ์ ๋น ๋นํธ ์. ์ถ๋ ฅ ์ฅ์น๊ฐ ํ๋ฐฑ์ด ์๋๋ผ๋ฉด 0์ ๊ฐ์ ๋์ํ๋ค.
@media all and (monochrome) { โฆ } /* ์ถ๋ ฅ ์ฅ์น๊ฐ ํ๋ฐฑ์ด๋ฉด ์คํ */
@media all and (monochrome:0) { โฆ } /* ์ถ๋ ฅ ์ฅ์น๊ฐ ํ๋ฐฑ์ด ์๋๋ฉด ์คํ */
@media all and (min-monochrome:2) { โฆ } /* ์ถ๋ ฅ ์ฅ์น๊ฐ ํ๋ฐฑ์ด๊ณ 2๋นํธ ์ด์์ด๋ฉด ์คํ */
@media all and (max-monochrome:2) { โฆ } /* ์ถ๋ ฅ ์ฅ์น๊ฐ ํ๋ฐฑ์ด๊ณ 2๋นํธ ์ดํ์ด๋ฉด ์คํ */
resolution
์ถ๋ ฅ ์ฅ์น์ dpi ํด์๋ ฅ์ ๋์ํ๋ค.
min/max ์ ๋์ฌ๋ ์ฌ๊ฐํ ์๋ ํฝ์ (์ธ์ ์ฅ์น)์๋ ๋์ํ์ง๋ง ์ ๋์ฌ ์๋ resolution ์กฐ๊ฑด์ ์ฌ๊ฐํ ํฝ์ ์๋ง ๋์ํ๋ค.
์กฐ๊ฑด์ ๊ฐ์ผ๋ก dpi์ dpcm ๋จ์๋ฅผ ์ฌ์ฉํ ์ ์๋ค.
@media all and (resolution:96dpi) { โฆ } /* 1์ธ์น๋น 96๊ฐ์ ์ฌ๊ฐํ ํ์๋ฅผ ์ ๊ณตํ๋ฉด ์คํ */
@media all and (min-resolution:96dpi) { โฆ } /* 1์ธ์น๋น 96๊ฐ ์ด์์ ํ์๋ฅผ ์ ๊ณตํ๋ฉด ์คํ */
@media all and (max-resolution:96dpi) { โฆ } /* 1์ธ์น๋น 96๊ฐ ์ดํ์ ํ์๋ฅผ ์ ๊ณตํ๋ฉด ์คํ */
scan
TV์ ์ค์บ ๋ฐฉ์์ ๋ฐ๋ผ ๋์ํ๋ค. progressive ๊ฐ์ ์ด๋น 60ํ ์์ค์ ๊ณ ํ์ง ์ค์บ์ ๋์ํ๊ณ interlace ๊ฐ์ ์ด๋น 30ํ ์์ค์ ์ผ๋ฐ ์ค์บ์ ๋์ํ๋ค. ๋๋ถ๋ถ์ HDTV๋ progressive์ interlace ๋ฐฉ์์ ๋ชจ๋ ์ง์ํ๊ณ ์๋ค.
grid
์ถ๋ ฅ ์ฅ์น๊ฐ ๊ทธ๋ฆฌ๋ ๋ฐฉ์์ด๋ฉด ๋์ํ๋ค. ๊ทธ๋ฆฌ๋ ๋ฐฉ์์ ํ์๊ธฐ์ ๊ฐ์ด ๊ณ ์ ๋ ๊ธ๊ผด๋ง ์ฌ์ฉํ๋ ์ฅ์น์ด๋ค. ํต์ ์ถ๋ ฅ ์ฅ์น๋ ๋นํธ๋งต์ด ์๋๋ฉด ๊ทธ๋ฆฌ๋ ๋ฐฉ์์ด๋ค. ๊ฐ์ ์ ์ 0๊ณผ 1 ๋ฟ์ด๊ณ 0์ ๊ฐ์ ๋นํธ๋งต ๋ฐฉ์์ ๋์ํ๋ค.
๋ฏธ๋์ด ์ฟผ๋ฆฌ ์ค์ ์์
[480px์ด์์ ๋ฏธ๋์ด ํ์ ์ ๊ฒฝ์ฐ]
@media (min-width:480px) { ... }
/* ๋๋ */
@media screen and (max-width:480px) { ... }
[480px์์ 768px๊น์ง ๋์ด์ ๋ฏธ๋์ด ํ์ ]
@media screen and (min-width:480px) and (max-width:768px) { ... }
[and๋ฅผ ์ฌ์ฉํด์ ๋ชจ๋ ์กฐ๊ฑด์ ํ์๋ก ํ๋ ๋ฏธ๋์ด ํ์ ]
@media screen and (min-height:640px) and (min-width:480px)
[or ( , )๋ฅผ ์ฌ์ฉํด์ ์ด๋ ํ์ชฝ๋ง ๋ง์กฑํ๋ ๋ฏธ๋์ด ํ์ ]
@media screen and (min-width: 320px) and (min-width: 480px), screen and (min-width: 480px), print
[ํ์ดํ์ ํ ์คํธ ํฌ๊ธฐ๋ฅผ 40px๋ก ํ๋, 600px๋ณด๋ค ์์ ํ๋ฉด์์๋ 20px๋ก ์ค์ธ๋ค]
.title {
font-size: 40px;
}
@media (max-width: 600px) {
.title {
font-size: 20px;
}
}

โ[1200, 768, 480px ํ๋ฉด์์ ๋ฐ๋ก๋ฐ๋ก ์คํ์ผ ์ ์ฉํ๊ณ ์ถ์๋ ์ฝ๋์์]
@media screen and (max-width:480px) { ... }
@media screen and (max-width:768px) { ... }
@media screen and (max-width:1200px) { ... }
โ
[ํ๋ฉด ๋๋น์ ๋ฐ๋ผ ์๋ฆฌ๋จผํธ ์จ๊ธฐ๊ธฐ]
๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ ํน์ ์๋ฆฌ๋จผํธ๋ฅผ ํ๋ฉด์ ๋๋น์ ๋ฐ๋ผ ์จ๊ธธ ๋๋ ๋ง์ด ์ฌ์ฉ๋ฉ๋๋ค.
์๋ฅผ ๋ค์ด, ๋ชฉ๋ก์์ ์ด๋ค ํญ๋ชฉ์ ๋์ ํ๋ฉด์์ ์จ๊ธฐ๊ณ ์ด๋ค ํญ๋ชฉ์ ์ข์ ํ๋ฉด์์ ์จ๊ธฐ๊ณ ์ถ๋ค๋ฉด,
<ul>
<li class="desktop">์ ๋ ๋์ ํ๋ฉด์์๋ง ๋ณด์
๋๋ค.</li>
<li>์ ๋ ํญ์ ๋ณด์
๋๋ค.</li>
<li class="mobile">์ ๋ ์ข์ ํ๋ฉด์์๋ง ๋ณด์
๋๋ค.</li>
</ul>
@media (max-width: 600px) {
.desktop {
display: none;
}
}
@media (min-width: 1000px) {
.mobile {
display: none;
}
}
๋ฏธ๋์ด ์ฟผ๋ฆฌ - Viewport ์ง์
โViewport๋ ๋ชจ๋ฐ์ผ ๋ธ๋ผ์ฐ์ ์์ web conetent ๋ฅผ ์ถ๋ ฅํ๋ ์์ญ์ผ๋ก์จ, ์ผ๋ฐ PC์ ๋ธ๋ผ์ฐ์ ์์๋ ์กด์ฌํ์ง ์๋ ๊ฐ๋ ์ด๋ค.
Viewport๋ ์นํ์ด์ง์ ๋๋น์ ๋์ด, ํ๋/์ถ์ ์ค์ ํ ์ ์๊ฒ ํด์ฃผ๋ฉฐ, ์ด๋ฅผ ํตํด web content๊ฐ ์ต์ ์ ์ํ๋ก ํ๋ฉด์ ํ์๋ ์ ์๊ฒ ๋์์ค๋ค.
์ฝ๊ฒ๋งํด ์ด๋ ํ ์ฌ์ดํธ๋ฅผ ์ค๋งํธํฐ์ผ๋ก ๋ณด๊ณ ์์ ๊ฒฝ์ฐ ์๊ฐ๋ฝ ๋ ๊ฐ๋ก ์ด๋ฏธ์ง๋ฅผ ํ๋ํ๋ ค๊ณ ํ์ ๋ ์ด๊ฒ์ ๊ฐ๋ฅํ๊ฒ ํด ์ฃผ๋๋ ํด ์ฃผ์ง ์๋๋ ํ๋ ๊ธฐ๋ฅ์ ๋งํ๋ค.
โ
์ง์ ๋ฐฉ๋ฒ์ head ํ๊ทธ ์์ ์๋์ ๊ฐ์ด ์ฝ๋๋ฅผ ์ ๋ ฅํด ์ฃผ๋ฉด ๋๋ค
viewport meta tag๋ ๋ธ๋ผ์ฐ์ ์ ํ๋ฉด ์ค์ ๊ณผ ๊ด๋ จ๋ ์ ๋ณด๋ฅผ ์ ๊ณตํ๋ค.
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1,
user-scalable=yes,initial-scale=1.0" />
meta tag์์๋ px๋จ์๋ฅผ ์ฌ์ฉํ๋ฉฐ ๋จ์ ํํ์ ์๋ตํ๋ค.
๋ณต์๊ฐ์ ํ๋กํผํฐ๋ฅผ ์ฌ์ฉํ ๋๋ ์ผํ(,)๋ก ๊ตฌ๋ถํ๋ค.
์ผ๋ฐ์ ์ผ๋ก viewport meta tag๋ ๋ชจ๋ฐ์ผ ๋๋ฐ์ด์ค์์๋ง ์ ์ฉ๋๋ค.
์์ฑ๋ช | ์์ฑ๊ฐ | ์์ฑ์ค๋ช |
width | device-width, ์์ | ๋ทฐํฌํธ์ ๋๋น๋ฅผ ์ง์ ํฉ๋๋ค. |
height | device-height. ์์ | ๋ทฐํฌํธ์ ๋์ด๋ฅผ ์ง์ ํฉ๋๋ค. |
inital-scale | ์์ | ๋ทฐํฌํธ์ ์ด๊ธฐ ๋ฐฐ์จ์ ์ง์ ํฉ๋๋ค. ๊ธฐ๋ณธ๊ฐ์ 1์ ๋๋ค. 1๋ณด๋ค ์์ ๊ฐ์ ์ฌ์ฉํ์ฌ ์ถ์๋ ํ์ด์ง๋ฅผ ํ์ํ๊ณ , 1๋ณด๋ค ํฐ ๊ฐ์ ์ฌ์ฉํ์ฌ ํ๋๋ ํ์ด์ง๋ฅผ ํ์ํฉ๋๋ค. |
user-scalable | yes, no | ๋ทฐํฌํธ์ ํ๋/์ถ์ ์ฌ๋ถ๋ฅผ ์ง์ ํฉ๋๋ค. ๊ธฐ๋ณธ๊ฐ์ yes์ด๋ฉฐ no๋ก ์ค์ ํ๋ฉด ์ฌ์ฉ์๊ฐ ํ์ด์ง๋ฅผ ํ๋ ํ ์ ์์ต๋๋ค. |
minimum-scale | ์์ | ๋ทฐํฌํธ์ ์ต์ ์ถ์ ๋น์จ์ ์ง์ ํฉ๋๋ค. ๊ธฐ๋ณธ๊ฐ์ 0.25์ ๋๋ค. |
maximum-scale | ์์ | ๋ทฐํฌํธ์ ์ต๋ ํ๋ ๋น์จ์ ์ง์ ํฉ๋๋ค. ๊ธฐ๋ณธ๊ฐ์ 5.0์ ๋๋ค. |
โป minimum-scale๊ณผ maximum-scale ์์ฑ์ ๊ฐ๊ฐ ๊ฐ์ 1.0์ผ๋ก ์ง์ ํ ๊ฒฝ์ฐ user-scalable๋ฅผ yes๋ก ์ง์ ํ๋๋ผ๋ ์ฌ์ฉ์๊ฐ ํ๋ฉด์ ํ๋ ์ถ์ ํ ์ ์๋ค.
๋ค์ํ ๋๋ฐ์ด์ค์์์ ํด์๋

/* All Device */
/* Custom, iPhone Retina : 320px ~ */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones : 480px ~ */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets : 768px ~ */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops : 992px ~ */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens : 1200px ~ */
@media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* All Device */
/* Large Devices, Wide Screens : ~ 1200px */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops : ~ 992px */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets : ~ 768px */
@media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones : ~ 480px */
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina : ~ 320px */
@media only screen and (max-width : 320px) {
}
# ์ฐธ๊ณ ์๋ฃ
https://skydoor2019.tistory.com/8
https://poiemaweb.com/css3-responsive-web-design
https://naradesign.github.io/media-query.html
https://dolly77.tistory.com/88
์ด ๊ธ์ด ์ข์ผ์ จ๋ค๋ฉด ๊ตฌ๋ & ์ข์์
์ฌ๋ฌ๋ถ์ ๊ตฌ๋
๊ณผ ์ข์์๋
์ ์์๊ฒ ํฐ ํ์ด ๋ฉ๋๋ค.