티스토리 뷰

SAP

SAP UI 5 튜터리얼 번역 - Step1:Hello World

KyeongRok Kim 2016. 1. 31. 16:39

SAP UI 5 튜터리얼 번역 - Step1:Hello World



SAPUI5 영문 문서를 번역해 보려 한다.


의역이 많고 번역이 다소 다를 수 있으나 내가 직접 만들어보고 이해할만한 수준으로 번역하고자 노력했다.


스텝1:핼로우 월드

원본 문서는 아래 링크를 누르면 나온다.

https://sapui5.hana.ondemand.com/#docs/guide/2680aa9b16c14a00b01261d04babbb39.html


SAPUI5는 HTML5로 되어있다. HTML을 이용해 'Hello World'를 출력 해보자.


그림1:웹브라우저에서 "Hello World"가 출력 되는걸 볼 수 있다.


webapp/index.html(New)

<!DOCTYPE html >
<html>
   <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
      <meta charset="UTF-8">
      <title>Walkthrough</title>
   </head>
   <body>
      <p>Hello World</p>
   </body>
</html>

'webapp'이라는 폴더를 만들고 그 폴더에 앞으로 튜터리얼을 해나가면서 만들 모든 파일을 넣자. 지금 만든 'webapp'폴더는 앞으로 "앱 폴더"라고 부를 것이다.


방금 만든 '앱 폴더'에 루트 html파일인 index.html을 만들자. 대부분의 HTML문서는 기본적으로 두부분으로 구분 되어 있는데 하나가 head이고 또 하나가 body이다. head는 웹브라우저가 문서를 처리하는데 사용하는 부분이다. meta 태그를 이용하면 웹브라우저가 작동하는 방식을 컨트롤 할 수 있다.


위 소스코드의 경우는 content="IE=edge"이 부분을 보았을 때 마이크로소프트 인터넷 익스플로러 엔진(edge라는 이름이다)으로 렌더링할 예정이고 해당 문서의 인코딩은 UTF-8이라고 메타 태그에 선언을 해놓았다. 웹 브라우저의 타이틀에 표시될 텍스트도 지정 했다.


위 소스코드에서 알 수 있듯이 제목은 하드코딩으로 넣어놓았다.


body부분은 페이지의 레이아웃을 설정한다. 위 소스코드의 경우는 p 태그를 이용해 단순히 "Hello World"를 출력한다.


end.





저작자표시 비영리

'SAP' 카테고리의 다른 글

SAPUI5 Project 생성  (2) 2016.01.23
SAPUI5 Local Eclipse 개발 Tool 설치  (0) 2016.01.23
How-to Guide:Building SAPUI5 Application on SAP NetWeaver AS ABAP - 04  (0) 2014.12.15
How-to Guide:Building SAPUI5 Application on SAP NetWeaver AS ABAP - 03  (1) 2014.12.15
SAP Software Download Center에 접속해보자  (0) 2014.12.15
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
글 보관함