9. SAP UI5 Custom CSS 적용(Apply)


SAP UI5 Custom CSS 적용 (Apply)

이 단계에서는 SAP UI5에서 제공하는 Margin 관련 CSS 적용 방법과 사용자가 직접 구성한 Custom CSS를 적용하는 방법을 알아본다.
(In this step, we will find out how to apply the Margin-related CSS provided by SAP UI5 and how to apply the custom CSS configured by the user.)

실행 결과 (Results of this step)

  UI5의 Text Component를 사용하여 UI5 표준 Margin 및 글씨체와 Bold를 적용한다.
  (Apply UI5 standard Margin and font & Bold using the Text Component in UI5.)



실행 순서 (Order of execution of this step):

  1. UI5 Standard Margin CSS 적용하기
    (Apply UI5 standard Margin.)

  2. Custom CSS 적용하기
    (Apply the Custom CSS.)

1. UI5 Standard Margin CSS 적용하기
   (Apply UI5 standard Margin.)

  • webapp/view/sample/Pageviewsample.view.xml에 Text 컴포넌트 추가 및 CSS 내용 추가한다.
    (Add text components and CSS content to "webapp/view/samples/pageviewsample.view.xml".)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<mvc:View
    controllerName="ui5_tutorial.controller.sample.PageViewSample" 
    xmlns:mvc="sap.ui.core.mvc"    
    xmlns="sap.m"    
    height="100%">
    <Button
      text="{i18n>showHelloButtonText}"
      press=".onShowHello"
      class="sapUiSmallMarginBeginEnd"/>
   <Input
      value="{/recipient/name}"
      description="Hello {/recipient/name}"
      valueLiveUpdate="true"
      width="60%"/>    
      <Text text="{i18n>regularText}" class="sapUiTinyMargin" />
      <Text text="{i18n>boldText}" class="sapUiTinyMargin" />
</mvc:View>
 


  • 코드 해석 (Code description)
    • <Text text="{i18n>regularText}" class="sapUiTinyMargin" />
      <Text text="{i18n>boldText}" class="sapUiTinyMargin" />
      : 다국어를 적용한 Text를 추가하고 SAP에 표준 Margin CSS를 추가한다.
      (Add multilingual text and add standard Margin CSS to SAP UI5.)
        다국어 적용 방법은 이전에 작성한 7. SAP UI5 Multilingual Application(다국어 적용)을 참고 
      (      Refer to 7. SAP UI5 Multilingual Application previously created for multi-lingual application.)

    • UI5 Standard Margin List - Using Predefined CSS Margin Classes (sap.com)
      :       Tiny, Small, Medium or Large 은 각각 8, 16, 32 or 48px 만큼 Margin 띄운다.
      (Tiny, Small, Medium, or Large floats Margin by 8, 16, 32, or 48 px, respectively.)
      : Top은 위쪽, Bottom은 아래쪽, Begin은 왼쪽, End는 오른쪽에 Margin 띄운다.
      (Top, Bottom, Begin, End float Margin in each direction.)

    • Single-Side Margin

sapUiTinyMarginTop

sapUiSmallMarginTop

sapUiMediumMarginTop

sapUiLargeMarginTop

sapUiTinyMarginBottom

sapUiSmallMarginBottom

sapUiMediumMarginBottom

sapUiLargeMarginBottom

sapUiTinyMarginBegin

sapUiSmallMarginBegin

sapUiMediumMarginBegin

sapUiLargeMarginBegin

sapUiTinyMarginEnd

sapUiSmallMarginEnd

sapUiMediumMarginEnd

sapUiLargeMarginEnd
    • Two-Side Margins

sapUiTinyMarginBeginEnd

sapUiSmallMarginBeginEnd

sapUiMediumMarginBeginEnd

sapUiLargeMarginBeginEnd

sapUiTinyMarginTopBottom

sapUiSmallMarginTopBottom

sapUiMediumMarginTopBottom

sapUiLargeMarginTopBottom
    • Removing Margins

sapUiNoMarginTop

sapUiNoMarginBottom

sapUiNoMarginBegin

sapUiNoMarginEnd

