TIL(2022.05.12) - 반응형 단위

박세진·2022년 5월 23일
0

반응형 단위

  • 절대값 : px
  • 상대값 : %, em, rem, vw, vh, vmin, vmax
    • % 단위 : %를 이용할 때는 calc() 함수를 같이 이용한다.
      0으로 나눈면 에러가 발생하고, 연산자는 기호를 기준으로 띄어쓰기를 꼭 해야 된다.
      width: calc(요소의 크기 / 디자이너가 정한 화면 크기);
    • em 단위 : 상위 요소를 기준으로(상위 font-size 속성 값에 비례)
      <head>
      <style>
            .box1 {
               width: 500px;
                height: 500px;
                border: 1px solid red;
                font-size: 30px;
             }
            .box2 {
                width: 400px;
                height: 400px;
                border: 1px solid blue;
                font-size: 2em; /* box1이 상위 요소로 60px */
             }
            .box3 {
                width: 300px;
                height: 300px;
                border: 1px solid blueviolet;
                font-size: 2em; /* 120px */
             }
            .box4 {
                width: 200px;
                height: 200px;
                border: 1px solid yellowgreen;
                font-size: 2em; /* 240px */
             }
      
        </style>
      </head>
      <body>
        <div class="box1">
            박스1
            <div class="box2">
                박스2
                <div class="box3">
                    박스3
                    <div class="box4">
                        박스4
                    </div>
                </div>
            </div>
        </div>
<style>
    html {
      font-size: 20px;
    }
    span {
      display: block;
      float: left;
      margin: 50px;
      background-color: red;
      color: #fff;
      padding: 1em;
      /*20px*/
    }
    .btn1 {
      font-size: 1em;
      /* 20px;*/
    }
    .btn2 {
      font-size: 1.5em;
      /*30px*/
    }
    .btn3 {
      font-size: 2em;
    }
  </style>
</head>
<body>
  <span class="btn1">버튼1</span>
  <span class="btn2" >버튼2</span>
  <span class="btn3" >버튼3</span>
  <span class="kakako">

  </span>
  • rem : 상속을 루트에서만 받는다. (루트 font-size 속성 값에 비례)

       <style>
           html {
               font-size: 20px;
           }
           .box1 {
               width: 500px;
               height: 500px;
               border: 1px solid red;
               font-size: 30px;
            }
           .box2 {
               width: 400px;
               height: 400px;
               border: 1px solid blue;
               font-size: 2rem; /* 40px */
            }
           .box3 {
               width: 300px;
               height: 300px;
               border: 1px solid blueviolet;
               font-size: 2rem; /* 40px */
            }
           .box4 {
               width: 200px;
               height: 200px;
               border: 1px solid yellowgreen;
               font-size: 2rem; /* 40px */
            }
       </style>
    </head>
    <body>
       <div class="box1">
           박스1
           <div class="box2">
               박스2
               <div class="box3">
                   박스3
                   <div class="box4">
                       박스4
                   </div>
               </div>
           </div>
       </div>
    </body>
  • vw, vh : 뷰포트(브라우저 창)를 기준

    • vw : viewport 너비의 1%
    • vh : viewport 높이의 1%
    10vw는 viewport 너비의 10%
    10vh는 viewport 높이의 10%
    ---
    width가 100vw이고 해상도 화면이 360px이고, 사용하려는 요소의 넓이는 360px, 높이는 71px일 때,
    (71px / 360) * 100 의 값으로 height 값을 지정해주면 된다.
  • vmin, vmax : vw와 vh중 작고 큰 것을 기준으로 적용한다.


img 태그를 이용해서 넣을 때는 width 값에 따라서 height 값이 자동으로 지정이 되지만, background-image를 적용할 때는 문제가 발생할 수 있기 때문에 vw, vh를 사용하면 편리하다.

profile
경험한 것을 기록

0개의 댓글