CSS의 Clamp () 란 무엇입니까 (및 사용 방법)

휴대 전화와 거대한 모니터 모두에서 사이트를 잘 보이게하려는 경우, 간격 파손, 글꼴이 얼마나 크게 축소되거나 과도하게 확장되는지, 요소가 압도적이거나 사라지는 지 보았습니다. 이 모든 것을 고치기 위해 하나의 레이아웃에 대한 긴 미디어 쿼리 목록을 작성하게됩니다. Clamp ()가 도움을 줄 수있는 곳입니다.

설정 크기를 단순화하는 CSS 기능입니다. 고정 중단 점에서 여러 값을 정의하는 대신 화면이 변경 될 때 요소가 유동적으로 스케일되도록 최소, 선호 및 최대 값을 설정할 수 있습니다. 가장 중요한 부분은 정의 된 한계 내에 머무르기 때문에 레이아웃 불일치가 없다는 것입니다.

이 게시물에서는 Clamp ()가 어떻게 작동하는지, 왜 미디어 쿼리보다 종종 더 효율적일 수 있는지, 그리고 Divi 5가 단일 코드 줄을 쓰지 않고 어떻게 사용할 수 있는지 설명합니다!

클램프 () 란?

Clamp ()는 CSS의 기본 기능으로 화면 크기에 따라 조정되는 응답 값을 정의하는 데 사용됩니다. 단일 숫자를 하드 코딩하는 대신 브라우저에 작업 할 범위를 제공합니다. 최소 값, 확장 가능한 우선 값 및 최대 값을 설정합니다. 이로 인해 레이아웃이 더 유연 해지고 각 화면 크기에 대해 여러 미디어 쿼리를 작성할 필요가 없습니다.

화면 크기에 따라 증가/감소하는 유체 글꼴 크기의 예를 통해 이것을 이해해 봅시다.

font-size: clamp(40px, 7vw, 100px);

여기서는 글꼴 크기가 40px 이하로 이동하지 않으며 뷰포트 너비의 7%를 기준으로 스케일이 발생하며 100px에 도달하면 성장을 중단합니다.

Clamp ()를 사용하면 미디어 쿼리와 달리 단단한 점프를 피하고 스타일을보다 예측 가능하고 읽을 수있게한다는 것입니다.

우리는 이것으로 무엇을 의미합니까? Clamp ()를 미디어 쿼리와 비교하여 이것을 이해해 봅시다.

클램프 () 및 미디어 쿼리 비교

미디어 쿼리는 다른 화면 너비에 대한 글꼴 크기를 조정하는 또 다른 일반적인 방법입니다. 여기에서 스타일이 변경되는 특정 화면 너비에서 중단 점을 정의합니다. 예를 들어, 데스크톱에는 한 가지 글꼴 크기, 태블릿의 경우 다른 글꼴 크기, 모바일에는 3 분의 1을 할당하여 화면 너비가 각 중단 점에 맞을 때만 글꼴 크기가 변경되도록 할 수 있습니다.

이 방법은 작동하지만 유동적이지는 않습니다. 1000px와 501px 사이에서 글꼴 크기는 100px에서 잠겨 있습니다. 화면이 500px에 도달하는 순간 글꼴은 갑자기 30px로 떨어집니다. 이것은 부드러운 전환이없고 급격한 변화만을 의미합니다.

따라서 스케일링을 자연스럽게 느끼게하려면 여러 중단 점을 추가하고 각각의 글꼴 크기를 수동으로 조정해야합니다. 그것은 당신의 코드를 길고 부풀게 만들 것입니다.

대조적으로, clamp ()는 갑작스런 전환과 긴 코드를 절약합니다. 실제로, 그것은 단일 줄 : font-size : clamp (30px, 7vw, 100px)로 작성할 수 있습니다.

이를 통해 브라우저는 뷰포트 너비의 7 %를 기준으로 글꼴을 30px와 100px 사이에서 확장하도록 지시합니다. 글꼴 크기는 갑작스런 점프 또는 여러 중단 점이 필요하지 않고 모든 화면 크기에 대해 유동적으로 조정됩니다. 여전히 한계를 정의하지만 그 사이의 스케일링은 자동적이고 일관성이 있습니다.

