절대 및 상대 CSS 단위의 차이

올바른 CSS 단위를 선택하는 것은 기술적 인 세부 사항 이상입니다. 디자인이 모든 장치에서 일관되고 유연하며 반응이 좋은 상태를 유지하는 데 도움이됩니다. 픽셀은 쉬운 옵션처럼 보일 수 있지만 항상 다른 화면에서 예측할 수있는 것은 아닙니다.

이 게시물에서는 절대 단위와 상대 단위의 차이점을 설명하고 Divi 5가 처음부터보다 효과적으로 사용하는 데 어떻게 도움이되는지 보여줍니다.

CSS 단위는 설명했다 : 왜 웹 사이트에 중요한가?

CSS 장치는 사이트에 모든 것이 얼마나 큰지 제어합니다. 잘못 선택하면 다른 장치에서 디자인이 중단됩니다.

대부분의 사람들은 간단하고 이해하기 쉽기 때문에 픽셀을 사용합니다. 그러나 픽셀은 자연스럽게 반응 형 디자인에 잘 적응하지 않습니다. 화면 변경에 응답하려면 Clamp ()와 같은 미디어 쿼리 또는 CSS 기능이 필요합니다.

다른 장치는 자동으로 적응합니다. 뷰포트 장치는 브라우저 창으로 스케일입니다. EM 크기와 같은 상대 단위는 주변 텍스트를 기반으로합니다. 다른 단위는 다른 문제를 해결합니다. 잘 선택하면 설계는 추가 작업없이 장치에 적응합니다.

절대 단위를 분해 : 고정 크기가 가장 잘 작동하는 경우

절대 단위는 주변에서 무슨 일이 있어도 같은 크기를 유지합니다. 너비의 20 픽셀로 무언가를 설정하면 누군가가 전화로 보거나 거대한 데스크탑 모니터를 보든 20 픽셀을 유지합니다. 화면 크기, 상위 요소 또는 브라우저 설정에 따라 값이 변경되지 않습니다.

픽셀 (px)이 공간을 지배합니다. 센티미터, 밀리미터 및 인치와 같은 다른 절대 단위는 존재하지만 물리적 측정이 중요한 인쇄 설계에 속합니다. 웹 디자인의 경우 픽셀은 필요한 거의 모든 절대 측정을 처리합니다.

픽셀이 작은 세부 사항에 적합한 이유

일부 디자인 요소에는 정확한 제어가 필요합니다. 1 픽셀 테두리는 어디에서나 바삭하고 얇게 보일 것입니다. 드롭 그림자는 옳은 모습을 위해 정밀도가 필요합니다. 작은 아이콘은 장치에서 일관성을 유지할 때 더 잘 작동합니다.

픽셀은 이러한 작은 세부 사항에 대해 훌륭하게 작동합니다. 버튼 테두리는 정확히 2 픽셀 두께 여야하며, 미묘한 그림자는 정확히 4 픽셀 오프셋 여야하며 내비게이션 아이콘은 정확히 24 픽셀 스퀘어 여야합니다.

이러한 측정은 화면 크기로 확장 할 필요가 없습니다. 데스크탑에서 1 픽셀 인 테두리는 모바일에서 1 픽셀을 유지해야합니다. 모바일에서 2 픽셀을 만드는 것은 두껍고 어리석게 보일 것입니다.

다른 요소는 픽셀과도 잘 작동합니다. 브랜드 로고는 종종 브랜드 일관성을 위해 픽셀을 사용합니다. 점이나 선과 같은 작은 장식 요소는 정확한 크기가 필요합니다. 로딩 스피너 및 진행 막대는 고정 된 치수로 더 잘 작동합니다.

미디어 쿼리로 픽셀을 반응합니다

픽셀은 완전히 단단하지 않습니다. 미디어 쿼리를 사용하면 다양한 화면 크기로 다른 픽셀 값을 교환 할 수 있습니다. 제목은 데스크탑에서 32 픽셀 텍스트를 사용한 다음 태블릿에서 28 픽셀로, 24 개의 전화기로 이동할 수 있습니다.

