[HTML/CSS] Day11. ๋‹จ์œ„(Units) ๐Ÿ“

์šฐ๋ฆฌ๋Š” HTML๋กœ ๋งˆํฌ์—…์„ ํ•œ ํ›„ ์Šคํƒ€์ผ์„ ์ฃผ๊ธฐ ์œ„ํ•ด CSS๋ฅผ ์ž‘์„ฑํ•˜๋Š”๋ฐ ๋ณดํ†ต ๋‹จ์œ„(Units)์„ ์ •๋ง ๋งŽ์ด ์‚ฌ์šฉํ•œ๋‹ค. px๋ผ๋˜์ง€, ์ตœ๊ทผ์—์•ผ ์ž์„ธํ•˜๊ฒŒ ๋ฐฐ์› ๋˜ em๊ณผ rem ๋“ฑ ๐Ÿ˜„

๊ทธ๋Ÿฐ๋ฐ ์šฐ๋ฆฌ๊ฐ€ ์ž์ฃผ ์“ฐ๋Š” ๋‹จ์œ„๋ณด๋‹ค ๋” ๋‹ค์–‘ํ•œ ๋‹จ์œ„๊ฐ€ ์žˆ๋‹ค๊ณ  ํ•œ๋‹ค.
๊ฐœ์ธ์ ์œผ๋กœ ์ˆ˜์—…์„ ๋“ค์œผ๋ฉด์„œ "์ด๋Ÿฐ ๋‹จ์œ„๊ฐ€ ์žˆ์—ˆ๋‚˜?"๋ผ๋Š” ์ƒ๊ฐ์„ ์‹œ๊ฐ„๋งˆ๋‹ค ํ–ˆ๋‹ค.

๊ทธ์ •๋„๋กœ ๋ฐฐ์›Œ์•ผํ•˜๋Š” ๋‹จ์œ„์˜€์ง€๋งŒ ๋ชฐ๋ž๋‹ค๋Š” ๋œป์€ "์ž์ฃผ ์“ฐ์ด์ง€ ์•Š๋Š”๋‹ค."๋ผ๋Š” ๊ฒฐ๋ก ์ด ๋‚˜์˜จ๋‹ค. ํ•˜์ง€๋งŒ ์šฐ๋ฆฌ๊ฐ€ ์–ธ์ œ ์“ธ์ง€ ๋ชจ๋ฅด๋‹ˆ ๋ฐฐ์›Œ๋†“๋Š” ๊ฒƒ์ด ์ข‹๊ฒ ๋‹ค๋ผ๋Š” ์ƒ๊ฐ์— ์ •๋ฆฌ๋ฅผ ํ•˜๋ ค๊ณ  ํ•œ๋‹ค.

๋‹จ์œ„(Units)์˜ ๋ถ„๋ฅ˜

๋‹จ์œ„๋Š” ์ด 3๊ฐ€์ง€์˜ ๋ถ„๋ฅ˜๋กœ ๋‚˜๋‰œ๋‹ค.

  • ์ ˆ๋Œ€ ๊ธธ์ด ๋‹จ์œ„ : ์ ˆ๋Œ€์ ์œผ๋กœ ๋ฐ”๋€Œ์ง€ ์•Š๋Š” ๊ณ ์ • ๋‹จ์œ„๋ฅผ ๋งํ•œ๋‹ค. px, cm, mm ๋“ฑ์ด ์žˆ๋‹ค.

  • ์ƒ๋Œ€ ๊ธธ์ด ๋‹จ์œ„ : ์ƒ๋Œ€์ ์œผ๋กœ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์›์ธ(์Šคํฌ๋ฆฐ ํฌ๊ธฐ ๋“ฑ)์— ์˜ํ•ด ๋ณ€ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฐ€๋ณ€ ๋‹จ์œ„๋ฅผ ๋งํ•œ๋‹ค. em, rem, vh, vw ๋“ฑ์ด ์žˆ๋‹ค.

  • ๋ฐฑ๋ถ„์œจ : ๋ง ๊ทธ๋Œ€๋กœ %๋กœ ํ‘œ๊ธฐํ•˜๋Š” ๋‹จ์œ„๋ฅผ ๋งํ•œ๋‹ค.

