[CSS] CSS 활용 - 단위

CSS 활용 - 단위

px

vw : Viewport Weight : 화면에 출력하는 가로 너비
vh : Viewport Height : 화면에 출력하는 세로 너비

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

.container {
  width: 50vw;	/* 50%만 사용하겠다.*/
  height: 200px;
  background: red;
}

.container {
  width: vw;	/* 100% 사용하겠다.*/
  height: 200px;
  background: red;
}

.container {
  width: 200px;
  height: 50vh;	/* 50%만 사용하겠다.*/
  background: red;
}

vmin : Viewport Min : 화면에 출력하는 최소 너비
vmax : Viewport Max : 화면에 출력하는 최대 너비

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

.container {
  width: 50vmin;  /* 화면 전체 너비에 가장 짧은 것의 50%만 사용 */
  height: 300px;
  background: red;
}

.container {
  width: 50vmax;  /* 화면 전체 너비에 가장 긴 것의 50%만 사용 */
  height: 300px;
  background: red;
}

패스트캠퍼스(박영웅 강사님) : 올인원 패키지 : 프론트엔드 개발 with React.js

개발자님들 덕분에 많이 배울 수 있었습니다. 감사의 말씀 드립니다.