이 접근법은 상대 단위보다 더 많은 작업이 필요합니다. 브레이크 포인트를 정의하고 각 화면 크기에 대해 별도의 규칙을 작성해야하지만 각 크기의 상황을 완전히 제어 할 수 있습니다.

이 접근법은 각 화면 크기에서 특정 제어를 원할 때 잘 작동합니다. 특정 차원에서 텍스트가 전화 대 태블릿 대 데스크탑에서 어떻게 보이는지 정확하게 결정합니다. 놀라움이 없습니다.

추가 CSS는 정확한 크기가 필요한 요소에 가치가 있습니다. 로고는 각 장치에 적합한 크기를 유지할 때 가장 잘 보입니다. 내비게이션 요소는 종종 올바르게 작동하기 위해 특정 차원이 필요합니다. 장식 테두리와 그림자는 정확한 측정에 따라 바삭 바삭 해 보입니다.

상대 단위 이해 : 웹 디자인에 대한 유연한 접근

대조적으로 상대 단위는 주변의 내용에 따라 스트레칭 및 수축. 이러한 유연성으로 인해 웹 사이트는 휴대 전화, 태블릿 및 컴퓨터에서 작동하게합니다. 고정 상태를 유지하는 절대 단위와 달리 상대 단위는 화면 크기, 부모 요소 또는 사용자 선호도에 적응합니다.

이 단위는 픽셀이 만드는 문제를 해결합니다. 75 픽셀 넓은 버튼은 데스크탑에서 잘 작동하지만 모바일에서는 지배적입니다. 상대 장치는 자동으로 조정하여 모든 화면 크기에 대해 별도의 스타일을 작성하지 못하게합니다.

EM 유닛이 서로 건축하는 방법

EM 장치는 직계 상위 요소의 글꼴 크기에 상대적입니다. 기본 글꼴 크기가 16px이고 컨테이너를 글꼴 크기로 설정 한 경우 1.25EM, 이는 20px가됩니다. 1.5EM으로 설정된 하위 요소는 이제 24px가 아닌 30px (1.5 × 20px)입니다. 뿌리가 아닌 부모를 기반으로하기 때문입니다.

이 복합 효과는 텍스트 주변의 확장 가능한 간격에 강력합니다. 그러나 EM 기반 글꼴 크기로 중첩 요소를 유지하면 값이 빠르게 증가 할 수 있습니다. EM 장치는 패딩, 여백 또는 요소가 근처 텍스트와 밀접하게 연결된 요소에 가장 적합합니다. 레이아웃 전체에 걸쳐 일관된 크기를하려면 REM을 대신 사용하는 것을 고려하십시오.

제거 장치는 물건을 단순하게 유지합니다

REM은 항상 루트 HTML 요소를 살펴 봅니다. 2REM으로 무언가를 설정하면 페이지의 어느 곳에서나 같은 크기입니다.

루트의 경우 대부분의 브라우저는 16px로 기본값입니다. 그래서 1rem = 16px, 2rem = 32px. 루트 크기와 모든 REM 기반 스케일을 함께 변경하십시오.

뷰포트 장치는 화면을 따릅니다

뷰포트 장치는 브라우저 창으로 스케일입니다. 50VW = 화면 너비의 절반, 100VH = 전체 화면 높이. 이것은 화면을 채우는 영웅 섹션에 좋습니다.

모바일 브라우저는 일반적으로 뷰포트 장치에서는 잘 작동하지 않습니다. 스크롤시 주소 막대가 숨어와 쇼를하고 주소 표시 줄이 나타날 때 100VH 섹션이 잘릴 수 있습니다.

Vmin과 Vmax는 화면의 너비와 높이를 비교 한 다음 하나를 선택하십시오. Vmin은 더 작은 것을 사용합니다. 전화를 똑바로 세우면 너비가 더 작기 때문에 너비의 50vmin = 50%입니다. 조경으로 회전하면 높이가 작아 지므로 50vmin은 높이의 50%로 전환됩니다. Vmax는 반대입니다. 항상 더 큰 차원을 선택합니다. 이것은 더 큰 측정으로 확장 해야하는 요소에 유용합니다.

컨테이너에 적응하는 비율