๋‚˜๋Š” ์‹ค๋ฌด์ ์œผ๋กœ ๋งŽ์ด ์“ฐ์ด๋Š” ๋‹จ์œ„๋ฅผ ์œ„์ฃผ๋กœ ์ •๋ฆฌํ•˜๋ ค๊ณ  ํ•œ๋‹ค.

๋ณ€ํ•˜์ง€ ์•Š๋Š” ์ ˆ๋Œ€ ๊ธธ์ด ๋‹จ์œ„ โŒ

  • px : 'ํ™”์†Œ'๋ฅผ ์˜๋ฏธํ•˜๋Š” Pixel์˜ ์•ฝ์ž์ด๋ฉฐ ๋””๋ฐ”์ด์Šค ํ™”๋ฉด์—์„œ ์ด๋ฏธ์ง€๋ฅผ ํ‘œํ˜„ํ•˜๋Š” ๊ฐ€์žฅ ์ž‘์€ ๋‹จ์œ„์ด๋‹ค. ๊ฐ’์ด ๊ณ ์ •๋œ๋‹ค๋Š” ์ด์œ ๋กœ ์ง๊ด€์ ์œผ๋กœ ์‰ฝ๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ณ  ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” ๋‹จ์œ„์ด๋‹ค.

์ฃผ๋กœ ์š”์†Œ์˜ width๋‚˜ height, padding, margin, border, font-size ๋“ฑ ๊ฐ’์˜ ๋‹จ์œ„์— ๋งŽ์ด ์‚ฌ์šฉ๋œ๋‹ค.

์˜ˆ์ œ๋ฅผ ๋ณด๋ฉด ๊ฐ๊ฐ ๋‹ค๋ฅธ font-size๋ฅผ ์ฃผ์—ˆ๋‹ค.

<style>
      h1 {
        font-size: 20px;
      }

      p {
        font-size: 14px;
      }

      span {
        font-size: 5px;
      }
</style>
<h1>Hello world - h1</h1>
<p>Hello world - p</p>
<span>Hello world - span</span>

๊ฒฐ๊ณผ๋Š” ๋‹ค ์•Œ๋งž๊ฒŒ ๋“ค์–ด๊ฐ”๋‹ค ํ–ˆ์œผ๋‚˜ ์˜ค๋Š˜ ์ฒ˜์Œ ์•ˆ ์‚ฌ์‹ค์ด ์žˆ์—ˆ๋‹ค.

๋ธŒ๋ผ์šฐ์ €๋งˆ๋‹ค ๊ธฐ๋ณธ font-size๋ฅผ ์ •ํ•ด๋†“๋Š”๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ณ  ์žˆ์—ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ํฌ๋กฌ ๋ธŒ๋ผ์šฐ์ €๋Š” ๊ธฐ๋ณธ font-size๊ฐ€ 16px๋กœ ์ง€์ •๋˜์–ด ์žˆ๋‹ค.

ํ•˜์ง€๋งŒ ์ตœ์†Œ font-size๊ฐ€ ์ •ํ•ด์ ธ ์žˆ๋‹ค๋Š” ๊ฒƒ์€ ์˜ค๋Š˜ ์ฒ˜์Œ ์•Œ์•˜๋‹ค. ์ž์„ธํžˆ ๋ณด๋‹ˆ <span>์˜ ์‚ฌ์ด์ฆˆ๊ฐ€ ์ด์ƒํ•˜๋‹ค.

๋ถ„๋ช… 5px์ด ์ ์šฉ๋˜์–ด ์žˆ์ง€๋งŒ ๊ณ„์‚ฐ๋จ, computed ํƒญ์œผ๋กœ ๊ฐ€๋ณด๋ฉด

font-size๊ฐ€ 10px๋กœ ์ ์šฉ๋˜์–ด ์žˆ๋‹ค. 10px ์ดํ•˜๋กœ ๋‚ด๋ ค๊ฐ€๋ฉด ๋ฌด์กฐ๊ฑด 10px์— ๋งž์ถ”์–ด ์ ์šฉ๋œ๋‹ค.

<style>
p:nth-child(1) {
        font-size: 9px;
      }
      p:nth-child(2) {
        font-size: 8px;
      }
      p:nth-child(3) {
        font-size: 7px;
      }
      p:nth-child(4) {
        font-size: 6px;
      }
</style>
<p>Hello world - p</p>
<p>Hello world - p</p>
<p>Hello world - p</p>
<p>Hello world - p</p>

