UIElements에는 레이아웃 및 스타일링 프로퍼티에 따라 시각적 요소를 배치하는 레이아웃 엔진이 포함되어 있습니다. 레이아웃 엔진은 Flexbox의 하위 집합, 즉 HTML/CSS를 레이아웃 시스템을 구현하는 Yoga 오픈소스 프로젝트입니다.
Yoga와 Flexbox를 사용하려면 다음의 외부 리소스를 참조하십시오.
기본적으로 모든 시각적 요소는 레이아웃의 일부입니다. 레이아웃은 다음의 기본 동작을 포함합니다.
UIElements는 스탠다드 UI 컨트롤(예: 버튼, 토글, 텍스트 필드, 레이블 등)을 위한 빌트인 컨트롤을 포함합니다. 이 빌트인 컨트롤에는 레이아웃에 영향을 주는 스타일이 있습니다.
다음 목록에서 레이아웃 엔진을 사용하는 방법에 대한 팁을 확인하십시오.
width
와 height
를 설정하여 요소의 크기를 정의하십시오.
flexGrow
프로퍼티(USS: flex-grow: <value>;
)를 사용하여 요소에 유연한 크기를 할당하십시오. flexGrow
프로퍼티의 값은 요소의 크기가 해당 형제들에 의해 결정될 때 가중치 역할을 합니다.
flexDirection
프로퍼티를 row
(USS: flex-direction: row;
)로 설정하여 수평 레이아웃으로 전환하십시오.
상대 위치 지정을 사용하여 원본 레이아웃 포지션을 기준으로 요소를 오프셋하십시오.
position
프로퍼티를 absolute
로 설정하여 부모 포지션 직사각형을 기준으로 요소를 배치하십시오. 이 경우에는 형제 또는 부모의 레이아웃에 영향을 주지 않습니다.
Did you find this page useful? Please give it a rating:
Thanks for rating this page!
What kind of problem would you like to report?
Thanks for letting us know! This page has been marked for review based on your feedback.
If you have time, you can provide more information to help us fix the problem faster.
Provide more information
You've told us this page needs code samples. If you'd like to help us further, you could provide a code sample, or tell us about what kind of code sample you'd like to see:
You've told us there are code samples on this page which don't work. If you know how to fix it, or have something better we could use instead, please let us know:
You've told us there is information missing from this page. Please tell us more about what's missing:
You've told us there is incorrect information on this page. If you know what we should change to make it correct, please tell us:
You've told us this page has unclear or confusing information. Please tell us more about what you found unclear or confusing, or let us know how we could make it clearer:
You've told us there is a spelling or grammar error on this page. Please tell us what's wrong:
You've told us this page has a problem. Please tell us more about what's wrong:
Thank you for helping to make the Unity documentation better!
Your feedback has been submitted as a ticket for our documentation team to review.
We are not able to reply to every ticket submitted.