윅스 (Wix) 코딩 - 요소 크기 변경에 따른 페이지 레이아웃에 대한 영향 (Wix Code: How Page Layout Is Affected When Elements Change Size)

윅스 (Wix) 코딩 - 요소 크기 변경에 따른 페이지 레이아웃에 대한 영향 (Wix Code: How Page Layout Is Affected When Elements Change Size)

 

 

 

설명)

윅스 코드(Wix Code)로 작업할 때, 페이지 요소의 높이가 때때로 변경되어 페이지 레이아웃과 페이지 자체의 높이에 영향을 줄 수 있습니다.

• 코드를 사용하여 페이지 요소를 축소하거나 확장할 수 있습니다. (요소 접기는 기본적으로 높이를 0으로 설정합니다.)

• 동적 내용을 표시하는 페이지 요소들은 데이터베이스의 내용을 수용할 수 있도록 높이를 변경할 수 있습니다. 특히 텍스트 요소, 표, 갤러리, 리피터는 설정, 컬렉션의 항목 수 및 주어진 입력란(필드)의 텍스트 양을 기준으로 높이를 변경할 수 있습니다.

요소가 높이를 변경하면 페이지의 다른 요소의 위치와 페이지 크기 자체에 영향을 줄 수 있습니다. 때로는 축소된 요소가 원하는 것보다 더 많은 공백을 남길 수 있습니다. 다른 경우 데이터베이스의 많은 양의 정보로 인해 다른 요소가 페이지 아래로 이동하게되어 페이지 크기가 커집니다.

 

이 글에서는 페이지 요소의 높이 변화가 페이지 레이아웃에 영향을 주는 경우에 대한 모든 상황에서 페이지의 모양을 제어할 수 있는 방법에 대해 설명합니다.

 

- 페이지 요소 사이의 거리를 계산하는 방법

- 축소 / 확장 요소에 대한 규칙

- 크기가 커진 요소에 대한 규칙

- 수직 정렬 정보

- 페이지 바닥글 제어

- 컨테이너내의 요소

- 그룹화된 요소

 

 

요소들 간의 간격 계산 (Calculating the Gap between Elements)

요소들 사이의 간격은 상단 요소의 하단 모서리와 하단 요소의 상단 모서리 사이의 거리입니다. 간격을 계산하기 위해서는 각 요소의 정확한 크기와 위치를 알아야합니다. 에디터 툴바에서 이 정보를 볼 수 있습니다.

1. 첫 번째 단계는 상단 요소의 아래쪽 가장자리의 정확한 위치를 찾는 것입니다. 이렇게하려면 높이에 요소의 Y 값을 추가합니다. 아래 이미지에서 모양의 높이는 각각 50 픽셀입니다. 파란색 모양의 위치는 150 픽셀이므로 하단 가장자리는 200 픽셀 (150 + 50)입니다.

2. 두 번째 단계는 아래쪽 모양의 Y 값에서 방금 계산한 Y 값을 빼서 간격을 계산하는 것입니다. 우리의 경우 자주색 모양은 250 픽셀에 위치합니다. 이전에 계산한 Y 값 (200 픽셀)에서 50 픽셀 (250 - 200)의 갭을 가져옵니다.

동일한 프로세스를 사용하여 자주색과 녹색 모양 사이의 간격이 100 픽셀임을 확인합니다.

 

요약하자면:

1. 위쪽 요소의 Y 값을 높이에 더하여 요소의 아래쪽 가장자리의 정확한 위치를 찾습니다.

2. 하단 모양의 Y 값에서 해당 숫자를 뺍니다.

요소 사이의 거리가 요소가 축소, 확장 및 증가 할 때의 동작을 제어하기 때문에 멀리 떨어져있는 요소가 페이지에서 얼마나 멀리 떨어져 있는지 정확히 아는 것이 중요합니다. 어떻게 작동하는지 봅시다.

 

요소 접기 및 확장 규칙 (Rules for Collapsing and Expanding Elements)

