Divi의 절대 위치 이해 및 사용 가이드

절대 위치 속성은 Divi의 새로운 위치 옵션에서 사용할 수 있는 네 가지 주요 위치 유형 중 하나입니다. 이 튜토리얼에서는 Divi에서 요소에 절대적인 위치를 부여하는 것이 무엇을 의미하는지, Divi 사이트를 디자인할 때 이를 유리하게 사용할 수 있는 방법을 알아봅니다.

이 게시물에서 다룰 내용은 다음과 같습니다.

• Divi의 4가지 포지셔닝 유형 개요
• 절대 위치가 Divi에서 요소를 "위치 지정"하는 방법
• Divi에서 절대 위치 사용의 장점과 단점
• 절대 위치와 함께 위치 포인트 사용
• 예제 사용 사례: 동일한 높이의 블러브에 대해 절대적으로 버튼 위치 지정

확인 해봐!

Divi의 4가지 포지셔닝 유형 개요

절대 위치는 Divi에서 사용할 수 있는 네 가지 위치 옵션 중 하나입니다. 다음은 각각에 대한 간략한 개요입니다.

정적(기본값)

정적 요소는 페이지에서 정상적인 흐름이나 요소 순서를 유지하기 때문에 기술적으로 "위치 지정"되지 않으며 다른 위치 지정 요소와 같이 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성에 응답하지 않습니다. 오프셋은 정적/기본 위치의 요소에 대해 Divi에서 사용할 수 있습니다. 정적 위치는 모든 CSS 요소의 기본 위치입니다. Divi에서 모듈의 기본 위치를 선택하면 정적 위치를 선택하는 것입니다. 행 및 섹션과 같은 Divi의 일부 요소는 기본적으로(정적 위치가 아닌) 상대적 위치를 갖는다는 점도 언급할 가치가 있습니다.

상대적인

상대적으로 배치된 요소는 페이지의 정상적인 흐름을 따른다는 점에서 일종의 정적 요소와 같습니다. 주요 차이점은 상대적으로 배치된 요소는 top, bottom, left 및 right 속성을 사용하여 배치할 수 있다는 것입니다. 또한 정적 요소와 달리 Z 인덱스 속성을 사용하여 위치를 지정할 수도 있습니다.

순수한

절대 위치에 있는 요소는 일반적인 문서 흐름에서 벗어나므로 페이지에 요소에 대한 실제 공간이 생성되지 않습니다. 실제 공간을 차지하는 페이지의 다른 요소 위에 떠 있는 요소로 생각할 수 있습니다. 가장 가까운 위치에 있는 상위 컨테이너를 기준으로 배치됩니다.

결정된

절대 위치와 마찬가지로 고정 위치의 요소는 페이지의 정상적인 흐름을 벗어나 페이지 내에 실제 공간이 생성되지 않습니다. 절대 위치와 고정 위치의 주요 차이점은 고정 위치가 브라우저 창이나 뷰포트에 상대적이라는 것입니다. 즉, 요소가 페이지의 정상적인 흐름 내 어디에 있든 일단 고정된 위치가 지정되면 해당 위치는 이제 브라우저 창과 직접 관련됩니다. top, bottom, left, right 속성을 사용하여 뷰포트 내에서 요소를 배치할 수 있습니다. 고정 요소는 종종 페이지의 다른 요소 뒤나 앞에 위치하므로 Z 인덱스는 고정 요소를 다른 요소 위에 정렬하는 데 도움이 됩니다.

참고: CSS에는 고정이라고 하는 또 다른 유형의 위치 지정이 있습니다. 고정 위치 요소는 컨테이너로 스크롤할 때까지(상위 값에 의해 결정되는 특정 지점에서) 상대적으로 위치가 지정된 요소처럼 작동합니다. 그런 다음 사용자가 컨테이너 끝까지 스크롤할 때까지 요소가 고정(또는 고정)됩니다. 그러나 다른 요인으로 인해 기능이 제한될 수 있으므로 고정 위치는 약간 예측할 수 없습니다. 이러한 이유로 Divi에서는 기본 제공 옵션 내에서 고정 옵션을 사용할 수 없습니다. 그러나 Divi에서 position:sticky를 사용하는 방법이 있습니다.

