너비 높이

컴포넌트의 사이즈를 설정할 수 있는 속성입니다.

사용방법

1. 너비 또는 높이를 설정할 컴포넌트를 선택합니다.

2. 사이즈 단위를 선택합니다.

3. 입력필드에 수치를 입력합니다.

기능설명

기능	속성	의미
단위	%	상위 컴포넌트의 사이즈에 따라 백분율로 값 설정
	px	고정값 설정
	사용자입력	입력한 값 그대로 설정
입력필드		수치를 입력하며, 값이 없으면 하위 객체의 사이즈만큼 값을 인식
사이즈 고정		객체의 사이즈를 고정하며, 상위 레이아웃의 디스플레이 속성이 'Flex'인 경우만 사용

높이는 단위를 %를 사용할 경우 상위 레이아웃과 그룹의 높이에 영향을 받습니다.

calc() 함수를 알고 있나요? 이 함수를 사용하면 속성값을 계산식으로 설정할 수 있습니다. 예) calc(100% - 40px) + 와 - 연산자 좌우에 공백이 있어야 합니다.

calc()함수에 대해 더 자세히 알아보기

결과예시

예시) 너비를 %로 설정

1. 부모의 너비를 100%로 설정합니다.

2. 첫번째 자식의 너비를 50%로 설정하면 부모의 너비의 절반의 비율로 값이 설정됩니다.

3. 두번째 자식의 너비를 40%로 설정합니다.

4. 세번째 자식의 너비를 25%로 설정하면, 자식의 합이 100%를 초과되어, 첫번째 자식 좌측 그리고 두번째 자식 하위에 배치됩니다.

예시) 너비를 % + px의 조합으로 설정

1. 부모의 너비를 350px로 설정합니다.

2. 첫번째 자식의 너비를 50%로 설정하면 부모의 너비의 절반의 비율로 값이 설정됩니다.

3. 두번째 자식의 너비를 175px로 설정합니다.

4. 세번째 자식의 너비를 25%로 설정하면 첫번째와 두번째 자식의 합이 350px를 초과하고, 첫번째와 두번째 자식이 같은 사이즈를 갖기 때문에 세번째 자식은 첫번째 자식의 하위에 배치됩니다.

예시) 너비를 사용자 입력으로 설정한 경우

사이즈를 비율로 설정하면 가변에 대응할 수 있습니다. 하지만 간혹 사이즈를 고정해야 되는 경우 가변으로 설정할 수 없는 경우가 생깁니다. 아래와 같이 버튼의 너비가 42px로 고정인 경우 나머지 객체의 너비를 가변으로 설정해야 하는 경우 calc()함수를 사용하면 가변처리가 가능합니다.

1. Text의 너비를 calc(100% - 42px)로 설정합니다.

2. Button의 너비를 42px로 설정합니다.