Divi의 고정 위치 이해 및 사용 가이드

고정 위치 속성은 올바르게 사용하는 방법을 배우는 데 중요한 위치 유형입니다. 고정 요소는 웹사이트에서 사용자 경험을 개선하는 데 중요합니다. 고정 헤더는 웹 페이지를 스크롤할 때 계속 표시되므로 사용자가 사이트를 더 쉽게 탐색할 수 있습니다. 고정 사이드바는 중요한 CTA 및 이메일 옵틴을 계속 표시하여 전환율을 높입니다. 고정 알림 표시줄, 팝업 및 기타 여러 항목도 마찬가지입니다. 고정 위치가 작동하는 방식과 Divi에서 올바르게 사용하는 방법을 이해하면 Divi 사이트를 다음 단계로 끌어올리는 강력한 디자인 도구를 갖게 됩니다.

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

• Divi의 4가지 포지셔닝 유형 개요
• 고정 위치가 Divi에서 요소를 "위치 지정"하는 방법
• Divi에서 고정 위치 옵션 사용하기
• 고정 위치를 사용할 때 염두에 두어야 할 팁
• Divi에서 고정 위치를 사용하는 6가지 유용한 방법

확인 해봐!

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

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

정적(기본값)

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

상대적인

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

자세한 내용은 Divi에서 상대 위치를 이해하고 사용하는 방법에 대한 가이드를 확인하세요.

순수한

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

자세한 내용은 Divi에서 절대 위치를 이해하고 사용하는 방법에 대한 가이드를 확인하세요.

결정된

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

참고: CSS에는 고정이라고 하는 또 다른 유형의 위치 지정이 있습니다. 고정 위치 요소는 컨테이너로 스크롤할 때까지(상위 값에 의해 결정되는 특정 지점에서) 상대적으로 위치가 지정된 요소처럼 작동합니다. 그런 다음 사용자가 컨테이너 끝까지 스크롤할 때까지 요소가 고정(또는 고정)됩니다. 그러나 다른 요인으로 인해 기능이 제한될 수 있으므로 고정 위치는 약간 예측할 수 없습니다. 스티키 포지셔닝은 가까운 장래에 Divi에 내장될 것입니다.

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

개요에서 언급했듯이 고정 위치 유형은 요소가 문서의 일반적인 흐름(페이지의 HTML)에서 벗어나므로 절대 위치와 유사합니다. 문서의 흐름에서 벗어나는 것은 요소가 원래 페이지에 있던 실제 공간을 남기지 않는다는 것을 의미합니다. 다음은 상대 위치가 고정 위치로 변경되는 모듈의 그림입니다. 열 내에서 원래 생성/점유한 영역이 이제 어떻게 사라지고 모듈이 이제 브라우저 창의 왼쪽 상단에 고정되었는지 확인하십시오.

고정과 절대의 가장 큰 차이점은 상위 컨테이너에 상대적인 절대 위치와 달리 고정 위치는 브라우저 창이나 뷰포트에 상대적이라는 것입니다. 이것이 사용자가 페이지를 아래로 스크롤할 때 고정 요소가 보기에 표시되고 절대 위치 요소가 표시되지 않을 수 있는 이유입니다.

다음은 페이지를 아래로 스크롤할 때 세 가지 위치(상대, 절대 및 고정)가 어떻게 작동하는지 보여줍니다. 고정된 모듈은 사용자가 스크롤할 때 제자리에 유지됩니다(브라우저를 기준으로 위치).

Divi에서 고정 위치 옵션 사용하기

Divi에서는 고급 탭 아래의 위치 옵션 그룹 토글에서 고정 위치 옵션을 선택하여 모든 요소에 고정 위치를 지정할 수 있습니다. 상대 위치가 선택되면 추가 고정 위치 옵션(위치, 오프셋, z 인덱스)도 찾을 수 있습니다.

고정 위치의 기준 위치 조정

고정 위치를 선택하면 시각적 위치 인터페이스를 사용하여 기본 위치를 선택할 수 있습니다. 선택한 기본 위치에 따라 새로운 X 및 Y 오프셋 컨트롤을 사용할 수 있게 됩니다.

