집 >웹 프론트엔드 >CSS 튜토리얼 >CSS Fluid Typography: 확장 가능한 텍스트를 위한 클램프() 사용 가이드

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

DDD원래의: 2024-09-18 18:35:16225검색

소개

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

이제 h1 및 p 요소는 크기가 정의된 범위 내에서 유지되므로 너무 크거나 작아지지 않도록 반응합니다.

결론

이 글에서는 CSS의 클램프() 함수를 사용하여 유동적인 타이포그래피를 구현하는 방법을 배웠습니다. 여기까지 읽어주셔서 감사합니다. 좋아요를 눌러주시고 이 글을 통해 혜택을 받을 동료들과 공유해 주시기 바랍니다.

이 기사에 대해 어떻게 생각하시나요? 아래 댓글 섹션에서 여러분의 생각을 자유롭게 공유해 주세요.

추신 저는 현재 프론트엔드 개발자 기회를 찾고 있습니다. 리드가 있거나 채용 중이라면 언제든지 내 이력서를 확인하거나 LinkedIn에서 나와 연결하세요. 여러분의 의견을 듣고 싶습니다!

위 내용은 CSS Fluid Typography: 확장 가능한 텍스트를 위한 클램프() 사용 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css if for format continue using function this viewport table

성명：

이전 기사：태양계의 표현입니다.다음 기사：태양계의 표현입니다.

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

목차

소개

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

결론

관련 기사