CSS 단위 이해 (및 사용 방법)

이전에 웹 코드에서 다양한 CSS 단위를 보았을 것입니다. 그러나 어떻게 작동하는지 이해하면 더 의도적으로 사용할 수 있습니다. 이 게시물에서는 CSS 단위가 실제로 무엇인지, 레이아웃에 영향을 미치는 방법 및 Divi 5 내부를 사용하여보다 반응 적으로 설계하는 데 도움이됩니다.

Divi 5는 CSS 유닛에 대한 기본 지원을 제작자로 바로 가져옵니다. 새로운 Advanced Units 기능 덕분에 사용자 정의 코드없이 %, EM, REM, VW 등을 사용할 수 있습니다.

CSS 단위는 무엇입니까?

CSS 단위는 브라우저에 얼마나 크든 작은 무언가가 있어야하는지 알려줍니다. 제목 크기, 섹션의 너비 또는 요소 간 간격을 설정하든 해당 공간을 정의하기 위해 장치를 사용합니다. 그것들이 없으면 브라우저는 당신의 가치로 무엇을 해야할지 전혀 모른다.

예를 들어, 쓰기 너비 : 100은 브라우저에 아무 의미가 없습니다. 그러나 100px 또는 100%와 같은 장치를 추가하면 이제 원하는 것을 정확히 알고 있습니다.

각각 다른 CSS 값을 사용하는 4 개의 상자 로이 예제를 사용하십시오.

• 첫 번째는 너비를 사용합니다 : 100. 기술적으로 유효하지만 많은 브라우저는 100%로 렌더링됩니다.
• 두 번째 (100px)는 고정 너비를 사용합니다.
• 부모 컨테이너에 대한 세 번째 및 네 번째 (100% 및 60%) 스케일.

기술적으로 유효하지 않더라도 너비가있는 첫 번째 상자 : 100이 여전히 전체 너비로 보이는 이유가 궁금 할 것입니다.

너비 : 100은 단위가 없기 때문에 브라우저에서 무시됩니다. 그러나이 경우 CSS가 허용 되었기 때문에가 아니라 DIV와 같은 블록 레벨 요소가 기본적으로 부모의 전체 너비에 걸쳐 있기 때문에 상자는 여전히 컨테이너를 가로 질러 뻗어 있습니다. 유효하지 않은 CSS가 100%로 해석 된 결과가 아니라 기본 동작의 우연의 일치입니다.

인기있는 CSS 단위

PX와 %는 일반적으로 나타나지 만, 다른 많은 사람들은 언제 사용 해야하는지 알면 유용합니다.

글꼴 크기 설정, 섹션 너비 정의, 패딩 및 여백 조정 및 유연한 그리드 레이아웃 구축에서 웹 디자인의 모든 곳에서 이러한 장치를 볼 수 있습니다. 그들은 당신의 레이아웃이 어떻게 보이고 행동하는지에있어 가장 중요한 결정 요인 중 하나입니다. 효과적인 디자인에서 어떤 장치를 더 많이 사용하는지, 우리는 곧이를 얻을 것입니다.

그러나 먼저 모든 CSS 장치가 절대와 상대의 두 가지 주요 유형에 속한다는 것을 아는 것이 도움이됩니다.

절대 및 상대 단위

레이아웃이 다른 화면 크기에서 잘 작동하기를 원한다면 차이를 이해하는 것이 필수적입니다.

절대 단위

절대 단위에는 고정 값이 있습니다. 즉, 100px로 설정하면 사용자가 전화, 태블릿 또는 대규모 데스크탑 모니터에 있든 항상 100 픽셀이됩니다. 이 장치는 화면 크기 나 주변 레이아웃에 응답하지 않으므로 정확한 제어가 필요할 때 훌륭합니다.

일반적으로 정밀도가 유연성보다 중요한 곳에서 테두리, 아이콘 크기 또는 고정 된 상자 그림자에 종종 사용됩니다.

그러나 같은 정밀도는 문제를 일으킬 수 있습니다. 큰 화면에서 완벽하게 보이는 디자인은 오버플로, 어색하게 축소되거나 더 작은 장치에서 완전히 깨질 수 있습니다. 절대 장치는 적응하지 않기 때문에 신중하게 사용하지 않는 한 레이아웃을 견고하게 느낄 수 있습니다.

