UI5 Predefined CSS¶
목적
UI5에서 기본적으로 제공되는 CSS 목록을 "Preview"하거나 UI에 "적용"하는 데 사용
주요 단계¶
1. UI5 Predefined CSS 실행¶
1.1. StyleClass로 이동하여 UI5 Predefined CSS 클릭¶
<사진 1> "UI5 Predefined CSS" 메뉴 버튼
1.2. 실행 후 첫 팝업 화면 표시¶
<사진 2> "UI5 Predefined CSS" 팝업창
o "UI5 Predefined CSS" 메뉴 리스트
| Name | Description |
|---|---|
| Full Margins | UI 의 Top, Bottom, Begin, End에 모두 Margin 적용 |
| Single-Sided Margins | UI 의 Top, Bottom, Begin, End 중 한 지점에만 Margin 적용 |
| Two-Sided Margins | 두 지점에 Margin 적용 가능 ("Top and Bottom" 또는 "Begin and End"만 해당) |
| Other Margin Guide | 위 항목 외의 Margin 적용 가이드 |
1.3. UI5 Predefined CSS 상세 화면¶
<사진 3> 상세 팝업 화면 영역
1.3.1. UI에 적용 가능한 Margin CSS 종류 및 UI Margin 미리보기¶
1.3.2. 하단 Footer 기능¶
o Unselect: 선택한 체크박스 해제
<사진 4> Unselect 선택시 선택한 리스트 해제
o Preview: 선택한 CSS를 UI에 미리보기 (UI에 적용되지 않음)
<사진 5> Preview 선택시 미리보기 화면에 CSS 적용된 화면
o Apply: 선택한 CSS를 UI에 적용
<사진 6> Apply 선택시 선택된 UI의 Styleclass에 CSS 입력되어 적용된 화면
o Cancel: 팝업 종료
2. UI5 Predefined CSS를 UI에 적용¶
2.1. 적용할 UI 체크박스 선택¶
o Margin CSS 적용 대상 UI 체크박스 클릭
<사진 7> CSS 적용할 UI를 체크박스 선택
2.2. CSS 선택 및 적용¶
o 선택한 Margin CSS를 확인하고 Apply 버튼 클릭 후 팝업 닫기
<사진 8> CSS 적용할 Margin CSS를 선택하고 Apply 버튼 클릭
2.3. Preview에서 CSS 적용 확인¶
o Margin CSS 적용 상태 확인
o Properties의 styleClass 속성에서 적용 여부 확인 ("sapUiLargeMargin" 등)
<사진 9> 선택한 CSS가 UI Property styleClass에 입력된 화면
3. Application 실행 후 CSS 적용 상태 확인¶
o 실제 UI에서 적용된 CSS 확인
<사진 10> CSS 적용된 결과 화면