Flexbox를 사용하여 고정 바닥글 설정

시작하기 전: Flexbox 가이드를 살펴보고 웹사이트에 바닥글을 추가하세요.

Flexbox를 활용하면 위에 있는 콘텐츠의 양에 관계없이 사이트의 각 웹페이지 하단에 바닥글을 부착할 수 있습니다.

Body(모든 페이지) 태그에 적용된 스타일은 사이트 내의 모든 페이지로 흘러갑니다. 디자인을 신속하게 정렬하고 정렬하려면 Body(모든 페이지) 태그를 flex로 구성하고 flex 하위 요소가 다음 내에서 수직으로 쌓이도록 구성하세요.

1. 다음을 선택하세요. 몸 캔버스 또는 네비게이터 내의 요소
2. 다음으로 이동하세요. 스타일 패널 > 선택기 필드
3. 선택하다 본문(모든 페이지) ~로부터 선택자필드 쓰러지 다
4. 다음으로 진행하세요. 스타일 패널 > 공들여 나열한 것 > 표시하다
5. 누르다 몸을 풀다
6. 세로 '를 탭하세요.아래쪽 화살표” 아이콘을 사용하여 플렉스 방향을 수직으로 구성합니다.

설정하여 몸 — 페이지의 모든 콘텐츠를 둘러싸는 요소 — Flex에서는 바닥글의 상단 여백을 자동으로 조정할 수 있습니다. 이 작업을 수행하면 바닥글이 위 콘텐츠에서 멀어지고 페이지 하단에 고정됩니다.

바닥글의 위쪽 여백을 설정하려면:

1. 선택 보행인 캔버스 또는 네비게이터 내에서
2. 다음으로 향하세요. 스타일 패널 > 간격
3. 할당 맨 위 여백 자동

바닥글을 완전히 아래쪽으로 유도할 만큼 콘텐츠가 부족한 페이지의 경우 바닥글을 아래쪽에 고정하기 위해 상단 여백에 공백이 추가됩니다. 반대로 내용이 많은 페이지에서는 바닥글이 페이지의 다른 내용을 인식하여 상단 여백 위에 추가 공백이 생성되는 것을 방지합니다.

유용한 팁: 바닥글을 사이트 전체에서 재사용할 수 있는 구성 요소로 변환하여 바닥글에 적용된 모든 수정 사항이 사이트 전체 바닥글의 모든 인스턴스에 영향을 미치도록 할 수 있습니다. 구성 요소에 대해 자세히 알아보세요.