Divi 5에서 최소 () 및 max ()를 사용하여 지능형 레이아웃을 만듭니다.

CSS Min () 및 Max ()는 응답 형 웹 디자인에서 두 가지 다목적이지만 활용되지 않은 기능이며 Divi 5는 Advanced Units 업데이트 이후 두 가지를 모두 지원합니다. Clamp ()와 calc () 및 max ()를 사용한 동적 계산을 사용한 유체 타이포그래피를 이전에 탐색했지만 반응 형 디자인을 달성 할 수있는 더 간단한 방법을 제공합니다.

이 게시물에서는 Divi를 사용하여 이러한 기능을 사용하는 방법을 보여줍니다 (Divi 5는 새 웹 사이트에서 사용할 준비가되어 있으며 기존 사이트의 마이그레이션 권장 사항이 곧 제공됩니다). 반응 형 기능을 사용하기 위해 할 수있는 모든 것은 미디어 쿼리에 대한 의존도를 줄이고 CSS는 아름다운 것입니다!

CSS MIN () 및 MAX () : 더 간단한 논리가있는 더 똑똑한 레이아웃

Clamp ()를 이미 탐색 한 경우 Min () 및 Max ()를 마스터하는 중간에 있습니다! 기억한다면 Clamp ()는 세 가지 값을 동시에 사용합니다 (Min, Preferred 및 Max), Clamp ()의 최소 및 최대는 동일한 개념이지만 주어진 시간에 논리의 1/3에 불과합니다.

min () 및 max ()는 무엇을합니까?

최소 () 및 max () 함수를 사용하면 화면 크기에 따라 가장 작은 (최소) 또는 가장 큰 (최대)가 표시되면서 둘 이상의 값을 설정할 수 있습니다.

"전환 지점"은 설정 한 두 값에 대해 각각 결정되므로 시각화 목적으로 만 사용됩니다.

최소 () : 항상 작은 값을 선택합니다

최소 ()를 사용하여 넓은 화면이 콘텐츠를 과도하게 확장하는 것을 방지하십시오. 이것은 대형 화면에서는 너무 넓지 않아야하는 레이아웃에 이상적이지만 화면 크기가 작아지면서 하향으로 확장 할 수있는 충분한 유연성이 있어야합니다.

 width: min(100%, 500px); 

이 예에서, 요소의 너비는 500px를 초과하지 않지만 500px 마크 아래에 있으면 100%가됩니다.

max () : 항상 더 큰 값을 선택합니다

Max ()를 사용하여 컨텐츠가 너무 좁거나 작아 지거나 특히 작은 화면에서 또는 콘텐츠가 읽을 수 있거나 기능적으로 유지하기 위해 최소 크기가 필요한 경우. 이는 작은 화면의 특정 지점을 넘어서서 수축하지 않아야하지만 (고정 값) 더 큰 공간을 수용하도록 확장 할 수있는 레이아웃에 이상적입니다 (상대 값).

 width: max(80%, 300px); 

이 예에서 요소의 너비는 항상 더 큰 옵션입니다 : 컨테이너의 80% 또는 300px. 작은 스크린 또는 단단한 컨테이너에서 80%가 300px 미만으로 계산하면 요소의 너비는 여전히 300px 이상입니다. 더 큰 화면에서 요소는 컨테이너 너비의 80%로 확장되지만 300px 아래로 줄어들지 않습니다. 이 접근법은 작은 화면에서 작은 화면에서 요소가 사용할 수 있도록하는 데 도움이되는 반면, 큰 화면에서는 스케일링 할 수 있습니다.

Min ()과 max ()의 상대와 고정 값을 결합하는 이유는 무엇입니까?

CSS에서 Min () 또는 Max ()를 처음 만나면 왜 값이 백분율과 픽셀과 같은 값을 결합하는지 궁금 할 것입니다. 각 단위 유형은 반응 형 디자인에서 다른 역할을하기 때문입니다.

예를 들어, Min (100px, 200px)은 항상 100px로 해결됩니다. 두 개의 고정 값 중 가장 작은 것을 선택하고 있습니다. 그러나 Min (100%, 500px)과 같은 장치를 혼합하면 브라우저에 다음과 같이 말합니다. 이것은 그것을 반응하게 만듭니다.

