5. 크기와 단위

• 다양한 단위들과 프로퍼티들

  • 단위가 중요한 프로퍼티들: border, width, height, font-size, padding, margin, top, bottom 등등

  • 절대 길이: 사용자가 환경설정으로 기본 폰트 사이즈를 바꿀 수 없다. ex) px (픽셀)

  • 뷰포트 길이: 뷰포트에 따라 동적으로 크기가 변한다. ex) vh, vw, vmin, vmax (높이, 넓이)

  • 폰트 상대적 길이: 기본 폰트 크기 조정 시 사용된다. ex) rem, em

• %란 무엇인가?

  1. position: fixed => 뷰포트에 따라 크기가 동적으로 변한다.
  2. position: absolute => 가까운 블록레벨 조상의 컨텐츠 및 패딩 값에 따라 크기가 동적으로 변한다.
  3. position: static, relative => 가까운 블록레벨 조상의 컨텐츠에만 의존하여 크기가 동적으로 변한다.

• 백드롭 만들기

{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

• 다양한 단위들의 활용 방법

  • max-width: 너비의 최댓값
  • min-width: 너비의 최솟값
  • max-height: 높이의 최댓값
  • min-height: 높이의 최솟값
  • em: 부모로부터 상속받은 요소의 실제 크기에 인수를 곱해서 계산 (과도한 상속 문제 발생)
  • rem: 브라우저 설정 크기에 인수를 곱해 계산 (과도한 상속이 발생하지 않음)
  • vmin: 낮은 값 기준
  • vmax: 높은 값 기준

• 올바른 단위 값 사용하기

  • font-size: % or rem

  • padding, margin: rem

  • border: px

  • width, height: vw, vh, %

  • top, bottom: %

  • margin: auto => 너비가 명시된 블록 레벨 요소에만 적용, 가운데 정렬