워드프레스 GeneratePress 테마: Flexbox 레이아웃 옵션
GeneratePress 3.0부터 새로운 flexbox 레이아웃 옵션이 도입되었습니다. 이 레이아웃 옵션은 기본적으로 사이트의 전체적인 구조를 바꾸게 됩니다. flexbox 구조가 더 가볍고, 커스텀도 용이하며 모든 면에서 이전 구조보다 낫기 때문에 기존 floats 구조를 사용하는 경우 flexbox 구조로 변환하는 것을 고려하시기 바랍니다. 새로 설치하는 경우에는 flexbox 레이아웃 옵션이 선택되어 있을 것입니다.
워드프레스 GeneratePress 테마: Flexbox 레이아웃 옵션 전환
제너레이트프레스 테마 버전 3.0부터 Flexbox 레이아웃이 도입되었으며, 이전 버전부터 사용하던 사이트의 경우 Floats 구조로 설정되어 있습니다. Flexbox 구조로 전환하면 사이트 성능이 향상되지만, 커스텀 정도에 따라 조정이 필요할 수도 있습니다.
저는 여러 개의 사이트에서 Flexbox 레이아웃으로 변경해 보았습니다. 일부는 새로운 Flexbox 구조로 변경해도 사이트 레이아웃이 그대로 유지되었지만, 일부는 약간의 조정이 필요했습니다. 또, 제법 커스텀한 경우에는 기존에 추가한 CSS 코드를 변경해야 하는 경우도 있습니다.
Flexbox 레이아웃으로 변경하기 전에 먼저 DB 백업을 한 후에 진행하시면 안전할 것 같습니다. 레이아웃 문제가 발생할 경우:
- 기존 CSS 코드 중에서 문제를 일으키는 부분을 수정하거나, 추가로 CSS를 추가하여 수정을 시도해보고
- 원하는 대로 레이아웃이 조정이 안 되면 백업본을 되돌릴 수 있습니다.
Flexbox 레이아웃 전환 후 문제가 되어 단기간에 해결이 쉽지 않은 경우 테스트 사이트를 하나 만들어 사이트를 복원한 후에 Flexbox로 전환하고 문제가 되는 부분의 수정을 시도해볼 수 있을 것 같습니다. 문제가 해결되면 실제 사이트에 적용할 수 있습니다. (클라우드웨이즈에 가입하면 3일 동안 무료로 사용할 수 있습니다.)
사용자 정의하기에서 Flexbox 레이아웃으로 변경할 수 있습니다. Flexbox 레이아웃으로 변경하려면 워드프레스 관리자 페이지 » 사용자 정의하기 » General로 이동합니다.
Structure(구조)에서 Flexbox를 선택하고 저장하면 플렉스박스 레이아웃으로 전환됩니다. 이 옵션을 선택하면 기존 구조 옵션인 Floats로는 변경이 불가능하게 됩니다. 그러므로 가능한 경우 데이터베이스 백업을 한 후에 진행할 것을 권장합니다.
Floats 버전에서는 개별 푸터 위젯의 크기를 조정하기 위해 다음과 같은 CSS를 사용할 수 있습니다.
.footer-widgets .footer-widget-1 {
width: 56%;
}
.footer-widgets .footer-widget-2 {
width: 22%;
}
.footer-widgets .footer-widget-3 {
width: 22%;
}하지만 Flexbox 버전에서는 개별 푸터 위젯의 크기 조정을 위해 자동 크기 설정을 사용하고 있으므로 위의 코드가 더 이상 작동하지 않습니다.
상기 코드 대신 다음과 같은 코드를 사용할 수 있습니다.
.footer-widgets .footer-widget-1 {
flex-basis: 56%;
}
.footer-widgets .footer-widget-2 {
flex-basis: 22%;
}
.footer-widgets .footer-widget-3 {
flex-basis: 22%;
}Flexbox에 대한 자세한 정보는 모질라 문서를 참고해보시기 바랍니다.