css의 flex라는 속성을 이용하면 화면에 표시된 요소들의 순서를 마음대로 뒤집을 수 있습니다! (이미 테마나 빌더에서 흔히 사용하는 속성인데 나름 뭔가 발견한 느낌이 ㅎ)
예를 들어,
얼마전 WC 부킹스의 폼의 순서가 좀 헷갈리니 날짜를 먼저 선택 후 기간을 설정하게 해 달라는 요청이 있었는데, 이걸 개발로 풀려니 할 게 많아져서 일단 두고 있었는데 말이죠..
전에 본인인증 폼을 개발적인 방법으로 필드 아래로 내리는 게 잘 안 되어서 이 방법으로 해결했던 게 생각나서 시도해 보니 부킹스 폼도 너무 간단하게 끝;;; (같은 사이트인데 왜 응용이 바로 안 됐을지 ㅎ;;;) 화면에 보이는 순서만 스타일로 바꾼 것이기에 기능에는 당연히 아무 문제 없었고요.
▼ CSS style 정의 예
/* 부킹스 폼 전체를 둘러싼 태그에 flex 설정 */
#wc-bookings-booking-form {
display: flex;
flex-direction: column; /* 세로로 정렬하겠다는 의미 */
}
/* 그 안의 필드들에 order 순서만 지정하면 끝 */
#wc-bookings-booking-form .wc-bookings-date-picker { order: 1; }
#wc-bookings-booking-form .wc_bookings_field_duration { order: 2; }
#wc-bookings-booking-form .form-field-wide { order: 3; }
#wc-bookings-booking-form .wc-bookings-booking-cost { order: 4; }
적용 후 또 생각해 보니 이게 가능하다는 건?!
디자인을 위해서 이런 구조를 많이 쓰는데
[ 이미지 + 텍스트
텍스트 + 이미지
이미지 + 텍스트 ]
모바일에서 보면 배열된 순서때문에 좀 헷갈리게 되기 마련이죠. 그래서 항상 마진 같은 거로 좀 더 띄워서 서로를 구분시키곤 했었지만, 이 때에도 순서를 바꿔버리면 좋겠다는 생각이 드네요.
상황이야 각각 다르겠지만
flex 속성도 디자인 수정 시 한 번 응용해 보세요.