Divi의 상대 위치 이해 및 사용

상대 위치 속성은 위치 유형 중 가장 신비한 것일 수 있습니다. 그러나 작동 방식을 이해하면 Divi에서 사이트를 디자인할 때 유리하게 사용할 수 있습니다. 우리가 발견한 것은 당신을 놀라게 할 수 있습니다.

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

• Divi의 4가지 포지셔닝 유형 개요
• Divi에서 상대 위치가 요소를 "위치 지정"하는 방법
• Divi에서 상대 위치를 사용하는 5가지 이유
• 상대 위치 대 마진
• 상대 위치 대 변환 변환

확인 해봐!

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

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

정적(기본값)

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

상대적인

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

순수한

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

결정된

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

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

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

개요에서 언급했듯이 상대 위치 유형은 요소가 문서의 일반적인 흐름(페이지의 HTML)에 남아 있기 때문에 정적 "위치"와 유사합니다. 실제 차이점은 요소에 상대 위치를 할당하면 이제 요소를 배치하는 데 사용할 수 있는 새로운 옵션이 있다는 것입니다. 이러한 옵션에는 위쪽, 아래쪽, 왼쪽 및 오른쪽 속성과 Z 인덱스 속성이 포함됩니다.

Divi에서 이러한 추가 위치 옵션은 상대 위치가 선택되면 위치 옵션 그룹에서 찾을 수 있습니다.

상대 위치와 함께 오프셋 사용

오프셋 원점과 오프셋 값은 함께 작동하여 상위 컨테이너 내에서 원하는 위치에 요소를 배치합니다. 이 예제에는 상대 위치, 왼쪽 상단 오프셋, 수직 오프셋 25px, 수평 오프셋 25px가 있는 모듈이 있습니다. 오프셋 값이 요소를 오프셋 원점에서 수평 및/또는 수직으로 어떻게 이동하는지 확인하십시오.

다음은 오프셋이 같지만 오른쪽 상단 오프셋 원점이 있는 동일한 모듈입니다.

다음은 동일한 오프셋과 오른쪽 하단 오프셋 원점이 있는 동일한 모듈입니다.

그리고 여기에 동일한 오프셋과 왼쪽 하단 오프셋 원점이 있는 동일한 모듈이 있습니다.

간격 놀람 없음

상대 위치 지정을 사용하면 오프셋(위, 아래, 왼쪽, 오른쪽)을 사용하여 요소를 이동한 후 요소의 실제 공간이 원래 위치에 유지됩니다. 요소의 새 위치는 페이지에 있는 나머지 요소의 간격에 영향을 미치거나 이동하지 않습니다. 그것은 기본적으로 몸을 떠난 영혼과 같은 다른 요소 위에 떠 있습니다.

상대 위치를 사용하는 이유

#1 절대적으로 배치된 요소에 대한 상위 컨테이너를 렌더링하려면

이것은 아마도 상대 위치 유형의 가장 인기 있는 응용 프로그램일 것입니다. 절대적으로 배치된 요소는 가장 가까운 위치에 있는 조상에 상대적이기 때문에 단순히 상대적인 위치를 지정하여 조상 중 하나를 위치 지정 요소로 만들 수 있습니다(기본 정적 위치는 기술적으로 "위치 지정"되지 않음). 이렇게 하면 문서 흐름이 제자리에 유지되고(예: 정적) 절대 요소에 대한 컨테이너를 선택할 수 있습니다.

#2 페이지의 다른 요소에 영향을 주지 않고 요소를 이동합니다.

상대 위치를 사용하면 오프셋을 사용하여 다른 요소에 영향을 주지 않고 항목을 정렬할 수 있습니다. 그리고 Divi를 사용하면 드래그 가능한 UI를 활용하여 실시간으로 시각적으로 요소를 배치할 수 있습니다.

#3 다른 요소를 겹칠 때 Z 인덱스를 사용하려면

기본적으로 정적 요소는 상대 위치가 지정되지 않는 한 z축에서 재정렬할 수 없습니다. 상대 위치에 있으면 요소는 문서의 정상적인 흐름에 계속 위치합니다. 이제 우리는 Z 인덱싱을 활용하여 서로 겹칠 때 특정 순서로 요소를 배치할 수 있습니다.