상대 단위

이름에서 알 수 있듯이 주변 환경을 기준으로 조정됩니다. 특정 크기로 잠겨있는 대신 컨텍스트 (부모 요소, 뷰포트 등)에 따라 확장됩니다. 이것은 반응 형 디자인에 훨씬 더 유연하게 만듭니다.

일부 유닛은 상위 요소의 크기에 반응하고 다른 유닛은 페이지의 루트 글꼴 크기에 반응하며 일부 유닛은 브라우저 창 자체에도 반응합니다. 다음은 몇 가지 주요 것입니다.

• 부모 컨테이너와 비늘이 비늘입니다.
• EM은 부모 요소의 글꼴 크기에 따라 조정됩니다.
• REM은 페이지의 루트 글꼴 크기를 따릅니다.
• VW와 VH는 브라우저 뷰포트의 너비와 높이에 반응합니다.

그것들은 다른 환경에 적응하기 때문에이 장치는 화면에서 자연스럽게 느껴지는 레이아웃을 구축하는 데 도움이됩니다. 주어진 공간으로 확장 또는 수축하여 콘텐츠를 읽을 수 있고 디자인의 균형을 유지합니다.

이 유연성이 왜 중요한지 확인하기 위해 빠른 예를 살펴 보겠습니다. 이미지 섹션을 작성하고 너비를 1200px로 설정한다고 가정 해 봅시다.

큰 모니터에서는 완벽하게 보일 수 있지만 768 픽셀의 화면 너비가있는 태블릿에서는 이미지가 오버플 로워서 이상하게 보일 수 있습니다. 이제 사용해보십시오.

width: 100%;

이것은 브라우저에 이미지가 컨테이너의 너비를 채우도록하도록 지시합니다. 화면이 넓거나 좁 든 이미지가 자동으로 조정됩니다.

상대 단위를 사용하면 실제 이점은 응답 성입니다. 크기 만 할당하는 것이 아니라 브라우저에 다른 시나리오에서 레이아웃이 어떻게 작동하는지에 대한 명확한 지침을 제공합니다. 그리고 제대로 얻을 때 콘텐츠는 모든 화면에 적합합니다.

합리적 인 상대 장치를 사용하면 엄격한 레이아웃을 피하고 중단 요소의 필요성을 줄이며 디자인을 쉽게 관리 할 수 있도록합니다. Divi를 사용하면 다른 CSS 장치를 사용하기 위해 단일 줄의 코드를 작성할 필요가 없습니다. 빌더에서 원하는 장치를 선택하고 레이아웃이 실시간으로 응답하십시오.

어떤 CSS 장치를 사용 해야하는지

절대 단위와 상대 단위의 차이점을 이해 했으므로 다음 단계는 각각을 언제 사용 해야하는지 아는 것입니다.

일반적으로 레이아웃이 다른 화면 크기에 적응해야 할 때 상대 장치로 이동하십시오. 단면 너비, 타이포그래피, 요소 간 간격 또는 전체 페이지 레이아웃에 적합합니다. 그들은 자동으로 스케일링하기 때문에 모든 장치에 대해 별도의 스타일을 만들지 않고 일관성을 유지하는 데 도움이됩니다.

반면에 화면 크기에 관계없이 무언가를 유지하기를 원할 때 절대 단위가 도움이됩니다. 국경, 아이콘, 고정 간격 또는 작은 시각적 세부 사항을 생각하십시오.

선택을 안내하기위한 몇 가지 예는 다음과 같습니다.

• 아이콘 크기와 같이 정확한 제어가 필요할 때 PX를 사용하십시오. 적응하지 않으므로 레이아웃 너비 나 텍스트를 피하십시오.
• 요소가 컨테이너로 스케일링되기를 원할 때 % 사용하십시오.
• 부모 요소의 글꼴 크기로 간격을 확보 할 때 EM을 사용하십시오.
• 사이트에서 일관된 크기를 원하는 경우 REM (일반적으로 루트 EM이라고 함) 을 사용하십시오. 루트 글꼴 크기를 기반으로하므로 간격 및 타이포그래피를 계속 예측할 수 있습니다.
• 뷰포트 (장치 화면의 전체보기)에 직접 응답하는 전체 화면 섹션, 영웅 영역 또는 간격에 VW 및 VH를 사용하십시오.

