CSS Fluid Typography: 확장 가능한 텍스트를 위한 클램프() 사용 가이드-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS Fluid Typography: 확장 가능한 텍스트를 위한 클램프() 사용 가이드

DDD

Sep 18, 2024 pm 06:35 PM

소개

CSS 미디어 쿼리를 작성하는 것은 때로 ~~어려운~~ 일이 될 수 있으며, 특히 해야 할 일이 너무 많은 경우에는 더욱 그렇습니다. 우리는 종종 레이아웃을 구축하고 웹 사이트의 다른 부분을 반응형으로 만드는 데 너무 집중하여 스트레스를 받습니다. 하지만 수많은 미디어 쿼리를 작성할 필요 없이 화면 크기에 관계없이 텍스트를 확장 가능하게 만들어 이러한 스트레스를 줄일 수 있다면 어떨까요?

CSS 클램프() 함수를 사용하여 유동적인 타이포그래피를 구현하는 방법에 대해 자세히 알아보고 시작해 보겠습니다.

Fluid 타이포그래피를 구현하기 위해 클램프() 함수 사용하기

문제

다음은 H1 태그와 P 태그가 있는 기본 웹페이지입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Fluid Typography</title>
</head>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body{
            font-family: Arial, sans-serif;
            background: #333;
            color: white;
            text-align: center;
        }

        h1{
            font-size: 5rem;
        }

        p{
            font-size: 3rem;
            color: red;
        }
    </style>
<body>
    <h1>CSS Fluid Typography</h1>
    <p>Why is this text not scalable</p>
</body>
</html>

로그인 후 복사

이제 다양한 화면 크기에서 텍스트가 어떻게 작동하는지 살펴보겠습니다

CSS Fluid Typography: A Guide to Using clamp() for Scalable Text

위의 텍스트를 반응형으로 만드는 간단한 방법은 미디어 쿼리를 사용하는 것이지만, 이 글에서는 CSS 클램프() 함수를 사용하여 텍스트를 반응형으로 만들어 보겠습니다.

그 전에 먼저 vw(뷰포트 너비) 단위를 살펴보겠습니다. vw 장치를 사용하면 뷰포트 너비를 기준으로 글꼴 크기를 설정하여 텍스트를 반응적으로 만들 수 있습니다.

다음 변경 사항으로 기존 코드를 업데이트해 보겠습니다.

<style>
  h1 {
    font-size: 10vw; /* H1 size is 10% of the viewport width */
  }
  p {
    font-size: 5vw;  /* p size is 5% of the viewport width */
    color: red;
  }
</style>

로그인 후 복사

뷰포트 너비가 1000px인 경우:
h1 글꼴 크기는 100px입니다
p 글꼴 크기는 50px입니다.
H1 및 p의 글꼴 크기는 뷰포트 너비가 변경됨에 따라 계속 커지거나 작아집니다.

어떻게 보이는지 살펴보겠습니다:
CSS Fluid Typography: A Guide to Using clamp() for Scalable Text

위의 GIF에서 vw를 사용하면 반응형 텍스트에 작동하지만 제약 조건이 없다는 것을 알 수 있습니다. 뷰포트 너비가 늘어나면 글꼴 크기는 계속해서 제한 없이 커지고, 마찬가지로 뷰포트 너비가 줄어들면 글꼴 크기는 계속 작아집니다.

여기서 클램프() 기능이 작동합니다. 클램프()를 사용하면 최소, 선호 및 최대 글꼴 크기를 설정하여 정의된 범위 내에서 텍스트 크기를 조정하는 방법을 제어할 수 있습니다.

솔루션

clamp() 함수 사용

CSS의 클램프() 함수를 사용하면 글꼴 크기 범위를 설정할 수 있습니다.
일반적인 형식은 다음과 같습니다.

clamp(minimum, preferred, maximum)

로그인 후 복사

최소: 텍스트가 축소될 수 있는 가장 작은 크기입니다.
선호: 이상적인 크기, 종종 뷰포트 너비의 백분율
최대: 텍스트가 커질 수 있는 가장 큰 크기입니다.

위의 예를 사용하여 다음과 같이 코드를 수정해 보겠습니다

h1{
  font-size: clamp(24px, 5vw, 48px); /* Font size scales between 24px and 48px */
}

p{
  font-size: clamp(16px, 3vw, 24px) /* Font size scales between 16px and 24px)
}

로그인 후 복사

브라우저에서 어떻게 보이는지 살펴보겠습니다.

CSS Fluid Typography: A Guide to Using clamp() for Scalable Text