cm๊ณผ mm๋Š” ์‚ฌ์šฉํ•˜๋ฉด ์ด์ƒํ•œ ์‚ฌ๋žŒ์ด๋‹ค.

๋ธŒ๋ผ์šฐ์ € ๋งˆ๋‹ค ์ตœ์†Œ ํฐํŠธ ํฌ๊ธฐ๊ฐ€ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ์•„๋†“์•„์•ผ ๊ฒ ๋‹ค.




๋ณ€ํ•˜๋Š” ์ƒ๋Œ€ ๊ธธ์ด ๋‹จ์œ„ โญ•๏ธ

  • em : ๋ฐฐ์ˆ˜ ๋‹จ์œ„์ด๋ฉฐ, ๋ถ€๋ชจ ์š”์†Œ์˜ ๊ธ€์ž ํฌ๊ธฐ๋ฅผ ๊ธฐ์ค€์ ์œผ๋กœ ํ•œ๋‹ค.

  • rem : ์ตœ์ƒ์œ„ ์š”์†Œ์ธ <html>์˜ ๊ธ€์ž ํฌ๊ธฐ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํ•œ๋‹ค.

์•„๋ž˜์˜ ์†Œ์Šค์ฝ”๋“œ๋Š” em๊ณผ rem์˜ ์˜ˆ์ œ์ด๋‹ค.

    <style>
      html {
        /* ์ตœ์ƒ์œ„ ์š”์†Œ font-size๋Š” 15px์ด๋‹ค. */
        font-size: 15px;
      }

      .parents-em {
        font-size: 2em;
        color: red;
      }

      .child-em {
        font-size: 1.5em;
      }

      .parents-rem {
        font-size: 2rem;
        color: dodgerblue;
      }

      .child-rem {
        font-size: 1.5rem;
      }
    </style>
<!-- em -->
<div class="parents-em">
      HELLO EM
	<p class="child-em">HELLO EM</p>
</div>

<!-- rem -->
<div class="parents-rem">
      HELLO REM
	<p class="child-rem">HELLO REM</p>
</div>

๊ณ„์‚ฐ์ด ์–ด๋–ป๊ฒŒ ๋˜๋Š”์ง€ ์ž˜ ์•Œ์•„์•ผํ•œ๋‹ค.

์šฐ์„  ๋ถ€๋ชจ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํ•˜๋Š” em์˜ ๊ฒฐ๊ณผ๋ฅผ ์‚ดํŽด๋ณด์ž.

์šฐ๋ฆฌ๋Š” <html>ํƒœ๊ทธ์— ๊ธฐ๋ณธ font-size๋ฅผ 15px๋กœ ์„ค์ •ํ–ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ฒซ๋ฒˆ์งธ ๋นจ๊ฐ„์ƒ‰ ๊ธ€์”จ์˜ 2em์€ ๋ถ€๋ชจ์ธ <html>์˜ 15px๋ฅผ ๋ฐ›์•„ 15 * 2์ธ 30px๋กœ ๊ณ„์‚ฐ๋œ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ๋‘๋ฒˆ์งธ ๋นจ๊ฐ„์ƒ‰ ๊ธ€์”จ์ธ 1.5em์€ ๋ถ€๋ชจ์ธ "์ฒซ๋ฒˆ์งธ ๊ธ€์”จ"์˜ ํฌ๊ธฐ์ธ 30px์„ ๋ฐ›์•„ 30 * 1.5์ธ 45px๋กœ ๊ณ„์‚ฐ์ด ๋œ๋‹ค.


๋‹ค์Œ ์ตœ์ƒ์œ„ ํƒœ๊ทธ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํ•˜๋Š” rem์˜ ๊ฒฐ๊ณผ๋ฅผ ์‚ดํŽด๋ณด์ž.

rem์€ ์ตœ์ƒ์œ„ ํƒœ๊ทธ์ธ <html>์˜ 15px์„ ๊ธฐ์ค€์œผ๋กœ ํ•œ๋‹ค.
๊ทธ๋ž˜์„œ ์ฒซ๋ฒˆ์งธ ํŒŒ๋ž€์ƒ‰ ๊ธ€์”จ์˜ 2rem์€ 15 * 2์ธ 30px๋กœ ๊ณ„์‚ฐ๋œ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ๋‘๋ฒˆ์งธ ํŒŒ๋ž€์ƒ‰ ๊ธ€์”จ๋Š” 1.5rem์€ <html>์˜ 15px์„ ๊ธฐ์ค€์œผ๋กœ 15 * 1.5์ธ 22.5px๋กœ ๊ณ„์‚ฐ๋œ๋‹ค.

