화면 로더 가이드
개요
이 장에서는 본 문서의 화면 로더 정의와HTML, CSS, JS기본 구조 및 화면 로더의 상세 내용 대해서 기술합니다. 이 장에서 기술하는 내용은 아래와 같습니다.
- 화면 로더 개요
- 실행 파라미터란
- 메인 화면이란
본 문서의 목적
본 문서는 화면 로더에 대한 가이드 문서입니다.
주요 내용
본 문서에서는 아래와 같은 내용을 포함하고 있습니다.
- 화면 로더 정의
- HTML, CSS, JS기본구조
- 화면 로더 상세 내용
관련 자료
본 문서와 관련된 자료는 다음과 같습니다.
- 솔루션 홈페이지 : http://www.softbase.co.kr
화면 로더란
화면 로더의 정의
- 하나의 화면 결과물은 화면 구성요소를 포함하는 XML 파일과 자바스크립트 로직을 포함하고 있는 JS 파일로 구성됩니다.
- 모든 화면은 하나의 “화면로더.html”에 화면 관련 정보를 파라미터로 전달하여 로딩됩니다.
- “화면로더.html”에는 xFrame5 솔루션 엔진용 CSS 파일과 JS 파일이 포함되어 있으며, “화면로더.js” 파일을 포함합니다.
- “화면로더.html”에 전달된 화면 정보를 이용하여 xFrame5 솔루션 엔진이 화면.XML, 화면.JS 파일을 로드하여 동적으로 HTML를 구성하는 방식으로 화면이 표시됩니다.
실행 파라미터의 정의
- “화면로더.html” 파일은 “화면로더.js” 파일을 포함합니다.
- 실행 파라미터는 “화면로더.js” 파일에는 “_xf_param” 변수명으로 정의된 오브젝트내 정의된 설정정보를 의미합니다.
- 실행 파라미터에는 화면 실행 시 사용되는 다양한 구성 정보가 정의되어 있습니다.
메인 화면 정의
- 메인 화면은 “MAINFRAMESCREEN” 실행 파라미터에 정의된 화면을 의미하며, “화면로더.html” 파일을 화면 정보 파라미터 없이 로딩 시 처음으로 로딩되는 화면입니다.
- 메인 화면은 일반 화면과 다른 점은 스타일/글로벌 모듈/글로벌 데이터셋을 로딩하는 과정을 수행합니다.
주요 파일에 대한 정보는 다음과 같다.
| 구분 | 내용 | 파일 | 설명 |
|---|---|---|---|
| 기본 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 문서의 기본 골격은 <!DOCTYPE html>, <HTML>, <HEAD>, <TITLE>, <BODY> 태그로 이루어져 있습니다.
- HTML 요소는 “태그”를 사용해서 문서의 다른 텍스트와 구분합니다. 태그는 “<”, 태그 이름, “>“로 이루어집니다. 태그 안의 요소 이름은 대소문자를 구분하지 않습니다.
- 즉, 대문자, 소문자, 아니면 섞어서도 작성할 수 있습니다.
| HTML 문서의 구조 | 내용 |
|---|---|
| <!DOCTYPE html> | HTML5 문서를 선언하는 구문. 웹 브라우저에게 문서가 HTML5로 작성됨을 알림 |
| <HTML> | HTML 문서의 시작 |
| < HEAD> <meta charset=“utf-8”> <TITLE> ··· </TITLE> </HEAD> | <HEAD>는 HTML문서의 머리글을 나타내는 태그 <META>태그, <TITLE>태그, CSS, JavaScript 등이 위치함. <meta charset=“utf-8”>는 HTML 문서의 문자 인코딩 방식을 명시 <TITLE> 태그는 웹 페이지의 제목을 나타내는 태그 |
| <BODY> … </BODY> | <BODY>는 HTML 문서의 본문을 나타내는 태그 문서 본문에 해당하는 부분으로 실제 화면에 나타나는 메인 부분 |
| </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코드 관련 내용이다.
<!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">
위의 소스에 대한 설명은 아래와 같습니다.
| 라인 | 설명 |
|---|---|
| 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 코드 관련 내용이다.
<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"> -->
위의 소스에 대한 설명은 아래와 같습니다.
| 라인 | 설명 |
|---|---|
| 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 코드 관련 내용이다.
<!-- 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>
위의 소스에 대한 설명은 아래와 같습니다.
| 라인 | 설명 |
|---|---|
| 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 코드 관련 내용이다.
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',
위의 소스에 대한 설명은 아래와 같습니다.
| 구분 | 항목 | 설명 |
|---|---|---|
| 5 | ENGINEHTMLURL | ENGINE 파일 기본 HTML |
| 6 | MAINFRAMESCREEN |
|