๋ฐ˜์‘ํ˜•

<textarea>, <input>, <select> ํƒœ๊ทธ๋ฅผ ๋ชจ๋ฐ”์ผ์—์„œ ํ„ฐ์น˜ํ•˜๋ฉด(ํฌ์ปค์Šคํ•˜๋ฉด) ํ™”๋ฉด์ด ์ž๋™์œผ๋กœ ํ™•๋Œ€๋  ๋•Œ๊ฐ€ ์žˆ๋‹ค. ์ž…๋ ฅ์ฐฝ์˜ ํฐํŠธ ํฌ๊ธฐ๊ฐ€ 16px๋ณด๋‹ค ์ž‘์œผ๋ฉด ์ž๋™์œผ๋กœ ํ™•๋Œ€๋˜๊ธฐ ๋•Œ๋ฌธ์— ๋ฐœ์ƒํ•˜๋Š” ํ˜„์ƒ. ๋Œ€ํ‘œ์ ์œผ๋กœ ์•„๋ž˜ 3๊ฐ€์ง€ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค.

 

  1. ํ™•๋Œ€ ๊ธˆ์ง€ — ๋ชจ๋ฐ”์ผ์šฉ์œผ๋กœ ์ ์ ˆํ•˜๊ฒŒ ๋””์ž์ธ๋œ ๊ฒฝ์šฐ
  2. ํฐํŠธ ํฌ๊ธฐ๋ฅผ 16px ์ด์ƒ์œผ๋กœ ๋ณ€๊ฒฝ — ์ถ”์ฒœ
  3. ํฐํŠธ ํฌ๊ธฐ๋ฅผ 16px๋กœ ๋ณ€๊ฒฝํ•˜๊ณ  `transform: scale()`์„ ์ด์šฉํ•ด ์›ํ•˜๋Š” ๋งŒํผ ์ค„์ด๋Š” ๋ฐฉ๋ฒ• — ๋ณต์žกํ•จ

 

๋ฐฉ๋ฒ•1 — ํ™•๋Œ€ ๊ธˆ์ง€


html ํŒŒ์ผ ๋ฉ”ํƒ€ ํƒœ๊ทธ์˜ content ์†์„ฑ์— ์ตœ๋Œ€ ํ™•๋Œ€ ๋ฐฐ์œจ์„ 1๋ฐฐ์ˆ˜๋งŒ ํ—ˆ์šฉํ•˜๊ณ , ๋‹จ๋ง๊ธฐ ํ™•๋Œ€ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜์ง€ ๋ชปํ•˜๋„๋ก ๋ช…์‹œํ•˜๋ฉด ๋ฐฉ๋ฒ•. ์ž‘์€ ๊ธ€์”จ๋ฅผ ์ž˜ ๋ณด์ง€ ๋ชปํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์€ ํ™•๋Œ€ํ•  ์ˆ˜ ์—†๊ธฐ ๋•Œ๋ฌธ์— ์ ‘๊ทผ์„ฑ์ด ๋–จ์–ด์ง€๋Š” ๋‹จ์ ์ด ์žˆ๋‹ค.

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1"
/>

 

  • initial-scale ์ดˆ๊ธฐ ํ™”๋ฉด ๋ฐฐ์œจ
  • maximum-scale ์ตœ๋Œ€ ํ™•๋Œ€ ๋ฐฐ์œจ
  • user-scalable ์‚ฌ์šฉ์ž๊ฐ€ ํ™”๋ฉด์„ ํ™•๋Œ€/์ถ•์†Œํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ์—ฌ๋ถ€
  • width=device-width ๋ธŒ๋ผ์šฐ์ € ๋„ˆ๋น„๋ฅผ ๋””๋ฐ”์ด์Šค ๋„ˆ๋น„์— ๋งž์ถฐ์„œ ํ‘œ์‹œ

 

๋ฐฉ๋ฒ•2 — ํฐํŠธ ํฌ๊ธฐ๋ฅผ 16px ์ด์ƒ์œผ๋กœ ๋ณ€๊ฒฝ


(์ธํ’‹์ฐฝ) ์ž๋™ ํ™•๋Œ€๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š๋Š” ํฐํŠธ์˜ ์ตœ์†Œ ํฌ๊ธฐ์ธ 16px๋กœ ๋ณ€๊ฒฝ. ๊ฐ€์žฅ ๊ฐ„๋‹จํ•˜์ง€๋งŒ ๊ฐ€์žฅ ํ™•์‹คํ•œ ๋ฐฉ๋ฒ•.

 

๋ฐฉ๋ฒ•3 — `transform: scale()` ํ™œ์šฉ