라이브 액션에서 미디어 쿼리 브레이크 포인트의 글꼴 크기 조정과 Clamp ()의 비교가 다음과 같습니다.

반응 형 크기 조정의 경우 Clamp ()는 눈에 띄는 차이를 만듭니다. 고정 된 화면 너비가 스타일 변경을 트리거하기 위해 기다리지 않고 그 사이의 모든 픽셀에 응답합니다. 이를 통해 모든 장치에서 코드를 깨끗하게하고 디자인을 일관성있게 유지합니다. 또한 대부분의 최신 브라우저에서 널리 지원되므로 이러한 브라우저에서 잘 렌더링되어 신뢰할 수 있고 실용적인 교체가됩니다.

클램프 ()가 무대 뒤에서 작동하는 방법

Clamp ()는 CSS 속성을 확장하기 위해 함께 작동하는 세 가지 값을 가져옵니다.

 clamp(minimum, preferred, maximum) 

함수의 각 부분은 특정 역할을합니다.

• 최소값 : 가능한 가장 낮은 값. 화면이 아무리 작더라도 요소는이 시점 아래에서 스케일이되지 않습니다.
• 우선 값 : 화면 크기에 따라이 값 스케일. 일반적으로 VW 또는 Calc () 표현과 같은 상대 단위를 사용하여 자유 유동성을 허용합니다.
• 최대 값 : 가장 높은 허용 크기. 매우 큰 화면에서도 요소 가이 값을 초과하지 않습니다.

브라우저가 최종 크기를 계산하면 선호하는 값을 먼저 평가합니다. 브라우저는 화면 크기가 작아서 선호하는 값이 최소값 아래로 떨어질 정도로 최소값을 사용합니다. 마찬가지로, 선호하는 값이 최대치를 초과 할 정도로 화면이 넓어지면 이에 달려 있습니다.

이것은 행동을 예측 가능하게 만듭니다. 당신은 항상 당신의 디자인이 정의 된 범위 내에서 유지 될 것이라는 것을 알고 있지만, 해당 한도들 사이에서 유연한 스케일링을 얻습니다. Clamp ()는 최소 및 최대 한계를 설정함으로써 요소가 유동적으로 확장되지만 그리 많지 않습니다. 충분히.

올바른 선호 값을 선택합니다

선호하는 값 (중간) 이이 모든 것에서 더 큰 역할을한다는 것을 알았을 것입니다. 요소가 어떻게 스케일링되는지 결정합니다.

첫째, 클램프 (40px, 80px , 120px)와 같은 고정 값이되어서는 안됩니다.이 경우 바람직한 값은 전혀 확장되지 않기 때문입니다. 80px는 이미 한계 사이에 떨어지기 때문에 브라우저가 잠그고 화면 크기 변경을 무시합니다. 이로 인해 정적 값이 발생하여 우선 클램프 ()를 사용하는 목적을 물리칩니다.

대신, 우선 값은 클램프 (40px, 7VW , 120px)와 같이 항상 상대적이어야합니다 . 여기서 7VW는 뷰포트 너비에 응답하여 요소가 화면 크기에 걸쳐 원활하게 스케일링 할 수 있습니다. 그런 다음 클램프 함수는 결코 40px 또는 120px 이상으로 이동하지 않도록하여 크기가 화면 너비의 7%에 반응합니다.

또한 상대 값의 크기를 고려해야합니다. 예를 들어, 2VW 와 같은 작은 값은 스크린 크기에 걸쳐 요소를 점진적으로 스케일링하는 반면, 6VW 와 같은 값은 더 빠른 스케일링을 유발하고 최대 크기에 더 빨리 도달합니다. 어떤 스케일링이 당신에게 효과가 있는지 식별하려면 유체 유형 스케일 계산기를 사용해보십시오. 다른 값을 미리 볼 수 있으며 즉시 사용 가능한 CSS를 내보낼 수 있습니다.

참고 : 유체 유형 스케일 계산기는 VI 값을 출력합니다. Divi에서 생성 된 출력을 사용하는 경우 VI 장치를 VW로 변경하십시오.

