opid's document

한글 번역 사이트 바로가기(새창)

번역된 각 문서들을 보고 다운받을수 있는 TTA사이트 바로가기(새창)

영문 다운로드 사이트 바로가기(새창)

HTML 4.01 한글 번역문

http://www.trio.co.kr/webrefer/html/cover.html

이전 포스팅한 로딩바 구현은 어떤 클릭 이벤트가 일어났을 때, 넘어가기전까지 레이어를 보여주는 방식이었더라면

이번 로딩바는 페이지를 로드하는 처음 시점에서 레이어를 보여주고 리소스가 모두 로드되었을 때 레이어를 가려주는 방법이다. 이전 포스팅 내용은 맨 아래 링크로 남겨두었다.

실행되는 페이지에 아래 코드를 넣어준다.

<script type="text/javascript" src="../includes/jquery.js"/>
<script type="text/javascript">
    (function() { loading_ta(1); })();
    $(window).load(function(){ loading_ta(0); });
</script>

아래 코드는 각 페이지에 넣어도되고 js파일로 만들어 포함시켜도 된다.

function loading_ta(view) {
    if(view) {
        var loading_left = '50%', loading_top = '50%'; // 적용이 안되는 상황을 고려해 기본 값 설정 
        if (typeof (window.innerWidth) == 'number') { //Chrome
            loading_left = window.innerWidth / 2;
            loading_top = window.innerHeight / 2;
        } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
            loading_left = document.documentElement.clientWidth / 2;
            loading_top = document.documentElement.clientHeight / 2;
        } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) { //IE9
            loading_left = document.body.clientWidth / 2;
            loading_top = document.body.clientHeight / 2;
        }
        var lo_div = "<div name='lo_div' id='lo_div' style='position:absolute; height:100%; width:100%; top:0; left:0; background:#000000; opacity:0.0; filter:alpha(opacity=00); z-index:9995;'></div><div name='lo_div' id='lo_div' style='position:absolute; height:70; width:200; top:"+loading_top+"; left:"+loading_left+"; margin-left:-100px; margin-top:-35px;  background:#ffffff; opacity:0.8; filter:alpha(opacity=80); z-index:9996;'></div><div name='lo_div' id='lo_div' style='position:absolute; height:70; width:200; top:"+loading_top+"; left:"+loading_left+"; margin-left:-100px; margin-top:-35px; text-align:center; z-index:9998;'><p style='height:30; width:200; margin:15px 0px 15px 0px; font-weight:bold;'>데이터 처리 중입니다.<br>잠시 기다려주십시오.</p></div>";
        document.write(lo_div);
    } else if(!view) {
        var lo_ta = document.getElementsByName("lo_div");
        lo_ta[0].style.display="none";
        lo_ta[1].style.display="none";
        lo_ta[2].style.display="none";
    }
}

어느 정도 시간을 준 뒤에 자바스크립트를 처리하려 할때 사용할 수 있다.

일정시간 딜레이만 주려면 아래와 같은 함수를 만들어 사용하면 된다.

잘못 사용하면 많은 문제점이 따른다. 

먼저 onload는 DOM이 완성된 시점에서 실행된다.

문제 : IE의 9이하로는 javascript에서 setattribute가 실행되지 않는다. 

해결 : 

코딩중에 도저히 내 머리로는 원인을 찾아볼 수 없는 버그가 있었다.

IE10에서는 실행이 되고 IE9에서는 실행이 안되는, 또한 내 컴퓨터에서는 되고 다른 컴퓨터에서는 안되는 문제.

도대체 어느 부분에서 문제가 되는지 머리를 쥐어잡고 찾아보았다.

평소에 console.log로 확인을 하면서 코딩을 하는데 다른 브라우저는 되고, IE9이하에서만 F12로 콘솔창을 띄우면 되고, 안띄운 상태에선 실행이 안되는 문제가 있었다.

콘솔창을 안띄우면 console객체가 정의되지 않은 상태여서 참조 할 수가 없어 console.log() 다음 코드는 실행되지 않는 것 같다.

  해결 방법으로, console.log() 전에 아래 코드를 넣어주면 된다. 조건문을 사용하여 console 객체가 없을 때, 생성하는 것이다.

이번 경험을 통해 console.log 의 사용을 자제해야겠다... alert()으로 테스트해야지

브라우저별로 width, height 구할 때 다른 경우가 많아서 동일하게 적용할 수가 없다.

잘 정리된 코드가 있어서 어느때든 유용하게 사용할 수 있을 것 같다.

출처 : http://ssamkj.tistory.com/3

수직정렬을 위하여 body 높이를 구할때 유용하게 사용할 수 있다.

body 높이 : document.body.scrollHeight

아래 코드로 브라우저의 높이와 폭도 간단하게 구할수 있다.

브라우저의 높이 : document.documentElement.clientHeight

브라우저의 폭 : document.documentElement.clientWidth

반투명 로딩 레이어를 만드려다가 많은 난관에 부딫히게 되었다.

