[html][css] css 단위/ px % em rem vw vh vmax vmin

px단위

정확한 px단위로 고정하는데에 사용

 

%

부모요소의 가로 사이즈에 영향을 받음px단위

 

 

 

<div class="container">
  container
  <div class="parent">
    parent
    <div class="child">child1</div>
    <div class="child">child</div>
  </div>
</div>

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

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

위 아래 둘다 css 똑같은 결과를 나타낸다.

%사용시 부모 요소의 크기에 영향을 받기 때문에 parent는 container의 크기에 영향을 받아 300px이 되고

child는 parent의 크기의 영향을 받아 150px이 된다.

 

---

em

자기 자신의 폰트 사이즈에 영향을 받음

body *{
  border: 2px solid;
}
.container{
  width: 30em;
  font-size: 20px;
}
.parent{
  width:15em;
}
.child{
  width: 7.5em;
}

container은 font-size가 20px이므로 width는 600px이다.

parent와 child도 font-size를 container에 상속받아 20px이므로 각각 300, 150px이다.

 

body *{
  border: 2px solid;
}
.container{
  width: 30em;
  font-size: 20px;
}
.parent{
  width:15em;
  font-size:2em;
}
.child{
  width: 7.5em;
  font-size:3em;
}

자손들의 font-size를 em으로 바꾸면 연결되어있는 모든 요소들의 크기들이 바뀐다.

 

 

rem

html에 지정된 font-size만의 영향을 받는다

---

vw

viewport의 가로 너비

vh

viewport의 세로 너비

.container{
  width:50vw;
  height:200px;
  background:skyblue;
}

100이 최고의 vw이다.

보이는 화면에서 비율로 설정한다는 뜻이다.

화면이 줄어들면 같이 변한다. 

---

vmin

viewport의 가로 사이즈와 세로 사이즈 중에서 더 짧은 것

vmax

viewport의 가로 사이즈와 세로 사이즈 중에서 더 넓은 것

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

vmin은 viewport의 가로 세로 중에서 더 짧은 것의 50%가 width라는 뜻