백분율 기반 너비는 항상 부모 요소의 너비와 관련이 있습니다. 높이 백분율은 동일한 방식으로 확장 할 수 있지만 부모가 높이가 정의 된 경우에만; 그렇지 않으면 예상대로 작동하지 않을 수 있습니다.

패딩 및 마진 백분율은 상단 및 하단 값에 대해서도 부모의 너비에서 항상 계산됩니다. 이를 통해 특히 유체 설계에서 일관된 간격 및 비례 레이아웃을 만들 수 있습니다.

차이

절대 단위는 단단한 통치자와 같지만 상대 단위는 측정 테이프처럼 행동합니다. 둘 다 사물을 측정하지만 조건이 변할 때 매우 다르게 반응합니다. 비교 방법은 다음과 같습니다.

대부분의 개발자는 두 가지를 모두 사용하게됩니다. 작은 물건에 대한 픽셀은 바삭 바삭하고 상대적인 단위를 유지 해야하는 큰 구조물에 대한 상대 단위를 사용합니다.

디자인에 적합한 장치를 선택합니다

웹 사이트의 다른 부분마다 다른 접근 방식이 필요합니다. 일부 요소는 모든 곳에서 동일한 크기를 유지하는 반면 다른 요소는 화면 크기 또는 사용자 설정에 따라 적응합니다. 대부분의 개발자들은 이것을 지나치게 생각합니다. 보다 간단한 방법이 있습니다. 유닛을 해당 요소와 일치시킵니다.

먼저 사용자를 생각해보십시오

사람들은 예상치 못한 방식으로 사이트를 탐색합니다. 누군가 전화를 방문합니다. 텍스트가 작게 보이므로 확대하기 위해 꼬집습니다. rem 단위로 제작되면 모든 것이 비례 적으로 함께 자랍니다. 어디에서나 픽셀을 사용했다면 상황이 겹치고 부러지기 시작합니다.

주요 내비게이션은 페이지 전체에 걸쳐 일관된 크기가 필요합니다. 제거 장치는 기본 글꼴 크기에 묶습니다. 로고는 브랜드 일관성을 위해 정확한 차원이 필요합니다. 픽셀은 그것을 바삭 바삭하게 유지합니다.

많은 사용자가 가독성을 높이기 위해 브라우저의 기본 글꼴 크기를 변경합니다. 픽셀을 하드 코드하면 선호도를 무시합니다. 누군가가 125%로 확대되면 픽셀 기반 레이아웃이 분리됩니다. 상대 단위는 자동으로 적응합니다.

올바른 장치를 선택하는 빠른 방법

세부 사항에서 길을 잃지 않고 선택을 무너 뜨리는 방법은 다음과 같습니다.

• 텍스트 및 간격 : EM 또는 REM을 사용하십시오. 텍스트 크기로 버튼 패딩 스케일. 여백은 제목에 비례합니다.
• 화면 관련 요소 : 뷰포트 장치를 사용합니다. 대부분의 화면을 채우는 영웅 섹션. 특정 화면 백분율을 차지하는 사이드 바.
• 정확한 제어가 필요한 요소 : 픽셀을 사용하십시오. 바삭 바삭하게 유지되는 얇은 경계. 완벽한 정렬을 가진 작은 아이콘. 정확한 오프셋으로 그림자를 떨어 뜨립니다.
• 컨테이너 기반 요소 : 사용 백분율. 부모에게 적응하는 유연한 그리드. 컨테이너로 스케일링하는 이미지.

간단하게 시작하십시오. 장식 비트, 텍스트 및 관련 간격, 화면 크기 섹션의 뷰포트 장치 및 유연한 컨테이너의 백분율에 픽셀을 사용하십시오. 관련 요소에 대한 시스템을 선택하고 고수하십시오.

일반적인 CSS 단위 실수를 피하십시오

안전하다고 느끼기 때문에 모든 것을 위해 픽셀을 선택합니다. 버튼은 노트북에서 75 픽셀 폭이 완벽 해 보입니다. 그런 다음 누군가가 휴대 전화에서 귀하의 사이트를 열고 같은 버튼이 화면의 절반을 먹습니다. 로고는 정확한 크기가 필요하지만 콘텐츠 영역에는 유연성이 필요합니다. 이 접근법을 무작위로 섞으면 혼란을 만듭니다. 따라서 표준 CSS 장치 실수를 피하는 데 대한 몇 가지 팁이 있습니다.

