====== 화면 로더 가이드 ======
===== 개요 =====
이 장에서는 본 문서의 화면 로더 정의와HTML, CSS, JS기본 구조 및 화면 로더의 상세 내용 대해서 기술합니다. 이 장에서 기술하는 내용은 아래와 같습니다.
*화면 로더 개요
*실행 파라미터란
*메인 화면이란
==== 본 문서의 목적 ====
본 문서는 화면 로더에 대한 가이드 문서입니다.
==== 주요 내용 ====
본 문서에서는 아래와 같은 내용을 포함하고 있습니다.
*화면 로더 정의
*HTML, CSS, JS기본구조
*화면 로더 상세 내용
==== 관련 자료 ====
본 문서와 관련된 자료는 다음과 같습니다.
*솔루션 홈페이지 : http://www.softbase.co.kr
*테크넷: http://technet.softbase.co.kr
==== 화면 로더란 ====
=== 화면 로더의 정의 ===
*하나의 화면 결과물은 화면 구성요소를 포함하는 XML 파일과 자바스크립트 로직을 포함하고 있는 JS 파일로 구성됩니다.
*모든 화면은 하나의 “화면로더.html”에 화면 관련 정보를 파라미터로 전달하여 로딩됩니다.
*“화면로더.html”에는 xFrame5 솔루션 엔진용 CSS 파일과 JS 파일이 포함되어 있으며, “화면로더.js” 파일을 포함합니다.
*“화면로더.html”에 전달된 화면 정보를 이용하여 xFrame5 솔루션 엔진이 화면.XML, 화면.JS 파일을 로드하여 동적으로 HTML를 구성하는 방식으로 화면이 표시됩니다.
=== 실행 파라미터의 정의 ===
*“화면로더.html” 파일은 “화면로더.js” 파일을 포함합니다.
*실행 파라미터는 “화면로더.js” 파일에는 “_xf_param” 변수명으로 정의된 오브젝트내 정의된 설정정보를 의미합니다.
*실행 파라미터에는 화면 실행 시 사용되는 다양한 구성 정보가 정의되어 있습니다.
=== 메인 화면 정의 ===
*메인 화면은 “MAINFRAMESCREEN” 실행 파라미터에 정의된 화면을 의미하며, “화면로더.html” 파일을 화면 정보 파라미터 없이 로딩 시 처음으로 로딩되는 화면입니다.
*메인 화면은 일반 화면과 다른 점은 스타일/글로벌 모듈/글로벌 데이터셋을 로딩하는 과정을 수행합니다.
주요 파일에 대한 정보는 다음과 같다.
|< 100% 200px - >|
^ 구분 ^ 내용 ^ 파일 ^ 설명 ^
| 기본 xFrame5 HTML 파일 | C:\xFrame5 | xframe5.html | xframe5 시작용 HTML 파일\\ xframe5.js, xframe5.css 파일을 사용 |
| ::: | ::: | xframe5.css | xframe5.html 파일의 기본 스타일 정의 파일 |
| ::: | ::: | xframe5.js | xframe5 실행 환경 구성 정보 설정 파일 |
===== HTML 기본 구조 =====
이 장에서는 HTML 기본구조에 대해서 기술합니다. 이 장에서 기술하는 내용은 아래와 같습니다.
*HTML 기본구조
==== HTML5 문서의 기본구조 ====
Html5 문서의 기본 구조는 아래와 같습니다.
* HTML 문서의 기본 골격은 , , , , <BODY> 태그로 이루어져 있습니다.
* HTML 요소는 "태그"를 사용해서 문서의 다른 텍스트와 구분합니다. 태그는 "<", 태그 이름, ">"로 이루어집니다. 태그 안의 요소 이름은 대소문자를 구분하지 않습니다.
* 즉, 대문자, 소문자, 아니면 섞어서도 작성할 수 있습니다.
^ HTML 문서의 구조 ^ 내용 ^
| <!DOCTYPE html> |HTML5 문서를 선언하는 구문. 웹 브라우저에게 문서가 HTML5로 작성됨을 알림 |
| <HTML> | HTML 문서의 시작 |
| <WRAP>
< HEAD>
<meta charset="utf-8">
<TITLE> ···
|
는 HTML문서의 머리글을 나타내는 태그
태그, 태그, CSS, JavaScript 등이 위치함.
<meta charset="utf-8">는 HTML 문서의 문자 인코딩 방식을 명시
<TITLE> 태그는 웹 페이지의 제목을 나타내는 태그
</WRAP> |
| <BODY> ... </BODY> | <WRAP>
<BODY>는 HTML 문서의 본문을 나타내는 태그
문서 본문에 해당하는 부분으로 실제 화면에 나타나는 메인 부분
</WRAP> |
|</HTML > | HTML 문서의 끝 |
===== 화면 로더 HTML =====
이 장에서는 화면 로더 HTML 구조와 기능에 관한 내용을 대해서 기술합니다. 이 장에서 기술하는 내용은 아래와 같습니다.
*화면 로더 기능 설명
*화면 구성 요소
*HTML 화면 로더 구조 기능 설명
==== 화면 로더 기능 설명 ====
모든 화면은 하나의 “화면로더.html”에 화면 관련 정보를 파라미터로 전달하여 로딩됩니다.
=== 프로그램 구성 파일 ===
아래의 내용은 xframe5 프로그램 문서를 파일로 기록하여 모아 놓은 경로이다.
^ 파일 ^ 설명 및 기능 ^
| ./xframe5.ico"/ | 브라우저에 좌측에 표시할 아이콘파일이다. |
| ./xf5/css/xf_engine.min.css | 엔진에서 사용하는 HTML 요소의 기본 스타일을 브라우저 간 일관성을 유지하도록 돕는 CSS 파일이다. |
| ./xframe5.css | 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일 시트이다. |
| ./xf5/site/xf_site.css | CSS을 추가로 정의 하고싶을 때 사용한다. |
| ./xf5/ext/lib/jquery-3.2.1.min.js | jQuery를 사용하기 위한 파일입니다. |
| ./xf5/lib/xf_const.min.js | 상수로 저장되어진 축소된 js파일이며 수정이 불가능하다. |
| ./xf5/lib/xf_engine.min.js | 엔진을 다루는 js 파일이다. 코드를 해석하고 실행한다. |
| ./xframe5.js | xframe5 실행 환경 구성 정보 설정 파일이다. |
==== 화면 구성 요소 ====
=== XML파일===
* XML(Extensible Markup Language)은 데이터를 정의하는 규칙을 제공하는 마크업 언어입니다.
* XML 파일은 .xml 확장자로 저장할 수 있는 텍스트 기반 문서입니다.
* XML은 웹 사이트, 데이터베이스 및 타사 애플리케이션과 같은 컴퓨터 시스템 간의 정보 교환을 지원합니다. 사전 정의된 규칙을 사용하면 수신자가 이러한 규칙을 사용하여 데이터를 효율적으로 정확하게 읽을 수 있으므로 모든 네트워크에서 데이터를 XML 파일로 손쉽게 전송할 수 있습니다.
=== XML과 HTML의 차이점 ===
* HTML의 용도는 데이터를 표시하는 것입니다. 그러나 XML은 데이터를 저장하고 전송합니다.
* HTML에는 미리 정의된 태그가 있지만 사용자는 XML에서 고유한 태그를 만들고 정의할 수 있습니다.
* XML은 대/소문자를 구분하지만 HTML은 구분하지 않습니다. <book> 대신 <Book>으로 태그를 작성하면 XML 구문 분석기에서 오류가 발생합니다.
HTML 관련된 태그 설명은 아래와 같습니다.
=== <TITLE> 태그 정의 ===
TITLE태그에 대한 설명은 아래와 같습니다.
| TITLE | 문서의 제목을 담습니다. |
=== <META> 태그 정의 및 특징 ===
META태그에 대한 설명은 아래와 같습니다.
^ 구분 ^ 정의 및 특징 ^
| META | 해당 문서에 대한 정보인 메타데이터를 정의할 때 사용한다. |
| name | 메타 데이터를 위한 이름을 지정한다. |
| http-equiv | content 속성에 명시된 값에 대한 HTTP 헤더를 제공한다. |
| charset | 해당 문서의 문자 인코딩 방식을 지정한다. |
| content | name 속성이나 http-equiv속성과 관련된 값을 지정한다. |
==== HTML화면 로더 구조 기능 설명 ====
아래의 내용은 HTML코드 관련 내용이다.
<sxh javascript>
<!doctype html>
<html lang="ko">
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</sxh>
위의 소스에 대한 설명은 아래와 같습니다.
^ 라인 ^ 설명 ^
| 1 | HTML5 문서를 선언하고, 웹 브라우저에게 문서가 HTML5로 작성됨을 알린다. |
| 2 | lang 속성은 웹 페이지의 언어를 선언한다.\\ IOS 국가 코드정보 URL: "https://ko.wikipedia.org/wiki/ISO_3166-1" |
| 3 | <meta> 태그의 charset 속성은 해당 HTML 문서의 문자 인코딩 방식을 명시한다.\\ URL : " https://developer.mozilla.org/ko/docs/Glossary/UTF-8" |
| 4 | 페이지 로드시마다 페이지를 캐싱하지 않습니다.\\ 관련 URL : "https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Cache-Control" |
| 5 | 캐쉬에서 해당 페이지를 읽어들이는 걸 방지합니다.\\ 관련 URL : "https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Pragma" |
| 6 | Viewport는 현재 보고 있는 컴퓨터 화면의 영역입니다. width=device-width 웹 페이지의 크기가 모니터 화면에 맞는 비율로 뜨도록 한다.\\ initial-scale=1 보여지는 화면의 줌 정도를 1배율로 한다는 뜻으로 값을 키울수록 화면 줌이 되어 더 크게 보인다. |
| 7 | X-UA-Compatible 태그로 웹의 호환성을 지정한다. Content=”IE=edge”는 IE브라우저에서 각 버전 중 가장 최신 표준 모드를 선택하는 문서 모드이다.\\ edge라는건 IE 브라우저의 최신 버전의 엔진을 사용하라는 뜻이다. |
===== CSS 기본 구조 =====
이 장에서는 CSS코드에 대한 내용을 대해 기술합니다. 이 장에서 기술하는 내용은 아래와 같습니다.
*CSS 정의
*화면 로더 CSS 구성 방식
==== CSS란 ====
아래의 내용은 CSS기본 정의에 관한 내용이다.
=== CSS 정의 ===
HTML이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링 되어야 하는지 지정합니다.
===CSS 상세 설명===
여러 웹페이지에서 공통적인 CSS를 참조할 때, 중복 코드를 제거할 수 있기에 매우 유용하며, 문서 규격과 스타일의 분리를 위해 (작업의 분담) CSS를 별도의 파일로 분리하여 사용하는 것이 좋습니다.
=== CSS 꾸미는 방법 ===
CSS 꾸미는 방법은 3가지를 포함하며 설명은 아래와 같습니다.
* 속성에 STYLE적용
* STYLE TAG 사용
* CSS 파일을 별도로 만들어 HTML 문서에 연결
CSS 파일을 별도로 만들어 HTML 문서에 연결 사용법은 아래와 같습니다
^ 구분 ^ 사용법 ^
| CSS 파일 | CSS파일 예시\\ <head>\\ link rel="stylesheet" type="text/css" href="경로.css ">\\ </head> |
=== <Link>태그 정의 및 특징 ===
Link 태그의 정의 및 특징에 대한 설명은 아래와 같습니다.
^ 구분 ^ 정의 및 특징 ^
| Link | <link> 태그의 rel 속성은 현재 문서와 외부 리소스 사이의 연관 관계를 명시합니다. |
| rel | <link> 요소에 반드시 명시되어야 하는 필수 속성입니다. |
| icon | 사용자 인터페이스에서 해당 문서를 나타낼 리소스(일반적으로 아이콘)를 불러옵니다. |
| stylesheet | 스타일 시트(stylesheet)로 사용할 외부 리소스를 불러옴. |
==== 화면 로더CSS 구성 방식 ====
아래의 내용은 CSS 코드 관련 내용이다.
<sxh javascript>
<link rel="shortcut icon" href="./xframe5.ico"/>
<!-- xFrame CORE/BASIC/EXT CSS -->
<link rel="stylesheet" type="text/css" href="./xf5/css/xf_engine.min.css">
<!-- xFrame Page CSS -->
<link rel="stylesheet" type="text/css" href="./xframe5.css">
<!-- xFrame Customized CSS -->
<!--
<link rel="stylesheet" type="text/css" href="./xf5/site/xf_site.css">
-->
</sxh>
위의 소스에 대한 설명은 아래와 같습니다.
^ 라인 ^ 설명 ^
| 1 | 탭 옆에 있는 이미지 아이콘을 표현하기 위해 shortcut icon 이 사용된다.\\ 상단 탭에 보여지는 아이콘을 "./xframe5.ico"/" 에서 불러옴. |
| 3 | 스타일 시트(stylesheet)로 사용할 외부 리소스 "./xf5/css/xf_engine.min.css" 를 불러옴. |
| 5 | 스타일 시트(stylesheet)로 사용할 외부 리소스 "./xframe5.css" 를 불러옴. |
| 8 | 주석 처리되어 있는 8번라인 "./xf5/site/xf_site.css" 경로는 css 추가 수정하고 싶을 때 불러옴. |
===== 화면 로더 JS =====
이 장에서는 JS코드에 대한 내용을 대해 기술합니다. 이 장에서 기술하는 내용은 아래와 같습니다.
*JS 정의
*화면 로더 JS 구성 방식
==== JS란 ====
이 장은 JS에 대한 설명과 태그 관련 내용을 구성하고 있습니다.
=== JS정의 ===
JavaScript는 동적으로 콘텐츠를 바꾸고, 멀티미디어를 제어하고, 애니메이션을 추가하는 등 거의 모든 것을 만들 수 있는 스크립트 언어입니다. 자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있습니다.
JS 상세 설명은 아래와 같습니다.
=== 내부 자바스크립트 ===
* HTML 문서 내부에 <script>태그를 사용하여 자바스크립트 소스코드를 사용합니다. <head></head> 혹은 <body></body> 에 둘 수 있으며 양쪽에 모두 있어도 상관없습니다.
=== 외부 자바스크립트 ===
* 자바스크립트 코드는 HTML 문서의 내부뿐만 아니라 외부 파일로 생성하여 삽입할 수도 있습니다.
* 자바스크립트 파일의 위치는 HTML과 동일한 서버 혹은 외부 서버일수도 있습니다.
* 외부에 작성된 자바스크립트 파일은 .js 확장자를 사용하여 저장합니다.
* 해당 자바스크립트 파일을 적용하고 싶은 모든 웹 페이지에 <script> 태그를 사용해 외부 자바스크립트 파일을 포함하면 됩니다.
=== 내부 자바스크립트 VS 외부 자바스크립트 ===
* 비교적 간단한 코드로 구성되며 현재 파일에만 적용되는 경우 내부 자바스크립트를 사용합니다.
* 공통기능 구현이나 소스가 길어지면 외부 자바스크립트로 관리합니다.
* 공통 라이브러리로 개발된 경우 CDN을 통해 외부 서버로부터 참조해서 사용합니다.
=== JS파일 ===
* JS(JavaScript)는 웹 페이지에서 실행하기 위한 JavaScript 코드를 포함하는 파일입니다.
* JavaScript 코드는 JavaScript 엔진에 의해 해석됩니다.
* JavaScript 파일은 .js 확장자로 저장됩니다.
JS 파일을 사용하려면 HTML 문서에 포함해야 하며 사용법은 아래와 같습니다.
^ 구분 ^ 사용법 ^
| JavaScript 파일 | JavaScript 파일 예시\\ <body>\\ <script type="text/javascript" src="경로.js"></script>\\ </body> |
=== <script> 태그 정의 및 특징 ===
<script>태그 정의 및 특징에 대한 설명은 아래와 같습니다.
^ 구분 ^ 정의 및 특징 ^
| SCRIPT |자바스크립트와 같은 클라이언트 사이드 스크립트(client-side scripts)를 정의할 때 사용한다. |
| src | <script> 태그의 src 속성은 외부 스크립트 파일의 URL을 명시합니다. |
| url | 외부 스크립트 파일의 URL\\ 1. 절대주소\\ 절대주소란 'http:// (또는 'https://)로 링크하는 것.\\ ex) src="http://www.softbase.com/sample.js"\\ 2.상대주소\\ 상대 주소란 현재 내 파일 위치를 기준으로 해서 다른 파일을 불러오는 것.\\ ex) src="/scripts/sample.js" |
| type | 스크립트의 유형을 나타냅니다. |
==== 화면 로더 JS구성 방식 ====
아래의 내용은 HTML에JS 코드 관련 내용이다.
<sxh javascript>
<!-- External JS -->
<script type="text/javascript" src="./xf5/ext/lib/jquery-3.2.1.min.js"></script>
<!-- xFrame5 JS -->
<script type="text/javascript" src="./xf5/lib/xf_const.min.js"></script>
<script type="text/javascript" src="./xf5/lib/xf_engine.min.js"></script>
<!-- xFrame5 Page JS -->
<script type="text/javascript" src="./xframe5.js"></script>
</sxh>
위의 소스에 대한 설명은 아래와 같습니다.
^ 라인 ^ 설명 ^
| 2 | 외부 스크립트 URL : "./xf5/ext/lib/jquery-3.2.1.min.js" 로 경로 설정한다.\\ ./xf5/ext/lib/jquery-3.2.1.min.js : 웹 서버에 ./xf5/ext/lib 라는 디렉토리가 존재하고 그 안에 jquery-3.2.1.min.js 파일이 있어야 한다. |
| 4 | 외부 스크립트 URL : "./xf5/lib/xf_const.min.js" 로 경로 설정한다.\\ 이 경로는 재할당뿐만 아니라 재선언도 불가능합니다. |
| 5 | 외부 스크립트 URL : "./xf5/lib/xf_engine.min.js"로 경로 설정한다.\\ 엔진코드를 축소한 파일이다.\\ 자바스크립트 코드를 해석하고 실행시켜주는 프로그램 혹은 인터프리터. (JS 엔진은 인터프리터로 구현될 수도 있다.) 가능한 짧은 시간 내에 가장 최적화된 코드를 생성하는 것이 목표이다.\\ |
| 7 | 외부 스크립트 URL : "./xframe5.js"로 경로 설정한다. xframe5 실행 환경 구성 정보 설정 파일이다. |
===== xFrame5.JS =====
이 장에서는 xFrame5.js기술합니다. 이 장에서 기술하는 내용은 아래와 같습니다.
* Xframe5.js 코드 설명
==== xFrame5.js ====
아래의 내용은 xFrame5.js 코드 관련 내용이다.
<sxh javascript>
var _xf_param = {
DBMS_CHARSET: 'UTF-8', // 데이터 문자셋(기본: EUC-KR, UTF-8/EUC-KR, ...)
ENGINEVER: '2.0.0.20150710',
ENGINEURL: './xf5', // ENGINE 파일 기본 URL
ENGINEHTMLURL: './xframe5.html', // ENGINE 파일 기본 HTML
ENGINEMODE: 'RELEASE', // ENGINE 실행 모드(RELEASE/DEBUG/DEVELOP)
APPNAME: 'xframe5',
USE_CACHE: true,
MAINFRAMESCREEN: '/root/startMain',
</sxh>
위의 소스에 대한 설명은 아래와 같습니다.
^ 구분 ^ 항목 ^ 설명 ^
| 5 | ENGINEHTMLURL | ENGINE 파일 기본 HTML |
| 6 | MAINFRAMESCREEN | <WRAP outdent>
*UI 시작시 가장 처음에 로딩되는 화면이며, 전체 UI 프레임을 구성하는 요소를 포함하고 있는 메인 화면
*메인 화면은 일반 화면과 다른 점은 스타일/글로벌 모듈/글로벌 데이터셋을 로딩하는 과정을 수행합니다.
*화면 경로 : /root/startMain
</WRAP> |