Box model

Box model의 크기 단위

• px
• Viewport : 지금 보는 화면의 크기를 1/100 한 값(비례하는 값)
  vh, vw: 화면에 보이는 높이또는 넓이 값을 1/100한 값
  vmax, vmin: 현재 화면의 가로, 세로 크기 중 더 크기가 큰 값의 1%값을 받아옴

  <style>
  div{
    background-color:yellowgreen;
    width: 10vmin;
    height: 10vmin;
  }
  </style>

- calc() : 필요한 임의의 값을 계산식으로 처리
```html
  <style>
    div{
      background-color:yellowgreen;
      width: calc(10vmin + 10vw);
      height: calc(10vmin + 10vh);
    }
  </style>

line-height

• 영역 요소 내부 컨텐츠 글자의 줄 높이
• Box model의 크기 단위 적용 가능
• 컨텐츠가 1줄인 경우 box height 와 line height 를 동일하게 하면 세로 중앙 정렬 효과!
  

text-align: center 가로 정렬

 <style>
    div{
      background-color:yellowgreen;
      width: 10vw ;
      height: 20vh;
      text-align:center;
      line-height: 20vh;
    }
  </style>

실습 2.

현재 화면 높이의 1/5 – 현재 화면 넓이의 1/15 인 정사각형 만들기 + 글자 세로 중앙 정렬 하기!

ㅠㅠ모르겠다..

  <style>
    div{
      background-color:yellowgreen;
      text-align:center;

      width: calc((100vh/5)-(100vw/15));
      height: calc((100vh/5)-(100vw/15));
      line-height: calc((100vh/5)-(100vw/15));

    }
  </style>