상대적인 크기

상대적인 크기는 상위 요소나 뷰포트의 크기에 상대적으로 크기를 정의하는 방식입니다. 주로 %나 em 단위를 사용하여 요소의 크기를 결정합니다. 예를 들어, 부모 요소의 너비에 대한 퍼센트로 크기를 지정하면 요소는 그 비율에 따라 크기가 조정됩니다.

.container {
  width: 80%; /* 부모 요소의 너비에 대한 상대적인 크기 */
  font-size: 1.2em; /* 글자 크기에 대한 상대적인 크기 */
}

상대적인 크기는 반응형 디자인 및 유연한 레이아웃을 구현할 때 특히 유용합니다.

절대적인 크기

절대적인 크기는 고정된 크기를 직접 지정하는 방식으로, 픽셀(px)이나 포인트(pt) 단위를 주로 사용합니다. 이 크기는 뷰포트나 상위 요소의 크기에 상관없이 항상 동일한 크기로 나타납니다.

.box {
  width: 200px; /* 절대적인 너비 크기 */
  font-size: 16px; /* 절대적인 글자 크기 */
}

절대적인 크기는 특정한 디자인 요구나 고정된 레이아웃으로부터 벗어나지 않으려는 경우에 유용합니다.

상대적인 크기와 절대적인 크기는 함께 사용하여 유연한 레이아웃을 구현하고, 요소들 간의 일관된 비율을 유지하는 데 도움이 됩니다.