1. 모든 것을 위해 픽셀을 선택하십시오

20 픽셀은 20 픽셀을 의미하기 때문에 픽셀은 안전하다고 느낍니다. 단순 해요? 300 픽셀 넓은 사이드 바는 데스크탑에서 잘 작동합니다. 모바일에서는 콘텐츠를 얇은 스트립으로 분쇄하는 거대한 블록이됩니다. 16 픽셀 텍스트는 고밀도 화면에서 읽을 수 없습니다.

누군가가 브라우저의 글꼴 크기를 증가 시키면 픽셀 기반 레이아웃이 적응하지 않습니다. 텍스트는 컨테이너를 넘어냅니다. 버튼은 다른 요소 뒤에서 사라집니다. 사이드 바가 주요 컨텐츠에 충돌합니다.

얇은 경계, 작은 아이콘 및 그림자 그림자와 같은 정확한 제어가 필요한 물건에 대한 픽셀을 저장하십시오. 다른 모든 것에 대해 상대 단위를 사용하십시오.

2. 통제 불능 상태가되는 EM 장치

EM 단위는 부모의 글꼴 크기를 기준으로 스케일입니다. 중첩을 시작할 때까지 유연하게 들립니다. 컨테이너가 1.2EM을 사용하고 내부의 제목이 1.5EM을 사용한다고 가정 해 봅시다. 1.2 × 1.5 = 1.8이기 때문에 제목은 루트에 비해 1.8EM이됩니다. 둥지를 유지하면 크기가 눈덩이를 할 수 있습니다. 한 부모 글꼴 크기를 변경하고 모든 것이 하류 변화를 변경합니다.

제거 장치를 수정합니다. 그들은 항상 루트 요소를 참조하므로 2REM은 어디에서 사용하든 동일한 것을 의미합니다. 따라서 타이포그래피를 쉽게 확장하고 제어 할 수 있습니다.

3. 모바일에서 뛰어 다니는 뷰포트 장치

영웅 섹션을 100VH로 설정하면 화면을 완벽하게 채 웁니다. 모바일 브라우저를 제외하고 스크롤 할 때 주소 표시 줄을 숨기고 표시합니다. iOS의 Safari 및 Android의 Chrome이 모두이 작업을 수행합니다. 주소 막대가 사라지면 100VH 섹션이 갑자기 너무 키가 큽니다. 다시 나타나면 콘텐츠가 잘립니다.

최신 DVH 장치는 변화하는 뷰포트 크기에 적응합니다. 그러나 브라우저 지원은 여전히 따라 잡고 있습니다. 폴백으로 CSS 사용자 정의 속성을 사용하는 JavaScript 솔루션이 작동합니다.

고정 크기로 접근성을 깨뜨립니다

사용자는 종종 가독성을 향상시키기 위해 브라우저의 기본 글꼴 크기를 조정합니다. 고정 된 픽셀을 사용하여 텍스트, 버튼 및 간격을 하드 코드하면 레이아웃이 깨질 수 있습니다. 텍스트는 오버플로가 될 수 있으며 버튼을 사용할 수없고 중요한 요소가 더 높은 줌 레벨에서 사라질 수 있습니다.

WCAG 및 Apple의 표준과 같은 접근성 지침에 따르면 터치 대상은 44 × 44 CSS 픽셀 이상 권장됩니다. 더 작은 대상은 모터 장애가있는 사용자가 정확하게 활용하는 데 어려움을 겪을 수 있습니다.

고정 크기를 잠그는 대신 REM과 같은 확장 가능한 장치를 사용하여 사용자 기본 설정을 존중하는 레이아웃을 만듭니다. 기본 글꼴 크기를 요소에 설정 한 다음 사이트 전체의 상대 장치로 제목, 버튼 및 간격을 일관되게 스케일링하십시오.

5. 고밀도 스크린의 작은 텍스트

다른 장치는 픽셀을 다르게 포장합니다. 휴대 전화 화면은 인치당 400 픽셀을 가질 수 있고 모니터에는 100이 있습니다. 동일한 픽셀 수는 각 장치마다 완전히 다르게 보입니다.

