# Object

<figure><img src="https://2175080280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHdZ32eborYFcmdxjlQYD%2Fuploads%2FGFAEdy9NnblhaFJmEHnG%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-11-07%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%208.10.46.png?alt=media&#x26;token=08b0307d-c5a5-422a-9a3f-e7d79fc84584" alt=""><figcaption><p>Object tab</p></figcaption></figure>

### Basic

#### Active

화면에서 활성

Auto Detect 에 의해 자동 분석시 필요하지 않은 Layout을 제외시킬거나 활성화 시킬때 사용하게 됩니다.

Active가 체크되어 있지 않는 요소들은 [Hierarchy](https://docs.function12.io/tutorials-kr/studio-workspace/hierarchy)리스트에서 취소선이 나타나게 됩니다.

또한 모든 [Canvas](https://docs.function12.io/tutorials-kr/studio-workspace/canvas), [Preview](https://docs.function12.io/tutorials-kr/studio-workspace/preview), [SceneLayout](https://docs.function12.io/tutorials-kr/studio-workspace/scenelayout), [Codeview](https://docs.function12.io/tutorials-kr/studio-workspace/codeview), [Styleview](https://docs.function12.io/tutorials-kr/studio-workspace/edit-menu/broken-reference)에서 제외되어 나오게 됩니다.

#### Vector

이미지화 하고자 하는 Object들을 선택 후 Vector를 체크하면 한 개의 이미지로 변경됩니다.

### Mode

#### Background

해당 이미지가 Background 여야 할때 해당 이미지를 선택 후 Background 버튼을 누르면 배경이 됩니다.

#### Border

Border 버튼은 line 아이템일때만 활성화 됩니다. Border 속성을 가져야되는 line 요소가 Border가 아닐때 해당 버튼을 누르면 Border로 변경됩니다.

### Position

CSS Position은 문서상에 요소를 배치하는 방법을 지정합니다.

Position은 부모안에 있는 자식 Object들을 배치할 때 보모의 Position을 선택할 수 있습니다.

* relative - Object를 일반적인 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다.
* absolute - 페이지의 레이아웃에 공간도 배정하지 않습니다. 대신 가장 가까운 위치 지정 부모 요소에 대해 상대적으로 배치됩니다. 단, 부모 중 위치 지정 요소가 없다면 초기 [컨테이닝 블록](https://developer.mozilla.org/ko/docs/Web/CSS/Containing_block)을 기준으로 삼습니다.

차세한 사항은 [CSS 문서](https://developer.mozilla.org/ko/docs/Web/CSS/position)를 참조해 주세요.

### Constraint

<figure><img src="https://2175080280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHdZ32eborYFcmdxjlQYD%2Fuploads%2FswgHRDwImKX2f6GswoUe%2Fimage.png?alt=media&#x26;token=90f7d4a1-1b9e-4476-b414-eb876815db94" alt="Constraint"><figcaption><p>Constraint</p></figcaption></figure>

페이지 사이즈를 유연하게 동작 할 요소를 만들때 사용됩니다.

페이지의 사이즈를 늘렸을때 해당 오브젝트의 위치를 설정합니다.

* Left - 프레임에서 오브젝트를 왼쪽에 고정할 때 사용합니다.
* Right - 프레임에서 오브젝트를 오른쪽에 고정할 때 사용합니다.
* Left\&Right - 프레임에서 오브젝트의 왼쪽 위치와 오른쪽 위치를 고정하고 좌우 사이즈가 변경됩니다.&#x20;
* Center - 프레임에서 오브젝트가 현재위치에서 고정되어 위아래나 좌우로 프레임과 같이 움직입니다.
* Fill - 해당 오브젝트의 위치에 따른 양옆, 위아래 비율에 따라 채워진 상태로 변경됩니다.
* Scale - 선택하면 페이지 크기에 따라 사이즈 변경됩니다.

<figure><img src="https://2175080280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHdZ32eborYFcmdxjlQYD%2Fuploads%2Fl6EcBXnm7NKvpWhA3xae%2Fimage.png?alt=media&#x26;token=d8182198-bbce-4641-95cc-feca6d9cb431" alt=""><figcaption><p>(참조) Figma Guide</p></figcaption></figure>

[Figma 가이드 문서](https://blog.prototypr.io/figma-guide-for-auto-layout-constraints-d2a00f9964dc) 참조