클램프 ()의 다른 유형의 단위

클램프 () 내부의 장치는 장치에서 작동하는 방식에 영향을 미칩니다. 다음은 사용할 수있는 모든 것입니다.

대부분의 경우 개발자는 최소 및 최대 값에 PX를 사용하고 선호하는 값에는 VW와 같은 유체 장치를 사용합니다. 이것은 제어와 응답 성 사이의 최상의 균형을 제공합니다.

그러나 클램프 (2REM, 4REM, 8REM)와 같은 최소 및 최대 값에 상대 단위를 사용할 수도 있습니다. 이를 통해 루트 글꼴 크기가 변경되면 디자인이 더욱 접근 가능하고 스케일을 쉽게 확장 할 수 있습니다. 가독성을 위해 브라우저 설정을 조정하는 사용자에게 특히 유용합니다.

Divi 5의 클램프 ()

CSS의 Clamp () 기능은 매우 유용하지만 코드 작성이 편한 경우에만 유용합니다. 스타일 시트를 만지지 않고 시각적으로 웹 사이트를 구축하는 것을 선호하는 사람들은 어떻습니까? clamp ()를 사용하여 코드를 쓰지 않고 유체 레이아웃을 구축 하시겠습니까?

그렇다면 Divi 5의 고급 유닛이 도움이 될 수 있습니다.

YouTube 채널을 구독하십시오

간단히 말해서 Divi 5는 Clamp ()를 빌더의 고급 장치로 지원하며 액세스하기가 매우 쉽습니다. 글꼴 크기, 간격 또는 섹션 너비와 같은 숫자 값을 입력 할 수있는 곳에 Clamp ()를 직접 사용하는 옵션이 있습니다.

입력 필드를 클릭하면 Divi 5에서 사용 가능한 다양한 고급 장치 (제목 텍스트 크기 옆의 다크 컬러 목록 참조) 를 선택하고 단위 유형을 변경하고 최소, 선호 및 최대 값을 정의하십시오.

그리고 그게 다야! 코딩이나 CSS가 전혀 없음 - 당신이 한 모든 것은 클램프 () 값을 입력하는 것 뿐이며, 당신의 제목은 그렇게 유동적이되었습니다.

Divi 5를 사용하면 맞춤형 CS를 작성하지 않고 유동적이고 반응이 좋은 디자인을 쉽게 만들 수 있습니다. 시각적 편집기의 단순성으로 클램프 ()의 모든 유연성을 얻을 수 있습니다. (Divi 5는 clamp ()을 포함한 다른 많은 고급 장치를 지원합니다).

Divi 5의 고급 유닛에 대한 모든 것을 배우십시오

Divi 5에서 clamp ()를 사용하는 방법?

지금까지 Divi 5에서 clamp ()를 사용하는 것이 얼마나 쉬운 지 보았습니다. clamp () 단위를 선택하고 선호하는 값을 추가하십시오. 사용자 정의 코드, CSS 파일 없음, 깨끗하고 시각적 인 인터페이스 만 있지 않습니다.

그러나 clamp ()가 Divi 내부에서 진정으로 강력하게 만드는 것은 단순한 기능 자체가 아닙니다. 그것은 그것이 작동하는 것입니다.

Divi 5는 모듈 식 설계 시스템 주위에 구축되었습니다. 즉, Clamp ()를 디자인 변수 및 calc ()과 같은 CSS 기능과 같은 다른 고급 기능과 결합하여 레이아웃을 반응 할뿐만 아니라 일관되고 스케일링하기 쉬운 것입니다. 그리고 그것이 흥미로워지는 곳입니다 - Divi 5는 클램프 ()를 워크 플로에 쉽게 맞출 수있게합니다.

클램프 ()는 설계 변수와 함께 작동합니다

Divi 5에서 클램프 ()를 효과적으로 사용하는 가장 효율적인 가장 효율적인 방법은 디자인 변수와 결합하는 것입니다.