이 중 크로스 브라우저(어떤 브라우저든지 상관없는?)로 사용하기 위하여 opacity 속성이 여러가지 있었다.

filter: alpha(opacity=50);

  IE 10 이하

-khtml-opacity:0.5;

  khtml, old safari

-moz-opacity:0.5;

  mozilla, netscape

opacity:0.5

  IE 10, fx, safari, opera

abstract    boolean    break    byte    case    catch    char    class    const    continue    default    do    double    else    extend    false    finally    float    for    function    goto    if    implements    import    in    instanceof    int    interface    long    native    new    null    package    private    protected    public    return    short    static    super    switch    synchronized    this    throw    throws    transient    true    try    var    void    while    with

저장이나 등록, 전송 버튼을 클릭 후 업로드 되는 동안 사용자가 버튼을 또 클릭하지 못하도록 버튼 클릭 시 레이어를 띄워서 클릭을 못하도록 가려둔다.

사용하는 방법은 버튼 클릭할 때 일어나는 ‘onclick’ 이벤트에서 일어나는 자바스크립트에 loading(1); 을 실행한다.

img_lo에 이미지를 미리 만들어주고, 미리 생성된 이미지를 화면에 포함시켜준다. 멈추는 경우가 발생할 수 있어 reloading_img()를 통해 실행하고 다시 이미지를 넣어준다.

수정사항

2013.08.09 z-index를 javascript에서 zIndex로 사용.

2013.08.12 console.log 버그를 찾고 수정하고 코드 정리함.

2013.08.27 멈추는 경우도 고려해 다시 수정.

var img_lo = document.createElement("span");
img_lo.innerHTML = "<img id="img_lo" src="./loading.gif" width="40" height="40">"

function loading(d) {	//변수 -> 이름,포지션 -> 높이,넓이 -> 마진,패딩 -> 위치 -> 기타
	if(d == 1) {
		var div_full = document.createElement("div");			// 화면 덮는 div
		var div_center = document.createElement("div");			// 센터 텍스트 담는 div
		var div_center2 = document.createElement("div");		// 센터 반투명 div
		var loading_text = document.createElement("p");			// 텍스트 p

		div_full.onclick = function() { alert("처리중 입니다. 잠시만 기다려주세요.") }
		div_center.onclick = function() { alert("처리중 입니다. 잠시만 기다려주세요.") }
	
		//var w = 0, h = 0;					// 크로스브라우징 높이,넓이 조절
		var w = '50%', h = '50%';				
	/*
			if (typeof (window.innerWidth) == 'number') { //Chrome
				 w = window.innerWidth / 2;
				 h = window.innerHeight / 2;
			} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
				 w = document.documentElement.clientWidth / 2;
				 h = document.documentElement.clientHeight / 2;
			} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) { //IE9
				 w = document.body.clientWidth / 2;
				 h = document.body.clientHeight / 2;
			}
	*/
		// 텍스트 태그 생성
		loading_text.style.height = "30";
		loading_text.style.width = "200";
		//loading_text.style.margin = "20px 0px 20px 0px";
		loading_text.style.margin = "15px 0px 15px 0px";
		loading_text.style.fontWeight = "bold";
		loading_text.innerHTML = "데이터 처리 중입니다.
잠시 기다려주십시오."; 

		//전체 투명레이어
		div_full.style.position = "absolute";
		div_full.style.height = "100%";
		div_full.style.width = "100%";
		div_full.style.top = "0";
		div_full.style.left = "0";
		div_full.style.background = "#000000";
		div_full.style.opacity = "0.0";
		div_full.style.filter = "alpha(opacity=00)";
		div_full.style.zIndex = "9995";
	
		//이미지 중앙에 배치할 레이어 
		div_center.style.position = "absolute";
		div_center.style.height = "100";
		div_center.style.width = "200";
		div_center.style.top = h;
		div_center.style.left = w;
		div_center.style.marginLeft = "-100px";
		div_center.style.marginTop = "-50px";
		div_center.style.textAlign = "center";
		div_center.style.zIndex = "9998";

		div_center2.style.position = "absolute";
		div_center2.style.height = "100";
		div_center2.style.width = "200";
		div_center2.style.top = h;
		div_center2.style.left = w;
		div_center2.style.marginLeft = "-100px";
		div_center2.style.marginTop = "-50px";
		div_center2.style.background = "#ffffff";
		div_center2.style.opacity = "0.8";
		div_center2.style.filter = "alpha(opacity=80)";
		div_center2.style.zIndex = "9996";

		//포함시키기
		div_center.appendChild(img_lo);
		div_center.appendChild(loading_text);

		document.body.appendChild(div_full); 
		document.body.appendChild(div_center2); // 이미지는 투명도를 없애기 위해 다른 레이어를 바디에 포함.
		document.body.appendChild(div_center); // 이미지는 투명도를 없애기 위해 다른 레이어를 바디에 포함.
	
	} else if(d == 0) {
		div_full.parentNode.removeChild(div_full);
		div_center2.parentNode.removeChild(div_center2);
		div_center.parentNode.removeChild(div_center);
	}
}