보다 고급 제어를 위해 CSS 기능을 사용하여 장치를 결합 할 수도 있습니다. calc ()는 최소 기본으로 반응 간격을 위해 1REM + 5VW와 같은 값을 혼합 할 때 편리합니다. 클램프 ()는 한계 사이에서 성장하거나 축소되는 유체 값을 설정하는 데 이상적이며 미디어 쿼리에 대한 더 깨끗한 대안이됩니다.

결국, 올바른 장치를 선택하는 것은 각 요소가 다른 시나리오에서 어떻게 행동 해야하는지 고려하고 가장 잘 달성하는 유닛을 선택하는 것이 포함됩니다.

Divi의 고급 단위는 코딩없이 반응 적으로 구축 할 수 있습니다

우리는 이미 CSS 장치가 레이아웃 동작을 제어하는 방법을 이미 보았습니다. Divi 5는 이러한 제어를 취하고 고급 장치와 함께 사용하기 쉽게 만듭니다.

YouTube 채널을 구독하십시오

Builder에 직접 구축 된 %, EM, REM, VW 및 VH에 대한 기본 지원을 통해 코드 패널을 열 필요없이 실제 CSS 값을 모듈, 섹션, 간격 및 타이포그래피에 적용 할 수 있습니다. 모든 숫자 필드에서 고급 장치 드롭 다운에서 선호하는 장치를 선택하고 값을 조정 한 다음 변경 사항을 실시간으로 확인하십시오.

그리고 그것은 거기서 멈추지 않습니다. Divi를 사용하면 시각적 빌더에서 calc () 및 clamp ()과 같은 고급 CSS 기능을 사용할 수 있습니다. 즉, 유체 값, 믹스 장치 및 동일한 수준의 정밀 개발자가 손으로 쓴 CSS에서 얻을 수있는 수준의 정밀도를 만들 수 있지만 시각적으로 생성 할 수 있습니다.

다른 화면 크기에서 유동적으로 스케일링하는 글꼴 크기가 필요하십니까? 클램프 ()를 사용하십시오. 고정 및 유연한 값의 혼합으로 간격을 상쇄하고 싶습니까? calc ()을 시도하십시오. Divi는 모든 것을 즉시 그리고 눈에 띄게 처리합니다.

더 이상 디자인과 코드 사이를 추측하거나 전환하지 않습니다. Divi는 귀하의 Elements가 기기 전체에서 어떻게 행동하고 행동하는지를 완전히 제어하여 반응 형 로직을 올바르게 얻을 수 있도록 시각적 힘과 즉각적인 피드백을 제공합니다.

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

CSS 장치는 Divi의 고급 워크 플로와 완벽하게 동기화됩니다

이미 Divi가 건축업자 내부의 개별 CSS 장치를 쉽게 사용하는 방법을 이미 보았습니다. 그러나 실제 강점은 해당 유닛이 전체 사이트에서 함께 일할 때 보여줍니다. 디자인 변수, 옵션 그룹 사전 설정 및 Calc () 및 Clamp ()와 같은 고급 CSS 기능과 같은 기능이 실제로 빛납니다.

Divi는 CSS 장치를 필드에 입력 할 수 없습니다. 코드를 쓰지 않고 전체 설계 시스템에 통합하는 데 도움이됩니다. 모든 것은 일관되고 확장 가능하며 유지하기가 더 쉽습니다.

Divi가 CSS 장치를 유연하고 논리 중심의 워크 플로의 일부로 사용하는 데 어떻게 도움이되는지 살펴 보겠습니다.

1. 설계 변수로 레이아웃 로직을 만듭니다

모든 프로젝트에서 시간을 절약하는 가장 쉬운 방법 중 하나는 레이아웃 로직을 선불로 계획하는 것입니다. 여러 장소에서 동일한 간격 또는 글꼴 크기를 조정하는 대신 해당 값을 한 번 정의하고 Divi의 디자인 변수로 전체 설계에서 재사용합니다.