절대 위치가 Divi에서 요소를 "포지셔닝"하는 방법

개요에서 언급했듯이 절대 위치 요소는 가장 가까운 위치에 있는 상위 컨테이너를 기준으로 위치합니다. 위치 지정 상위 컨테이너는 정적(즉, 상대, 절대, 고정) 이외의 위치 값이 지정된 모든 컨테이너입니다. 그렇기 때문에 대부분의 경우 부모 컨테이너(또는 열) 내에 절대적으로 요소(예: 모듈)를 배치하려는 경우 자식 모듈을 절대적으로 배치하기 전에 열에 상대 위치를 지정해야 합니다. 그렇지 않은 경우 절대 위치 모듈은 정적 이외의 위치를 ​​가진 가장 가까운 조상에 대해 문서/페이지를 더 찾아봅니다. 이러한 이유로 Divi에서는 섹션과 행 모두 기본적으로 상대적 위치를 가지므로 해당 요소 내에 절대적으로 요소를 쉽게 배치할 수 있습니다.

다음은 열에 대한 Divi의 기본 위치를 재정의하고 정적으로 설정한 경우 절대 위치 지정 모듈이 수행하는 작업에 대한 설명입니다. 열에 더 이상 위치가 없으므로 모듈은 이제 위치(상대)가 있는 행을 기준으로 합니다.

Divi에서 절대 위치 사용의 장점과 단점

절대 위치는 요소를 배치하는 다양한 방법 중 하나일 뿐입니다. 따라서 다른 것 대신에 절대 위치를 사용할 때의 장점과 단점 중 일부를 다루는 것이 유용할 것입니다.

혜택

다음은 Transform Translate 또는 Margins와 같은 다른 위치 지정 속성보다 절대 위치를 사용하는 몇 가지 이점입니다.

좋은 디자인 도구

절대 위치 정상적인 흐름에서 벗어나 위치 지정이 발생한 후 요소의 실제 공간이 디자인에 영향을 미치지 않습니다. 이것은 또한 단점이 될 수 있지만 레이아웃에 추가 공간을 추가하는 데 필요할 수 있는 추가 정리 없이 이미 설정된 디자인에 요소를 추가할 때마다 유용할 수 있습니다. 즉, 기존 요소를 이동하지 않고도 페이지에 요소를 추가할 수 있습니다.

부동 소수점 및 여백에 대한 좋은 대안

절대 위치를 사용하면 부동 요소에 의존하거나 유사한 위치를 달성하기 위해 여백을 사용할 필요가 없습니다. Divi 내 기본 옵션은 아니지만 CSS에 익숙한 사람들은 부동 소수점을 사용하여 요소를 오른쪽이나 왼쪽에 배치할 수 있다는 것을 알고 있습니다. 이는 일부 경우에 약간 버그가 있고 예측할 수 없습니다. 여백을 사용하여 요소를 배치할 때도 마찬가지입니다. 때로는 불필요한 간격을 남기지 않고 요소를 바로 배치하기 위해 정확한 여백 값을 예측하기 어렵습니다. 절대 위치를 사용하는 것은 부동 소수점과 여백 모두에 대해 좋은 "정확한 위치 지정" 대안이 될 수 있습니다.

좋은 브라우저 지원

절대 위치 속성은 모든 주요 브라우저에서 광범위하게 지원되므로 일반적으로 다른 브라우저에서 예기치 않게 문제가 발생하지 않을 것이라고 신뢰할 수 있습니다.

단점

절대 위치를 사용할 때 고려해야 할 몇 가지 단점은 다음과 같습니다.

고립의 위험

절대 위치에 있는 요소는 일반적인 문서 흐름을 벗어나기 때문에 근처에 추가 요소를 추가하기 어려울 수 있습니다. 페이지의 다른 요소와 분리됩니다. 예를 들어 일반적으로 Divi에서 텍스트 모듈 아래에 버튼을 추가하려는 경우 모듈을 추가하기만 하면 자동으로 텍스트 모듈 아래에 위치합니다. 그러나 텍스트 모듈이 절대적으로 배치된 경우 버튼 모듈도 절대적으로 배치한 다음 top, bottom, left 및 right 속성을 사용하여 텍스트 모듈 아래에 버튼을 배치해야 합니다. 그러나 열(상위 모듈 컨테이너)을 절대적으로 배치하여 열 내의 모든 모듈이 일반적인 문서 흐름을 따를 수 있도록 하는 것이 더 쉬울 수 있습니다(예: 하나가 아닌 모듈 그룹 배치).