14 픽셀 텍스트는 데스크탑 모니터에서 잘 보입니다. 고밀도 전화 화면에서 동일한 14 개의 픽셀이 미세하게됩니다. 사용자는 삐걱 거리며 핀치로 묶습니다.

상대 장치를 사용할 때 운영 체제 및 브라우저는 자동으로 스케일링을 처리합니다. 1REM 텍스트는 고밀도 스크린에서 더 커지고 저밀도에서는 더 작습니다.

6. 계획없이 단위를 혼합합니다

일부 제목에는 REM을 사용하고, 다른 제목, EM 및 바디 텍스트에는 픽셀을 사용합니다. 다른 요소가 다른 속도로 스케일하기 때문에 디자인에는 리듬이 부족합니다. 관련 요소에 대한 시스템을 선택하십시오. 제목이 REM을 사용하는 경우 모든 제목이 REM을 사용해야합니다. 간격이 EM을 사용하는 경우 관련 간격을 위해 EM을 계속 사용하십시오.

장치 및 사용자 설정에서 선택을 테스트하십시오. 누군가가 글꼴 크기를 증가시킬 때 디자인의 모습을 확인하십시오. 몇 분 동안 테스트하면 나중에 버그 수정 시간이 절약됩니다.

Divi 5의 고급 장치가 CSS 관리를 단순화하는 방법

CSS 장치와의 레슬링은 빨리 늙어갑니다. 가치 조정, 다른 장치에서 테스트하고 깨진 레이아웃을 고정하는 데 몇 시간을 소요합니다. Divi 5는 이것을 완전히 변경합니다. 새로운 시스템은 단위 선택에서 추측을 취하고 코드를 터치하지 않고 반응 형 동작을 시각적으로 제어합니다. 그러나 먼저 Divi가 무엇인지 이해합시다.

Divi는 무엇입니까?

Divi는 WordPress를 실제로 자신의 사이트가 좋아 보이기를 원하는 사람들에게 의미있는 것으로 바꾸는 웹 사이트 빌더입니다.

페이지 주위에 200 개 이상의 모듈을 드래그하십시오. 텍스트가 앉은 곳에 바로 변경하십시오. 새로운 색상을 선택하고 즉시 나타나는 것을 지켜보십시오. 당신은 당신에게있는 미리보기 모드가 아니라 실제 일을하고 있습니다.

테마에는 빨지 않는 2000 개 이상의 레이아웃이 포함됩니다. 식당, 사진 작가, 컨설턴트 및 수십 명의 다른 비즈니스를위한 실제 디자인. 좋아하는 것을 찾아서 옳을 때까지 조정하십시오.

테마 빌더를 사용하면 모든 것을 제어 할 수 있습니다. 일반적으로 보이지 않는 헤더를 만들고 눈에 띄는 블로그 페이지를 구축하며 404 페이지를 사람들이 실제로보고 싶은 것으로 바꾸십시오.

AI를 사용하여 웹 사이트 구축

Divi AI는 디자인 영역에서 바로 작동합니다. 텍스트가 필요하십니까? 그것은 그것을 씁니다.

이미지를 원하십니까? 그것은 그들을 만듭니다. 사진 편집을 설명 할 수 있으며 작업을 처리합니다.

마찬가지로 코드 및 새 섹션의 경우.

Divi Quick Sites는 빈 페이지를 응시할 때 어디서부터 시작 해야할지 모르겠지만 끔찍한 순간을 해결합니다. 스타터 사이트에서 우리 팀은 실제로 디자인되었으며 독창적 인 이미지와 아트 워크로 완성하십시오.

또는 빠른 사이트 + Divi AI를 Divi를 구축하고 처음부터 무언가를 구축하도록 비즈니스를 설명하십시오.

이 AI 건축 사이트에는 실제 헤드 라인, 복사 및 이미지가 말한 내용과 일치하는 이미지가 있습니다. AI로 모든 것을 생성하거나, 플래시에서 사진을 찍거나, 자신의 샷을 위해 자리 표시자를 떨어 뜨립니다. 글꼴과 색상을 먼저 설정 한 다음 AI가 주변에서 작동하도록하십시오. 나중에 모든 것을 편집 할 수 있습니다.