์ฃผ์˜ํ•ด์•ผ ํ•  ์ ์€ rem ๋‹จ์œ„๊ฐ€ ์ ์šฉ๋œ ์ž์‹ ์š”์†Œ๋Š” rem์˜ ๊ณ„์‚ฐ์„ ๋งˆ์นœ ๋ถ€๋ชจ ์š”์†Œ์˜ font-size๊ฐ€ ์•„๋‹Œ ์ตœ์ƒ์œ„ ํƒœ๊ทธ <html>์˜ font-size๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํ•ด์•ผํ•œ๋‹ค.


  • % : ๋ฐฑ๋ถ„์œจ ๋‹จ์œ„์ด๋‹ค.

  • vw : ๋””๋ฐ”์ด์Šค์˜ ํ™”๋ฉด ๋„“์ด๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํ•˜๋Š” ๋ฐฑ๋ถ„์œจ ๋‹จ์œ„์ด๋‹ค. 1vw๋Š” ๋””๋ฐ”์ด์Šค ํ™”๋ฉด ๋„“์ด์˜ 1%์ด๋‹ค.

  • vh : ๋””๋ฐ”์ด์Šค์˜ ํ™”๋ฉด ๋†’์ด๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํ•˜๋Š” ๋ฐฑ๋ถ„์œจ ๋‹จ์œ„์ด๋‹ค. 1vh๋Š” ๋””๋ฐ”์ด์Šค ํ™”๋ฉด ๋†’์ด์˜ 1%์ด๋‹ค.

  • vmin : ๋””๋ฐ”์ด์Šค์˜ ํ™”๋ฉด ๋„“์ด์™€ ๋†’์ด ์ค‘ ์ž‘์€ ๊ฐ’์„ ๊ธฐ์ค€์œผ๋กœ ํ•˜๋Š” ๋ฐฑ๋ถ„์œจ ๋‹จ์œ„์ด๋‹ค. 1vmin์€ ํ™”๋ฉด์˜ ๋„“์ด์™€ ๋†’์ด ์ค‘ ์ž‘์€ ๊ฐ’์˜ 1%์ด๋‹ค.

  • vmax : ๋””๋ฐ”์ด์Šค์˜ ํ™”๋ฉด ๋„“์ด์™€ ๋†’์ด ์ค‘ ๋†’์€ ๊ฐ’์„ ๊ธฐ์ค€์œผ๋กœ ํ•˜๋Š” ๋ฐฑ๋ถ„์œจ ๋‹จ์œ„์ด๋‹ค. 1vmax์€ ํ™”๋ฉด์˜ ๋„“์ด์™€ ๋†’์ด ์ค‘ ์ž‘์€ ๊ฐ’์˜ 1%์ด๋‹ค.

์œ„์˜ ์ด๋ฏธ์ง€๋Š” vmin๊ณผ vmax๋ฅผ ์„ค๋ช…ํ•˜๊ธฐ ์œ„ํ•œ ์ด๋ฏธ์ง€์ด๋‹ค.

ํŒŒ๋ž€ ๋ฐ•์Šค๋Š” vmax ๋‹จ์œ„์ด๊ธฐ ๋•Œ๋ฌธ์— ํ™”๋ฉด์˜ ๋„“์ด์™€ ๋†’์ด ์ค‘ ๋†’์ด๊ฐ€ ํฌ๊ธฐ ๋•Œ๋ฌธ์— ๋†’์ด๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํฌ๊ธฐ๊ฐ€ ๊ฒฐ์ •๋œ๋‹ค.

๋…ธ๋ž€ ๋ฐ•์Šค๋Š” vmin ๋‹จ์œ„์ด๊ธฐ ๋•Œ๋ฌธ์— ํ™”๋ฉด์˜ ๋„“์ด์™€ ๋†’์ด ์ค‘ ๋„“์ด๊ฐ€ ์ž‘๊ธฐ ๋•Œ๋ฌธ์— ๋†’์ด๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํฌ๊ธฐ๊ฐ€ ๊ฒฐ์ •๋œ๋‹ค.

  • ex : ํ˜„์žฌ ํฐํŠธ์˜ x-height์˜ ๊ฐ’์ด๋‹ค. ์ฆ‰ ํ˜„์žฌ ํฐํŠธ์˜ '์†Œ๋ฌธ์ž x'์˜ ๋†’์ด ๊ฐ’์„ ๊ธฐ์ค€์œผ๋กœ ํ•œ ๋ฐฑ๋ถ„์œจ ๋‹จ์œ„์ด๋‹ค.

