css의 flex라는 속성을 이용하면 화면에 표시된 요소들의 순서를 마음대로 뒤집을 수 있습니다! (이미 테마나 빌더에서 흔히 사용하는 속성인데 나름 뭔가 발견한 느낌이 ㅎ)

예를 들어,
얼마전 WC 부킹스의 폼의 순서가 좀 헷갈리니 날짜를 먼저 선택 후 기간을 설정하게 해 달라는 요청이 있었는데, 이걸 개발로 풀려니 할 게 많아져서 일단 두고 있었는데 말이죠..

전에 본인인증 폼을 개발적인 방법으로 필드 아래로 내리는 게 잘 안 되어서 이 방법으로 해결했던 게 생각나서 시도해 보니 부킹스 폼도 너무 간단하게 끝;;; (같은 사이트인데 왜 응용이 바로 안 됐을지 ㅎ;;;) 화면에 보이는 순서만 스타일로 바꾼 것이기에 기능에는 당연히 아무 문제 없었고요.

▼ CSS style 정의 예

 

적용 후 또 생각해 보니 이게 가능하다는 건?!
디자인을 위해서 이런 구조를 많이 쓰는데
[ 이미지 + 텍스트
텍스트 + 이미지
이미지 + 텍스트 ] 모바일에서 보면 배열된 순서때문에 좀 헷갈리게 되기 마련이죠. 그래서 항상 마진 같은 거로 좀 더 띄워서 서로를 구분시키곤 했었지만, 이 때에도 순서를 바꿔버리면 좋겠다는 생각이 드네요.

상황이야 각각 다르겠지만
flex 속성도 디자인 수정 시 한 번 응용해 보세요.

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.