고정 위치의 오프셋 사용

수직 및 수평 오프셋 컨트롤을 사용하면 위치 축에서 고정 요소의 기본 위치를 추가로 조정할 수 있습니다.

오프셋 원점과 오프셋 값은 함께 작동하여 브라우저 뷰포트 내에서 원하는 위치에 요소를 배치합니다. 이 예에는 고정 위치, 왼쪽 상단 오프셋 원점, 수직 오프셋 50px, 수평 오프셋 50px인 모듈이 있습니다. 오프셋 값이 요소를 오프셋 원점에서 수평 및/또는 수직으로(브라우저의 왼쪽 상단 모서리에서 멀어지는 방향으로) 이동시키는 방법에 주목하십시오.

고정 요소에 대해 Divi에서 수평 및 수직 오프셋 값(예: CSS의 위쪽, 아래쪽, 왼쪽 및 오른쪽 속성)을 사용할 때 해당 값이 브라우저 뷰포트를 기준으로 요소의 위치를 ​​지정한다는 점을 기억하는 것이 중요합니다. Z 인덱스 속성은 고정 요소에서도 유용합니다. 대부분의 경우 이러한 고정 요소가 페이지의 다른 요소 앞에 유지되기를 원하기 때문에 높은 Z 인덱스 값(예: 9999)을 제공해야 합니다.

드래그 가능한 앵커를 사용하여 페이지에서 고정 요소 재배치

요소의 위치를 ​​고정으로 변경하면 요소 위로 마우스를 가져가면 드래그 가능한 앵커가 나타납니다. 이렇게 하면 요소를 끌어 위치를 변경할 수 있습니다. 요소의 위치를 ​​변경하면 해당 X 및 Y 오프셋이 모듈 설정 내에서 조정됩니다.

고정 위치 사용을 위한 몇 가지 팁

모바일용 고정 요소 조정

반응형 디자인을 위해 다른 장치 디스플레이에서 다른 위치와 오프셋을 설정할 수 있다는 것을 잊지 마십시오. 예를 들어 데스크탑에서는 고정 헤더를 원하지만 모바일에서는 그렇지 않을 수 있습니다. 그리고 고정 사이드바는 데스크톱에서는 이해가 되지만 휴대폰 디스플레이에서는 실제로 불가능합니다. 전환하려면 태블릿 및 휴대폰에서 Divi의 위치 옵션을 상대적으로 조정할 수 있습니다. 그러면 문서 흐름 내에서 원래 위치로 다시 스냅됩니다.

고정 요소를 위한 공간 생성

고정 위치는 문서 흐름 외부에 요소를 배치하기 때문에 페이지의 콘텐츠 위에 위치합니다. 따라서 고정 요소가 콘텐츠를 숨기지 않도록 하려면 고정 요소를 위한 공간을 만들어야 합니다. 이것은 여러 가지 방법으로 수행할 수 있지만 일반적으로 페이지 레이아웃에 패딩이나 여백을 추가하여 수행됩니다.

좋은 예는 고정 사이드바입니다. Divi에서 페이지 템플릿에 고정 사이드바를 추가하려면 먼저 기본 콘텐츠 영역의 너비를 줄여서 고정 사이드바에 필요한 공간을 만들어야 합니다. 따라서 섹션을 사용하여 사이드바를 만드는 경우 섹션에 고정 위치, 높이 100%, 너비 300px를 지정할 수 있습니다.

그런 다음 게시물 콘텐츠 모듈(페이지의 기본 콘텐츠 영역)을 유지하는 다른 섹션에 페이지 왼쪽의 사이드바 너비를 수용하기 위해 300px의 왼쪽 여백을 제공해야 합니다.

고정 요소에 더 높은 Z 인덱스 사용

페이지에서 고정 요소에 적절한 공간이 제공되지 않으면 페이지의 다른 콘텐츠와 겹칩니다. 대부분의 경우 고정된 요소가 스크롤하는 동안 페이지의 다른 요소와 충돌할 때 (상단에) 보이는 상태로 유지되기를 원할 것입니다. 이렇게 하려면 고정 요소에 더 높은 Z 인덱스를 추가하여 Z 공간의 다른 모든 콘텐츠 위에 유지되도록 할 수 있습니다. 어떤 값을 줄지 모르겠다면 9999와 같은 큰 숫자를 추가할 수 있습니다.

