CSS - 단위

1. px, %

- %는 부모요소의 값으로부터 영향을 받는다.

<div class="container">
  Container
  <div class="parent">
    Parent
    <div class="child">Child1</div>
    <div class="child">Child2</div>
  </div>
</div>

body * {
  border: 2px solid;
}
.container{
  width: 600px;
}
.parent{
  width: 50%;
}
.child{
  width: 50%;
}

 

---

2. em,rem

-1) em : 자기자신의 폰트사이즈에 영향을 받는다, 부모요소로부터 상속을 받는다.

-2) rem : 최상위 요소의 font-size에 대한 em단위

<div class="container">
  Container
  <div class="parent">
    Parent
    <div class="child">Child1</div>
    <div class="child">Child2</div>
  </div>
</div>

html {
  font-size: 10px;
}
body {
  font-size: 16px; /*child의 rem에는 영향X, 원래대로 돌리기*/
}
body * {
  border: 2px solid;
}
.container{
  width: 60em; /*600px = 60em * 10px */
  font-size:12px;
}
.parent{
  width: 30em; /*300px = 30em * 10px */
  font-size: 2em; /*2배,부모요소로부터 상속*/
}
.child{
  width: 15rem; /*150px = 15rem * 10px */
  font-size: 2em; /*2배,부모요소로부터 상속*/
}

 

---

3. vw,vh

-1) vw : 보여지는 가로길이, 100vw가 100%, 50vw는 50%

-2_ vh: 보여지는 세로길이, 100vh가 100%, 50vh는 50%

<div class="container"></div>

.container {
  width: 50vw;
  height: 50vh;
  background: red;
}

 

---

4. vmin,vmax

-1) vmin : 가로,세로 중 더 짧은 너비의 최소, 50vmin은 더 짧은쪽의 50%

-2) vmax : 가로,세로 중 더 긴 너비의 최대, 50vmax는 더 긴 쪽의 50%

<div class="container"></div>

.container {
  width: 50vmin;
  height: 300px;
  background: red;  
}