설계 변수를 사용하면 전역 값 (예 : 타이포그래피, 색상 및 글꼴 크기)을 정의 할 수 있으므로 사이트 전체에서 일관성을 유지할 수 있습니다. 클램프 () 값을 숫자 변수로 저장할 수도 있습니다. 이를 통해 반응 형 글로벌 값을 저장하여 변경하면 모든 인스턴스가 한 번에 업데이트됩니다.

예를 들어, 다음과 같은 H1-H6 제목의 클램프 () 크기를 정의합니다.

Divi Builder의 변수 관리자 안에 저장하십시오.

웹 사이트 전체의 모든 제목은 정의 된 clamp () 값에 따라 적응됩니다.

이제 H3 크기를 업데이트하려면 숫자 변수를 수정하면 사용한 모든 곳에서 업데이트됩니다. ( Divi 5에서 자신의 타이포그래피 시스템을 만들고 싶습니까? Clamp () 및 설계 변수를 사용하여 글꼴 및 글꼴 크기 관리에 대한 완전한 안내서가 있습니다.)

이 접근법을 사용하면 중앙 집중식 제어를 가능하게하여 각 인스턴스를 수동으로 조정하지 않고도 전역에서 타이포그래피 설정을 쉽게 업데이트 할 수 있습니다. 옵션 그룹 사전 설정을 통해 이러한 clamp () 변수를 적용하면 설계 프로세스를 간소화합니다.

clamp ()는 calc ()와 결합합니다.

clamp () 내부의 calc () 함수를 사용하여 값 스케일을 미세 조정할 수도 있습니다. 이것은 기준선 크기를 추가 한 다음 VW와 같은 상대 장치로 더 정확하게 확장하려는 경우에 특히 유용합니다.

예를 들어, 글꼴 크기 : 클램프 (1REM, CALC (0.75REM + 2VW), 2.5REM)는 Calc ()를 사용하여 안정적인베이스 (0.75REM)를 추가 한 다음 2VW로 추가로 확장합니다.

이를 통해 뷰포트 너비에 따라 글꼴이 스케일링 될 수 있지만 기본 글꼴 크기로 헤드 스타트를 제공합니다. 이것은 여러 클램프 변형이 필요하지 않고 작은 화면에서 가독성을 유지하는 데 유용합니다. Calc () Clamp () 내부의 트릭은 사물의 규모에 대한 추가 제어를 원하는 모든 곳에 적합합니다.

클램프 ()의 실제 사용 사례

이제 클램프 ()의 일반적인 사용 사례와 Divi 5와 함께 적용 할 때 얼마나 쉬운 지 살펴 보겠습니다.

1. 모든 장치에서 일관된 제목 크기

반응 형 타이포그래피는 클램프 ()의 최상의 사용 사례입니다. 디자인 변수에서 Clamp ()를 사용하여 헤딩 (H1-H6) 크기를 이미 정의 했으므로 이제는 실제로 볼 수 있습니다.

메뉴 항목에 H5S를 사용 하여이 페이지를 만들었습니다. 그런 다음 H5 숫자 변수를 각 H5의 제목 텍스트 크기에 적용했습니다. 보시다시피, 각 헤어링은 중단 점에서 유동적으로 비늘입니다.

텍스트는 정의 된 모든 반응 형 중단 점에서 명확하고 균형 잡힌 상태로 유지됩니다.

라인 높이 및 문자 간격에 클램프 ()를 사용할 수도 있습니다. 화면이 넓어짐에 따라 약간의 라인 간격을 증가 시키거나 간격으로 최적의 가독성을 유지하는 데 도움이됩니다. 작은 변화는 있지만 긴 형식의 콘텐츠를 더욱 통기성으로 만듭니다.

2. 큰 화면의 단락 섹션의 클램프 () 너비 설정

소형 화면의 짧은 라인이 콘텐츠를 소화 할 수 있으므로 단락은 모바일에서 자연스럽게 읽기 쉽습니다. 그러나 초 전체 모니터에서 독자들은 전체 폭 섹션이 텍스트를 너무 멀리 늘리면 전체 수평 행을 스캔해야합니다. 광고판을 읽는 것 같은 느낌이 듭니다. 문장의 이상적인 줄 길이는 약 50-75 자이므로 웹 사이트에 넓은 화면에 끝없는 문장이 표시되면 독자의 관심을 잃을 수 있습니다.

