강인경님 겹치는 방법입니다.

https://www.flayus.com/26749344

강인경님 글 답글입니다. 

 

 

 

세로로 겹치기 때문에

 

arrange_vertical_attachment 에 alighnment 는 top,extend 로 했습니다. 

stick_to_sides_attachment 는 아래위를 뺀 좌우니까 horizontal 로 지정해 줍니다. 

 

하위 컨테이너가 3개 이고  top,extend 니까 위 2개만 높이를 지정해 주면 마지막 하나는 나머지 공간을 채우게 됩니다. 

 

 

이렇게 됩니다. 

 

겹치게 할려면 어떻게 해야할지 생각해 봅니다. 

 

offset 이나 inset을 생각하셨으니까 한 번 해 봅시다. 

 

 

아래위로 겹칠꺼니까 arrange_vertical_attachment 부분에 offset="100"을 넣어봅시다

 

 

 

???

 

아래위로 100만큼 짤린것을 볼 수 있습니다. 

offset을 주면 전체를 아래위로 줄이거나 늘리거나 할 수 있는 것을 알 수 있네요

 

그렇다면 하위에 이 offset 이나 inset을 주면 어떻게 될까요?

궁금하니까 한 번 시도해 봅시다.

 

 

 

두번째 컨테이너에 레이아웃을 추가했습니다. 

 

 

??

 

역시 어렵네요ㅠ

하지만 뜯어봅시다.

 

2번 초록이에게 

<layout class="stick_to_sides_attachment" alignment="top" inset="50" />

이 레이아웃을 추가했어요

결과를 보니까 가장 위에서 50만큼 띄우고 높이 300으로 위치해 있는 것을 볼 수 있습니다. 

 

이것을 응용하면 겹치게 가능할거 같네요

 

 

이렇게 3번째에도 추가해 봅니다

 

 

?? 뭐지 왜 아래가 비어버리지??

(상위 컨테이너의 크기를 보기 위해 핑크색을 넣었습니다)

 

분명 top,extend 면 아래 나머지를 채워야 하는데...

 

잘 보면

 

가장 위에 처음 이미지의 파랑이 높이와 마지막 파랑이 높이가 같은 것을 볼 수 있습니다. 

 

그래서 결론을 내리면..

offset 이나 inset은 값이 0일때의 사이즈 그대로 이동이라는 것을 알 수 있습니다. 

 

 

<layout class="arrange_vertical_attachment" alignment="top,extend" offset="100" gap="0" />

여기에 offset 값을 주었을 때 잘린것 처럼 보인것은 실제로 잘린것이 아닌 값만큼 이동을 하는 것이었습니다.

vertical 이기때문에 위에서 100만큼 아래에서 100만큼이 되어서 아래위로 100만큼씩 이동해서 잘린것처럼 보이는 것이예요

 

 

그럼.. 이제 빈 공간 없이 겹치게 하는 방법은 뭐가 있을까요?

하나 남은 것이 있네요 

gap="0" 

 

갭은 사이 공간을 띄우는 것이죠..

 

겹쳤다. 즉 사이 공간이 마이너스 값.

 

 

gap="-50" 을 넣었습니다.

 

 

와우

 

성공했습니다!