์ค‘๊ฐ„์˜ ์—ฐํ•œ ์ฃผํ™ฉ์ƒ‰์„ ๋ณด๋ฉด '์†Œ๋ฌธ์ž x'์˜ ์œ„์•„๋ž˜์˜ ํฌ๊ธฐ๊ฐ€ ๋”ฑ ๋งž๊ฒŒ ๋œ ๋ถ€๋ถ„์ด x-height์ด๋‹ค. ์ด ๋ถ€๋ถ„์˜ ํฌ๊ธฐ๊ฐ€ 10px์ด๋ผ๋ฉด 1ex๋Š” 10px๋กœ ๊ณ„์‚ฐ๋œ๋‹ค.

์ด์™ธ์˜ ๋‹จ์œ„๋“ค

  • in : inch๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๋‹จ์œ„์ด๋‹ค. 1์ธ์น˜๋Š” 2.54cm์ด๋ฉฐ 96px์ด๋‹ค.

  • pc : Picas์˜ ์•ฝ์ž์ด๋ฉฐ 1pc๋Š” "1์ธ์น˜์˜ 6๋ถ„์˜ 1"์˜ ํฌ๊ธฐ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๋‹จ์œ„์ด๋‹ค.

  • pt : Point์˜ ์•ฝ์ž์ด๋ฉฐ 1pt๋Š” "1์ธ์น˜์˜ 72๋ถ„์˜ 1"์˜ ํฌ๊ธฐ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๋‹จ์œ„์ด๋‹ค.

๋ธŒ๋ผ์šฐ์ €์˜ ๋‹จ์œ„ ์ง€์›ํ˜„ํ™ฉ




์ •๋ฆฌ๋ฅผ ๋งˆ์น˜๋ฉฐ โ›ณ๏ธ

๋ถ„๋ช… ๋‚ด๊ฐ€ ์“ฐ๋Š” ๋‹จ์œ„๋Š” ๋ช‡ ๊ฐœ ์—†์—ˆ๋Š”๋ฐ ์ด๋ ‡๊ฒŒ ๋งŽ์€ ๋‹จ์œ„๋ฅผ CSS์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์— ํ•œ๋ฒˆ ๋” ๋†€๋ž€ ํ•˜๋ฃจ์˜€๋‹ค.

ํ•˜์ง€๋งŒ ๊ฐ•์‚ฌ๋‹˜๊ป˜์„œ ์šฐ๋ฆฌ๋Š” ์ž์ฃผ ์“ฐ๋Š” ๋‹จ์œ„๋งŒ ์“ฐ๊ฒŒ ๋˜๋‹ˆ ๊ตณ์ด ์‹ ๊ฒฝ์“ธ ํ•„์š”๋Š” ์—†๊ณ  ๊ฐ„ํ˜น ์“ฐ๋Š” ๊ฐœ๋ฐœ์ž๋ฅผ ๋งŒ๋‚œ๋‹ค๋ฉด ๊ทธ๋•Œ ๋‹ค์‹œ ๋ณด๊ณ  ๋ฐฐ์šฐ๋Š” ๊ฒƒ์œผ๋กœ ์ƒ๊ฐํ•˜๋ผ๊ณ  ํ•˜์…จ๋‹ค.

๊ฑฑ์ •๋ง๊ณ  ๊ทธ๋ƒฅ ํ•œ๋ฒˆ ์ฝ์–ด๋ณด๊ณ  ๋ˆˆ์— ์ตํžˆ๋Š” ์ •๋„๋งŒ ์•Œ์•„๋‘๋„๋ก ํ•˜์ž!




์ถœ์ฒ˜

์›น ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ์˜ ํ•ด๋ถ€ํ•™

์ด ์„ธ์ƒ์— ํ•˜๋‚˜๋Š” ๋‚จ๊ธฐ๊ณ  ๊ฐ€์ž

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