Divi 5의 새로운 것

Divi 5는 처음부터 모든 것을 재건합니다. 우리는 오래된 단축 코드 시스템을 폐기하고 오늘날의 웹 표준에서 더 잘 작동하는 것을 만들었습니다. 사이트가 더 빨리로드되고 편집자가 더 빠르게 반응하며 이전에는 불가능한 도구에 액세스 할 수 있습니다.

하지만 새로운 것은 무엇입니까? 보세요 :

Flexbox 레이아웃 시스템

Divi에서 현대적이고 반응이 좋은 웹 사이트를 구축하는 것이 더 빠르고 직관적입니다. 전체 Flexbox 레이아웃 시스템을 Divi 5에 도입하여 수직 정렬, 컨텐츠 포장 및 간격에 대한 간단한 컨트롤을 제공합니다. 코드와 싸우거나 복잡한 해결 방법을 사용하지 않고 원하는 정확한 레이아웃을 만듭니다.

옵션 그룹 사전 설정

옵션 그룹 사전 설정을 사용하면 어디서나 혼합하고 일치시킬 수있는 스타일을 저장할 수 있습니다. 그림자 스타일을 한 번은 한 번, 버튼, 카드, 섹션 등 필요한 것이 무엇이든 사용하십시오. 사전 설정을 업데이트하면 전체 사이트에서 모든 것이 즉시 변경됩니다.

디자인 변수

브랜드 색상, 글꼴 및 간격은 모두 한 지점에 살고 있습니다. 하나의 변수를 편집하여 파란색에서 녹색으로 전환 할 수 있습니다. 전체 사이트가 자동으로 업데이트되므로 수십 개의 모듈을 통해 사냥 할 필요가 없습니다.

고급 장치

이제 Divi 5 : PX에서 VW/VH로 모든 고급 CSS 장치를 사용할 수 있습니다. CSS 기능은 현재 빌더에서도 작동합니다. 화면 높이의 80% 인 섹션을 헤더에서 뺀 섹션을 원하십니까? calc (80vh - 100px)을 입력하면 설정이 설정됩니다. 인터페이스는 clamp (), min (), max ()를 처리합니다.

중첩 행

줄은 지금 필요한만큼 깊이있는 다른 행으로 들어갑니다. 구조와 싸우지 않고 복잡한 잡지 레이아웃 또는 세부 제품 페이지를 구축하십시오. 각 레벨은 간격 및 장치 동작을 완전히 제어 할 수 있습니다.

원 클릭 편집

편집을 시작하려면 페이지의 어느 곳을 가리키고 클릭하십시오. 작은 편집 버튼을 검색하거나 여러 메뉴를 통해 탐색하는 날이 우리 뒤에 있습니다.

사용자 정의 가능한 중단 점

Divi 5의 사용자 정의 가능한 브레이크 포인트를 사용하면 7 가지 화면 크기를 활성화 할 수 있습니다. 큰 모니터의 경우 1200px, 태블릿의 경우 900px 또는 전화의 경우 650px이든 각 브레이크 포인트를 디자인이 필요한 위치에 정확하게 설정하십시오.

멀티 패널 작업 공간

원하는대로 작업 공간 패널을 정리하십시오. 다른 인터페이스 영역 사이에서 지속적으로 점프하는 대신 여러 설정 패널을 동시에 열어 두십시오.

속성 관리

외과 적 정밀도로 사이트의 다른 부분간에 특정 요소를 복사하십시오. 한 요소에서 간격을 잡고, 다른 요소의 색상 또는 세 번째의 사전 설정 만 잡으십시오. 더 이상 전부 또는 전혀 전송되지 않습니다.

캔버스 스케일링

다른 장치에 사이트가 나타나는 방법을 미리 볼 수 있도록 작업 공간 크기를 조정하십시오. 별도의 미리보기 모드로 전환하지 않고도 모바일, 태블릿 및 데스크탑보기를 참조하십시오.

성능 향상

