CSS clamp() 반응형 타이포그래피

Question

CSS clamp() 반응형 타이포그래피 관련 질문과 답변.

김영삼 · Accepted Answer

모바일에서 100vh는 주소창을 포함하므로 실제 뷰포트보다 큽니다. 또한 width: 50%가 모바일에서는 너무 좁을 수 있습니다..container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;  /* dvh = 동적 뷰포트 높이 */
  padding: 20px;
}
.child {
  width: min(90%, 600px);  /* 반응형: 최대 600px, 모바일은 90% */
}

/* 또는 clamp 사용 */
.child {
  width: clamp(300px, 80%, 600px);
}100dvh는 모바일 주소창 변화에 대응하고, min()/clamp()로 반응형 크기를 처리합니다.

코딩하는민수 · Answer

감사합니다! 🙏

댓글 0