ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • ๐ŸŽจ CSS 3 | CSS ๋‹จ์œ„ ( %, em, rem, vw, vh )
      CSS 2021. 12. 17. 17:43

       

       

      %์™€ px ๋น„๊ต

      px์€ parent์— ์ƒ๊ด€์—†์ด ํ•ญ์ƒ ๊ฐ™์€ ๊ณต๊ฐ„์„ ์ฐจ์ง€ํ•œ๋‹ค. 

      %๋Š” parent์˜ ๋„“์ด๋ฅผ ๊ธฐ์ค€(padding ๊ฐ’ ์ œ์™ธ)์œผ๋กœ ์ ์šฉ๋˜๊ธฐ ๋•Œ๋ฌธ์— parent์˜ ํฌ๊ธฐ์— ์˜ํ–ฅ์„ ๋ฐ›๋Š”๋‹ค(relative). 

       

      index.html

      <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>css ๋‹จ์œ„</title>
    <style>
      .fifty-percent {
        width: 50%;
        border: 2px solid black;
        background-color: aqua;
      }

      .one-hundred-pixels {
        width: 100px;
        border: 2px solid black;
        background-color: aqua;
      }

      .parent {
        width: 135px;
        border: 2px solid black;
      }
    </style>
  </head>
  <body>
    <div class="box fifty-percent">50%</div>
    <div class="box one-hundred-pixels">100px</div>
    <hr />
    <div class="parent">
      <div class="box fifty-percent">50%</div>
      <div class="box one-hundred-pixels">100px</div>
    </div>
  </body>