이제 모든 것이 더 쇠약해진 느낌이 듭니다. 페이지가 더 빨리로드되고, 빌더가 더 빨리 응답하며, 복잡한 레이아웃은 예전처럼 인터페이스를 낮추지 않습니다.

모듈 그룹

여러 모듈을 하나의 컨테이너에 번들로 묶습니다. 텍스트 블록, 이미지 및 버튼을 단일 장치로 처리하십시오. 함께 이동하고 함께 스타일을 지정하고 모든 것을 다른 페이지에 복사하십시오.

HSL 색상 시스템

색조, 채도 및 가벼움 제어로 색 구성표를 구축하십시오. 전문적으로 보이는 브랜드 색상 변형을 만듭니다. 수학은 즐거운 조합을 자동으로 만듭니다.

더 많은 도중에 ...

• 루프 빌더 : 블로그 그리드 또는 제품 목록과 같은 컨텐츠를 반복하기위한 템플릿을 작성하십시오. 한 번 디자인하고 시스템이 실제 콘텐츠로 채우게하십시오.
• WooCommerce 모듈 : 제품 그리드, 개별 제품 페이지 및 카트 기능을위한 저장 별 모듈. 온라인 상점에는 판매를 위해 특별히 구축 된 모든 온라인 상점이 필요합니다.

Divi 5에서 CSS 변수 사용

여러 요소에서 일관된 값이 필요할 때 웹 사이트 스타일이 지루해집니다. CSS 변수는 재사용 가능한 값을 한 위치에 저장하여이를 해결합니다. Divi 5는 기존 CSS 변수와 자체 설계 변수 시스템을 모두 지원하므로 사이트 모양을 관리하는 방법에 대한 유연성을 제공합니다.

Divi 5는 입력 필드에서 직접 CSS 장치를 수락합니다. 이전에 픽셀 만 사용할 수있는 REM, VW 또는 백분율 값을 작성하십시오. 빌더는 추가 설정 없이이 장치를 즉시 처리합니다.

CSS 기능은 같은 방식으로 작동합니다. 유체 타이포그래피의 경우 클램프 (1REM, 4VW, 3REM)를 입력하거나 반응성 폭에 대해서는 최소 (500px, 90%)을 입력하십시오. Visual Builder는 디자인 할 때 이러한 계산을 실시간으로 처리합니다.

변수는이 시스템과 완벽하게 통합됩니다. –header-Height : 80px와 같은 CSS 변수를 정의한 다음 모든 필드에서 var (–header-Height)를 사용하여 참조하십시오. Divi는 구문을 인식하고 저장된 값을 자동으로 적용합니다.

이 직접 통합은 동일한 프로젝트 내에서 전통적인 장치, 최신 CSS 기능 및 변수를 혼합 할 수 있음을 의미합니다. 경계에는 픽셀, 섹션의 경우 뷰포트 장치 및 반복 측정의 변수를 사용하십시오.

설계 변수 : 고급 장치를 적용하는 더 나은 방법

설계 변수는 CSS 변수에 대한 Divi 5의 내장 대안입니다. 코드 지식 없이도 시각적 인터페이스를 통해 전적으로 작동합니다. Divi의 변수 관리자 패널을 사용하여 이러한 변수를 생성하고 관리합니다.

이 변수는 단순한 숫자와 색상을 넘어 확장됩니다. 완전한 이미지 URL, 텍스트 내용 또는 복잡한 스타일 값을 저장하십시오. 디자인 변수를 업데이트하면 IT를 사용하는 모든 요소가 전체 웹 사이트에서 즉시 변경됩니다.

Divi 5는 다양한 컨텐츠 요구를 처리하기위한 몇 가지 변수 유형을 제공합니다.

• 색상 변수는 16 진 코드, 그라디언트, 브랜드 색상, 텍스트 색상, 배경 및 경계를 저장합니다.
• 글꼴 변수는 테마 커스터마이저 제한을 넘어 전 세계적으로 타이포그래피를 관리하고 모든 텍스트 영역에서 작동합니다.
• 숫자 변수는 간격, 크기 및 애니메이션을 위해 CSS 단위 + CSS 기능을 Clamp (), calc (), min () 및 max ()와 같은 CSS 기능을 허용합니다.
• 이미지 변수는 로고, 배경 및 패턴과 같은 재사용 가능한 이미지를 저장합니다.
• 텍스트 변수는 연락처 정보, 태그 라인 및 비즈니스 세부 사항과 같은 재사용 가능한 텍스트 문자열을 저장합니다.
• URL 변수는 소셜 미디어, 계열사, 프로모션 및 Tel/Mailto 링크에 대한 재사용 가능한 링크를 저장합니다.

