็ก์
ํฌ๋กฌ ๊ฐ๋ฐ์ ๋๊ตฌ์์ ๋ฏธ๋์ด์ฟผ๋ฆฌ ํ์ธํ๋ ๋ฐฉ๋ฒ ๋ณธ๋ฌธ
<tips>
ํฌ๋กฌ ๊ฐ๋ฐ์ ๋๊ตฌ์์ ๋ฏธ๋์ด์ฟผ๋ฆฌ ํ์ธํ๋ ๋ฐฉ๋ฒ
yo-u-loo 2026. 3. 23. 14:30
๐ฑ ๊ธฐ๊ธฐ ํด๋ฐ ๋ฐ ๋ฏธ๋์ด์ฟผ๋ฆฌ ๋ฐ ํ์ฑํ
๋จผ์ ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ด๊ณ ๊ธฐ๊ธฐ ๋ชจ๋๋ก ์ง์ ํด์ผ ํฉ๋๋ค.
- ๊ฐ๋ฐ์ ๋๊ตฌ ์คํ: F12 ๋๋ Ctrl + Shift + I๋ฅผ ๋๋ฆ ๋๋ค.
- ๊ธฐ๊ธฐ ํด๋ฐ ์ผ๊ธฐ: ์ผ์ชฝ ์๋จ์ ์๋ ์ค๋งํธํฐ/ํ๋ธ๋ฆฟ ๋ชจ์ ์์ด์ฝ์ ํด๋ฆญํฉ๋๋ค.
- ๋ฏธ๋์ด์ฟผ๋ฆฌ ๋ฐ ํ์: ๊ธฐ๊ธฐ ํด๋ฐ๊ฐ ํ์ฑํ๋ ์ํ์์ ์ค๋ฅธ์ชฝ ์๋จ์ ์ธ๋ก ์ 3๊ฐ(โฎ) ๋ฉ๋ด๋ฅผ ๋๋ฅธ ๋ค, **[Show media queries]**๋ฅผ ํด๋ฆญํฉ๋๋ค.
๐ ๋ฏธ๋์ด์ฟผ๋ฆฌ ๋ง๋ ์ฝ๋ ๋ฒ
Show media queries๋ฅผ ์ ํํ๋ฉด ๋ธ๋ผ์ฐ์ ์๋จ์ ํ๋์, ์ด๋ก์, ์ฃผํฉ์์ ๊ฐ๋ก ๋ง๋๋ค์ด ๋ํ๋ฉ๋๋ค.
- ํ๋์ ๋ง๋ (max-width): ์ค์ ๋ ๋๋น๋ณด๋ค ์์ ๋ ์ ์ฉ๋๋ ์คํ์ผ ๊ตฌ๊ฐ์ ๋๋ค.
- ์ด๋ก์ ๋ง๋ (min-width & max-width): ํน์ ๋ฒ์ ์ฌ์ด์์๋ง ์ ์ฉ๋๋ ์คํ์ผ ๊ตฌ๊ฐ์ ๋๋ค.
- ์ฃผํฉ์ ๋ง๋ (min-width): ์ค์ ๋ ๋๋น๋ณด๋ค ํด ๋ ์ ์ฉ๋๋ ์คํ์ผ ๊ตฌ๊ฐ์ ๋๋ค.
ํด๋น ๋ง๋๋ฅผ ํด๋ฆญํ๊ธฐ๋ง ํ๋ฉด ๋ธ๋ผ์ฐ์ ๊ฐ ์ฆ์ ๊ทธ ๋๋น๋ก ์กฐ์ ๋์ด, ์์ฑํ ๋ฏธ๋์ด์ฟผ๋ฆฌ๊ฐ ์ ์๋ํ๋์ง ๋ฐ๋ก ํ์ธํ ์ ์์ต๋๋ค.
๐ ๏ธ ์ค๋ฌด ํ: ์์ค ์ฝ๋๋ก ๋ฐ๋ก ๊ฐ๊ธฐ
๋ฏธ๋์ด์ฟผ๋ฆฌ ํ์ธ ๋์ค ์คํ์ผ์ ์์ ํ๊ณ ์ถ์ ๋๋ ๋ค์ ๋ฐฉ๋ฒ์ ์จ๋ณด์ธ์.
- ์ฝ๋ ํ์ธ: ์๋จ ๋ง๋ ์์์ ๋ง์ฐ์ค ์ค๋ฅธ์ชฝ ๋ฒํผ์ ํด๋ฆญํฉ๋๋ค.
- Reveal in source code: ์ด ๋ฉ๋ด๋ฅผ ์ ํํ๋ฉด ํด๋น ๋ฏธ๋์ด์ฟผ๋ฆฌ๊ฐ ์ ์๋ CSS ํ์ผ์ ์ ํํ ์์น(Line)๋ก ์ฆ์ ์ด๋์์ผ ์ค๋๋ค.
- ์ง์ ์กฐ์ : ๋ง๋๋ฅผ ํด๋ฆญํ๋ ๊ฒ ์ธ์๋ ์๋จ ์ซ์๋ฅผ ์ง์ ์ ๋ ฅํ๊ฑฐ๋, ํ๋ฉด ์์ ํธ๋ค์ ๋ง์ฐ์ค๋ก ๋๋๊ทธํ์ฌ ์ค์๊ฐ์ผ๋ก ๋์์ธ์ด ๊นจ์ง๋ ์ง์ ์ ์ฐพ์ ์ ์์ต๋๋ค.
๐ก ์ค๋ฌด์์ ์์
๊ฐ๋ฐ์ ๋๊ตฌ์ ์ด ๊ธฐ๋ฅ์ ๋จ์ํ ํ์ธ์ฉ์ ๋์ด '์ต์ ํ'๋ฅผ ์ํ ๋๊ตฌ์ ๋๋ค.
- ๋๋ฝ๋ ๊ตฌ๊ฐ ๋ฐฉ์ง: ๋ง๋๋ฅผ ํ๋์ฉ ํด๋ฆญํด ๋ณด๋ฉฐ 600px์์ 768px ์ฌ์ด ๋ฑ '์ ๋งคํ ๊ตฌ๊ฐ'์์ ๋์์ธ์ด ๋ฌด๋์ง์ง ์๋์ง ์ ์ ์กฐ์ฌํ ์ ์์ต๋๋ค.
- ๊ธฐ๊ธฐ๋ณ ์ต์ ํ: ๋ฏธ๋ฆฌ ์ ์๋ iPhone, iPad ๋ฑ์ ํ๋ฆฌ์ ์ ํด๋ฆญํด ๋ณด๋ ๊ฒ๋ ์ข์ง๋ง, ๋ฏธ๋์ด์ฟผ๋ฆฌ ๋ง๋๋ฅผ ์ด์ฉํด ๋ฒ์ฉ์ ์ธ ํ๋ฉด ํฌ๊ธฐ ๋์์ ์ง์คํ๋ ๊ฒ์ด ๋ ๊ฒฌ๊ณ ํ ์น์ ๋ง๋๋ ๋น๊ฒฐ์ ๋๋ค.
'<tips>' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| ๋ค๋น๊ฒ์ด์ ๋ฉ๋ด๋ <ul>์ <div>์ค ์ด๋ค ๊ฒ์ ์ฌ์ฉํด์ผ ํ ๊น? (0) | 2026.03.27 |
|---|---|
| ์ฝ๋ฆฐ์ด๋ฅผ ์ํ HTML <head> ์ฝ๋ ์ถ์ฒ (0) | 2026.03.26 |
| ๋ฏธ๋์ด์ฟผ๋ฆฌ ์ธํ ์ ์ํด statcounter.com ํ์ฉํ๊ธฐ (0) | 2026.03.23 |
| ํ๋ก ํธ์๋ ๊ฐ๋ฐ์์ UI ๋์์ด๋ ์ถ์ฒ ์ฌ์ดํธ (0) | 2026.03.17 |
| Typography & Icons Fonts ์ฌ์ดํธ (0) | 2026.03.17 |