페이지의 요소가 축소되면 페이지 아래의 요소가 페이지를 위로 이동하거나 본래의 자리를 그대로 유지할 수 있습니다. 이 동작은 각 요소와 요소 바로 위에있는 요소 사이의 간격 크기에 의해 제어됩니다. 특히, 페이지의 요소가 접힐 때 :

• 70 픽셀 이하의 간격이 사라집니다.

즉, 위의 요소의 70 픽셀 이내 인 요소가 자동으로 자리를 옮겨 이동합니다.

• 70 픽셀보다 큰 간격이 유지됩니다.

즉, 위의 요소 아래 70 픽셀을 초과하는 요소는 이동하지 않습니다.

몇 가지 예를 살펴 보겠습니다. 아래의 모든 이미지에서 왼쪽의 페이지는 시작 위치를 표시하고 오른쪽의 페이지는 파란색 요소가 축소되었을 때의 상황을 보여줍니다.

 

예제 1 : 50 픽셀 간격 및 100 픽셀 간격

 

 

위 이미지에서 첫 번째 갭은 50 픽셀 (즉, 70 픽셀 이내)입니다. 이것은 파란 모양이 축소될 때 간격이 사라지고 파란 모양이 파란 모양의 자리를 차지하도록 올라가는 것을 의미합니다.

 

그러나 녹색 모양은 자주색 모양에서 100 픽셀 떨어져 있습니다 (즉, 70 픽셀 이상). 따라서 파란색 모양이 접히고 자주색 모양이 페이지 위로 이동하면 녹색 모양이 그대로 유지됩니다. 이것이 페이지에서 200 픽셀의 빈 공간을 초래하는 방법에 유의합니다.

 

노트 :

중요한 것은 각 요소와 그 바로 위에있는 요소 사이의 간격이며 요소와 접힌 요소 사이의 간격이 아닙니다.

 

예제 2 : 2개의 50 픽셀 간격

이제 요소가 모두 서로 70 픽셀 이내에있는 경우 어떻게되는지 살펴 보겠습니다.

 

위의 이미지에서 파란색 모양이 축소되면 자주색 모양이 다시 위로 이동합니다. 차이점은 이제 녹색 모양도 간격이 70 픽셀 이내이기 때문에 자주색 모양의 공간을 차지하도록 위로 이동한다는 것입니다. 녹색 모양이 위치를 변경하여 페이지 자체가 어떻게 축소되는지 주목합니다. 아래의 바닥글 섹션을 참조합니다.

 

요소를 확장하는 규칙은 요소를 축소하는 규칙과 동일합니다. 요소가 펼쳐지면 페이지 아래의 요소가 아래로 이동하거나 각 요소와 그 위에 있는 요소 사이의 간격에 따라 그대로 유지됩니다.

 

크기가 커진 요소에 대한 규칙 (Rules for Growing Elements)

특정 요소를 데이터에 연결하면 해당 요소의 높이가 커져서 컬렉션의 정보를 표시할 수 있습니다. 이 경우 요소 아래에 있는 요소가 요소가 차지하는 추가 공간을 수용 할 수 있도록 아래로 이동해야합니다. 구체적으로는,

• 70 픽셀 이하의 간격이 유지됩니다.

즉, 크기가 커진 요소보다 70 픽셀 아래에 있는 요소는 자동으로 갭을 유지하기 위해 이동합니다.

• 70 픽셀보다 큰 간격은 10 픽셀에 도달 할 때까지 줄어듭니다.

즉, 크기가 커진 요소 아래의 70 픽셀을 초과하는 요소는 그 요소와 크키가 커진 요소 사이의 틈이 10 픽셀에 도달할 때까지 그대로 있으며, 이 시점에서 10 픽셀 간격을 유지하면서 페이지를 아래로 이동합니다.

두 경우 모두, 필요한 경우 추가 콘텐츠를 수용하기 위해 페이지 자체가 커집니다. 자세한 내용은 아래 바닥글 섹션을 참조합니다.

