클램핑 카드

이 데모에서는 width: clamp(<min>, <actual>, <max>)와 같이 clamp()를 사용하여 너비를 설정합니다.

절대 최소 및 최대 크기와 실제 크기를 설정합니다. 값을 사용하면 다음과 같이 표시됩니다.

.parent {
  width: clamp(23ch, 60%, 46ch);
}

최대 크기는 23ch 또는 23자(영문 기준)이며 최대 크기는 46ch, 46자(영문 기준)입니다. 문자 너비 단위는 요소의 글꼴 크기 (특히 0 글리프의 너비)를 기반으로 합니다. '실제' 크기는 50%이며, 이는 이 요소의 상위 너비의 50% 를 나타냅니다.

여기서 clamp() 함수는 50% 가 46ch보다 크거나 (더 넓은 표시 영역에서) 23ch보다 작은 (작은 표시 영역에서) 까지 이 요소의 50% 너비를 유지할 수 있도록 합니다. 동영상에서 이 카드의 너비가 고정된 최대 지점까지 증가하고 상위 요소가 늘어나거나 줄어들면 고정된 최솟값으로 어떻게 감소하는지 확인해 보세요. 그런 다음 추가 속성을 사용하여 상위 요소의 중앙에 유지됩니다. 이렇게 하면 텍스트가 너무 넓거나 (46ch 위) 너무 찌그러지거나 좁아지지 않아 (23ch 미만) 레이아웃을 더 쉽게 읽을 수 있습니다.

이 기법을 사용하여 반응형 서체를 구현할 수 있습니다. 예: font-size: clamp(1.5rem, 20vw, 3rem). 이 경우 헤드라인의 글꼴 크기는 항상 1.5rem과 3rem 간에 고정된 상태로 유지되지만 표시 영역의 너비에 맞게 20vw의 실제 값에 따라 늘어나고 줄어듭니다.

이는 최소 및 최대 크기 값으로 가독성을 보장하는 훌륭한 기법이지만 일부 최신 브라우저에서는 지원되지 않으므로 대체 값을 사용하고 테스트해야 합니다.

<div class="parent">
  <div class="card">
    <h1>Title Here</h1>
    <div class="visual"></div>
    <p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
  </div>
</div>

        .parent {
  display: grid;
  place-items: center;
}

.card {
  width: clamp(23ch, 60%, 46ch);
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.visual {
    height: 125px;
    width: 100%;
  }