2. Custom CSS 적용하기
(Apply the Custom CSS.)

  • 실행순서 (Order of execution of this step): 

    1. Custom CSS 를 정의할 CSS 파일 신규 생성한다.
      (Create a new CSS file to define the Custom CSS.)
    2. manifest.json 파일에 Custom CSS 파일 경로 지정한다.
      (Path the Custom CSS file to the manifest.json file.)
    3. View에 CSS 적용한다.
      (Apply CSS to View.)

        1. Custom CSS 를 정의할 CSS 파일 신규 생성한다.
           (Create a new CSS file to define the Custom CSS.)

    • webapp/css/style.css 파일 신규 생성 및 Custom CSS 작성한다.
      (Create a new "webapp/css/style.css" file and create a Custom CSS.)
    • webapp/resources/fonts/폴더 생성 후 Font 파일을 추가한다.
      (Create "webapp/resources/fonts/folder" and add Font file.)
    • Custom CSS File Content
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@font-face {
    src:url(../resources/fonts/NanumSquareRoundEB.ttf);
    font-family: "Nanum Extra Bold";
 }
  
 @font-face {
    src:url(../resources/fonts/NanumSquareRoundR.ttf);
    font-family: "Nanum Regular";
 }
    
 .customRegularText {
    font-family: 'Nanum Regular' !important;  
    font-size: 1rem;    
 }
 .customBoldText {
    font-family: 'Nanum Extra Bold' !important;  
    font-size: 1rem;    
 }
 


    • 코드 해석 (Code description)
                 @font-face {
                          src:url(../resources/fonts/NanumSquareRoundEB.ttf);
                          font-family: "Nanum Extra Bold";
                 }
                  : CSS 문법으로 신규 추가한 NanumSquareRoundEB.ttf Font 파일을 적용할 때 CSS에서는 “Nanum Extra Bold”로 명명하여 사용하겠다는 선언이다.
                  (When applying the newly added "NanumSquareRoundEB.ttf " Font file as CSS grammar, CSS declares that it will be used as "Nanum Extra Bold".)

                  .customRegularText {
                           font-family: ' Nanum Regular' !important;  
                           font-size: 1rem;    
                   }
                    : View에 customRegularText 이름의 CSS를 적용하면 Font Size를 1rem으로 하고 NanumSquareRoundR.ttf font를 적용한다는 선언이다.
                     (Applying CSS with "customRegularText" name to View declares that Font Size is set to 1rem and "NanumSquareRoundR.tt" font is applied.)

        2.manifest.json 파일에 Custom CSS 파일 경로 지정한다.
           (Path the Custom CSS file to the manifest.json file.)

    • manifest.json 파일 중 "sap.ui5" 하위에 resources 속성을 추가하여 Custom CSS 파일 경로를 지정한다.
      (Specify the Custom CSS file path by adding the resources attribute below "sap.ui5" in the "manifest.json" file.)
        1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
...
  "sap.ui5": {
    ...    
    "rootView": {
      ...
    },
    "resources": {
      "css": [
        {
          "uri": "css/style.css"
        }
      ]
    }
  }
 


        3. View에 CSS 적용한다.
           (Apply CSS to View.)

    • 위에서 추가한 Text 에 Custom CSS를 class 값으로 할당한다.
      (Allocate Custom CSS as a class value to the text added above.)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<mvc:View
    controllerName="ui5_tutorial.controller.sample.PageViewSample" 
    xmlns:mvc="sap.ui.core.mvc"    
    xmlns="sap.m"    
    height="100%">
    <Button
      text="{i18n>showHelloButtonText}"
      press=".onShowHello"
      class="sapUiSmallMarginBeginEnd"/>
   <Input
      value="{/recipient/name}"
      description="Hello {/recipient/name}"
      valueLiveUpdate="true"
      width="60%"/>    
      <Text text="{i18n>regularText}" class="sapUiTinyMargin CustomRegularText" />
      <Text text="{i18n>boldText}" class="sapUiTinyMargin CustomBoldText" />
</mvc:View>
 


댓글

댓글 쓰기

이 블로그의 인기 게시물

SAP UI5 개발환경 구성하기(Creating a Development Environment)

이미지
  SAP UI5 개발 환경 설치해보자. 설치 필요 항목( List of required installations ) Node.Js - javascript runtime & npm 사용을 위함 VS Code(Visual Studio Code) Install -  소스 코드 편집기 VS Code Extensions install UI5 CLI(Command Line Interface) - CMD 명령어를 통해서 UI5를 활용 가능 SAP Fiori Tools Extension Pack - 기본 제공되는 Fiori 구성 요소 활용 가능  Node.Js Install Node.Js 사이트에서 설치 파일 다운로드 및 설치 수행하자. ( Download and install the installation file from the Node.Js site.)   Node.Js URL:  https://nodejs.org 다운로드 받은 파일을 실행해서 기본 값 변경 없이 그냥 설치하면 된다. ( You just need to run the downloaded file and install it without changing the default value.)  VS Code(Visual Studio Code) Install Visual Studio Code 사이트에서 설치 파일 다운로드 및 설치 수행하자. ( Download and install the installation file from the VS Code site.)   Visual Studio Code URL:   https://code.visualstudio.com 다운로드 받은 파일을 실행해서 기본 값 변경 없이 그냥 설치하면 된다. ( You just need to run the downloaded file and install it without changing the default value.)    ...
자세한 내용 보기

7. SAP UI5 Multilingual Application (다국어 적용)

이미지
  SAP UI5 Multilingual Application (다국어 적용)  이번 단계에서는 ResourceModel을 활용하여 Application에 다국어를 적용하는 방법에 대해서 살펴본다.  (In this step, we will look at how to apply multilingualism to applications using ResourceModel.) 실행결과(Results of this step)   브라우저의 언어가 한국어인 경우를 가정하여 i18n 파일을 활용하여 한국어가 적용된 application을 만든다.   (Assuming that the browser's language is Korean, use the i18n file to create an application to which Korean is applied.)      실행 순서(Order of execution of this step): i18n_ko.properties 파일 생성하여 한국어 등록한다. (Create the "i18n_ko.properties" file and register in Korean.) manifest.json 파일에 한국어 정보를 추가한다. (Add Korean information to the "manifest.json" file.) 1. i18n_ko.properties 파일 생성하여 한국어 등록한다.    (Create the "i18n_ko.properties" file and register in Korean.) webapp/i18n/i18n_ko.properties 파일을 신규 생성한 후 한국어 번역 정보를 추가한다. (Add Korean translation information after creating a new "webapp/i18n/i18n_ko.properties" file.) 한국어 외에 다른 언어를 추가할 때에는 로케일 접미사...
자세한 내용 보기