%, VW 및 EM과 같은 상대 단위는 부모 요소, 뷰포트 또는 상속 된 글꼴 크기 등 컨텍스트에 따라 조정됩니다. PX와 같은 고정 장치는 CSS에서 일정하게 유지되어 예측 가능합니다.

고정 및 상대 값을 결합하여 Min () 및 Max ()를 사용하면 크기 경계를 강요하면서 적응하는 유연한 디자인을 구축 할 수 있습니다.

divi와 함께 min () 및 max ()를 사용하는 방법

이제 우리는 min ()과 max ()의 기본 사항을 다루었으므로 몇 가지 예를 논의 해 봅시다.

1. 필드가 적은 응답 행 너비

컨테이너 요소에서 Divi와 함께 너비와 최대 너비를 항상 설정할 수있었습니다. 그러나 Min () 및 Max ()와 같은 CSS 기능을 열면 동일한 작업을 수행 할 수 있지만 하나의 디자인 필드를 사용하고 페이지에서 CSS를 조금 덜 출력하십시오).

Divi에서는 요소 (우리의 경우 행), 디자인 탭으로 이동 한 다음 크기를 조정 하면 너비를 조정하기위한 몇 가지 옵션이 있습니다. 너비를 95%로 만들고 최대 너비를 900px로 설정하면 모바일 장치에서 잘 보이지는 않지만 데스크톱 디스플레이의 왼쪽과 오른쪽에 많은 음의 공간이있는 레이아웃도 제공합니다.

이것은 행에 이와 같은 CSS를 사용하는 것과 같습니다.

 .container {
width: 95%;
max-width: 900px;
} 

Divi 5의 고급 장치를 사용하면 이제 더 통합 된 또 다른 옵션이 있습니다. 너비 필드 내에서만 필요한 모든 것을 입력하고 동일한 결과를 얻을 수 있습니다.

이것은 행 컨테이너 에서이 CSS를 사용하는 것과 같습니다.

 .container {
width: min(95%, 900px);
} 

CSS의 한 줄 대 두 줄입니다. 더 중요한 것은 너비와 최대 너비를 모두 설정하는 대신 최소 ()를 사용할 때마다 한 단계와 값이 필요합니다. 어느 쪽이든 옵션은이 비디오에서 보여준 것과 동일한 결과를 얻습니다.

이 특정 사용 사례는 그다지 흥미 진진한 것은 아니지만 최소 () 및 max ()의 힘과 이전 CSS 선언을 대체 할 수있는 방법을 보여줍니다.

간격, 사이징 또는 경계에 Min () 또는 Max ()를 사용하는 경우 (Divi 5의 더 많은 필드에서 사용할 수 있음) 옵션 그룹 사전 설정 또는 요소 사전 설정에 설정하는 것이 좋습니다. 이렇게하면 어디에서 사용하든 일관된 스케일링을 얻을 수 있습니다.

2. 행 패딩 및 테두리 너비

아래에는 화면 크기가 커짐에 따라 더 많은 내부 패딩과 더 큰 테두리 너비를 보증하는 디자인이 있습니다. 이를 수용하기 위해 Max () 함수를 사용하여 오른쪽/왼쪽/상단/하단 테두리 너비와 행에 패딩을 설정했습니다. CSS는 다음과 같습니다.

 .container {
padding: max(10px, 2vw) max(10px, 2vw) max(10px, 2vw) max(10px, 2vw);
border-width: max(5px, 1vw) max(5px, 1vw) max(5px, 1vw) max(5px, 1vw);
} 

즉, Max () 함수는 적용되는 상황에서 더 큰 것을 선택할 수 있습니다. 양쪽에서 가장 작은 패딩은 10px이고 가장 큰 것은 2VW입니다. 마찬가지로, 테두리 너비의 경우 가장 작은 것은 5px이고 가장 큰 것은 1VW입니다).

이 상황에서 Max ()가 디자인> 간격> 패딩 에서 어떻게 보이는지는 다음과 같습니다.

이 상황에서 Max ()가 디자인> 테두리>경계 너비에서 보이는 것은 다음과 같습니다.

함께, 나는 줄 안쪽에 패딩이 적고 작은 스크린에서 테두리 너비가 얇아지는 효과를 얻습니다. 그러나 화면 크기가 커지고 VW 값 (상대 값 임)이 고정 된 픽셀 값보다 커짐에 따라 확장됩니다.