고정 위치를 사용하는 6가지 방법

#1 고정 헤더

새로운 고정 위치 옵션의 가장 좋은 용도 중 하나는 고정 헤더를 만드는 것입니다. Divi 테마 빌더를 사용하여 완전히 사용자 정의 헤더를 만들고 전체 섹션을 고정할 수 있습니다.

방법 게시

다음은 Divi에서 고정 헤더를 빌드하는 방법에 대한 게시물입니다.

• Divi의 위치 옵션으로 고정 헤더를 만드는 방법

#2 고정 바닥글 막대

고정 머리글과 마찬가지로 일부 웹사이트는 고정 바닥글 또는 바닥글 막대의 이점도 있습니다. 이를 통해 사용자는 보다 미묘한 위치에서 눈에 띄는 정보를 최전방에 유지할 수 있습니다. 고정 바닥글 막대는 버튼을 클릭하고 싶은 엄지손가락에 정말 가깝기 때문에 휴대폰에 적합합니다.

방법 게시물

다음은 Divi에서 고정 바닥글 막대를 만드는 방법에 대한 몇 가지 게시물입니다.

• Divi 테마에 대한 고정 바닥글 막대를 만드는 방법
• Divi로 고정 모바일 바닥글 막대를 만드는 방법
• Divi에서 (고정) 모바일 연락처 막대를 만드는 방법

#3 고정 사이드바/세로 메뉴

고정 사이드바는 방문자가 사이트를 탐색할 때 메뉴, 이메일 수신 동의 및 CTA와 같은 항목을 쉽게 사용할 수 있도록 합니다. 원하는 경우 고정 사이드바에 오버플로 스크롤을 추가하여 수많은 콘텐츠가 포함된 멋진 스크롤 가능한 고정 사이드바를 가질 수 있습니다.

방법 게시물

다음은 Divi에서 고정 사이드바를 구축하는 방법에 대한 게시물입니다.

• Divi로 부드러운 스크롤 앵커 링크로 반응형 고정 사이드바를 구축하는 방법
• Divi 웹사이트를 위한 수직(고정) 탐색 메뉴를 만드는 방법

#4 고정된 뒤로 가기 버튼

Back-to-Top 버튼은 일반적으로 웹사이트의 오른쪽 하단에 고정되어 있으며 사용자가 페이지 상단으로 돌아가기 위해 클릭할 수 있습니다.

다음은 Divi에서 고정된 back-to-top 버튼을 만드는 방법에 대한 게시물입니다.

• Divi로 맞춤형 스티커(고정) 디자인을 만드는 방법 맨 위로 돌아가기

#5 고정 메뉴

슬라이드 인 또는 팝업되는 대부분의 메뉴는 위치가 고정되어 있습니다. 이것들은 모바일에도 좋습니다.

다음은 Divi에서 고정 메뉴를 만드는 방법에 대한 게시물입니다.

• Divi의 테마 빌더로 반응형 슬라이드인 메뉴를 만드는 방법

#6 고정 알림 상자, 행동 유도, 이메일 수신 동의 등…

다음은 Divi에서 고정 알림 상자를 만드는 방법에 대한 게시물입니다.

• Divi에서 페이지 템플릿의 모든 모서리에 닫기 가능한 슬라이드인 클릭 유도문안을 추가하는 방법

마지막 생각들

고정 위치를 사용해야 하는 상황이 발생하기 전에는 웹 개발에서 크게 벗어나지 못할 것입니다. 웹사이트를 구성하는 많은 핵심 요소에 사용됩니다. Divi에서 고정 위치는 클릭 한 번이면 충분하지만 잘 사용하려면 어떻게 작동하는지 이해하는 것이 중요합니다. 이 기사가 Divi에서 고정 위치를 더 잘 사용하여 다음 프로젝트를 새로운 차원으로 끌어올리는 방법을 이해하는 데 도움이 되었기를 바랍니다.

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

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

건배!