2REM, 5VW 또는 Calc (2REM + 1VW)와 같은 공식과 같은 실제 CSS 장치를 사용하여 –Card-Padding 또는 –Section-Gap과 같은 재사용 가능한 값을 만들 수 있습니다. 일단 설정되면이 값은 모듈, 행 및 섹션에 적용하여 모든 것을 일관성있게 유지할 수 있습니다.

나중에 변경하려는 경우 변수를 업데이트하면됩니다. 변화는 그것이 사용되는 모든 곳을 반영하여 개별 설정을 사냥하는 것의 앞뒤를 절약합니다. CSS 장치는 Divi 시스템에 바로 제작되었으므로 추측에 의존하지 않고 실제 CSS 논리를 시각적으로 적용합니다. 따라서 프로젝트가 커짐에 따라 레이아웃을보다 관리하기 쉽고 확장 가능하며 조정하기가 더 쉽습니다.

2. Clamp () 및 calc ()를 시각적으로 사용하십시오

CSS 기능은 clamp () 및 calc ()와 같은 반응 레이아웃을 구축하는 데 도움이됩니다. 미디어 쿼리를 쓰지 않고 화면 크기에 걸쳐 조정하는 유연한 값을 정의 할 수 있습니다. 따라서 각 장치에 대해 고정 크기를 설정하는 대신 클램프 (1REM, 2VW, 2.5REM)와 같은 논리를 작성하여 브라우저가 설정 한도 사이에 부드럽게 확장 할 수 있습니다. 또는 Calc (100VH - 80px)을 사용하여 뷰포트 높이에 따라 영웅 섹션을 조정하십시오.

일반적으로 CSS를 수동으로 작성해야합니다. Divi에서는 숫자 필드 내에서 직접 입력 할 수 있습니다.

또한 CSS 단위는 두 기능 모두에서 지원되므로 REM, VW 및 PX와 같은 값을 혼합하여 원하는 동작을 정확하게 얻을 수 있습니다. 입력 할 때 결과가 실시되므로 건축업자를 떠나지 않고 쉽게 실험하고 반응을 얻을 수 있습니다.

3. 옵션 그룹 사전 설정으로 단위 로직을 저장하십시오

고급 장치 또는 공식을 사용하여 레이아웃을 설정하면 다시 재건 할 필요가 없습니다. Divi를 사용하면 옵션 그룹 사전 설정으로 Padding : Clamp (1REM, 3VW, 2REM)와 같은 스타일 로직을 저장할 수 있습니다.

즉, 다음에 동일한 간격 또는 레이아웃 패턴이 필요할 때 동일한 설정을 적용하지 않고 저장된 사전 설정 만 적용합니다.

사전 설정 내부에서 설계 변수를 사용하는 경우 더 좋습니다. 전체 웹 사이트의 스타일을 수정하는 것은 변수 변경에 달려있는 상호 연결된 시스템을 쉽게 만들 수 있습니다.

Divi에서는 CSS 장치를 사용하는 것이 단지 크기가 아닙니다. 그것은 행동에 관한 것입니다. 설정 한 각 값은 레이아웃 전체에서 일관되게 적응하고 스케일을 적응시키고 유지하는 시각 시스템의 일부가됩니다. 그리고 그것은 모두 빌더에 내장되어 있기 때문에 코딩과 같은 느낌이 들지 않고 논리로 디자인하는 것과 비슷합니다.

Divi는 CSS 장치를 시각적 초강력으로 바꿉니다

CSS 장치를 사용하기 위해 CSS를 작성할 필요가 없습니다. Divi 5는 모두 실시간으로 탐색, 적용 및 미리보기를 할 수있는 시각적 인터페이스로 가져옵니다. 간격을 조정하거나 유체 타이포그래피를 구축하거나 변수 및 사전 설정으로 레이아웃 로직을 만드는 경우 Divi를 사용하면 시각적으로 모든 작업을 수행 할 수 있습니다.

시도해 볼 준비가 되셨습니까? Divi 5를 다운로드하고 디자인에서 실제 CSS 장치를 사용하십시오.