이 문제를 해결하려면 클램프 (300px, 65VW, 800px)와 같은 반응성 폭을 설정하여 단락을 고정 너비 (800px)로 확장하여 단락이 더 넓은 화면에서도 읽을 수있는 것처럼 보입니다.

이것은 더 넓은 화면에서 블로그 게시물을 읽을 수있는 완벽한 방법입니다.

3. 단일 또는 주요 이미지의 클램프 () 너비를 설정하십시오

마찬가지로, 단일 이미지 (특집 이미지와 같은)는 초대형 스크린에서 너무 큰 것처럼 보일 수 있습니다. 태블릿에서는 완벽하게 보이지만 4K 모니터에서는 어색하게 늘어날 수 있으며, 이는 나머지 콘텐츠에 비해 압도적이 될 수 있습니다.

이 문제를 해결하려면 클램프 (300px, 60VW, 1000px)와 같은 클램프 기반 이미지 너비를 사용하십시오. 화면 크기로 이미지가 유동적으로 증가하지만 레이아웃을 지배하기 전에 중지됩니다.

또는 전체 컨테이너 행의 클램프 () 너비를 설정하여 모든 요소 (이미지, 헤딩 및 텍스트)가 균일하게 스케일을 보장 할 수 있습니다.

4. Clamp ()를 사용하여 유체 패딩 및 마진을 추가하십시오.

디자이너는 종종 데스크탑에 적절한 간격을 얻지 만 더 작거나 매우 큰 화면에서 항상 잘 작동하지는 않습니다. 고정 패딩 및 여백이 항상 화면 크기로 조정되는 것은 아닙니다. 그것이 clamp ()가 유용 해지는 곳입니다.

예를 들어, 클램프 (0.5REM, 2VW, 2REM) 마진 및 이미지 갤러리의 클램프 (1REM, 3VW, 4REM) 패딩은 화면으로 작게 시작하는 공백을 만듭니다.

레이아웃 룸이 큰 화면에서 호흡 할 수있는 레이아웃 공간을 제공하고 모바일에서 물건을 꽉 유지합니다.

Clamp ()는 또한 카드 레이아웃, 이미지 갤러리, 섹션 컨테이너 및 텍스트 블록 주변에서 부드럽게 패드를 스케일링하는 데 도움이됩니다.

5. 매끄럽게 확장하는 반응 형 영웅 섹션을 만듭니다

클램프 ()를 사용하면 영웅 제목, 버튼 패딩 및 자막 간격을 정의하여 모든 화면에서 영웅 섹션을 완벽하게 보이게 할 수 있습니다. 이 clamp () 값을 응용 프로그램을 단순화하기 위해 설계 변수로 저장했습니다. (그러나 모든 세부 사항을 저장하여 변수 관리자를 작성하고 싶지 않을 것입니다.)

이제 해당 값을 적용하는 것은 쉬운 일입니다.

저장되면 각각은 스크린 크기에 자동으로 적응하여 영웅 섹션에 모든 장치에서 완벽한 첫인상을 제공합니다.

한 줄의 코드를 작성하지 않고 clamp ()를 사용하여 픽셀-완벽한 레이아웃을 설계

Clamp ()는 끝없는 미디어 쿼리에 의존하지 않고 유체, 반응 형 레이아웃을 설계하는 데 도움이됩니다. Divi 5를 사용하면 사용하기 위해 한 줄의 코드를 작성할 필요가 없습니다. 코딩을 선호하거나 비주얼 디자인을 즐기 든 Divi의 고급 유닛은 클램프 ()를 글꼴에 적용하고 간격을 쉽게합니다.

Clamp ()와 같은 강력한 기능이 너무 쉽게 액세스 할 수 있으므로 Divi 5를 직접 시도해보고 싶지 않습니까? 다른 값을 테스트하고, 자신만의 반응 형 시스템을 만들고, 레이아웃이 얼마나 유연해질 수 있는지 확인하십시오. 그리고 좋아하는 clamp () 트릭이 있으면 아래 의견에 공유하십시오! 우리는 당신이 만든 것을보고 싶습니다.