Auto Layout | absolute - 반응형 카드만들기

이번 게시글에서는 auto layout에서 사용하는 absolute 속성에 대해서 알아보려고합니다.

먼저 absoulute라는 속성을 왜 사용하는지에 대해서 알고 계셔야

개발자님과 원활한 소통은 물론 속성에 대한 이해도가 높아져 잘 사용할 수 있겠죠?

 

 

우리가 디자인을 할 때 하나의 엘리먼트를 특정한 위치에 고정시켜놓고 싶을 때가 있습니다.

예를 들어 앱에서 새 알람이 왔을 때 알림 아이콘 우측 상단에 빨간 점이 뜨는 것 처럼 말입니다.

우리는 그것을 절대적인 위치에 놓는다고 해서 absolute라고 지칭합니다.

 

 

개발 시에는

element {
			position: absolute;			/* absolute로 위치합니다 */
			top: -10px;			/* 맨 위에서 -10px만큼에 위치합니다 */
			right: -10px;			/* 맨 오른쪽에서 -10px만큼에 위치합니다 */

		}

이런 식으로 표현이 됩니다.

 

한마디로 어느 한 좌표에 고정해두고 싶습니다! 싶을 때는 absolute 속성을 사용한다고 생각하시면 됩니다.

 

 

 

 

이제부턴 위 영상 예시 방법을 알려드리겠습니다.

 

 

1. green bar_import

 

먼저 auto layout이 설정된 카드 안에 엘리먼트를 넣으면 

당연히 이렇게 됩니다.

왜냐하면 오토레이아웃이 설정된 프레임은 저 bar를 child로 인식하고 정렬을 시키기 때문입니다.

그래서 설정된 direction: column; | margin: 16px | padding: 24, 32; 에 맞춰 정렬이 되었습니다.

근데 나는 저 bar를 input 좌측에만 놓고싶은데... 어떡하지? 란 생각이 들면 그때 이제 absolute를 사용하는 것입니다.

 

이제 bar에 absolute 속성을 적용해보겠습니다.

 

absolute는 우측 메뉴 상단의 + 버튼을 누르시면 적용됩니다.

 

 

자 absolute가 설정되었습니다.

parent는 bar를 자식으로 생각하지만, 한마디로 집에서 내놓은 자식으로 간주하고 있습니다.

bar는 더이상 container에 자리를 차지하지 못합니다. 집 밖에서 위치를 고정시켜주어야 하는데요.

 

 

 

이렇게 input의 width에 딱 맞게 위치를 시켜줍니다.

그리고 bar의 constraint를 Top and bottom으로 설정해줍니다.

이는 bar의 top과 bottom이 frame의 top, bottom을 따른다는 설정입니다.

 

 

짜잔-

그럼 이렇게 input의 길이가 변해도 absolute된 bar는 그 input의 변화에 맞게 자동으로 변경이 됩니다.

 

---

 

inspect를 통해 code를 살펴보니 position: absolute;라고 되어있는 것을 확인할 수 있습니다.

top: 117px;

left: -3px;  

실제 개발 시 이처럼 지정된 좌표를 가지고 위치를 고정시켜줍니다.

 

오늘은 absolute에 대해서 알아보았습니다.