웹에서 데스크톱 앱 같은 화면 구조를 구축하는 베스트(?) 프랙티스

데스크톱 앱 같은 화면 구조란?

네이

기법

구현

해설

• 화면 전체를 덮기 위해서, 최상위 요소에 matchParent 클래스를 지정한다.

• 화면을 세로로 분할하고 싶은 경우는 stackVertical 클래스를, 옆으로 분할하고 싶은 경우는 stackHorizontal 클래스를 지정해, 페인이 되는 아이 요소를 추가한다.

• 일반 창은 내용에 따라 크기가 결정됩니다. 사이즈를 고정 혹은 제약하고 싶은 경우는, 대상 요소에 (max-/min-) width/height를 지정한다.

• stretchable 클래스를 지정하면, 그 페인은, 여백 가득 퍼진다. 복수로 지정한 경우는, 여백을 등분으로 나눈다.

• 창의 내용을 스크롤 시키고 싶은 경우는, verticalScrollable 클래스를 지정한다.

• 분할창을 재분할하려는 경우 분할창의 요소에 stackVertical/stackHorizontal을 지정합니다.

주의사항

브라우저에 따라서는, 페인내의 일부의 요소(textarea, select등)가 묘하게 신축해지는 일이 있었다.

이것은 일부 요소에 디폴트로 flex-shrink가 설정되어 있기 때문이었다.

아래와 같이 명시적으로 취소하거나 리셋 CSS를 적용하는 것이 좋습니다.

textarea, select {
    flex-shrink: 0;
}