CSS ๋ทฐํฌํธ ๋ฉํ ํ๊ทธ์ ๋ํ ์ข ํฉ ๊ฐ์ด๋๋ก, ์ ์ธ๊ณ ๋ชจ๋ฐ์ผ ๊ธฐ๊ธฐ์์ ์น์ฌ์ดํธ๊ฐ ์๋ฒฝํ๊ฒ ๋ณด์ด๊ณ ์๋ํ๋๋ก ๋ณด์ฅํฉ๋๋ค. ๋ฐ์ํ ๋์์ธ์ ์ํ ๋ชจ๋ฒ ์ฌ๋ก์ ๊ณ ๊ธ ๊ธฐ์ ์ ๋ฐฐ์ฐ์ธ์.
CSS ๋ทฐํฌํธ ๋ฉํ ํ๊ทธ ๋ง์คํฐํ๊ธฐ: ์ ์ธ๊ณ ๋ชจ๋ฐ์ผ ๊ฒฝํ ์ต์ ํ
์ค๋๋ ์ ๋ชจ๋ฐ์ผ ์ฐ์ ์ธ์์์, ์น์ฌ์ดํธ๊ฐ ๋ค์ํ ๊ธฐ๊ธฐ์์ ์๋ฒฝํ๊ฒ ๋ณด์ด๊ณ ์๋ํ๋๋ก ๋ณด์ฅํ๋ ๊ฒ์ ๋ฌด์๋ณด๋ค ์ค์ํฉ๋๋ค. CSS ๋ทฐํฌํธ ๋ฉํ ํ๊ทธ๋ ์ด๋ฌํ ๋ชฉํ๋ฅผ ๋ฌ์ฑํ๋ ๋ฐ ์ค์ํ ์์์ ๋๋ค. ์ด ํ๊ทธ๋ ์น์ฌ์ดํธ๊ฐ ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์์ ์ด๋ป๊ฒ ํ์ฅ๋๊ณ ํ์๋๋์ง๋ฅผ ์ ์ดํ์ฌ ์ฌ์ฉ์ ๊ฒฝํ๊ณผ ์ ๊ทผ์ฑ์ ์ง์ ์ ์ธ ์ํฅ์ ๋ฏธ์นฉ๋๋ค. ์ด ์ข ํฉ ๊ฐ์ด๋๋ ๋ทฐํฌํธ ๋ฉํ ํ๊ทธ์ ๋ณต์กํ ๋ถ๋ถ์ ์ฌ์ธต์ ์ผ๋ก ๋ค๋ฃจ์ด, ์ ์ธ๊ณ ๋ชจ๋ฐ์ผ ๊ธฐ๊ธฐ์ ๋ง๊ฒ ์น์ฌ์ดํธ๋ฅผ ์ต์ ํํ๋ ๋ฐ ํ์ํ ์ง์๊ณผ ๊ธฐ์ ์ ์ ๊ณตํ ๊ฒ์ ๋๋ค.
CSS ๋ทฐํฌํธ ๋ฉํ ํ๊ทธ๋ ๋ฌด์์ธ๊ฐ์?
๋ทฐํฌํธ ๋ฉํ ํ๊ทธ๋ ์น ํ์ด์ง์ <head> ์น์ ์์ ์์นํ๋ HTML ๋ฉํ ํ๊ทธ์ ๋๋ค. ์ด ํ๊ทธ๋ ๋ธ๋ผ์ฐ์ ์๊ฒ ๋ค์ํ ์ฅ์น์์ ํ์ด์ง์ ํฌ๊ธฐ์ ํ์ฅ์ ์ ์ดํ๋ ๋ฐฉ๋ฒ์ ์ง์ํฉ๋๋ค. ์ฌ๋ฐ๋ฅด๊ฒ ๊ตฌ์ฑ๋์ง ์์ ๋ทฐํฌํธ ๋ฉํ ํ๊ทธ ์์ด๋ ๋ชจ๋ฐ์ผ ๋ธ๋ผ์ฐ์ ๊ฐ ์น์ฌ์ดํธ๋ฅผ ๋ฐ์คํฌํฑ ๋ฒ์ ์ ์ถ์๋ ํํ๋ก ๋ ๋๋งํ์ฌ ์ฝ๊ณ ํ์ํ๊ธฐ ์ด๋ ต๊ฒ ๋ง๋ค ์ ์์ต๋๋ค. ์ด๋ ๋ชจ๋ฐ์ผ ๋ธ๋ผ์ฐ์ ๊ฐ ๊ธฐ๋ณธ์ ์ผ๋ก ๋ชจ๋ฐ์ผ์ฉ์ผ๋ก ์ค๊ณ๋์ง ์์ ์ค๋๋ ์น์ฌ์ดํธ๋ฅผ ์์ฉํ๊ธฐ ์ํด ์ข ์ข ํฐ ๋ทฐํฌํธ(์ผ๋ฐ์ ์ผ๋ก 980px)๋ฅผ ๊ฐ์ ํ๊ธฐ ๋๋ฌธ์ ๋๋ค.
๋ทฐํฌํธ ๋ฉํ ํ๊ทธ์ ๊ธฐ๋ณธ ๊ตฌ๋ฌธ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
๊ฐ ์์ฑ์ ์์ธํ ์ดํด๋ณด๊ฒ ์ต๋๋ค:
- name="viewport": ์ด ์์ฑ์ ๋ฉํ ํ๊ทธ๊ฐ ๋ทฐํฌํธ ์ค์ ์ ์ ์ดํ๋ค๋ ๊ฒ์ ์ง์ ํฉ๋๋ค.
- content="...": ์ด ์์ฑ์๋ ๋ทฐํฌํธ์ ๋ํ ํน์ ์ง์นจ์ด ํฌํจ๋ฉ๋๋ค.
- width=device-width: ์ด ์์ฑ์ ๋ทฐํฌํธ์ ๋๋น๋ฅผ ์ฅ์น์ ํ๋ฉด ๋๋น์ ์ผ์นํ๋๋ก ์ค์ ํฉ๋๋ค. ์ด๋ ๋ฐ์ํ ๋์์ธ์ ๋งค์ฐ ์ค์ํ ์ค์ ์ ๋๋ค.
- initial-scale=1.0: ์ด ์์ฑ์ ํ์ด์ง๊ฐ ์ฒ์ ๋ก๋๋ ๋์ ์ด๊ธฐ ํ๋/์ถ์ ์์ค์ ์ค์ ํฉ๋๋ค. 1.0 ๊ฐ์ ์ด๊ธฐ ํ๋/์ถ์๊ฐ ์์์ ๋ํ๋ ๋๋ค.
๋ทฐํฌํธ ๋ฉํ ํ๊ทธ๊ฐ ํ์์ ์ธ ์ด์ ๋ ๋ฌด์์ธ๊ฐ์?
๋ทฐํฌํธ ๋ฉํ ํ๊ทธ๋ ์ฌ๋ฌ ๊ฐ์ง ์ด์ ๋ก ํ์์ ์ ๋๋ค:
- ํฅ์๋ ์ฌ์ฉ์ ๊ฒฝํ: ์ฌ๋ฐ๋ฅด๊ฒ ๊ตฌ์ฑ๋ ๋ทฐํฌํธ๋ ์น์ฌ์ดํธ๊ฐ ๋ชจ๋ฐ์ผ ๊ธฐ๊ธฐ์์ ์ฝ๊ฒ ์ฝ๊ณ ํ์ํ ์ ์๋๋ก ๋ณด์ฅํ์ฌ ๋ ๋์ ์ฌ์ฉ์ ๊ฒฝํ์ผ๋ก ์ด์ด์ง๋๋ค. ์ฌ์ฉ์๋ ์ฝํ ์ธ ๋ฅผ ์ฝ๊ธฐ ์ํด ํ๋/์ถ์ํ ํ์๊ฐ ์์ต๋๋ค.
- ๋ชจ๋ฐ์ผ ์นํ์ฑ ํฅ์: Google์ ๊ฒ์ ์์์์ ๋ชจ๋ฐ์ผ ์นํ์ ์ธ ์น์ฌ์ดํธ์ ์ฐ์ ์์๋ฅผ ๋ก๋๋ค. ๋ทฐํฌํธ ๋ฉํ ํ๊ทธ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ์น์ฌ์ดํธ๋ฅผ ๋ชจ๋ฐ์ผ ์นํ์ ์ผ๋ก ๋ง๋๋ ๊ธฐ๋ณธ์ ์ธ ๋จ๊ณ์ ๋๋ค.
- ๊ต์ฐจ ๊ธฐ๊ธฐ ํธํ์ฑ: ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์ ํด์๋์ ์น์ฌ์ดํธ๊ฐ ์ ์ํ๋๋ก ๋์, ์ฌ๋ฌ ๊ธฐ๊ธฐ์์ ์ผ๊ด๋ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค. ์๋๋ก์ด๋ ํฐ, ์์ดํฐ, ๋ชจ๋ ํฌ๊ธฐ์ ํ๋ธ๋ฆฟ, ํด๋๋ธ ๊ธฐ๊ธฐ๋ฅผ ์๊ฐํด ๋ณด์ธ์. ๋ทฐํฌํธ๊ฐ ์ด ๋ชจ๋ ๊ฒ์ ๊ด๋ฆฌํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
- ์ ๊ทผ์ฑ: ์ ์ ํ ํฌ๊ธฐ ์กฐ์ ๋ฐ ๋ ๋๋ง์ ์๊ฐ ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์์ ์ ๊ทผ์ฑ์ ํฅ์์ํต๋๋ค. ๊ทธ๋ค์ ๋ ์ด์์์ด ๊นจ์ง์ง ์๋๋ค๋ ๊ฒ์ ์๊ณ ๋ธ๋ผ์ฐ์ ํ๋/์ถ์ ๊ธฐ๋ฅ์ ์์กดํ ์ ์์ต๋๋ค.
์ฃผ์ ๋ทฐํฌํธ ์์ฑ ๋ฐ ๊ฐ
๊ธฐ๋ณธ width ๋ฐ initial-scale ์์ฑ ์ธ์๋ ๋ทฐํฌํธ ๋ฉํ ํ๊ทธ๋ ๋ทฐํฌํธ๋ฅผ ๋ ์ธ๋ฐํ๊ฒ ์ ์ดํ ์ ์๋ ๋ค๋ฅธ ์์ฑ์ ์ง์ํฉ๋๋ค:
- minimum-scale: ํ์ฉ๋๋ ์ต์ ํ๋/์ถ์ ์์ค์ ์ค์ ํฉ๋๋ค. ์๋ฅผ ๋ค์ด,
minimum-scale=0.5๋ ์ฌ์ฉ์๊ฐ ์๋ ํฌ๊ธฐ์ ์ ๋ฐ๊น์ง ์ถ์ํ ์ ์๋๋ก ํ์ฉํฉ๋๋ค. - maximum-scale: ํ์ฉ๋๋ ์ต๋ ํ๋/์ถ์ ์์ค์ ์ค์ ํฉ๋๋ค. ์๋ฅผ ๋ค์ด,
maximum-scale=3.0์ ์ฌ์ฉ์๊ฐ ์๋ ํฌ๊ธฐ์ ์ธ ๋ฐฐ๊น์ง ํ๋ํ ์ ์๋๋ก ํ์ฉํฉ๋๋ค. - user-scalable: ์ฌ์ฉ์๊ฐ ํ๋/์ถ์ํ ์ ์๋์ง ์ฌ๋ถ๋ฅผ ์ ์ดํฉ๋๋ค. ๊ฐ์ผ๋ก๋
yes(๊ธฐ๋ณธ๊ฐ, ํ๋/์ถ์ ํ์ฉ) ๋๋no(ํ๋/์ถ์ ๋นํ์ฑํ)๋ฅผ ๋ฐ์ต๋๋ค. ์ฃผ์: user-scalable์ ๋นํ์ฑํํ๋ฉด ์ ๊ทผ์ฑ์ ์๋นํ ์ํฅ์ ๋ฏธ์น ์ ์์ผ๋ฏ๋ก ๋๋ถ๋ถ์ ๊ฒฝ์ฐ ํผํด์ผ ํฉ๋๋ค.
๋ทฐํฌํธ ๋ฉํ ํ๊ทธ ๊ตฌ์ฑ ์์
๋ค์์ ์ผ๋ฐ์ ์ธ ๋ทฐํฌํธ ๋ฉํ ํ๊ทธ ๊ตฌ์ฑ ๋ฐ ๊ทธ ํจ๊ณผ์ ๋๋ค:
- ๊ธฐ๋ณธ ๊ตฌ์ฑ (๊ถ์ฅ):
<meta name="viewport" content="width=device-width, initial-scale=1.0">์ด๋ ๊ฐ์ฅ ์ผ๋ฐ์ ์ด๊ณ ๊ถ์ฅ๋๋ ๊ตฌ์ฑ์ ๋๋ค. ๋ทฐํฌํธ ๋๋น๋ฅผ ์ฅ์น ๋๋น๋ก ์ค์ ํ๊ณ ์ด๊ธฐ ํ๋/์ถ์๋ฅผ ๋ฐฉ์งํฉ๋๋ค.
- ์ฌ์ฉ์ ํ๋/์ถ์ ๋นํ์ฑํ (๊ถ์ฅํ์ง ์์):
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">์ด๊ฒ์ ์ฌ์ฉ์ ํ๋/์ถ์๋ฅผ ๋นํ์ฑํํฉ๋๋ค. ๋์์ธ ์ผ๊ด์ฑ์ ์ํด ๋งค๋ ฅ์ ์ผ๋ก ๋ณด์ผ ์ ์์ง๋ง, ์ ๊ทผ์ฑ์ ์ฌ๊ฐํ๊ฒ ์ ํดํ๋ฏ๋ก ์ผ๋ฐ์ ์ผ๋ก ๊ถ์ฅ๋์ง ์์ต๋๋ค.
- ์ต์ ๋ฐ ์ต๋ ์ค์ผ์ผ ์ค์ :
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0">์ด๊ฒ์ ์ต์ ํ๋/์ถ์ ์์ค์ 0.5๋ก, ์ต๋ ํ๋/์ถ์ ์์ค์ 2.0์ผ๋ก ์ค์ ํฉ๋๋ค. ์ฌ์ฉ์ ๊ฒฝํ์ ๋ฏธ์น๋ ์ํฅ์ ๊ณ ๋ คํ์ฌ ์ ์คํ๊ฒ ์ฌ์ฉํ์ธ์.
๋ทฐํฌํธ ๋ฉํ ํ๊ทธ ๊ตฌ์ฑ ๋ชจ๋ฒ ์ฌ๋ก
๋ค์์ ๋ทฐํฌํธ ๋ฉํ ํ๊ทธ๋ฅผ ๊ตฌ์ฑํ ๋ ๋ฐ๋ผ์ผ ํ ๋ช ๊ฐ์ง ๋ชจ๋ฒ ์ฌ๋ก์ ๋๋ค:
- ํญ์ ๋ทฐํฌํธ ๋ฉํ ํ๊ทธ๋ฅผ ํฌํจํ์ธ์: ํนํ ๋ชจ๋ฐ์ผ ์ฌ์ฉ์๋ฅผ ๋์์ผ๋ก ํ ๋ HTML ๋ฌธ์์์ ๋ทฐํฌํธ ๋ฉํ ํ๊ทธ๋ฅผ ์ ๋ ์๋ตํ์ง ๋ง์ญ์์ค.
width=device-width๋ฅผ ์ฌ์ฉํ์ธ์: ์ด๊ฒ์ ๋ฐ์ํ ๋์์ธ์ ๊ธฐ๋ณธ์ด๋ฉฐ ์น์ฌ์ดํธ๊ฐ ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์ ์ ์ํ๋๋ก ๋ณด์ฅํฉ๋๋ค.initial-scale=1.0๋ก ์ค์ ํ์ธ์: ์ฌ์ฉ์๋ฅผ ์ํ ์ผ๊ด๋ ์์์ ์ ์ ๊ณตํ๊ธฐ ์ํด ์ด๊ธฐ ํ๋/์ถ์๋ฅผ ๋ฐฉ์งํ์ธ์.- ์ฌ์ฉ์ ํ๋/์ถ์ ๋นํ์ฑํ (
user-scalable=no)๋ฅผ ํผํ์ธ์: ๋งค์ฐ ์ค๋๋ ฅ ์๋ ์ด์ (์: ํค์ค์คํฌ ์ ํ๋ฆฌ์ผ์ด์ )๊ฐ ์๋ ํ ์ฌ์ฉ์ ํ๋/์ถ์ ๋นํ์ฑํ๋ฅผ ํผํ์ธ์. ์ด๋ ์ ๊ทผ์ฑ์ ๋งค์ฐ ์ค์ํฉ๋๋ค. - ์ฌ๋ฌ ๊ธฐ๊ธฐ์์ ํ ์คํธํ์ธ์: ์น์ฌ์ดํธ๊ฐ ์ฌ๋ฐ๋ฅด๊ฒ ๋ ๋๋ง๋๋์ง ํ์ธํ๊ธฐ ์ํด ๋ค์ํ ๊ธฐ๊ธฐ(์ค๋งํธํฐ, ํ๋ธ๋ฆฟ, ๋ค์ํ ์ด์ ์ฒด์ )์์ ์ฒ ์ ํ ํ ์คํธํ์ธ์. ์๋ฎฌ๋ ์ดํฐ์ ์ค์ ๊ธฐ๊ธฐ ๋ชจ๋ ๋์์ด ๋ฉ๋๋ค.
- ์ ๊ทผ์ฑ์ ๊ณ ๋ คํ์ธ์: ๋ทฐํฌํธ๋ฅผ ๊ตฌ์ฑํ ๋ ํญ์ ์ ๊ทผ์ฑ์ ์ฐ์ ์ํ์ธ์. ์๊ฐ ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์๋ฅผ ๊ณ ๋ คํ๊ณ ํธ์ํ๊ฒ ํ๋/์ถ์ํ ์ ์๋๋ก ๋ณด์ฅํ์ธ์.
- CSS ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ธ์: ๋ทฐํฌํธ ๋ฉํ ํ๊ทธ๋ CSS ๋ฏธ๋์ด ์ฟผ๋ฆฌ์ ํจ๊ป ์๋ํ์ฌ ์ง์ ์ผ๋ก ๋ฐ์ํ ๋ ์ด์์์ ๋ง๋ญ๋๋ค. ํ๋ฉด ํฌ๊ธฐ, ๋ฐฉํฅ ๋ฐ ๊ธฐํ ์์ธ์ ๋ฐ๋ผ ์คํ์ผ์ ์กฐ์ ํ๋ ค๋ฉด ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ธ์.
CSS ๋ฏธ๋์ด ์ฟผ๋ฆฌ: ๋ทฐํฌํธ์ ์๋ฒฝํ ํํธ๋
๋ทฐํฌํธ ๋ฉํ ํ๊ทธ๋ ๋ฌด๋๋ฅผ ์ค์ ํ์ง๋ง, CSS ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ ๋ฐ์ํ ๋์์ธ์ ์คํํฉ๋๋ค. ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ฉด ํ๋ฉด ๋๋น, ๋์ด, ๋ฐฉํฅ, ํด์๋์ ๊ฐ์ ์ฅ์น ํน์ฑ์ ๊ธฐ๋ฐ์ผ๋ก ๋ค์ํ ์คํ์ผ์ ์ ์ฉํ ์ ์์ต๋๋ค.
๋ค์์ 768px ๋ฏธ๋ง์ ํ๋ฉด(์ค๋งํธํฐ์ ์ผ๋ฐ์ )์ ๋ค๋ฅธ ์คํ์ผ์ ์ ์ฉํ๋ CSS ๋ฏธ๋์ด ์ฟผ๋ฆฌ ์์์ ๋๋ค:
@media (max-width: 768px) {
body {
font-size: 16px;
}
.container {
width: 100%;
padding: 10px;
}
}
์ด ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ ์ต๋ ๋๋น๊ฐ 768ํฝ์ ์ธ ์ฅ์น๋ฅผ ๋์์ผ๋ก ํ๊ณ ์ค๊ดํธ ์์ ์คํ์ผ์ ์ ์ฉํฉ๋๋ค. ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ๊ธ๊ผด ํฌ๊ธฐ, ์ฌ๋ฐฑ, ํจ๋ฉ, ๋ ์ด์์ ๋ฐ ๊ธฐํ ๋ชจ๋ CSS ์์ฑ์ ์กฐ์ ํ์ฌ ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์ ๋ง๊ฒ ์น์ฌ์ดํธ๋ฅผ ์ต์ ํํ ์ ์์ต๋๋ค.
์ผ๋ฐ์ ์ธ ๋ฏธ๋์ด ์ฟผ๋ฆฌ ์ค๋จ์
์์ ๋ง์ ์ค๋จ์ ์ ์ ์ํ ์ ์์ง๋ง, ๋ค์์ ๋ฐ์ํ ๋์์ธ์ ์ผ๋ฐ์ ์ผ๋ก ์ฌ์ฉ๋๋ ๋ช ๊ฐ์ง ์ค๋จ์ ์ ๋๋ค:
- ์ด์ํ ๊ธฐ๊ธฐ (ํด๋ํฐ, 576px ๋ฏธ๋ง):
@media (max-width: 575.98px) { ... } - ์ํ ๊ธฐ๊ธฐ (ํด๋ํฐ, 576px ์ด์):
@media (min-width: 576px) and (max-width: 767.98px) { ... } - ์คํ ๊ธฐ๊ธฐ (ํ๋ธ๋ฆฟ, 768px ์ด์):
@media (min-width: 768px) and (max-width: 991.98px) { ... } - ๋ํ ๊ธฐ๊ธฐ (๋ฐ์คํฌํฑ, 992px ์ด์):
@media (min-width: 992px) and (max-width: 1199.98px) { ... } - ์ด๋ํ ๊ธฐ๊ธฐ (๋ํ ๋ฐ์คํฌํฑ, 1200px ์ด์):
@media (min-width: 1200px) { ... }
์ด๋ฌํ ์ค๋จ์ ์ ๋ถํธ์คํธ๋ฉ์ ๊ทธ๋ฆฌ๋ ์์คํ ์ ๊ธฐ๋ฐ์ผ๋ก ํ์ง๋ง, ๋๋ถ๋ถ์ ๋ฐ์ํ ๋์์ธ์ ์ข์ ์์์ ์ด ๋ฉ๋๋ค.
๋ทฐํฌํธ ๊ตฌ์ฑ์ ๋ํ ๊ธ๋ก๋ฒ ๊ณ ๋ ค ์ฌํญ
์ ์ธ๊ณ ์ฌ์ฉ์๋ค์ ์ํด ์น์ฌ์ดํธ๋ฅผ ์ต์ ํํ ๋ ๋ทฐํฌํธ ๊ตฌ์ฑ๊ณผ ๊ด๋ จ๋ ๋ค์ ์์๋ค์ ๊ณ ๋ คํ์ธ์:
- ๋ค์ํ ๊ธฐ๊ธฐ ์ฌ์ฉ: ๊ธฐ๊ธฐ ์ ํธ๋๋ ์ง์ญ๋ง๋ค ๋ค๋ฆ ๋๋ค. ์๋ฅผ ๋ค์ด, ์ผ๋ถ ๊ฐ๋ฐ๋์๊ตญ์์๋ ์ฌ์ ํ ํผ์ฒํฐ์ด ๋๋ฆฌ ์ฌ์ฉ๋ ์ ์์ง๋ง, ๋ค๋ฅธ ์ง์ญ์์๋ ๊ณ ๊ธ ์ค๋งํธํฐ์ด ์ฃผ๋ฅผ ์ด๋ฃน๋๋ค. ์น์ฌ์ดํธ ํธ๋ํฝ์ ๋ถ์ํ์ฌ ๋์ ์ฌ์ฉ์๊ฐ ์ฌ์ฉํ๋ ๊ธฐ๊ธฐ๋ฅผ ์ดํดํ์ธ์.
- ๋คํธ์ํฌ ์ฐ๊ฒฐ์ฑ: ์ผ๋ถ ์ง์ญ์ ์ฌ์ฉ์๋ ์ธํฐ๋ท ์ฐ๊ฒฐ์ด ๋๋ฆฌ๊ฑฐ๋ ๋ถ์์ ํ ์ ์์ต๋๋ค. ์ ํ๋ ๋์ญํญ์์๋ ์ํํ ๊ฒฝํ์ ๋ณด์ฅํ๊ธฐ ์ํด ์น์ฌ์ดํธ์ ์ฑ๋ฅ(์ด๋ฏธ์ง ํฌ๊ธฐ, ์ฝ๋ ํจ์จ์ฑ)์ ์ต์ ํํ์ธ์.
- ์ธ์ด ์ง์: ์น์ฌ์ดํธ๊ฐ ์ฌ๋ฌ ์ธ์ด๋ฅผ ์ง์ํ๊ณ ํ
์คํธ๊ฐ ๋ค์ํ ๊ธฐ๊ธฐ์์ ์ฌ๋ฐ๋ฅด๊ฒ ๋ ๋๋ง๋๋์ง ํ์ธํ์ธ์. ์ฝํ
์ธ ์ธ์ด๋ฅผ ์ง์ ํ๋ ค๋ฉด HTML์์
lang์์ฑ์ ์ฌ์ฉํ๋ ๊ฒ์ ๊ณ ๋ คํ์ธ์. - ์ค๋ฅธ์ชฝ์์ ์ผ์ชฝ์ผ๋ก ์ฐ๋ (RTL) ์ธ์ด: ์๋์ด๋ ํ๋ธ๋ฆฌ์ด์ ๊ฐ์ด RTL ์ธ์ด๋ฅผ ์ง์ํ๋ ์น์ฌ์ดํธ์ ๊ฒฝ์ฐ ๋ ์ด์์์ด ์ฌ๋ฐ๋ฅด๊ฒ ์กฐ์ ๋๋์ง ํ์ธํ์ธ์. ๋ ๋์ RTL ํธํ์ฑ์ ์ํด CSS ๋
ผ๋ฆฌ์ ์์ฑ(์:
margin-left๋์margin-inline-start)์ ์ฌ์ฉํ์ธ์. - ์ ๊ทผ์ฑ ํ์ค: WCAG(์น ์ฝํ ์ธ ์ ๊ทผ์ฑ ์ง์นจ)์ ๊ฐ์ ๊ตญ์ ์ ๊ทผ์ฑ ํ์ค์ ์ค์ํ์ฌ ์น์ฌ์ดํธ๊ฐ ์ ์ธ๊ณ ์ฅ์ ์ธ๋ ์ฌ์ฉํ ์ ์๋๋ก ๋ณด์ฅํ์ธ์.
์์: RTL ๋ ์ด์์ ์ฒ๋ฆฌํ๊ธฐ
RTL ๋ ์ด์์์ ์ฒ๋ฆฌํ๋ ค๋ฉด CSS๋ฅผ ์ฌ์ฉํ์ฌ ์์์ ๋ฐฉํฅ์ ๋ค์ง๊ณ ์ ๋ ฌ์ ์กฐ์ ํ ์ ์์ต๋๋ค. ๋ค์์ CSS ๋ ผ๋ฆฌ์ ์์ฑ์ ์ฌ์ฉํ ์์์ ๋๋ค:
body[dir="rtl"] {
direction: rtl;
text-align: right;
}
.container {
margin-inline-start: auto; /* LTR์์๋ margin-left, RTL์์๋ margin-right์ ๋์ผ */
margin-inline-end: 0; /* LTR์์๋ margin-right, RTL์์๋ margin-left์ ๋์ผ */
}
์ด ์ฝ๋ ์ค๋ํซ์ dir ์์ฑ์ด rtl๋ก ์ค์ ๋์์ ๋ body ์์์ direction ์์ฑ์ rtl๋ก ์ค์ ํฉ๋๋ค. ๋ํ margin-inline-start์ margin-inline-end๋ฅผ ์ฌ์ฉํ์ฌ LTR ๋ฐ RTL ๋ ์ด์์ ๋ชจ๋์์ ์ฌ๋ฐฑ์ ์ฌ๋ฐ๋ฅด๊ฒ ์ฒ๋ฆฌํฉ๋๋ค.
์ผ๋ฐ์ ์ธ ๋ทฐํฌํธ ๋ฌธ์ ํด๊ฒฐ
๋ค์์ ์ผ๋ฐ์ ์ธ ๋ทฐํฌํธ ๋ฌธ์ ๋ฐ ํด๊ฒฐ ๋ฐฉ๋ฒ์ ๋๋ค:
- ๋ชจ๋ฐ์ผ์์ ์น์ฌ์ดํธ๊ฐ ์ถ์๋์ด ๋ณด์:
์์ธ: ๋ทฐํฌํธ ๋ฉํ ํ๊ทธ๊ฐ ์๊ฑฐ๋ ์๋ชป ๊ตฌ์ฑ๋จ.
ํด๊ฒฐ์ฑ : <head> ์น์ ์ ๋ทฐํฌํธ ๋ฉํ ํ๊ทธ๊ฐ ์๋์ง ํ์ธํ๊ณ
width=device-width๋ฐinitial-scale=1.0์ด ์ฌ๋ฐ๋ฅด๊ฒ ์ค์ ๋์ด ์๋์ง ํ์ธํ์ธ์. - ํน์ ๊ธฐ๊ธฐ์์ ์น์ฌ์ดํธ๊ฐ ๋๋ฌด ์ข๊ฑฐ๋ ๋๊ฒ ๋ณด์:
์์ธ: ์๋ชป๋ ๋ฏธ๋์ด ์ฟผ๋ฆฌ ์ค๋จ์ ๋๋ ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์ ์ ์ํ์ง ๋ชปํ๋ ๊ณ ์ ๋๋น ์์.
ํด๊ฒฐ์ฑ : ๋ฏธ๋์ด ์ฟผ๋ฆฌ ์ค๋จ์ ์ ๊ฒํ ํ๊ณ ํ์์ ๋ฐ๋ผ ์กฐ์ ํ์ธ์. ๋๋น ๋ฐ ๊ธฐํ ์์ฑ์ ๊ณ ์ ํฝ์ ๋์ ์ ์ฐํ ๋จ์(๋ฐฑ๋ถ์จ, em, rem, ๋ทฐํฌํธ ๋จ์)๋ฅผ ์ฌ์ฉํ์ธ์.
- ์ฌ์ฉ์๊ฐ ํ๋/์ถ์ํ ์ ์์:
์์ธ: ๋ทฐํฌํธ ๋ฉํ ํ๊ทธ์
user-scalable=no๊ฐ ์ค์ ๋จ.ํด๊ฒฐ์ฑ : ๋ทฐํฌํธ ๋ฉํ ํ๊ทธ์์
user-scalable=no๋ฅผ ์ ๊ฑฐํ์ธ์. ๋งค์ฐ ํน๋ณํ ์ด์ ๊ฐ ์๋ ํ ์ฌ์ฉ์๊ฐ ํ๋/์ถ์ํ ์ ์๋๋ก ํ์ฉํ์ธ์. - ์ด๋ฏธ์ง๊ฐ ์๊ณก๋๊ฑฐ๋ ํ์ง์ด ๋ฎ์:
์์ธ: ์ด๋ฏธ์ง๊ฐ ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ๋ ํด์๋์ ์ต์ ํ๋์ง ์์.
ํด๊ฒฐ์ฑ :
srcset์์ฑ์ ์ฌ์ฉํ์ฌ ๋ฐ์ํ ์ด๋ฏธ์ง๋ฅผ ์ฌ์ฉํ์ฌ ํ๋ฉด ํด์๋์ ๋ฐ๋ผ ๋ค๋ฅธ ์ด๋ฏธ์ง ํฌ๊ธฐ๋ฅผ ์ ๊ณตํ์ธ์. ํ์ง ์ ํ ์์ด ํ์ผ ํฌ๊ธฐ๋ฅผ ์ค์ด๋ ค๋ฉด ์น ์ฌ์ฉ์ ๋ง๊ฒ ์ด๋ฏธ์ง๋ฅผ ์ต์ ํํ์ธ์.
๊ณ ๊ธ ๋ทฐํฌํธ ๊ธฐ์
๊ธฐ๋ณธ ์ฌํญ ์ธ์ ๋ทฐํฌํธ ๊ตฌ์ฑ์ ๋ฏธ์ธ ์กฐ์ ํ๋ ๋ฐ ์ฌ์ฉํ ์ ์๋ ๋ช ๊ฐ์ง ๊ณ ๊ธ ๊ธฐ์ ์ด ์์ต๋๋ค:
- ๋ทฐํฌํธ ๋จ์ ์ฌ์ฉ (
vw,vh,vmin,vmax):๋ทฐํฌํธ ๋จ์๋ ๋ทฐํฌํธ์ ํฌ๊ธฐ์ ๋น๋กํฉ๋๋ค. ์๋ฅผ ๋ค์ด,
1vw๋ ๋ทฐํฌํธ ๋๋น์ 1%์ ๊ฐ์ต๋๋ค. ์ด๋ฌํ ๋จ์๋ ๋ทฐํฌํธ ํฌ๊ธฐ์ ๋น๋กํ์ฌ ํ์ฅ๋๋ ๋ ์ด์์์ ๋ง๋๋ ๋ฐ ์ ์ฉํ ์ ์์ต๋๋ค.์์:
width: 50vw;(๋๋น๋ฅผ ๋ทฐํฌํธ ๋๋น์ 50%๋ก ์ค์ ) @viewport๊ท์น (CSS at-rule) ์ฌ์ฉ:@viewportCSS at-rule์ ๋ทฐํฌํธ๋ฅผ ๋ ์ธ๋ฐํ๊ฒ ์ ์ดํ๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค. ๊ทธ๋ฌ๋ ๋ฉํ ํ๊ทธ๋ณด๋ค ์ง์ ๋ฒ์๊ฐ ๋์ง ์์ผ๋ฏ๋ก ์ฃผ์ํด์ ์ฌ์ฉํ๊ณ ์ด์ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ํ ๋์ฒด(๋ฉํ ํ๊ทธ)๋ฅผ ์ ๊ณตํด์ผ ํฉ๋๋ค.์์:
@viewport { width: device-width; initial-scale: 1.0; }- ๋ค์ํ ์ฅ์น ๋ฐฉํฅ ์ฒ๋ฆฌ:
CSS ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ฅ์น ๋ฐฉํฅ(์ธ๋ก ๋๋ ๊ฐ๋ก)์ ๋ฐ๋ผ ๋ ์ด์์์ ์กฐ์ ํ์ธ์.
orientation๋ฏธ๋์ด ๊ธฐ๋ฅ์ ํน์ ๋ฐฉํฅ์ ๋์์ผ๋ก ํ๋ ๋ฐ ์ฌ์ฉ๋ ์ ์์ต๋๋ค.์์:
@media (orientation: portrait) { /* ์ธ๋ก ๋ฐฉํฅ ์คํ์ผ */ } @media (orientation: landscape) { /* ๊ฐ๋ก ๋ฐฉํฅ ์คํ์ผ */ } - ์์ดํฐ ๋ฐ ์๋๋ก์ด๋ ๊ธฐ๊ธฐ์ ๋
ธ์น/์์ ์์ญ ์ฒ๋ฆฌ:
์ต์ ์ค๋งํธํฐ์๋ ์ฝํ ์ธ ๋ฅผ ๊ฐ๋ฆด ์ ์๋ ๋ ธ์น ๋๋ ๋ฅ๊ทผ ๋ชจ์๋ฆฌ๊ฐ ์๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค. CSS ํ๊ฒฝ ๋ณ์(์:
safe-area-inset-top,safe-area-inset-bottom,safe-area-inset-left,safe-area-inset-right)๋ฅผ ์ฌ์ฉํ์ฌ ์ด๋ฌํ ์์ ์์ญ์ ๊ณ ๋ คํ๊ณ ์ฝํ ์ธ ๊ฐ ์๋ฆฌ๋ ๊ฒ์ ๋ฐฉ์งํ์ธ์.์์:
body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }์ฐธ๊ณ :
safe-area-inset-*๋ณ์๊ฐ ์ฌ๋ฐ๋ฅด๊ฒ ๊ณ์ฐ๋๋๋ก ์ฌ๋ฐ๋ฅธ ๋ทฐํฌํธ ๋ฉํ ํ๊ทธ๋ฅผ ํฌํจํด์ผ ํฉ๋๋ค. - ํด๋๋ธ ๊ธฐ๊ธฐ ์ต์ ํ:
ํด๋๋ธ ๊ธฐ๊ธฐ๋ ๋ฐ์ํ ๋์์ธ์ ๊ณ ์ ํ ๊ณผ์ ๋ฅผ ์ ์ํฉ๋๋ค.
screen-spanning๋ฏธ๋์ด ๊ธฐ๋ฅ(์ฌ์ ํ ์งํ ์ค)์ด ์๋ CSS ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ์น์ฌ์ดํธ๊ฐ ํด๋๋ธ ๊ธฐ๊ธฐ์์ ์คํ ์ค์ธ ์๊ธฐ๋ฅผ ๊ฐ์งํ๊ณ ๊ทธ์ ๋ฐ๋ผ ๋ ์ด์์์ ์กฐ์ ํ์ธ์. ์ ํ ์ํ๋ฅผ ๊ฐ์งํ๊ณ ๋ ์ด์์์ ๋์ ์ผ๋ก ์กฐ์ ํ๋ ค๋ฉด JavaScript๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ๊ณ ๋ คํ์ธ์.์์ (์ง์ ๊ธฐ๋ฅ์ด ์์ง ์งํ ์ค์ด๋ฏ๋ก ๊ฐ๋ ์ ):
@media (screen-spanning: single-fold-horizontal) { /* ํ๋ฉด์ด ์ํ์ผ๋ก ์ ํ์ ๋์ ์คํ์ผ */ } @media (screen-spanning: single-fold-vertical) { /* ํ๋ฉด์ด ์์ง์ผ๋ก ์ ํ์ ๋์ ์คํ์ผ */ }
๋ทฐํฌํธ ๊ตฌ์ฑ ํ ์คํธ
๋ทฐํฌํธ ๊ตฌ์ฑ์ด ์ฌ๋ฐ๋ฅด๊ฒ ์๋ํ๋์ง ํ์ธํ๋ ค๋ฉด ํ ์คํธ๊ฐ ์ค์ํฉ๋๋ค. ๋ค์์ ๋ช ๊ฐ์ง ํ ์คํธ ๋ฐฉ๋ฒ์ ๋๋ค:
- ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ: ๋ธ๋ผ์ฐ์ ์ ๊ฐ๋ฐ์ ๋๊ตฌ์ ์๋ ์ฅ์น ์๋ฎฌ๋ ์ด์ ๊ธฐ๋ฅ์ ์ฌ์ฉํ์ฌ ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์ ํด์๋๋ฅผ ์๋ฎฌ๋ ์ด์ ํ์ธ์.
- ์ค์ ์ฅ์น: ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์ ์ด์ ์ฒด์ ๋ฅผ ๊ฐ์ง ๋ค์ํ ์ค์ ์ฅ์น(์ค๋งํธํฐ, ํ๋ธ๋ฆฟ)์์ ํ ์คํธํ์ธ์.
- ์จ๋ผ์ธ ํ ์คํธ ๋๊ตฌ: ๋ค์ํ ์ฅ์น์์ ์น์ฌ์ดํธ ์คํฌ๋ฆฐ์ท์ ์ ๊ณตํ๋ ์จ๋ผ์ธ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ธ์. BrowserStack ๋ฐ LambdaTest๊ฐ ์์์ ๋๋ค.
- ์ฌ์ฉ์ ํ ์คํธ: ๋ฌธ์ ๋ ๊ฐ์ ํ ๋ถ๋ถ์ ํ์ ํ๊ธฐ ์ํด ๋ค์ํ ์ฅ์น์์ ์ค์ ์ฌ์ฉ์๋ก๋ถํฐ ํผ๋๋ฐฑ์ ๋ฐ์ผ์ธ์.
๊ฒฐ๋ก
CSS ๋ทฐํฌํธ ๋ฉํ ํ๊ทธ๋ ๋ชจ๋ฐ์ผ ์นํ์ ์ด๊ณ ๋ฐ์ํ ์น์ฌ์ดํธ๋ฅผ ๋ง๋๋ ๋ฐ ํ์์ ์ธ ๋๊ตฌ์ ๋๋ค. ๊ทธ ์์ฑ๊ณผ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ์ดํดํจ์ผ๋ก์จ ์น์ฌ์ดํธ๊ฐ ์ ์ธ๊ณ ์ฅ์น์์ ์๋ฒฝํ๊ฒ ๋ณด์ด๊ณ ์๋ํ๋๋ก ๋ณด์ฅํ ์ ์์ต๋๋ค. ๋ทฐํฌํธ ๋ฉํ ํ๊ทธ๋ฅผ CSS ๋ฏธ๋์ด ์ฟผ๋ฆฌ์ ๊ฒฐํฉํ์ฌ ๋ชจ๋ ํ๋ฉด ํฌ๊ธฐ์์ ์ต์ ์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ ์ง์ ์ผ๋ก ์ ์๋ ฅ ์๋ ๋ ์ด์์์ ๋ง๋์ธ์. ๊ตฌ์ฑ์ ์ฒ ์ ํ ํ ์คํธํ๊ณ ๋ชจ๋ ์ฌ๋์ด ํฌ๊ด์ ์ผ๋ก ์ฌ์ฉํ ์ ์๋ ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค๊ธฐ ์ํด ์ ๊ทผ์ฑ์ ์ฐ์ ์ํ๋ ๊ฒ์ ์์ง ๋ง์ญ์์ค.