CSS 요소 크기 설정: 절대적, 상대적 지정 방법

CSS에서는 절대적 또는 상대적 크기 설정 방법으로 요소의 길이와 크기를 지정할 수 있습니다. 절대적 설정 속성으로는 px, cm, in 등이 있으며, 상대적 설정 속성으로는 em, rem 등이 있습니다.

CSS 요소 크기 절대적 설정 방법

절대적 설정은 요소의 실제 크기를 기준으로 하며, 모든 디바이스에서 동일하게 표현되는 것을 목표로 합니다. 물론, 디바이스에 따라 실제 표현에는 약간의 차이가 발생할 수 있습니다.

px

px 또는 픽셀은 CSS에서 요소 크기를 설정하는 가장 일반적인 방법입니다. 1 픽셀은 1/96 인치를 의미하며, 다른 모든 절대적 길이 요소들은 1 픽셀을 기준으로 삼습니다.

 

그러나 픽셀이 처음 도입되었을 때는 모니터의 크기가 1024 x 768이었으며, 96 DPI(dots per inch)가 표준이었습니다. 즉, 1px = 1/96in은 당시를 기준으로 한 것입니다. 시간이 지나며 디바이스의 해상력이 높아졌지만, 여전히 당시의 1 픽셀을 기준으로 요소의 기본 크기를 지정하고 있습니다.

cm / mm

cm 또는 센티미터로 1cm는 37.8px 정도에 해당합니다. mm 또는 밀리미터는 1cm의 10분의 1인 0.1cm에 해당합니다.

in / pt /pc

in 또는 인치는 대략 96px에 해당합니다. pt 또는 포인트는 1.3333px에 해당하며, pc 또는 피카스는 대략 16px에 해당합니다.

CSS 요소 크기 상대적 설정 방법

em

em은 상위 부모 요소를 기준으로 크기를 결정합니다. 다음과 같이 font-size: 1.5em;이 설정된 경우, 이는 상위 요소를 기준으로 1.5배의 폰트 사이즈로 설정됩니다.

html {
  font-size: 20px
}

body {
  font-size: 1.5em;
}

p {
  font-size: 1.5em;
}

위 CSS에서 body 태그는 html 태그를 기준으로 1.5배의 폰트 사이즈가 적용(30px)되며, p 태그는 부모 태그인 body의 1.5배의 폰트 사이즈(45px)가 적용됩니다.

rem

rem은 Root em을 의미하며 문서의 최상위 요소인 html 요소를 기준으로 크기를 결정합니다.

html {
  font-size: 20px
}

body {
  font-size: 1.5em;
}

p {
  font-size: 1.5rem;
}

위와 동일한 상황에서 p 태그의 폰트 사이즈를 1.5rem으로 변경한 경우, body요소가 아닌 최상위 요소인 html 태그를 기준으로 1.5배의 폰트 사이즈인 30px이 적용됩니다.

%

퍼센트는 부모 요소를 기준으로 상대적인 크기를 설정하는 방법입니다. 아래와 같이 CSS를 적용한 경우, div 내 p요소는 200px의 절반인 100px 크기를 갖게 됩니다.

div {
  width: 200px;
}

div p {
  width: 50%;
}

vw

vw는 View Width를 의미하며, 1vw는 뷰포트 너비의 1%에 해당합니다. 즉, 다음과 같이 100vw를 적용한 경우, 뷰포트 너비의 100%를 의미합니다.

body {
  width: 100vw;
}

이는 디바이스의 뷰포트에 따라 body 요소의 전체 너비가 달라지는 것을 의미합니다.

vh

vh는 View Height를 의미하며, 1vh는 뷰포트 높이의 1%에 해당합니다. 아래의 경우 div 요소는 뷰포트 높이의 50%를 차지하게 됩니다.

div {
  height: 50vh;
}