사이즈 단위

CSS의 크기 단위는 요소의 크기(너비, 높이, 여백 등)를 지정할 때 사용되며, 절대 단위와 상대 단위로 나뉩니다.

1. 절대 단위 (Absolute Units)

절대 단위는 고정된 크기를 의미하며, 화면 크기나 해상도와 관계없이 일정한 크기를 가집니다.

px (픽셀)

• 화면의 물리적 픽셀을 기준으로 한 단위.
• 디지털 환경에서 가장 많이 사용되는 단위.
• 1px은 보통 디바이스의 렌더링 해상도에 따라 상대적일 수 있음(HiDPI 스크린에서는 논리 픽셀과 물리 픽셀 간 차이 발생).
• 예: width: 100px;

2. 상대 단위 (Relative Units)

상대 단위는 기준값에 따라 크기가 달라지며, 반응형 디자인에 유리합니다.

% (퍼센트)

부모 요소를 기준으로 크기를 설정.

• 유연한 레이아웃 디자인에 주로 사용.
• 예: width: 50%; (부모 요소의 50% 너비)

em

글꼴 크기를 기준으로 한 단위.

• 현재 요소나 부모 요소의 font-size에 상대적.

body { font-size: 16px; }
p { font-size: 2em; } /* 32px */

rem (루트 em)

문서의 최상위 요소(html)의 font-size를 기준으로 함.
전역적인 글꼴 크기를 유지하면서 상대 크기를 설정할 때 유용.

html { font-size: 16px; }
h1 { font-size: 2rem; } /* 32px */

vw (Viewport Width)

뷰포트의 너비를 기준으로 한 단위.

• 1vw는 뷰포트 너비의 1%.
• 예: width: 50vw; (뷰포트 너비의 50%)

vh (Viewport Height)

뷰포트의 높이를 기준으로 한 단위.

• 1vh는 뷰포트 높이의 1%.
• 예: height: 100vh; (전체 화면 높이)

vmin, vmax

• vmin: 뷰포트의 너비와 높이 중 더 작은 값을 기준으로.
• vmax: 뷰포트의 너비와 높이 중 더 큰 값을 기준으로.

font-size: 10vmin; /* 작은 쪽의 10% */

컨테이닝 블록(Containing Block)

CSS에서 레이아웃과 배치가 이루어지는 기준이 되는 박스입니다. 요소의 크기, 위치, 레이아웃 등은 모두 컨테이닝 블록을 기준으로 계산됩니다.
컨테이닝 블록은 요소의 CSS 속성 값과 요소의 위치에 따라 결정되며, 상위 요소 중 특정 조건을 만족하는 요소가 컨테이닝 블록이 됩니다.

컨테이닝 블록은 요소의 position 속성 값과 문맥에 따라 다음과 같이 결정됩니다.

1. 고정 위치(position: fixed)

• 뷰포트(Viewport)가 컨테이닝 블록이 됩니다.
• 요소는 화면의 크기에 고정되어 위치가 설정됩니다.

.fixed {
  position: fixed;
  top: 10px;
  left: 10px; /* 뷰포트를 기준으로 위치 설정 */
}

2. 절대 위치(position: absolute)

• 가장 가까운 position 속성이 relative, absolute, fixed, 또는 sticky로 설정된 상위 요소의 콘텐츠 박스가 컨테이닝 블록이 됩니다.
• 만약 상위 요소 중에 이러한 속성을 가진 요소가 없다면 루트 요소(html)이 컨테이닝 블록이 됩니다.

<div class="parent">
  <div class="child"></div>
</div>
<style>
  .parent {
    position: relative; /* 컨테이닝 블록 역할 */
    width: 200px;
    height: 200px;
  }
  .child {
    position: absolute;
    top: 10px;
    left: 10px; /* .parent를 기준으로 위치 */
  }
</style>

3. 정적 및 상대 위치(position: static 또는 position: relative)

• 기본적으로 가장 가까운 블록 컨테이너(즉, 부모 요소의 콘텐츠 영역)가 컨테이닝 블록이 됩니다.

<div class="parent">
  <div class="child"></div>
</div>
<style>
  .parent {
    width: 200px;
    height: 200px;
    background: lightblue;
  }
  .child {
    width: 100px;
    height: 100px;
    position: relative; /* 컨테이닝 블록은 부모 요소의 콘텐츠 박스 */
  }
</style>

4. 스티키 위치(position: sticky)

• 가장 가까운 스크롤 가능한 조상 요소가 컨테이닝 블록이 됩니다.
• 스크롤되지 않는 경우에는 일반적인 부모 요소의 콘텐츠 영역이 기준이 됩니다.

.sticky {
  position: sticky;
  top: 0; /* 상단에서 스크롤 시작 */
}

5. transform, perspective, filter, 또는 contain 속성이 있는 요소

• 이러한 속성이 적용된 요소는 자식 요소의 새로운 컨테이닝 블록이 됩니다.

<div class="parent">
  <div class="child"></div>
</div>
<style>
  .parent {
    transform: translate(50px, 50px); /* 컨테이닝 블록 생성 */
  }
  .child {
    position: absolute;
    top: 10px;
    left: 10px; /* .parent를 기준으로 위치 */
  }
</style>

컨테이닝 블록의 콘텐츠 영역

컨테이닝 블록은 상위 요소의 콘텐츠 영역(Content Box)을 기준으로 합니다. box-sizing 속성에 따라 이 콘텐츠 영역은 아래와 같이 계산됩니다:

• box-sizing: content-box (기본값)
  콘텐츠 영역은 padding, border를 제외한 영역입니다.

• box-sizing: border-box
  콘텐츠 영역은 padding과 border를 포함한 전체 박스 영역입니다.

컨테이닝 블록과 플로우 컨텍스트

컨테이닝 블록은 플로우 컨텍스트(Flow Context)와 밀접하게 관련이 있습니다.

정적 플로우(Static Flow): 상위 요소의 콘텐츠 영역이 기준.
절대 위치(Absolute Positioning): 가장 가까운 position 설정 요소를 기준.
플렉스 컨테이너(Flex Container): 플렉스 컨테이너의 콘텐츠 박스가 기준.

프로퍼티 속성에 따른 추천 사이즈 단위