SAPUI5 FlexBox 기본 개념 – 영화 정보 api 서비스

CSS에서 Flexbox란, 행과 열 형태로 아이템들을 배치하는 1차원 레이아웃 방법인데, SAPUI5 에서는 SAPUI5 Flexbox 클래스로 해당 플렉스박스 css를 제공하고 있습니다.

일반 CSS Flexbox와 마찬가지로 SAPUI5 Flexbox 컨테이너내의 아이템들은 부족한 공간을 처리하기 위해 여분의 공간으로 채우거나 축소되며 변형됩니다.

오늘은 SAPUI5 Flexbox 레이아웃에 대하여 이해해 보도록 하겠습니다.

CSS Flexbox의 기본적인 속성

기본적으로 부모 객체인 Container에 Flex 속성을 부여합니다. 부여하는 즉시, 부모 Container에 속한 모든 Item 들이 Flex 속성을 갖게 됩니다.

Container는 아래와 같이 다양한 속성을 갖고 있습니다.

display
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

그리고 Flexbox 내에 포함되는 Item은 다음의 속성 들을 갖게 됩니다.

order
flex-grow
flex-shrink
flex
align-self

위의 Flexbox 속성 중에서 SAPUI5 Flexbox를 구성하는데 자주 사용되는 Flexbox의 속성에 대해서 몇가지 정리해보도록 하겠습니다.

justify-content, align-items 속성 >> SAPUI5 FlexBox alignItems, justifyContent 속성 대응

또, Flexbox는 main axis, cross axis 즉, 주축/보조축을 기준으로 동작하게 됩니다.

왼쪽에서 오른쪽으로 정렬됨이 기본값 즉, 주 축이 되고, 이 경우에는 자동으로 위에서 아래 방향은 보조축이 됩니다.

기본적으로 Flexbox는 main axis를 기준으로 움직이며, main axis 를 기준으로 하여 동작하게 하는 명령어가 justify-content 이며, 보조축을 기준으로 동작하게 하는 명령어가 align-items 입니다

이와 같은 Flex의 속성은 SAPUI5 Flexbox 속성에서는 다음과 같은 예시 형태로 사용이 됩니다.

 <FlexBox alignItems="Baseline" justifyContent="Center">
            <items>
                <Text text="홈" />
                <Text text="New" />
            </items>
        </FlexBox>

flex-direction 속성 >> SAPUI5 FlexBox direction

가로로 동작하는 메인 축을 세로로 바꾸기 위해서는 가장 쉬운 방법은 flex-direction 입니다.

기본값은 row 로 설정되었기 때문에 아무것도 하지 않으면 행을 기준으로 동작하게 됩니다.

flex-direction 기본값

다음과 같이 CSS가 잡혀 있다면,

.container {
  height: 100vh;
  display: flex;
}

아래와 같이 기본값은 row를 기준으로 설정이 되게 됩니다.

flex direction 기본값 혹은 row

하지만 css 속성에 flex-direction column을 추가해 주면 세로를 메인 축으로 하도록 변경할 수 있습니다.

 
.container {
  height: 100vh;
  display: flex;
   flex-direction: column;
 
}
 
flex direction column 속성을 부여

이와 대응하는 SAPUI5 Flexbox 속성이 direction입니다. Column, ColumnReverse, Row, RowReverse를 선택할 수 있습니다.

<FlexBox direction="Column">
            <items>
                <Text text="홈" />
                <Text text="New" />
            </items>
        </FlexBox>

SAPUI5 FlexBox 자주쓰는 속성 정리

그럼 위의 내용을 SAPUI5 코드를 정리하여 Flexbox의 주요 속성을 알아보도록 하겠습니다.

동일한 CSS를 입힌 후에 다음과 SAPUI5 FlexBox를 다음과 같은 코드로 적용할 수 있습니다.

  <FlexBox>
    <Text class="item item1" text="철수" />
    <Text class="item item2" text="영희" />
    <Text class="item item3" text="병찬" />
    <Text class="item item4" text="홍진" />
    <Text class="item item5" text="형진" />
  </FlexBox>
sapui5 flexbox

첫번째 속성은 FlexBox의 justifyContent 입니다. 다음과 같이 justifyContent에 End값을 적용하면 CSS의 flex box justify-content 속성과 마찬가지로 동작하게 됩니다.

  <FlexBox justifyContent="End">
    <Text class="item item1" text="철수" />
    <Text class="item item2" text="영희" />
    <Text class="item item3" text="병찬" />
    <Text class="item item4" text="홍진" />ㅇ
    <Text class="item item5" text="형진" />
  </FlexBox>
sapui5 flexbox justifyContent End 지정

이처럼 justifyContent에 SpaceAround 속성을 주면 다음과 같습니다.

sapui5 flexbox justifyContent SpaceAround 속성

justifyContent는 중심축에서 아이템들을 어떻게 배치하는 지를 결정하게 됩니다.

반대축에서 아이템의 배치를 결정하는 것은 alignItems를 사용하면 됩니다.

 <FlexBox justifyContent="SpaceBetween" alignItems="Center" height="100vh">
    <Text class="item item1" text="철수" />
    <Text class="item item2" text="영희" />
    <Text class="item item3" text="병찬" />
    <Text class="item item4" text="홍진" />
    <Text class="item item5" text="형진" />
  </FlexBox>
 

위와 같이 확인을 위해 높이를 100vh를 주고 alignItems를 Center로 변경합니다. 그러면 아래와 같이 배치가 되게 됩니다.

sapui5 flexbox direction alignItems를 지정

direction 속성을 지정해서 기본 axis가 가로에서 세로 column 방향으로 바꾸어줄 수 있습니다. CSS의 direction column과 동일한 동작을 하게 됩니다.

따라서 justifyContent와 alingItems 동작시 메인축과 반대축이 바뀌게 됩니다.

  <FlexBox direction="Column">
    <Text class="item item1" text="철수" />
    <Text class="item item2" text="영희" />
    <Text class="item item3" text="병찬" />
    <Text class="item item4" text="홍진" />
    <Text class="item item5" text="형진" />
  </FlexBox>
sapui5 flexbox direction Column 지정

또, wrap 속성을 통해 wrap 및 noWrap 등의 속성을 지정할 수 있습니다.

<FlexBox wrap="Wrap">
    <Text class="item item1" text="철수" />
    <Text class="item item2" text="영희" />
    <Text class="item item3" text="병찬" />
...

sapui5 flexbox wrap 속성
<FlexBox wrap="Wrap">
    <Text class="item item1" text="철수" />
    <Text class="item item2" text="영희" />
    <Text class="item item3" text="병찬" />
...

sapui5 flexbox no-wrap 속성

이상으로 SAPUI5 FlexBox에 대해서 알아보았습니다.

CSS의 자세한 FlexBox에 대해 알고자 하면 아래의 링크를 참조해보시기 바랍니다.

모질라 CSS 기본 개념

디자인과 관련하여 SAPU5 Theme는 다음을 참고하시기 바랍니다.

SAPUI5 Themes Dark 적용 – SAPUI5 API 서비스 따라하기