sapUiMargin¶
목적¶
UI 오브젝트 간의 간격을 조절하기 위해 사용됨 (UI5 Style CSS Class)
주요 단계¶
1. 전체 여백 (Full Margins)¶
o UI 요소 간 상하좌우에 균등한 여백을 적용할 때 사용
| Name | Description |
|---|---|
| sapUiTinyMargin | 매우 작은 여백 |
| sapUiSmallMargin | 작은 여백 |
| sapUiMediumMargin | 중간 크기의 여백 |
| sapUiLargeMargin | 큰 여백 |
o 참고: Tiny → Small → Medium → Large 순서로 더 큰 여백을 적용할 수 있음
1.1. 적용 전 UI 예시¶
<사진 1> Margin 적용 전 UI 예시
1.2. sapUiTinyMargin 적용 후 UI 예시¶
<사진 2> sapUiTinyMargin 적용 후 화면
o 상하좌우에 미세한 여백이 추가됨
1.3. sapUiMediumMargin 적용 후 UI 예시¶
<사진 3> sapUiMediumMargin 적용 후 화면
o sapUiTinyMargin보다 더 큰 여백이 적용됨
2. 단일 측면 여백 (Single-Sided Margins)¶
o 특정 방향(위, 아래, 왼쪽, 오른쪽)으로만 여백을 적용할 때 사용
ㆍTop Margin : sapUiTinyMarginTop / sapUiSmallMarginTop / sapUiMediumMarginTop / sapUiLargeMarginTop
ㆍBottom Margin : sapUiTinyMarginBottom / sapUiSmallMarginBottom / sapUiMediumMarginBottom / sapUiLargeMarginBottom
ㆍBegin Margin : sapUiTinyMarginBegin / sapUiSmallMarginBegin / sapUiMediumMarginBegin / sapUiLargeMarginBegin
ㆍEnd Margin : sapUiTinyMarginEnd / sapUiSmallMarginEnd / sapUiMediumMarginEnd / sapUiLargeMarginEnd
2.1. sapUiMarginBegin 적용 후 UI 예시¶
<사진 4> sapUiMarginBegin 적용 후 화면
o UI 요소의 좌측에 여백이 추가됨
o 같은 방식으로 다른 방향에도 적용 가능
3. 양쪽 측면 여백 (Two-Sided Margins)¶
o UI 요소 양쪽(좌우 또는 상하)에 여백을 적용할 때 사용
ㆍBeginEnd : sapUiTinyMarginBeginEnd / sapUiSmallMarginBeginEnd / sapUiMediumMarginBeginEnd / sapUiLargeMarginBeginEnd
ㆍTopBottom : sapUiTinyMarginTopBottom / sapUiSmallMarginTopBottom / sapUiMediumMarginTopBottom / sapUiLargeMarginTopBottom
3.1. sapUiMarginBeginEnd 적용 후 UI 예시¶
<사진 5> sapUiMarginBeginEnd 적용 후 화면 (UI 요소 좌우에 여백이 적용)
3.2. sapUiMarginTopBottom 적용 후 UI 예시¶
<사진 6> sapUiMarginTopBottom 적용 후 화면(UI 요소 상하에 여백이 적용)
4. 여백 제거 (Removing Margins)¶
o sapUiMargin을 통해 추가된 여백을 제거할 때 사용
ㆍ Top : sapUiNoMarginTop
ㆍ Bottom : sapUiNoMarginBottom
ㆍ Begin : sapUiNoMarginBegin
ㆍ End : sapUiNoMarginEnd
4.1. UI with sapUiNoMarginBegin¶
<사진 7> sapUiNoMarginBegin 적용 후 화면
o 위 UI는 좌측에 여백이 있지만, 아래 UI는 여백이 제거됨