====== 화면 로더 HTML 가이드 ======
===== 화면 로더 HTML 설명 =====
아래의 내용은 HTML코드 관련 내용이다.
위의 소스에 대한 설명은 아래와 같습니다.
^ 라인 ^ 설명 ^
| 1 | HTML5 문서를 선언하고, 웹 브라우저에게 문서가 HTML5로 작성됨을 알린다. |
| 2 | lang 속성은 웹 페이지의 언어를 선언한다.\\ IOS 국가 코드정보 URL: "https://ko.wikipedia.org/wiki/ISO_3166-1" |
| 3 | 태그의 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 코드 관련 내용이다.
위의 소스에 대한 설명은 아래와 같습니다.
^ 라인 ^ 설명 ^
| 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 코드 관련 내용이다.
위의 소스에 대한 설명은 아래와 같습니다.
^ 라인 ^ 설명 ^
| 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 |
*UI 시작시 가장 처음에 로딩되는 화면이며, 전체 UI 프레임을 구성하는 요소를 포함하고 있는 메인 화면
*메인 화면은 일반 화면과 다른 점은 스타일/글로벌 모듈/글로벌 데이터셋을 로딩하는 과정을 수행합니다.
*화면 경로 : /root/startMain
|