CSS - 단위

<div class='parent'>
  <div class='child'></div>
</div>

px

- 픽셀: 하나의 디바이스가 표시할 수 있는 화면의 점

- 화면해상도 표시에도 사용됨 (ex. 1920 x 1080 해상도를 가진 모니터)

- 디바이스 화면과 상황에 따라 조금 차이가 있기 때문에 절대단위라고 말할 수는 없음

%

- 상대적 백분율

- 기준이 있고 그에 따라 상대적인 비율을 나타내는 단위

   ex) 부모요소의 width:300px; 이라면 자식요소가 width:50%; 라고 했을 때 150px을 말함

.parent {
  width: 300px;
  height: 200px;
  background-color: royalblue;
  border: 1px solid;
}
.child {
  width: 50%; /* 부모요소 기준 50% 줄어듬 */
  height:50%;
  background-color: orange;
  border: 2px solid red;
}

em

- 요소의 글꼴 크기

- 해당 요소의 글꼴 크기(또는 부모로 부터 상속받은 글꼴 크기)가 기준이 되는 상대적인 단위

   ex) font-size: 10px일 때 em 단위는 10px기준이 되어 2em은 20px이 됨

- 별도로 명시하지 않으면 html은 기본 font-size: 16px을 가지고 있음

   아래 예시의 width: 10em은 기본 font-size:16px이 1em이기 때문에 10em은 160px을 말함

.parent {
  width: 300px;
  height: 200px;
  background-color: royalblue;
  border: 1px solid;
}
.child {
  width: 10em; /* 기본 font-size인 16px기준 10em은 160px */
  height:50%;
  background-color: orange;
  border: 2px solid red;
}

.parent {
  width: 300px;
  height: 200px;
  background-color: royalblue;
  border: 1px solid;
  font-size: 10px;
}
.child {
  width: 10em; /* 부모로 상속받은 10px이 기준이 되어 10em은 100px*/
  height:50%;
  background-color: orange;
  border: 2px solid red;
}

rem

- 최상위(루트) 요소(html)의 글꼴 크기

- em과 비슷하나 rem의 기준은 html의 글꼴이기 때문에 기준이 em처럼 주변상황에 변화되는 폭이 적음

- html의 font-size만 변경해주면 rem으로 지정한 모든 요소의 사이즈가 자동으로 변경되는 장점이 있음

html {
  font-size: 16px;
}
.parent {
  width: 300px;
  height: 200px;
  background-color: royalblue;
  border: 1px solid;
  font-size: 10px; /* 자식요소에 상속되어도 자식요소의 사이즈에 영향을 안 줌*/
}
.child {
  width: 10rem; /* 상위 요소인 html이 기준이 되어 10rem은 160px */
  height:50%;
  background-color: orange;
  border: 2px solid red;
}

vw, vh

- 뷰포트 가로 또는 세로 너비의 백분율 (뷰포트: 브라우저 화면에 출력되는 전체 영역)

- 화면의 출력되는 가로 또는 세로의 크기를 100으로 쪼개어 비율만큼 출력하는 단위

.parent {
  width: 300px;
  height: 200px;
  background-color: royalblue;
  border: 1px solid;
  font-size: 10px;
}
.child {
  width: 50vw; /* 보여지는 화면의 절반만큼 */
  height:50%;
  background-color: orange;
  border: 2px solid red;
}

---

em단위의 기준은?

0px과 0vw 중 더 큰 값은?

 

패스트캠퍼스 프론트엔드 초격차 패키지 강의 내용을 참고하였습니다.