숫자 설계 변수가있는 CSS 단위 설정

숫자 변수는 일관성을 유지하는 설계에 대한 빌딩 블록을 제공합니다. 다른 요소에서 동일한 측정을 반복 할 때 가장 잘 작동합니다. 또한 CSS 코드로 씨름하는 것보다 훨씬 간단합니다.

Divi 인터페이스에서 변수 관리자를 찾으십시오. 새 숫자 변수를 만들고 디자인에 맞는 값을 제공하십시오. 모호한 레이블 대신 "버튼 패딩"또는 "섹션 갭"과 같은 명확한 이름을 사용하십시오.

가변 라이브러리 생성

다음과 같은 일반적인 변수를 추가 할 수 있습니다.

• 3REM에서 "버튼 높이"-텍스트 크기로 버튼 스케일
• 8VH의 "섹션 패딩"-간격이 스크린 높이에 적응합니다
• 0.5REM의 "Border-Radius"-둥근 모서리는 비례합니다
• 75VH의 "Hero-Height"-영웅 섹션은 대부분의 화면을 채 웁니다
• 1px의 "Fine Vorder"-선명한 선은 날카 로워집니다
• 클램프 (1REM, 2.5VW, 2REM)의 "Fluid-Text"-텍스트가 부드럽게 스케일링됩니다
• 최소 (90%, 1200px)의 "Content-Width"-컨테이너는 읽을 수 있습니다
• Calc (2REM + 2VW)의 "Dynamic-Gap"-화면 크기로 간격이 커집니다.

모듈, 섹션 또는 행 설정에 적용하십시오.

REM 변수는 텍스트 크기로 척도입니다. VH 장치는 작은 화면에 적응합니다. clamp ()가있는 변수는 최소 값과 최대 값 사이에서 자동으로 조정됩니다.

연결된 사전 설정

변수로 요소를 스타일링 한 후 간격을 옵션 그룹 사전 설정으로 저장하십시오. 이 사전 설정은 이제 번호 변수에 대한 참조를 보유합니다.

이 사전 설정을 다른 모듈에 적용하면 동일한 변수 기반 간격을 상속합니다. 변수 관리자의 2REM에서 3REM에서 "Card-Padding"을 업데이트하고 사전 설정 업데이트를 사용하는 모든 요소는 자동으로 업데이트됩니다.

사전 설정은 동일하게 유지되지만 값은 변경됩니다. 이것은 색상, 글꼴, 이미지, 텍스트 및 URL과 같은 모든 설계 변수에 대해 작동합니다. 사전 설정은 정적 대신 역동적이되어 단일 변경으로 사이트 전체의 업데이트가 가능합니다.

CSS 단위와 Divi 5를 사용하여 더 나은 웹 사이트를 구축하십시오

CSS 단위를 올바르게 얻으면 웹 사이트 구축 방법이 변경됩니다. 더 많은 레이아웃을 수정하고 장치에서 작동하는 디자인을 생성합니다. 픽셀 정밀한 세부 사항을 못 박았습니다. 상대 단위는 다른 화면 및 사용자 선호도에 적응합니다.

Divi 5는 고급 CSS 유닛으로 건물을 산들 바람으로 만듭니다. 건축업자에 모든 장치를 입력하고 결과를 즉시 확인하십시오. 설계 변수는 사이트에서 측정을 일관되게 유지합니다. 하나의 값을 변경하고 연결된 모든 것이 자동으로 업데이트됩니다.

귀하의 웹 사이트는 브레이크 포인트 전투 및 끝없는 레이아웃 수정보다 더 나은 자격이 있습니다. Divi 5를 시도하고 CSS 장치가 좌절하는 디자인 세션을 매끄러운 워크 플로로 바꾸는 것을보십시오.