※ 자바스크립트에서는 CSS의 ‘z-index’를 사용할 때, ‘zIndex’로 사용해야 한다.

DOM(document object model) ?

• 객체 지향 모델로써 구조화된 문서를 표현하는 형식이다. 
• HTML문서의 요소들에 접근 가능하도록 되어있다.
• DOM을 사용하면 데이터를 동적으로 화면에 접근하고 변경할 수 있어 접근성과 조작성을 부여할 수 있다.

<html>
<head>
</head>
<body>
    <h1 id="id1">test</h1>
</body>
</html>

원문 링크 : http://api.jquery.com/attribute-equals-selector/

Description: Selects elements that have the specified attribute with a value exactly equal to a certain value.

명시된 속성(attribute)이 정확히 어떤 값(value)과 동일한 요소(element)를 찾아 준다.

추후 소스코드 추가

▣ NumberFormat 클래스의 getNumberInstance() 사용

메서드를 만들고 오버로딩을 통해 편하게 사용할 수 있도록 한다.

NumberFormat 클래스의 또 다른 메서드

NumberFormat.getPercentInstance() : 값을 %단위로 표시해준다.

ex) NumberFormat nf = NumberFormat.getPercentInstance();

nf.format(값);

 parameter로 한글을 입력 받을 때, utf-8로 변환시켜 깨지지 않게하는 함수

window - location 객체

브라우저나 주소 표시줄과 관련되어 있어, 현재 문서에 대한 정보를 가지고 있다.

입출력 관련 기본 객체

서블릿 관련 기본 객체

콘텍스트 관련 기본 객체 

예외 처리 관련 기본 객체

JSP 태그

1. 디렉티브(Directive)

2. 스크립트 요소(Scripting elements)

3. 주석

4. 액션(Action)

1. 디렉티브(Directive)

2. 스크립트 요소(Scripting elements)

선언부(declarations), 스크립트릿(scriptlet), 표현식(expressions)로 구성되어 있다.

3. 주석

1) 내용주석    <!-- 주석 내용 -->

브라우저 화면에선 보이지 않지만 소스 보기를 통해서 확인할 수 있다.

내용 주석 안에 JSP 표현식을 포함할 수 있으며, 표현식의 값마다 다르게 생성되기 때문에 동적인 주석 내용을 만들수 있다.

2) JSP 주석    <%-- 주석 --%>

페이지가 생산하는 내용과는 상관없으며, 오직 JSP파일에서만 보여진다.

3) 스크립트 언어 주석    <% ... /* 주석 */ ... %>

자바의 '/*' 와 '*/', '//'를 사용하여 주석 처리를 할 수 있으며,

 스크립트릿이나 선언부 뿐만 아니라 JSP표현식에서도 주석처리 한다. JSP 콘테이너에 의해 완전히 무시되지 않으며, 변환된 서블릿 코드에 나타난다.

JSP란

"Java Server Pages"로 자바 프로그래밍 언어를 기반으로 하는 웹 기본의 서버측 동적 문서 생성을 위한 템플릿 시스템이다.

태그 규약

스크립트 태그

JSP 스크립트 요소들을 표현하기 위해 사용.

'<%'로 시작하며 '%>'로 종료.

스크립트 태그 안에 기술되는 JSP 스크립트 요소들은 !, =, @ 등의 시작 기호에 따사 구분.

XML 기반 태그

XML의 구문과 규약을 따르는 태그를 사용한다는 의미.

* XML의 구문과 HTML 구문의 차이점.

* JSP와 자바 스크립트의 차이점

서블릿?

웹 서버에서 동적인 문서 생성을 위해 서블릿 콘테이너에 의해 실행될 수 있는 자바 프로그램.

세션?
클라이언트와 서버간에 연결의 지속성을 인정하고 유지하는 상태.

-> JSP는 일정 시간동안 하나의 웹 서버에 대한 한 명의 사용자로부터의 모든 요청을 일련의 연속 과정으로 간주하며 이것을 세션이라 함.

HTML(HyperText Markup Language)

→  world wide web에서 사용하는 Markup 언어.

1. 특징 : 웹문서의 표준, 마크업 언어, ASCII로 구성된 일반적인 텍스트 파일, 시스템이나 운영체제에 독립적

     대소문자 구분 X, 2칸이상 공백은 의미 없음(모두 1칸)

2. 구성요소

요소(Elements) : 시작과 종료를 나타내는 태그로 이루어진 모든 명령어

<title> 제목 </title>

태그(Tag) : '<'와 '>'로 둘러싸인 요소의 일부

<title> 제목 </title>

속성(Attributes) : 요소의 시작태그 내에 사용하며, 명령어를 구체화 시키는 역할

<img src = "주소">

변수(Arguments) : 속성과 관련된 값

<font size = "3">

3. 기본구조