์ธํ’‹์ฐฝ์˜ ํฐํŠธ ํฌ๊ธฐ๋ฅผ 16px๋กœ ์ ์šฉํ•˜๊ณ , transform: scale()์„ ์‚ฌ์šฉํ•ด์„œ ์›ํ•˜๋Š” ํฐํŠธ ํฌ๊ธฐ ๋งŒํผ ์ค„์ด๋Š” ๋ฐฉ๋ฒ•. ์ตœ์ข…์ ์œผ๋กœ ์•„๋ž˜ ์Šคํƒ€์ผ๋Œ€๋กœ ์„ค์ •ํ•˜๊ณ  ์‹ถ๋‹ค๊ณ  ๊ฐ€์ •ํ•˜๊ณ ,

input[type="text"] {
  border-radius: 5px;
  font-size: 12px;
  line-height: 20px;
  padding: 5px;
  width: 100%;
}

 

font-size๋ฅผ 12px์—์„œ 16px๋กœ ๋ณ€๊ฒฝํ•˜๋ฉด 16/12 = 1.33333333 (133.33%)๋ฅผ ํ™•๋Œ€ํ•œ ์…ˆ์ด๋‹ค. ์ด ๋น„์œจ๋งŒํผ ๋‹ค๋ฅธ ์Šคํƒ€์ผ ์š”์†Œ๋„ ํ‚ค์›Œ์ค˜์•ผ ํ•œ๋‹ค. transform: scale()์„ ์‚ฌ์šฉํ•ด์„œ ์ค„์ด๋ฉด ๋‹ค๋ฅธ ์Šคํƒ€์ผ ์š”์†Œ๋„ ๋™์ผํ•˜๊ฒŒ ์ถ•์†Œ๋˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

 

์ฐธ๊ณ ๋กœ ํ™•๋Œ€๋ฅผ ์œ„ํ•ด ์›๋ž˜ ์ง€์ •ํ•˜๋ ค๋˜ ์Šคํƒ€์ผ ์†์„ฑ ๊ฐ’์— ๊ณฑํ•˜๊ธฐ๋ฅผ ํ•  ๋•, ๊ณฑํ•œ ํ›„์˜ ๊ฐ’์ด ๋”์ด์ƒ ์ปค์ง€์ง€ ์•Š์„ ๋•Œ๊นŒ์ง€ 5 * 1.3333.... ๋’ค์— ์†Œ์ˆ˜์ ์„ ์ถ”๊ฐ€ํ•œ๋‹ค.

 

 

6.66666667 ์ด์ƒ ์ปค์ง€์ง€ ์•Š๋Š” 1.3333333333์„ ๊ณฑํ•œ๋‹ค

input[type="text"] {
  border-radius: 6.66666667px; /* 5*1.3333333333 */
  font-size: 16px;
  line-height: 26.66666667px;
  padding: 6.66666667px;
  width: 133.33333333%;
}

 

์ด์ œ ์›๋ž˜ ์ง€์ •ํ•˜๊ณ  ์‹ถ์—ˆ๋˜ ์‚ฌ์ด์ฆˆ๋งŒํผ 12/16=0.75 (75%) ์ถ•์†Œํ•œ๋‹ค. transform: scale(0.75)

input[type="text"] {
  border-radius: 6.66666667px; /* 5*1.3333333333 */
  font-size: 16px;
  line-height: 26.66666667px;
  padding: 6.66666667px;
  width: 133.33333333%;

  transform: scale(0.75);
  transform-origin: left top; /* ํšŒ์ „ ์ค‘์‹ฌ ์ง€์ •. left top์€ ์™ผ์ชฝ ์ƒ๋‹จ ๋ชจ์„œ๋ฆฌ*/
}

 

ํ•˜์ง€๋งŒ ์ถ•์†Œ๋œ ๋งŒํผ ์˜ค๋ฅธ์ชฝ ํ•˜๋‹จ์— ๊ณต๋ฐฑ์ด ์ƒ๊ธฐ๋ฏ€๋กœ margin ๊ฐ’์„ ์กฐ์ •ํ•ด์•ผ ํ•œ๋‹ค. ์•„๋ž˜๋Š” ์ตœ์ข… ์Šคํƒ€์ผ ์ฝ”๋“œ.

input[type="text"] {
  border-radius: 6.66666667px; /* 5*1.3333333333 */
  font-size: 16px;
  line-height: 26.66666667px;
  padding: 6.66666667px;
  width: 133.33333333%;

  transform: scale(0.75);
  transform-origin: left top; /* ํšŒ์ „ ์ค‘์‹ฌ ์ง€์ •. left top์€ ์™ผ์ชฝ ์ƒ๋‹จ ๋ชจ์„œ๋ฆฌ*/

  margin-bottom: -10px;
  margin-right: -33.333333333%;
}

 

์ฐธ๊ณ ๊ธ€


 


๊ธ€ ์ˆ˜์ •์‚ฌํ•ญ์€ ๋…ธ์…˜ ํŽ˜์ด์ง€์— ๊ฐ€์žฅ ๋น ๋ฅด๊ฒŒ ๋ฐ˜์˜๋ฉ๋‹ˆ๋‹ค. ๋งํฌ๋ฅผ ์ฐธ๊ณ ํ•ด ์ฃผ์„ธ์š”
๋ฐ˜์‘ํ˜•