몇 가지 예를 살펴 보겠습니다. 아래 이미지에서 추가 텍스트로 인해 텍스트 요소가 어떻게 커지는 지 확인할 수 있습니다. 각 도면의 오른쪽에있는 눈금자는 페이지에서 각 요소의 위치를 ​​추적하는 데 도움이 됩니다.

 

예제 1 : 텍스트 요소 아래에 50 픽셀 갭

이 첫 번째 예에서는 텍스트 요소 아래 70 픽셀 내에 한 줄이 있습니다. 텍스트 요소가 커지면 선은 페이지 아래로 이동하여 50 픽셀 간격을 유지합니다.

 

 

예제 2 : 텍스트 요소 아래의 100 픽셀 갭

 

 

이 두 번째 예제에서는 텍스트 요소에서 70 픽셀 이상 떨어져 선이 시작됩니다. 텍스트 요소가 커지면 텍스트 요소가 커질 때까지 선의 위치가 그대로 유지되어 선과 선 사이의 간격이 10 픽셀로 줄어 듭니다. 이 시점에서 선은 증가하는 텍스트 요소로 페이지 아래로 이동하기 시작하여 10 픽셀 간격을 유지합니다.

 

예제 3 : 텍스트 요소 아래의 여러가지 요소

크기가 커진 요소 아래에 여러 요소가 있는 경우 해당 요소의 동작은 정확히 동일한 방식으로 해당 요소의 간격에 의해 제어됩니다. 즉, 70 픽셀 이내의 간격은 유지되지만, 70 픽셀보다 큰 간격은 10 픽셀이 될 때까지 축소됩니다.

 

 

위의 예에서 파란색 선은 텍스트 아래 50 픽셀이고 자주색 선은 파란색 선 아래 50 픽셀이며 녹색 선은 자주색 선 아래 100 픽셀입니다. 텍스트가 커짐에 따라 파란색 선과 자주색 선은 50 픽셀 간격을 유지하면서 페이지 아래로 계속 이동하면서 녹색 선은 그대로 유지됩니다. 자주색 선이 녹색 선의 10 픽셀 위쪽으로 움직일 때까지 이 작업은 계속됩니다. 이 시점에서 세 가지 모양 모두 새로운 상대 위치를 유지하면서 페이지 아래로 계속 움직입니다 (파란색과 보라색 선 50 픽셀, 녹색 선 10 픽셀).

 

수직 정렬 (Vertical Alignment)

이 글에 설명된 규칙은 페이지에 세로로 배치된 요소에 적용됩니다. 구체적으로, 요소들은 적어도 1 픽셀만큼 수평 방향으로 서로 중첩된다. 겹치지 않는 요소는 접기, 확장, 크기 변화된 요소의 영향을 받지 않습니다.

 

 

위의 그림에서 파란색 모양은 자주색 또는 녹색 모양과 겹치지 않으므로 파란색 모양이 축소되어도 아무것도 움직이지 않습니다. 그러나 보라색 모양과 녹색 모양이 몇 픽셀만 겹치더라도 보라색 모양의 축소로 인해 녹색 모양이 영향을 받기에 충분합니다.

 

 

바닥글(The Footer)

요소가 축소되고 확장되고 커질 때 바닥글을 관리하는 규칙은 위에서 설명한 규칙과 동일합니다. 즉, 페이지의 마지막 요소와 바닥글 사이의 간격이 70 픽셀 이내이면 마지막 요소를 축소하면 바닥글이 위로 이동하고 페이지 크기가 축소됩니다. 그러나 간격이 70 픽셀보다 크면 바닥글은 그대로 유지됩니다. 이 경우 페이지 하단에 불필요한 공백이 생길 수 있습니다.

 

마찬가지로 요소가 더 많은 정보를 수용하기 위해 커지면 그와 바닥글 사이의 간격이 70 픽셀 이내이면 해당 간격이 유지되는 반면 더 큰 간격 (70 픽셀 초과)은 10 픽셀에 도달할 때까지 줄어듭니다.

 

노트:

• 바닥글과 페이지의 마지막 요소 사이에 원하지 않는 간격이 있으면 바닥글 핸들러를 두 번 클릭하여 간격을 제거합니다.

• 페이지의 마지막 요소가 숨기지 않았는데도 숨겨진 것처럼 나타나면 바닥글 핸들러를 두 번 클릭하여 페이지 크기를 늘립니다.

 

 

컨테이너내의 요소들 (Elements in Containers)

요소들이 컨테이너에 부착되면 컨테이너 상자 자체는 높이가 변경되거나 연결된 요소의 위치가 변경되어 높이가 변경될 수 있습니다. 그러나 컨테이너 상자의 경우, 부착된 요소의 아래쪽 가장자리와 컨테이너 상자의 아래쪽 가장자리 사이의 간격으로 제어됩니다. 따라서 위에서 설명한 것과 동일한 프로세스를 따라 간격을 계산해야합니다.

 

컨테이너 접기 및 열기 (Collapsing and Expanding Containers)

요소들이 컨테이너에 첨부되면 축소 및 확장 규칙은 다음과 같습니다.

• 컨테이너가 축소되면 모든 요소가 축소되어 나타납니다. 그들은 페이지에서 공간을 차지하지 않으며 접힌 요소에 대한 규칙은 페이지의 다른 요소의 동작을 제어합니다.

• 컨테이너가 확장되면 이전에 확장된 요소도 확장됩니다. 이전에 접힌 요소는 접힌 상태로 유지됩니다.

• 컨테이너 안의 모든 요소가 축소되면 컨테이너 자체가 축소됩니다.

 

노트 :

컨테이너가 접히면 연결된 요소도 축소된 것처럼 보입니다. 그러나 연결된 요소의 속성은 ​​접혀져 있지 않습니다.

 

 

접기 및 열기에 포함된 요소들 (Collapsing and Expanding Contained Elements)

이 예에서 모양 간의 간격은 50 픽셀입니다. 컨테이너의 하단 모양과 하단 가장자리 사이의 간격도 50 픽셀입니다.

 

파란색 모양이 접히게 되면 자주색 모양이 대신 나타나며 컨테이너 상자 자체의 높이가 50 픽셀 줄어듭니다.

 

크기가 커진 요소에 포함된 요소 (Growing Contained Elements)

컨테이너 상자 안의 요소가 커지면 상자 자체도 커지면서 증가하는 요소 아래의 요소와 동일한 규칙에 따라 상자 자체가 커집니다.

 

성장 요소의 아래쪽 가장자리와 컨테이너 상자의 아래쪽 가장자리 사이의 간격이 70 픽셀 이내이면 간격이 유지되도록 컨테이너 상자가 커집니다. 아래 그림은 이것이 어떻게 작동하는지 보여줍니다.

 

 

 

그러나 간격이 70 픽셀보다 큰 경우 컨테이너 상자는 성장하는 요소의 아래쪽 가장자리가 컨테이너 아래쪽에서 10 픽셀에 도달할 때까지 높이를 유지합니다. 이 시점에서 컨테이너 상자는 계속 증가하여 아래 그림과 같이 간격을 10 픽셀로 유지합니다.

 

그룹화된 요소 (Grouped Elements)

요소가 함께 그룹화되면 요소가 단일 요소로 작동합니다. 즉, 그룹 위의 요소가 축소되거나 확장되거나 커지는 경우 그룹의 모든 요소가 위에 설명된 규칙에 따라 함께 이동합니다. 그룹 자체가 축소되거나 확장되거나 커지는 경우 위에서 설명한 규칙이 적용됩니다.

 

그룹 위의 간격은 그룹의 맨 위 요소에서 계산됩니다. 그룹 아래의 간격은 그룹의 맨 아래 요소에서 계산됩니다. 마찬가지로 가로 겹침은 왼쪽 또는 오른쪽 끝 요소에서 계산됩니다.

 

 

연관된 토픽)

 

 

윅스 홈페이지 만들기 101

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

 

출처 :

https://support.wix.com/en/article/wix-code-how-page-layout-is-affected-when-elements-change-size