๋ทฐํฌํŠธ(viewport)

๐Ÿ“„ ๋ทฐํฌํŠธ(viewport)

ํ˜„์žฌ ํ™”๋ฉด์— ๋ณด์—ฌ์ง€๊ณ  ์žˆ๋Š” ์˜์—ญ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

๊ธฐ๊ธฐ๋ณ„๋กœ ๋ทฐํฌํŠธ๊ฐ€ ๋‹ค๋ฅด๊ธฐ๋•Œ๋ฌธ์— ๋ณด์—ฌ์ง€๋Š” ํ™”๋ฉด์˜ ๋ฐฐ์œจ์— ๋”ฐ๋ผ ํ™”๋ฉด์ด ๋‹ค๋ฅด๊ฒŒ ๋ณด์ž…๋‹ˆ๋‹ค.

html๋ฌธ์„œ์—์„œ ์ด๋ฆ„์ด ๋ทฐํฌํŠธ์ธ ๋ฉ”ํƒ€ํƒœ๊ทธ ์„ค์ •์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

width=device-width : ๋„ˆ๋น„๋ฅผ ๊ธฐ๊ธฐ์˜ ๋„ˆ๋น„ ๊ธฐ์ค€์œผ๋กœ ์ดˆ๊ธฐํ™” ํ•œ๋‹ค. initial-scale=1.0 : ๊ธฐ๊ธฐ์˜ ๋„ˆ๋น„์— ๋งž๊ฒŒ ์ดˆ๊ธฐ scale๋ฅผ ์ง€์ •ํ•œ๋‹ค.

์ด ๋ฉ”ํƒ€ํƒœ๊ทธ ์„ค์ •์€ ๊ธฐ๊ธฐ์— ๋งž๊ฒŒ ํ™”๋ฉด ๋ฐฐ์œจ์„ ์กฐ์ •ํ•ด์ฃผ๊ธฐ ๋•Œ๋ฌธ์—, ๋ชจ๋ฐ”์ผ ํ™”๋ฉด์—์„œ๋„ pcํ™”๋ฉด๊ณผ ๋™์ผํ•˜๊ฒŒ ์ฝ˜ํ…์ธ ์˜ ํฌ๊ธฐ๊ฐ€ ์œ ์ง€๋˜๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ“„ ๋ทฐํฌํŠธ ๋‹จ์œ„

๋ทฐํฌํŠธ ํฌ๊ธฐ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ฐ’์„ ๊ณ„์‚ฐํ•˜์—ฌ ํฌ๊ธฐ๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ๊ฐ€๋ณ€๋‹จ์œ„๋“ค์ด ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋Š” ๋ฐ˜์‘ํ˜• ์›น์„ ๋งŒ๋“ค ๋•Œ ๋งค์šฐ ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉ๋˜๋Š” ๋‹จ์œ„๋“ค์ž…๋‹ˆ๋‹ค.

โ–ช font-size: 1vw;

ํ™”๋ฉด ์‚ฌ์ด์ฆˆ์—์„œ ๋„ˆ๋น„์˜ 100๋ถ„์˜ 1

ํ™”๋ฉด ๋„ˆ๋น„์˜ ๋ฐฑ๋ถ„์œจ์„ ๊ณ„์‚ฐํ•ด์„œ ํฌ๊ธฐ๋ฅผ ์กฐ์ •ํ•ฉ๋‹ˆ๋‹ค.

โ–ช font-size: 1vh;

ํ™”๋ฉด ์‚ฌ์ด์ฆˆ์—์„œ ๋†’์ด์˜ 100๋ถ„์˜ 1

ํ™”๋ฉด ๋†’์ด์˜ ๋ฐฑ๋ถ„์œจ์„ ๊ณ„์‚ฐํ•ด์„œ ํฌ๊ธฐ๋ฅผ ์กฐ์ •ํ•ฉ๋‹ˆ๋‹ค.

โ–ช font-size: 1vmin;

ํ™”๋ฉด ์‚ฌ์ด์ฆˆ์—์„œ ๋„ˆ๋น„์™€ ๋†’์ด ์ค‘ ์ž‘์€๊ฒƒ์˜ 100๋ถ„์˜ 1 ๋„ˆ๋น„์™€ ๋†’์ด ์ค‘ ์ž‘์€ ๊ฒƒ์— ๋ฐฑ๋ถ„์œจ์„ ๋งž์ถ˜๋‹ค

โ–ช font-size: 1vmax;

ํ™”๋ฉด ์‚ฌ์ด์ฆˆ์—์„œ ๋„ˆ๋น„์™€ ๋†’์ด ์ค‘ ํฐ๊ฒƒ์˜ 100๋ถ„์˜ 1 ๋„ˆ๋น„์™€ ๋†’์ด ์ค‘ ํฐ ๊ฒƒ์— ๋ฐฑ๋ถ„์œจ์„ ๋งž์ถ˜๋‹ค.

Leave a comment