CSS의 상대 단위와 절대 단위의 차이점

CSS에서 상대 단위와 절대 단위의 차이점은 무엇인가요? 구체적인 코드 예제가 필요합니다.

CSS의 단위는 상대 단위와 절대 단위로 나눌 수 있습니다. 상대 단위는 요소 자체 또는 상위 요소의 크기를 기준으로 크기를 결정하는 반면, 절대 단위는 화면 또는 인쇄 매체의 크기를 기준으로 크기를 결정합니다. 이 글에서는 CSS의 상대 단위와 절대 단위의 차이점을 자세히 소개하고 해당 코드 예제를 제공합니다.

1. 상대 단위

1. em

em은 상위 요소의 글꼴 크기에 따라 결정되는 단위입니다. 요소의 글꼴 크기를 1em으로 정의하면 상위 요소의 글꼴 크기와 같습니다. em은 연속적으로 사용될 수 있으며 각 em은 이전 em의 크기를 기준으로 계산됩니다. 예를 들어 상위 요소의 글꼴 크기가 16px이고 하위 요소의 글꼴 크기가 1.5em으로 정의된 경우 하위 요소의 글꼴 크기는 24px(1.5 * 16px)입니다.

샘플 코드:

.parent {
  font-size: 16px;
}

.child {
  font-size: 1.5em;
}

2. rem

rem도 상대 단위이지만 루트 요소(html 요소)의 글꼴 크기에 따라 결정됩니다. rem의 사용은 em과 유사하지만 상위 요소의 글꼴 크기를 상속하지 않고 루트 요소의 글꼴 크기만 상속합니다. 이렇게 하면 여러 수준을 중첩할 때 글꼴 크기의 누적 계산이 방지됩니다.

샘플 코드:

html {
  font-size: 16px;
}

.child {
  font-size: 1.5rem;
}

2. 절대 단위

1. px

픽셀(pixel)은 절대 단위로, 화면에 표시되는 가장 작은 단위입니다. px는 CSS에서 요소의 너비, 높이, 테두리 및 기타 크기를 정의하는 데 사용됩니다. 브라우저의 확대/축소에 영향을 받지 않으며 사용자가 브라우저 창 크기를 어떻게 조정하더라도 픽셀 크기는 동일하게 유지됩니다.

샘플 코드:

element {
  width: 200px;
  height: 100px;
  border: 2px solid #000;
}

2. cm

센티미터(센티미터)는 물리적 크기에 상대적인 절대 단위입니다. 인쇄 매체에서 cm 단위를 사용하면 요소 크기를 보다 정확하게 제어할 수 있습니다.

샘플 코드:

element {
  width: 10cm;
  height: 5cm;
}

위는 CSS의 상대 단위와 절대 단위의 차이점과 해당 코드 예제입니다. 비교와 실습을 통해 이러한 단위를 더 잘 이해하고 적용할 수 있으며 요소의 크기와 레이아웃을 유연하게 제어할 수 있습니다. 실제 개발에서 필요에 따라 적절한 단위를 선택하면 웹 페이지나 애플리케이션이 다양한 장치 및 화면 크기의 디스플레이 효과에 더 잘 적응할 수 있습니다.

위 내용은 CSS의 상대 단위와 절대 단위의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!