[CSS] 단위 (rem/em, vh/vw, vmin/vmax)

제목에서의 단위 말고도 많은 것들이 있지만,

반응형을 생각했을때 가장 많이 쓰이고 중요하다 생각되는 것만 담아봤습니다.

아래 베이스 코드로 진행하도록 하겠습니다.

/* --- HTML --- */
<body>
  <div class="item"></div>
</body>

/* --- CSS --- */
html {
  font-size: 16px;
}
.item {
  background-color: lightcoral;
}

1rem - 최상위 태그의 font-size (r = root)

1em - 현재 태그의 font-size

최상위의 font-size: 16px 이라고 가정하고 예를 들어보겠습니다.

.item {
  font-size: 2rem;
  height: 5em;
  width: 10em;
}

font-size --> 16 * 2 = 32 (root의 font-size * 2)

width --> 32 * 10 = 320 (현재 태그의 font-size * 10)

height --> 32 * 5 = 160 (현재 태그의 font-size * 5)

viewport width, viewport height로, 화면의 너비와 높이의 전체 길이를 기준으로 100등분 한 단위입니다.

만약 화면의 너비가 1000px, 높이가 900px 이라면,

1vw = 10px, 5vw = 50px

9vh = 81px, 15vh = 135px

이런식으로 계산됩니다.

뷰포트의 너비와 높이의 최대, 최소값을 의미합니다.

너비가 1000px, 높이가 900px이라면,

1vmin = 9px

1vmax = 10px

이렇게 계산됩니다. 너비와 높이 상관없이 둘중 최소값, 최대값을 구하는 것입니다.

이것은 예를들면, 화면 사이즈에 따라 크기가 변화하는 정사각형을 만들때 유용합니다.

.item {
  height: 50vmin;
  width: 50vmin;
}

[CSS] position (static, absolute, relative, sticky, fixed) (0)	2020.06.26
[Javascript] requestAnimationFrame (0)	2020.06.24
[Javascript] 배열 다루기(map, filter, find, every, some, reduce, forEach) (0)	2020.06.17
[CSS] Grid (0)	2020.06.17
[CSS] stroke-dasharray, stroke-dashoffset 활용하여 animation 만들기 (0)	2020.06.12

개발 공책