drf ๋ฐฑ์๋๊ฐ๋ฐ + ํ๋ก ํธ๊ฐ๋ฐ
: ์ด๋ฒ ํ๋ก์ ํธ๋ ํํ๋ก์ ํธ๋ก ์์ํฉ๋๋ค.
๋ค์ํ ๋๋ฐ์ด์ค๋ค์ด ์น๋ธ๋ผ์ฐ์ง์ ์ง์ํ๋ฉด์ ์น์์ ํ๋ฉด์ ํด์๋์ ๋ฐ๋ผ ์ ์ฐํ๊ฒ ์ปจํ ์ธ ๋ฅผ ๋ฐฐ์นํ๋ ๊ธฐ์ ์ด ์ ์ ์ค์ํด์ง๊ณ ์๋ค.
< ๊ธฐ๋ณธ๋ฌธ๋ฒ >
๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ CSS์์ ์ด๋ค ์คํ์ผ์ ์ ํ์ ์ผ๋ก ์ ์ฉํ๊ณ ์ถ์ ๋ ์ฌ์ฉํ๋ฉฐ
@media ํค์๋๋ก ์์ํ๋ ๋ฏธ๋์ด ์ฟผ๋ฆฌ์ ๋ฌธ๋ฒ ๊ตฌ์กฐ๋ ์๋์ ๊ฐ๋ค.
@media (์กฐ๊ฑด) {
์คํ์ผ
}
์คํ์ผ ๋ถ๋ถ์๋ ์ผ๋ฐ์ ์ธ CSS ์ฝ๋๊ฐ ๋ค์ด๊ฐ๋๋ฐ, ์กฐ๊ฑด ๋ถ๋ถ์ด ๋ง์กฑ๋ ๋๋ ์คํ์ผ์ด ์ ์ฉ๋๊ณ , ๋ง์กฑ๋์ง ์์ ๋๋ ์คํ์ผ์ด ๋ฌด์๋๋ค.
< ์ข์ ํ๋ฉด ์คํ์ผ๋ง >
ํธ๋ํฐ์ฒ๋ผ ์ข์ ํ๋ฉด์์๋ง ํน์ ์คํ์ผ์ ์ ์ฉํ๊ณ ์ถ์ ๋๋ ํ๋ฉด์ ์ต๋ ๋๋น๋ฅผ ์กฐ๊ฑด์ผ๋ก ํ์ฌ ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ ์ ์๋ค.
๋ค์๊ณผ ๊ฐ์ด max-width ์์ฑ์ ์ด์ฉํ์ฌ ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์์ฑํด์ฃผ๋ฉด ๋๋ค.
@media (max-width: 800px) {
.small-tomato {
background-color: tomato;
}
}
< ๋์ ํ๋ฉด ์คํ์ผ๋ง >
๋ฐ๋๋ก TV์ฒ๋ผ ๋์ ํ๋ฉด์์๋ง ํน์ ์คํ์ผ์ ์ ์ฉํ๊ณ ์ถ์ ๋๋ ํ๋ฉด์ ์ต์ ๋๋น๋ฅผ ์กฐ๊ฑด์ผ๋ก ํ์ฌ ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ ์ ์๋ค.
๋ค์๊ณผ ๊ฐ์ด min-width ์์ฑ์ ์ด์ฉํ์ฌ ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์์ฑํด์ฃผ๋ฉด ๋๋ค.
@media (min-width: 800px) {
.large-tomato {
color: tomato;
}
}
< ํ๋ฉด ๋๋น์ ๋ฐ๋ผ ์๋ฆฌ๋จผํธ ์จ๊ธฐ๊ธฐ >
๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ ํน์ ์๋ฆฌ๋จผํธ๋ฅผ ํ๋ฉด์ ๋๋น์ ๋ฐ๋ผ ์จ๊ธธ ๋๋ ๋ง์ด ์ฌ์ฉํ๋ค.
๋ค์๊ณผ ๊ฐ์ด max-width ์์ฑ๊ณผ min-width ์์ฑ์ ์ด์ฉํ์ฌ ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ก ์์ฑํด์ฃผ๋ฉด๋๋ค.
@media (max-width: 600px) {
.desktop {
display: none;
}
}
@media (min-width: 1000px) {
.mobile {
display: none;
}
}