덜 반응

또한 절대적으로 배치된 요소는 문서 흐름을 벗어나기 때문에 모바일 장치에서 위치 지정을 반응형으로 만드는 것이 어려울 수 있습니다. 실제로 많은 개발자가 반응형 디자인과 관련된 문제 때문에 position:absolute를 기피합니다. 따라서 필요할 때 절대 길이 단위(예: px) 대신 상대 길이 단위(예: vw 또는 %)를 사용하는 것이 중요합니다.

절대 위치와 함께 위치 포인트 사용

Divi 빌더에 내장된 위치 위치 옵션을 사용하면 위치 지점을 클릭하기만 하면 요소의 위치를 ​​정말 쉽게 지정할 수 있습니다. 위치 포인트가 선택되면 수직 및 수평 오프셋을 사용하여 해당 위치 포인트에서 추가 위치 조정을 수행할 수 있습니다.

기본적으로 위치 지점은 왼쪽 상단으로 설정됩니다. 따라서 해당 위치에 수직 및 수평 오프셋을 추가하면 위쪽과 왼쪽에서 추가 간격이 추가됩니다.

오른쪽 상단 모서리 위치에서 수직 오프셋은 위쪽에서 공간을 추가하고 수평 오프셋은 오른쪽에 공간을 추가합니다.

오른쪽 하단 모서리 위치에서 수직 오프셋은 아래쪽에서 공간을 추가하고 수평 오프셋은 오른쪽에 공간을 추가합니다.

왼쪽 하단 모서리 위치에서 수직 오프셋은 아래쪽에서 공간을 추가하고 수평 오프셋은 왼쪽에서 공간을 추가합니다.

중심 절대 요소 조정

중앙 위치가 있는 위치 옵션을 선택할 때마다 Divi는 CSS 속성 조합을 사용하여 크기에 관계없이 요소가 완벽하게 중앙에 오도록 합니다. 예를 들어, 왼쪽 중앙에 위치 위치를 선택하면 Divi는 다음과 같이 요소를 배치합니다.

다음은 백엔드에서 CSS가 어떻게 보이는지입니다.

position: absolute!important;
top: 50%;
bottom: auto;
left: 0px;
right: auto;
transform: translateY(-50%);

top:50%는 요소의 상단을 컨테이너 상단에서 정확히 50% 위치에 배치합니다. transform:translateY(-50%) 는 요소를 자체 높이의 정확히 절반 위로 가져오기 위해 있습니다. 이것은 높이에 관계없이 완벽하게 배치된 요소를 제공합니다.

이것은 중앙 위치에 있는 요소를 추가로 조정(또는 오프셋)하려는 경우에 중요합니다. 이미 사용 중인 값을 모른 채 변환 변환 옵션을 사용하는 실수를 하고 싶지는 않습니다. 이러한 이유로, 수행 중인 작업을 이해하지 않는 한 변환 번역 대신 Divi의 여백 속성을 사용하여 더 작게 조정하는 것이 가장 좋습니다.

변환 변환 옵션을 사용하여 중심 위치에 대한 여러 절대 요소 배치

transform:translate가 어떻게 사용되는지 이해한다면 요소의 너비를 알 필요 없이 가운데에 있는 요소를 오프셋하는 데 실제로 매우 유용할 수 있습니다.

예를 들어 모듈을 Divi의 열과 함께 세로 및 가로 중앙에 배치한다고 가정해 보겠습니다. 이런 식으로 보일 것입니다.

요소를 다음과 같이 변환하면 아무 것도 변경되지 않습니다.

• 변환 번역(Y): -50%
• 변환 번역(X): -50%