#4 포지션 목적으로 음수 마진을 사용하지 않으려면

상대 위치 지정은 원래 위치의 공간을 남깁니다. 그러나 음수 여백을 사용하면 콘텐츠와 원래 공간이 모두 재배치됩니다. 예를 들어, Divi의 행에 음수 상단 여백을 추가하여 행이 그 위의 행과 겹치도록 하면 모든 행/내용이 함께 위로 이동합니다. 이것은 상대 위치 오프셋을 대신 사용하여 피할 수 있는 정리해야 할 약간의 혼란을 남깁니다.

다음은 모듈을 위쪽으로 이동하기 위해 음수 위쪽 여백을 사용할 때 발생하는 일의 예입니다. 아래의 나머지 요소가 어떻게 만들어졌는지 주목하세요.

동일한 모듈에 상대 위치를 지정하면 수직 오프셋을 사용하여 페이지의 나머지 간격에 영향을 주지 않고 모듈을 위로 가져올 수 있습니다.

Divi에서 요소의 위치를 ​​지정하기 위해 종종 음수 여백을 사용했지만 상대 위치 지정을 대신 사용할 수 있다면 좋은 생각이 아닐 것입니다. 여백은 요소의 상자 모듈과 관련이 있으므로 상대 위치 지정과 같이 상위 컨테이너에서 요소 오프셋을 배치하는 것이 아니라 요소 자체 및 주변에 간격을 추가하기 위한 것입니다.

상대 위치 대 변환 변환

상대 위치는 페이지에서 위치 요소로 변환 변환을 사용하는 것과 실제로 유사합니다. 둘 다 페이지의 다른 요소에 영향을 주지 않고 실제 공간을 원래 위치에 유지하면서 요소를 이동합니다.

애니메이션 및 전환(예: 호버 효과)에 번역이 더 좋습니다.

그러나 번역은 더 빠르고 부드러운 전환을 제공하기 때문에 애니메이션 및 전환(예: 호버 효과)에 가장 적합한 것 같습니다. 상대 요소에 애니메이션을 적용하거나 전환하기 위해 위쪽, 아래쪽, 왼쪽 및 오른쪽 오프셋을 사용하면 더 고르지 않을 수 있으며 브라우저가 필요 이상으로 더 열심히 작동할 수 있습니다.

상대 길이 단위는 다르게 반응합니다.

반응형 디자인에 상대 길이 단위(예: % 또는 vw)를 사용하는 경우 상대 위치 및 변환 변환과 다르게 작동합니다.

상대 위치와 수평 오프셋이 50%인 Divi 모듈은 상위 컨테이너(또는 열) 너비의 50%에 해당하는 양만큼 모듈을 수평으로 이동합니다.

변환 변환(X축)이 50%인 Divi 모듈은 모듈 자체 너비의 50%에 해당하는 양만큼 모듈을 수평으로 이동합니다.

상대 위치 결합 및 중심 요소로 변환 변환

방금 다룬 것처럼 상대 위치는 부모에 상대적이고 변환 변환 속성은 요소 자체에 상대적입니다. 이 때문에 우리는 원하는 방식으로 요소를 배치하기 위해 두 가지를 조합하여 사용할 수 있습니다. 이 기술을 사용하여 컨테이너의 요소를 중앙에 배치할 수도 있습니다.

예를 들어 상대 위치 수평 오프셋을 사용하여 모듈을 열 너비의 정확히 50% 오른쪽에 배치할 수 있습니다.

그런 다음 translate 속성을 사용하여 모듈을 왼쪽으로 50%(모듈 너비의) 이동합니다. 이렇게 하면 모듈의 너비에 관계없이 모듈이 열 중앙에 유지됩니다.

마지막 생각들

이 글을 쓰기 전의 나와 같다면 상대 위치 유형을 잘 이해하지 못했거나 잘 사용하지 못했을 것입니다. 아마도 이 상대적 위치의 가장 놀라운 측면은 페이지의 나머지 디자인에 영향을 미치는(또는 영향을 미치지 않는) 방법입니다. 절대 요소와 함께 작동할 뿐만 아니라 완벽한 위치에 요소를 배치하기 위한 변환 변환과도 잘 작동합니다.

상대 위치 유형에 대한 경험은 무엇입니까?

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

건배!