버블의 새로운 리스폰시브 엔진!
좋은 점도 많지만, 이전처럼 내가 배치하고싶은곳에 드래그 해서 만들어 넣던 그 편리함은 없어져서 너무 답답한 이것!
리스폰시브엔진을 처음 이해하는데에 필요한 핵심만 골라서 이해하기 쉽게 정리했어요.
아래 내용만 이해하고 들어가도 배움의 첫걸음이 수월해 질거에요.
Step#1. 아이들을 세로로 쌓느냐, 가로로 쌓느냐 정해줘요.
-
컨테이너 엘레먼트 (Group, Repeating Group, Popup, Floating Group, Group Focus)의 Layout 탭에는 이런 설정이 있어요.
-
대부분의 경우에서 Container layout은 Row(가로쌓기)와 Column(세로쌓기)입니다.
-
Align to parent는 child 요소를 겹쳐야 하는 상황 등 특수한 UI 구성시 사용됩니다.
-
Fixed는 거의 안쓴다고 해도 무방합니다.
-
Column은 그 컨테이너의 바로 아래 아이들이(손자들 아님 주의!) 세로로 차곡차곡 쌓입니다.
(여기서 "아이들"은 엘레먼트 트리에서 봤을 때 해당 그룹의 바로 하위에 있는 엘레먼트들입니다!)
-
Row는 그 컨테이너의 바로 아래 아이들이(손자들 아님 주의!) 가로로 차곡차곡 쌓입니다.
-
Row특: 오른쪽에 더 쌓을 수 없으면 다음줄로 자동으로 넘어감
Step#2. 아이들의 배치 모양을 정해줘요.
- 세로쌓기일 경우 Container alignment 설정에서 아이들이 세로로 위쪽으로 붙을지, 가운데 정렬할지, 아래로 붙을지, 적절하게 찢을지, 위아래로 쭉 찢을지 정해줄 수 있어요
- 가로쌓기일 경우 Container alignment 설정에서 아이들이 왼쪽으로 붙을지, 가운데 정렬할지, 오른쪽으로 붙을지, 적절하게 찢을지, 양옆으로 쭉 찢을지 정해줄 수 있어요
Step#3. 아이들 본인의 배치 모양을 정해줘요.
- 이제는 그룹의 설정이 아니라 그룹안에 들어있는 각각의 아이들의 정렬 또한 설정해 줘야 합니다!
- Parent가 세로쌓기(Column)일 경우, Horizontal alignment(가로정렬) 옵션이 있어요.
세로로 어떻게 정렬되어야 할지는 Step#2를 이용하면 되겠죠?
- Parent가 가로쌓기(Row)일 경우, Vertical alignment(세로정렬) 옵션이 있어요.
가로로 어떻게 정렬되어야 할지는 Step#2를 이용하면 되겠죠?
Step#4. Margin, Padding을 이용해서 자리를 잡아줘요.
- Padding은 안쪽으로 여백을, Margin은 바깥쪽으로 여백을 줄 수 있어요.
TIP#1. Row그룹 안에 Column그룹을 넣는 등 그룹 안에 다른 정렬타입의 그룹 넣는 것에 익숙해지세요! 예전 방식보다 "그룹 안에 그룹"을 정렬의 이유만으로 많이 쓰게 될거에요!
TIP#2. 마진, 패딩으로 모든걸 해결하려고 하지 마세요! 최대한 정렬 기능으로 원하는 위치에 갓다 놓고, 마지막 터치만 마진으로 해결하세요.
TIP#3. 마이너스 마진도 가능하답니다.
TIP#4. 엘레먼트 생성시 제일 먼저 Width, Height 설정을 해주면 편해요