이렇게하면 더 작은 화면의 가용성을 최대화하는 데 도움이되지만 더 넓은 화면은 공간을 더 채울 수 있습니다.

3. 전체 높이 영웅 섹션

섹션 높이에서 최소 () 값을 사용하면 적어도 특정 높이이지만 간단한 최소 () 기능을 사용하여 전체 화면 높이 (및 더 이상 없음)의 90%에 맞는 영웅 섹션을 만들 수 있습니다.

 height: min(800px, 90vh) 

이것은 더 큰 (키가 큰) 화면을 제외하고는 완전히 높이 높은 영웅 섹션을 갖는 효과가 있으며, 그 다음 섹션 아래에 표시됩니다. Divi 사이즈 설정에서는 두 가지 다른 필드 입력 (너비 및 최대 넓음)으로 수행 할 수 있지만 최소 () 함수를 사용하면 크기의 한 필드 만 사용하여 동일한 효과를 얻을 수 있습니다.

영웅 섹션을 대부분의 화면 크기의 주요 요소로 유지하지만 더 큰 화면 해상도를 가진 소수의 경우에는 너무 커지 않습니다.

4. 글꼴 크기

글꼴 크기에 최소 또는 최대를 사용하면 정적 픽셀 값보다 더 동적 인 크기를 달성 할 수 있습니다. 이를 위해서는 Max ()를 사용하여 화면 크기 조건에 따라 글꼴 크기를 확장하려고합니다. 사용하려는 작은 절대 크기로 픽셀/REM 값을 설정하고 상대 값을 사용하여 상향 조정하십시오.

1REM은 루트 글꼴 크기와 같습니다 (일반적으로 사이트 스타일에서 사용자 정의되지 않는 한 16px). 최대 (1REM, 2VW) 의 글꼴 크기는 두 값 중 더 큰 것을 취하며 결코 16px보다 작습니다.

보시다시피, 가장 작은 장치에서 글꼴 크기는 1REM/16px로 설정됩니다. 특정 시점에서 값이 클수록 2VW가되고 글꼴 크기를 위로 스케일링하여 화면 크기가 커짐에 따라 글꼴이 커집니다.

글꼴 크기의 경우 Min 또는 Max를 사용하지 않고 Clamp ()를 사용하는 것이 좋습니다. Min/Max는 한 방향으로 만 동적 스케일링을 제공하며 Clamp ()의 효과에 가까워 지려면 Min/Max 글꼴 사이징 규칙을 여러 중단 점으로 설정해야합니다 (가능하지만 단순히 클램프를 사용하기가 훨씬 쉽습니다).

min ()/max ()와 clamp ()의 차이

clamp ()를 min ()과 max ()의 조합으로 이해할 수 있습니다. Clamp ()는 최소 캡에 대해 하나의 값, 하나의 값은 최대 캡으로, 세 번째 값 (중간)을 최소와 최대 사이의 변화 경사를 결정하는 선호 값으로 사용합니다.

An example:

 font-size: clamp(16px, 4vw, 40px); 

이것은 당신이 설정하는 글꼴 크기가 16px보다 작거나 40px보다 크지 않다는 것을 의미합니다. 그러나 화면 크기에 따라 변하는 속도는 중앙에서 선호하는 값에 의해 결정됩니다.

Clamp () 사용에 대한 전용 기사를 읽으려면 클램프 () 기능을 생성하는 선호하는 유체 타이포그래피 생성기를 확인하십시오.

Divi 5를 사용하여 Min () 및 Max ()를 사용해보십시오

Min () 및 max ()는 clamp () 또는 calc ()만큼 관심을 가지지 않을 수 있지만 Divi 5의 더 똑똑하고 단순하며 깨끗한 반응 형 디자인을위한 필수 도구입니다.

이러한 CSS 기능은 웹 사이트의 대응 성을 제어하는 ​​고유 한 방법을 제공합니다. Min () 및 Max ()를 사용하는시기를 이해하면 응답 디자인이없는 방법이 궁금합니다. 그들은 최신 브라우저에서 완전히 지원되며 Divi는 간단하게 구현합니다. Divi 5는 새로운 웹 사이트에서 사용할 준비가되었습니다.