</html>

      ์„ ์„ ๊ธฐ์ค€์œผ๋กœ ์œ„์ชฝ์˜ %๋Š” ๊ธฐ์ค€์ด html ์ „์ฒด ํฌ๊ธฐ๊ฐ€ ๋˜๊ณ , ์•„๋ž˜์˜ %๋Š” parent ํƒœ๊ทธ์˜ ํฌ๊ธฐ๊ฐ€ ๊ธฐ์ค€์ด ๋œ๋‹ค.  

       

       

       

       

      em์™€ rem ๋น„๊ต

      em์€ ์ƒ์œ„ ์š”์†Œ(๊ฐ€์žฅ ๊ฐ€๊นŒ์šด parent) ํฐํŠธ ์‚ฌ์ด์ฆˆ์˜ ๋ช‡ ๋ฐฐ์ธ๊ฐ€๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค. ๋งŒ์•ฝ ์ƒ์œ„ ์š”์†Œ์˜ ํฐํŠธ ์‚ฌ์ด์ฆˆ๊ฐ€ 20px ์ด๋ผ๋ฉด, 1em = 20px ์ด ๋˜๊ณ  20em = (20 * 20) px ์ด ๋œ๋‹ค. 

      rem์€ ์ตœ์ƒ์œ„(root) ํฐํŠธ์‚ฌ์ด์ฆˆ๊ฐ€ ๊ธฐ์ค€์ด๋‹ค. 

       

      index.html

      <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>css ๋‹จ์œ„</title>
    <style>
      html {
        font-size: 17px;
      }
      
      .one-em {
        font-size: 1em;
      }

      .one-rem {
        font-size: 1rem;
      }

      .two-em {
        font-size: 2em;
      }

      .two-rem {
        font-size: 2rem;
      }

      .parent {
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <div class="one-rem">1rem</div>
    <div class="one-em">1em</div>
    <div class="two-rem">2rem</div>
    <div class="two-em">2em</div>
    <hr />
    <div class="parent">
      <div class="one-rem">1rem</div>
      <div class="one-em">1em</div>
      <div class="two-rem">2rem</div>
      <div class="two-em">2em</div>
    </div>
  </body>
</html>

      ๊ฐœ๋ฐœ์ž ๋„๊ตฌ computed ๋ฅผ ํ™•์ธํ•˜๋ฉด font-size๋ฅผ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

       

      <hr> ์„ ์„ ๊ธฐ์ค€์œผ๋กœ ์œ„์ชฝ์„ ๋จผ์ € ๋ณด๋ฉด, 

      - 1rem = 17px : ์ตœ์ƒ์œ„ ํƒœ๊ทธ <html>, ์ตœ์ƒ์œ„ ํƒœ๊ทธ์˜ ํฐํŠธ ์‚ฌ์ด์ฆˆ 17px 

      - 1em = 17px : ์ƒ์œ„ ํƒœ๊ทธ <html>, ์ƒ์œ„ ํƒœ๊ทธ์˜ ํฐํŠธ ์‚ฌ์ด์ฆˆ 17px

      - 2rem = (17 * 2)px : ์ตœ์ƒ์œ„ ํƒœ๊ทธ <html>, ์ตœ์ƒ์œ„ ํƒœ๊ทธ์˜ ํฐํŠธ ์‚ฌ์ด์ฆˆ 17px

      - 2em = (17 * 2)px : ์ƒ์œ„ ํƒœ๊ทธ <html>, ์ƒ์œ„ ํƒœ๊ทธ์˜ ํฐํŠธ ์‚ฌ์ด์ฆˆ 17px

       

       

      ์•„๋ž˜์ชฝ์„ ๋ณด๋ฉด

      - 1rem = 17px : ์ตœ์ƒ์œ„ ํƒœ๊ทธ <html>, ์ตœ์ƒ์œ„ ํƒœ๊ทธ์˜ ํฐํŠธ ์‚ฌ์ด์ฆˆ 17px

      - 1em = 30px : ์ƒ์œ„ ํƒœ๊ทธ <parent>, ์ƒ์œ„ ํƒœ๊ทธ์˜ ํฐํŠธ ์‚ฌ์ด์ฆˆ 30px 

      - 2rem = (17 * 2)px : ์ตœ์ƒ์œ„ ํƒœ๊ทธ <html>, ์ตœ์ƒ์œ„ ํƒœ๊ทธ์˜ ํฐํŠธ ์‚ฌ์ด์ฆˆ 17px

      - 2em = (30 * 2)px : ์ƒ์œ„ ํƒœ๊ทธ <parent>, ์ƒ์œ„ ํƒœ๊ทธ์˜ ํฐํŠธ ์‚ฌ์ด์ฆˆ 30px 

       

       

      em๊ณผ rem ๋ชจ๋‘ ์ƒ๋Œ€์ ์ธ ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์— ๋ฐ˜์‘ํ˜• ์›น์„ ๋งŒ๋“ค ๋•Œ ์‚ฌ์šฉํ•˜๋ฉด ์œ ์šฉํ•˜๋‹ค. em, rem์„ ์‚ฌ์šฉํ•ด์„œ padding, ํฐํŠธ ํฌ๊ธฐ ๋“ฑ์„ ์ฃผ๋ฉด ์ƒ์œ„ ํƒœ๊ทธ์˜ ํฌ๊ธฐ์— ๋งž๊ฒŒ ์•Œ์•„์„œ ์กฐ์ ˆ๋œ๋‹ค. 

       

       

       

       

       

       

      vw์™€ vh๋น„๊ต

      v๋Š” viewport์˜ ์•ฝ์ž์ด๋‹ค. vw(viewport-width)์™€ vh(viewport-height)๋ชจ๋‘ viewport๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํ•œ๋‹ค.

       

       

       

      index.html

      <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>css ๋‹จ์œ„</title>
    <style>
      .fifty-vw {
        width: 50vw;
        border: 2px solid black;
        background-color: blue;
      }

      .fifty-percent {
        width: 50%;
        border: 2px solid black;
        background-color: blue;
      }

      .twenty-five-vh {
        height: 25vh;
        border: 2px solid black;
        background-color: blue;
      }

      .parent {
        width: 100px;
        border: 2px solid black;
      }
    </style>
  </head>
  <body>
    <div class="box fifty-percent">50%</div>
    <div class="box fifty-vw">50vw</div>
    <div class="box twenty-five-vh">25vh</div>
    <hr />
    <div class="parent">
      <div class="box fifty-percent">50%</div>
      <div class="box fifty-vw">50vw</div>
      <div class="box twenty-five-vh">25vh</div>
    </div>
  </body>
</html>

       

      %๋Š” padding ๊ฐ’์„ ์ œ์™ธํ•œ ๋„“์ด๊ฐ€ ๊ธฐ์ค€์ด์ง€๋งŒ, vw, vh๋Š” padding ๊ฐ’์„ ํฌํ•จํ•œ ๋„“์ด๊ฐ€ ๊ธฐ์ค€์ด๋‹ค. viewport๊ฐ€ ๊ธฐ์ค€์ด๊ธฐ ๋•Œ๋ฌธ์— ํ™”๋ฉด์„ ์˜†์œผ๋กœ ๋Š˜๋ฆฌ๋ฉด vw์˜ ๊ฐ’์ด ๋Š˜์–ด๋‚˜๊ณ , ํ™”๋ฉด์„ ์•„๋ž˜๋กœ ๋Š˜๋ฆฌ๋ฉด vh์˜ ๊ฐ’์ด ๋Š˜์–ด๋‚œ๋‹ค(relative). 

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

      [์ฐธ๊ณ ์ž๋ฃŒ]

       

      ์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋ณ€๊ฒฝ๊ธˆ์ง€

      'CSS' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

      ๐ŸŽจ CSS 6 | ๊ทธ๋ฆฌ๋“œ(with ๋“œ๋ฆผ์ฝ”๋“œ by ์•จ๋ฆฌ) 2ํƒ„  (0) 2022.09.09
      ๐ŸŽจ CSS 5 | ๊ทธ๋ฆฌ๋“œ(with ๋“œ๋ฆผ์ฝ”๋“œ by ์•จ๋ฆฌ) 1ํƒ„  (0) 2022.09.09
      ๐ŸŽจ CSS 4 | Flexbox (with ๋“œ๋ฆผ์ฝ”๋“œ by ์•จ๋ฆฌ) 2ํƒ„  (0) 2022.09.05
      ๐ŸŽจ CSS 2 | Flexbox (with ๋“œ๋ฆผ์ฝ”๋“œ by ์•จ๋ฆฌ) 1ํƒ„  (0) 2021.12.17
      ๐ŸŽจ CSS 1 | CSS layout (display, position)  (0) 2021.12.16

      ๊ด€๋ จ๊ธ€ ๊ด€๋ จ๊ธ€ ๋”๋ณด๊ธฐ

      ๋Œ“๊ธ€

    Designed by Tistory.

    ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”