Divi가 이미 백엔드에서 자동으로 이 작업을 수행하기 때문입니다. 이것을 알면 변환 변환 옵션을 사용하여 중심점 위치에서 조정할 수 있습니다. 그리고 백분율 길이 단위를 사용하는 경우 100%가 모듈의 너비 또는 높이와 같기 때문에 조정을 위해 모듈의 너비 또는 높이를 알 필요가 없습니다. 따라서 열 중앙에 4개의 모듈을 추가하려는 경우 변환 옵션을 사용하여 절대 위치에 있는 각 모듈을 오프셋할 수 있습니다.

이렇게 하려면 4개의 모듈을 만들고 수직 및 수평 중앙에 위치를 지정하여 모든 절대 위치를 지정합니다.

그런 다음 변환 변환 옵션을 사용하여 모듈의 너비와 높이의 백분율에 따라 모듈의 위치를 ​​적절하게 조정합니다. 예를 들어 모듈에 변환 변환 Y축 값을 -100%로 지정하면 모듈이 모듈의 정확한 높이 위로 올라갑니다. 모듈에 X축 값 -100%를 지정하면 모듈이 모듈의 정확한 너비 왼쪽으로 이동합니다. 이것은 절대적으로 중심에 있는 요소를 결합하는 데 큰 도움이 될 수 있습니다.

예제 사용 사례: 동일한 높이의 블러브에 대해 절대적으로 버튼 위치 지정

Divi에서 절대 위치를 사용하는 실제 응용 프로그램 중 하나는 열 내부에 절대 위치를 지정하여 버튼 위에 있는 콘텐츠의 양(또는 높이)이 변경되더라도 열의 맨 아래에 버튼이 남아 있도록 하는 것입니다. 이는 페이지에 항목을 표시할 때 디자인을 일관되게 유지하는 좋은 방법이 될 수 있습니다.

방법은 다음과 같습니다.

먼저 섹션에 1열 행을 추가합니다.

그런 다음 열에 블러브 모듈을 추가합니다.

다음으로, 블러브 모듈 아래에 버튼 모듈을 추가합니다.

행 설정을 열고 열을 두 번 복제하여 각각 동일한 광고 문구 및 버튼 모듈이 있는 총 3개의 동일한 열을 얻습니다.

그런 다음 행 설정으로 이동하여 열 높이를 균등화하는 옵션을 선택합니다. 이렇게 하면 열이 가장 높은 높이(또는 대부분의 콘텐츠)를 가진 열의 높이로 조정됩니다.

이제 각 열마다 콘텐츠 양이 달라지도록 각 블러브 모듈의 본문 콘텐츠를 업데이트합니다. 아래 버튼이 블러브 모듈 바로 아래 위치로 이동하여 각 버튼이 열 내 다른 위치에 있는 것을 볼 수 있습니다.

다중 선택을 사용하여 각 버튼 모듈을 선택하고 각 버튼에 대해 다음 요소 설정을 업데이트합니다.

• 위치: 절대
• 위치: 왼쪽 하단

이렇게 하면 각 버튼이 열의 왼쪽 하단에 절대적으로 위치하게 됩니다. 그러나 이제 버튼이 페이지 요소의 일반적인 흐름 밖에 있으므로 맨 왼쪽 열에 있는 버튼 및 블러브 모듈과 일부 겹침이 있음을 알 수 있습니다. 이 문제를 해결하려면 다음과 같이 열에 패딩을 추가하여 버튼을 위한 실제 공간을 만들기만 하면 됩니다.

• 패딩: 50px 하단

이제 콘텐츠의 양(또는 광고 문구의 높이)이 변경될 수 있지만 각각에 대해 일관된 버튼 배치가 있는 3개의 추천 항목이 있습니다.

마지막 생각들

이 게시물이 절대 위치 속성과 이 속성이 Divi 내에서 얼마나 강력하게 사용될 수 있는지에 대한 정보를 제공하기를 바랍니다. 위치가 작동하는 방식을 이해하면 웹 사이트를 다음 단계로 끌어 올릴 모든 종류의 정확한 디자인 요소를 추가하는 데 사용할 수 있습니다.

댓글로 여러분의 의견을 기다리겠습니다.

건배!