화면 로더 HTML 가이드
화면 로더 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 코드 관련 내용이다.
<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구성 방식
아래의 내용은 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 실행 환경 구성 정보 설정 파일이다. |
화면 로더.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 |
|