'WebFont-end'에 해당되는 글 52건

2014.12.22 [JavaScript] HTMLElement 객체
2014.12.21 [JavsScript] 제어 대상을 찾기
2014.12.21 [JavaScript] 전역객체 window
2014.12.21 [JavaScript] Object Model
2014.12.21 [JavaScript] arguments(유사 배열 객체)
2014.12.21 [JavaScript] 클로저 1
2014.12.21 [JavaScript] 유효범위
2014.12.21 [CSS3] CSS 선택자
2014.12.21 [HTML5[ <table> 태그
2014.12.21 [HTML5] <a> 태그

[JavaScript] HTMLElement 객체

2014. 12. 22. 23:23

Posted in WebFont-end/JavaScript by devbox

HTMLElement 객체

1. HTMLElement

getElement* 메소드를 통해서 원하는 객체를 조회했다면 이 객체들을 대상으로 구체적인 작업을 처리해야 한다.

이를 위해서는 획득한 객체가 무엇인지 알아야 한다. 그래야 적절한 메소드나 프로퍼티를 사용할 수 있다.

아래 코드는 getElement*의 리턴 값을 보여준다.

<ul>

<li id="active">JavaScript</li>

</ul>

var li = document.getElementById('active');

console.log(li.constructor.name);// 리턴된 li 라는 객체의 생성자함수 이름을 알 수 있다.---> HTMLLIElement----->단수

var lis = document.getElementsByTagName('li');

console.log(lis.constructor.name);// HTMLCollection(유사배열:여러개의 엘리먼트 담고 있다.)----->복수

</script>

실행결과)

HTMLLIElement (li 엘리먼트 태그)

HTMLCollection (여러개의 엘리먼트를 담고 있다.)

이것을 통해서 알 수 있는 것은 아래와 같다.

- document.getElementById : 리턴 데이터 타입은 HTMLLIELement

- document.getElementsByTagName : 리턴 데이터 타입은 HTMLCollection

즉 실행결과가 하나인 경우 HTMLLIELement, 복수인 경우 HTMLCollection을 리턴하고 있다.

2. HTMLElement

실행결과가 하나인 엘리먼트들을 좀 더 살펴보자.

<a id="anchor" href="http://opentutorials.org">opentutorials</a>

<ul>

<li id="list">JavaScript</li>

</ul>

var target = document.getElementById('list');

console.log(target.constructor.name);

var target = document.getElementById('anchor');

console.log(target.constructor.name);

var target = document.getElementById('button');

console.log(target.constructor.name);

</script>

실행결과)

HTMLLIElement

HTMLAnchorElement

HTMLInputElement

이를 통해서 알 수 있는 것은 엘리먼트의 종류에 따라서 리턴되는 객체가 조금씩 다르다는 것이다. 각각의 객체의 차이점을 알아보자. 링크는 DOM의 스팩이다.

- HTMLLIElement

- HTMLAnchroElement

- HTMLInputElement

(1) HTMLLIElement

interface HTMLLIElement : HTMLElement {

attribute DOMString type;

attribute long value;

};

(2) HTMLAnchroElement

interface HTMLAnchorElement : HTMLElement {

attribute DOMString accessKey;

attribute DOMString charset;

attribute DOMString coords;

attribute DOMString href;

attribute DOMString hreflang;

attribute DOMString name;

attribute DOMString rel;

attribute DOMString rev;

attribute DOMString shape;

attribute long tabIndex;

attribute DOMString target;

attribute DOMString type;

void blur();

void focus();

};

즉 엘리먼트 객체에 따라서 프로퍼티가 다르다는 것을 알 수 있다. 하지만 모든 엘리먼트들은 HTMLElement를 상속 받고 있다.

interface HTMLLIElement : HTMLElement {

interface HTMLAnchorElement : HTMLElement {

(3) HTMLElement

interface HTMLElement : Element {

attribute DOMString id;

attribute DOMString title;

attribute DOMString lang;

attribute DOMString dir;

attribute DOMString className;

};

3. DOM Tree

모든 엘리먼트는 HTMLElement의 자식이다. 따라서 HTMLElement의 프로퍼티를 똑같이 가지고 있다. 동시에 엘리먼트의 성격에 따라서 자신만의 프로퍼티를 가지고 있는데 이것은 엘리먼트의 성격에 따라서 달라진다. HTMLElement는 Element의 자식이고 Element는 Node의 자식이다. Node는 Object의 자식이다. 이러한 관계를 DOM Tree라고 한다.

이 관계를 그림으로 나타내면 아래와 같다.

저작자표시

'WebFont-end > JavaScript' 카테고리의 다른 글

[JavaScript] Element 객체 (0)	2014.12.22
[JavaScript] HTMLCollection 객체 (0)	2014.12.22
[JavsScript] 제어 대상을 찾기 (0)	2014.12.21
[JavaScript] 전역객체 window (0)	2014.12.21
[JavaScript] Object Model (0)	2014.12.21

Trackback : Comment

[JavsScript] 제어 대상을 찾기

2014. 12. 21. 23:54

Posted in WebFont-end/JavaScript by devbox

제어 대상을 찾기

문서를 자바스크립트로 제어하려면 제어의 대상에 해당되는 객체를 찾는 것이 제일 먼저 할 일이다. 문서 내에서 객체를 찾는 방법은 document 객체의 메소드를 이용한다.

1. document.getElementsByTagName

문서 내에서 특정 태그에 해당되는 객체를 찾는 방법은 여러가지가 있다. getElementsByTagName은 인자로 전달된 태그명에 해당하는 객체들을 찾아서 그 리스트를 NodeList라는 유사 배열에 담아서 반환한다.

NodeList는 배열은 아니지만 length와 배열접근연산자를 사용해서 엘리먼트를 조회할 수 있다.

<!DOCTYPE html>

<html>

<body>

<ul>

<li>JavaScript</li>

</ul>

var lis = document.getElementsByTagName('li');//li에 해당하는 각각의 태그들의 객체를 담은 유사배열을 리턴해 변수에 담는다.

for(var i=0; lis.length; i++){

lis[i].style.color='red'; //각각의 태그들의 style이 빨간색으로 바뀐다.

}

</script>

</body>

</html>

만약 조회의 대상을 좁히려면 아래와 같이 특정 객체를 지정하면 된다. 이러한 원칙은 다른 메소드에도 적용된다.

<!DOCTYPE html>

<html>

<body>

<ul>

<li>JavaScript</li>

</ul>

<ol>

<li>JavaScript</li>

</ol>

var ul = document.getElementsByTagName('ul')[0];//첫번째 인덱스 값을 리턴한다.

var lis = ul.getElementsByTagName('li');//ul의 하위 태그들 까지 영향을 미친다.

for(var i=0; lis.length; i++){

lis[i].style.color='red';

}

</script>

</body>

</html>

2. document.getElementsByClassName

class 속성의 값을 기준으로 객체를 조회할수도 있다.

<!DOCTYPE html>

<html>

<body>

<ul>

<li class="active">JavaScript</li>

</ul>

var lis = document.getElementsByClassName('active');

for(var i=0; i < lis.length; i++){

lis[i].style.color='red';

}

</script>

</body>

</html>

3. document.getElementById

id 값을 기준으로 객체를 조회한다. 성능면에서 가장 우수하다.

--> 반드시 하나의 결과만 가져온다. --> 복수의 결과가 나오지 않는다.

<!DOCTYPE html>

<html>

<body>

<ul>

<li>JavaScript</li>

</ul>

var li = document.getElementById('active');

li.style.color='red';

</script>

</body>

</html>

4. document.querySelector

css 선택자의 문법을 이용해서 객체를 조회할수도 있다.

<!DOCTYPE html>

<html>

<body>

<ul>

<li>JavaScript</li>

</ul>

<ol>

<li>JavaScript</li>

</ol>

var li = document.querySelector('li');

li.style.color='red';

var li = document.querySelector('.active');

li.style.color='blue';

</script>

</body>

</html>

5. document.querySelectorAll

querySelector과 기본적인 동작방법은 같지만 모든 객체를 조회한다는 점이 다르다.

<!DOCTYPE html>

<html>

<body>

<ul>

<li>JavaScript</li>

</ul>

<ol>

<li>JavaScript</li>

</ol>

var lis = document.querySelectorAll('li');//유사배열

for(var name in lis){

lis[name].style.color = 'blue';

}

</script>

</body>

</html>

저작자표시

'WebFont-end > JavaScript' 카테고리의 다른 글

[JavaScript] HTMLCollection 객체 (0)	2014.12.22
[JavaScript] HTMLElement 객체 (0)	2014.12.22
[JavaScript] 전역객체 window (0)	2014.12.21
[JavaScript] Object Model (0)	2014.12.21
[JavaScript] arguments(유사 배열 객체) (0)	2014.12.21

Trackback : Comment

[JavaScript] 전역객체 window

2014. 12. 21. 23:41

Posted in WebFont-end/JavaScript by devbox

전역객체 window

1. Window 객체

Window 객체는 모든 객체가 소속된 객체(DOM, BOM, JavaScriptCore)이고, 전역객체이면서, 창이나 프레임을 의미한다. `

window.Array(JavaScriptCore)

window.navigator(BOM)

window.document(DOM)

2, 전역객체

Window 객체는 식별자 window를 통해서 얻을 수 있다. 또한 생략 가능하다. Window 객체의 메소드인 alert을 호출하는 방법은 아래와 같다.

<!DOCTYPE html>

<html>

alert('Hello world');// window라는 객체내의 메서드

window.alert('Hello world');

</script>

<body>

</body>

</html>

아래는 전역변수 a에 접근하는 방법이다.

<!DOCTYPE html>

<html>

var a = 1;

alert(a);

alert(window.a);//undefined

</script>

<body>

</body>

</html>

객체를 만든다는 것은 결국 window 객체의 프로퍼티를 만드는 것과 같다.

<!DOCTYPE html>

<html>

var a = {id:1};

alert(a.id);

alert(window.a.id);

</script>

<body>

</body>

</html>

예제를 통해서 알 수 있는 것은 전역변수와 함수가 사실은 window 객체의 프로퍼티와 메소드라는 것이다. 또한 모든 객체는 사실 window의 자식이라는 것도 알 수 있다.

이러한 특성을 ECMAScript에서는 Global 객체라고 부른다. ECMAScript의 Global 객체는 호스트 환경에 따라서 이름이 다르고 하는 역할이 조금씩 다르다.

웹브라우저 자바스크립트에서 Window 객체는 ECMAScript의 전역객체이면서 동시에 웹브라우저의 창이나 프레임을 제어하는 역할을 한다.

저작자표시

'WebFont-end > JavaScript' 카테고리의 다른 글

[JavaScript] HTMLElement 객체 (0)	2014.12.22
[JavsScript] 제어 대상을 찾기 (0)	2014.12.21
[JavaScript] Object Model (0)	2014.12.21
[JavaScript] arguments(유사 배열 객체) (0)	2014.12.21
[JavaScript] 클로저 (1)	2014.12.21

Trackback : Comment

[JavaScript] Object Model

2014. 12. 21. 23:36

Posted in WebFont-end/JavaScript by devbox

Object Model

자바스크립트를 통해서 브라우저를 제어하기 위해서는 자바스크립로 제어할 무엇인가가 준비되어야 한다. 그것이 바로 Object(객체)이다.

웹브라우저의 구성요소들은 하나 하나가 객체화되어 있다. 자바스크립트로 이 객체를 제어해서 웹브라우저를 제어할 수 있게 된다.

이 객체들은 서로 계층적인 관계로 구조화되어 있다. BOM과 DOM은 이 구조를 구성하고 있는 가장 큰 틀의 분류라고 할 수 있다.

자바스크립트로 브라우저를 제어하기 위해서는 객체를 제어한다.--> 객체화(자바스크립트로 브라우저를 제어하기 위해서는 모든 것이 객체화 되어 있어야 한다.)

브라우저 또는 웹페이지를 제어하기 위해서는 객체가 필요하고 그 객체를 만드는 주체는 웹브라우저가 준비하고 개발자는 준비된 그 객체를 자바스크립트를 통해서 웹브라우저 또는 문서를 제어할 수 있다.

이 관계를 그림으로 나타내면 아래와 같다.

1. window: 전역객체 또는 window(frame)을 제어하기 위한 객체

2. DOM(window.document): 웹 페이지에 있는 문서(태그<body>, <img> 등))를 제어한다.

3. BOM: 현재 이 웹브라우저가 가리키는 URL이나, 경고창을 띄운다거나 하는 등의 window 객체의 프로퍼티에 저장되어 있다.

4. JavaScriptCore: 자바스크립트라는 언어를 통해서 브라우저나, node.js, 구글 스프레시트 등의 다양한 호스트 환경을 제어할 수 있다. 그 호스트 환경이 무엇이든 간에 공통으로 사용할 수 있는 것이다.

--> 공통으로 사용할 수 있는 언어가 바로 JavaScriptCore이다.

ex.) node.js에서는 DOM이나 BOM이 적용되지 않는다.

1. BOM(Browser Object Model)

웹페이지의 내용을 제외한 브라우저의 각종 요소들을 객체화시킨 것이다. 전역객체 Window의 프로퍼티(window.document 제외)에 속한 객체들이 이에 속한다.

BOM은 전역객체인 Window의 프로퍼티와 메소드들을 통해서 제어할 수 있다. 따라서 BOM은 Window 객체의 프로퍼티와 메소드의 사용법을 배우는 것이라고 해도 과언이 아닐 것이다.

<!DOCTYPE html>

<html>

<body>

</body>

</html>

2. DOM (Document Object Model)

웹페이지의 내용을 제어한다. window 객체의 프로퍼티인 document 프로퍼터에 할당된 Document 객체가 이러한 작업을 담당한다.

Window 객체가 창을 의미한다면 Document 객체는 윈도우에 로드된 문서를 의미한다고 할 수 있다.

Document 객체의 프로퍼티는 문서 내의 주요 엘리먼트에 접근할 수 있는 객체를 제공한다.

<!DOCTYPE html>

<html>

<body>

// body 객체

console.log(document.body);

// 이미지 객체들의 리스트

console.log(document.images);

</script>

</body>

</html>

또한 특정한 엘리먼트의 객체를 획득할 수 있는 메소드도 제공한다.

<!DOCTYPE html>

<html>

<body>

// body 객체

console.log(document.getElementsByTagName('body')[0]);

// 이미지 객체들의 리스트

console.log(document.getElementsByTagName('body'));

</script>

</body>

</html>

저작자표시

'WebFont-end > JavaScript' 카테고리의 다른 글

[JavsScript] 제어 대상을 찾기 (0)	2014.12.21
[JavaScript] 전역객체 window (0)	2014.12.21
[JavaScript] arguments(유사 배열 객체) (0)	2014.12.21
[JavaScript] 클로저 (1)	2014.12.21
[JavaScript] 유효범위 (0)	2014.12.21

Trackback : Comment

[JavaScript] arguments(유사 배열 객체)

2014. 12. 21. 23:30

Posted in WebFont-end/JavaScript by devbox

arguments(유사 배열 객체)

argument라는 객체는 함수 안에서 함수의 여러가지 정보를 담고있는 특히 인자의 정보를 담고 있는 객체이다.(사용법이 배열과 유사)

함수에는 arguments라는 변수에 담긴 숨겨진 유사 배열이 있다. 이 배열에는 함수를 호출할 때 입력한 인자가 담겨있다.

--> 몇 개의 인자가 있는지 알 수 있다, sum()으로 들어온 특정자리수의 값을 알수 있다.

function sum(){// 매개변수가 없다.

var i, _sum = 0;

for(i = 0; i < arguments.length; i++){

// argments는 약속되어 있는 특수한 변수명(argument라는 배열이 담겨있다.) 역할은 사용자가 전달한 인자가 argments 객체에 있다. 그러면 이 객체를 통해서 사용자가 전달한 인자에

// 접근할 수 있는 기능을 제공한다. sum()이 전달한 인자 개수를 알 수 있다.--> 사용자가 전달한 인자 수 만큼 for문의 루프를 돌린다.

document.write(i+' : '+arguments[i]+'<br />');

_sum += arguments[i];

}

return _sum;

}

document.write('result : ' + sum(1,2,3,4));// 함수 정의 문장에 매개변수 선언 되어 있지 않지만 인자 수 상관 없다.

실행 결과)

0 : 1

1 : 2

2 : 3

3 : 4

result : 10

함수 sum은 인자로 전달된 값을 모두 더해서 리턴하는 함수다.

그런데 1행처럼 함수 sum은 인자에 대한 정의하가 없다. 하지만 마지막 라인에서는 4개의 인자를 함수 sum으로 전달하고 있다.

함수의 정의부분에서 인자에 대한 구현이 없음에도 인자를 전달 할 수 있는 것은 왜 그럴까? 그것은 arguments라는 특수한 배열이 있기 때문이다.

arguments는 함수안에서 사용할 수 있도록 그 이름이나 특성이 약속되어 있는 일종의 배열이다.

arguments[0]은 함수로 전달된 첫번째 인자를 알아낼 수 있다. 또 arguments.length를 이용해서 함수로 전달된 인자의 개수를 알아낼 수도 있다.

이러한 특성에 반복문을 결합하면 함수로 전달된 인자의 값을 순차적으로 가져올 수 있다. 그 값을 더해서 리턴하면 인자로 전달된 값에 대한 총합을 구하는 함수를 만들 수 있다.

arguments는 사실 배열은 아니다. 실제로는 arguments 객체의 인스턴스다.

1. 매개변수의 수

매개변수와 관련된 두가지 수가 있다. 하나는 함수.length, 다른 하나는 arguments.length이다.

함수.length는 함수로 전달된 실제 인자의 수를 의미하고, arguments.length는 함수에 정의된 인자의 수를 의미한다.

function zero(){

console.log(

'zero.length', zero.length,// 0

'arguments', arguments.length// 0

);

}

function one(arg1){

console.log(

'one.length', one.length, // 1 --> 함수 정의한 매개변수(인수) 개수

'arguments', arguments.length // 2 --> 함수 호출시 인자 개수

);

}

function two(arg1, arg2){

console.log(

'two.length', two.length,

'arguments', arguments.length

);

}

zero(); // zero.length 0 arguments 0

one('val1', 'val2'); // one.length 1 arguments 2

two('val1'); // two.length 2 arguments 1

실행결과)

zero.length 0 arguments 0

VM123:9 one.length 1 arguments 2

VM123:15 two.length 2 arguments 1

저작자표시

'WebFont-end > JavaScript' 카테고리의 다른 글

[JavaScript] 전역객체 window (0)	2014.12.21
[JavaScript] Object Model (0)	2014.12.21
[JavaScript] 클로저 (1)	2014.12.21
[JavaScript] 유효범위 (0)	2014.12.21
[JavaScript] Object (0)	2014.12.07

Trackback : Comment

[JavaScript] 클로저

2014. 12. 21. 23:22

Posted in WebFont-end/JavaScript by devbox

클로저

클로저(closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가르킨다. 클로저는 자바스크립트를 이용한 고난이도의 테크닉을 구사하는데 필수적인 개념으로 활용된다.

1. 내부함수

자바스크립트는 함수 안에서 또 다른 함수를 선언할 수 있다. 아래의 예제를 보자. 결과는 경고창에 coding everybody가 출력될 것이다.

function outter(){// 외부 함수

function inner(){ //내부 함수

var title = 'coding everybody';

alert(title);

}

inner();

}

outter();

실행결과)

coding everybody

위의 예제에서 함수 outter의 내부에는 함수 inner가 정의 되어 있다. 함수 inner를 내부 함수라고 한다.

내부함수는 외부함수의 지역변수에 접근할 수 있다. 이것이 바로 클로저이다. 아래의 예제를 보자.

function outter(){

var title = 'coding everybody';

function inner(){

alert(title);

}

inner();

}

outter();

실행결과)

coding everybody

위의 예제는 내부함수 inner에서 title을 호출(4행)했을 때 외부함수인 outter의 지역변수에 접근할 수 있음을 보여준다.

2. 클로저

클로저(closure)는 내부함수와 밀접한 관계를 가지고 있는 주제다. 내부함수는 외부함수의 지역변수에 접근 할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후(return)에도 내부함수가 외부함수의 변수에 접근 할 수 있다.

이러한 메커니즘을 클로저라고 한다. 아래 예제는 이전의 예제를 조금 변형한 것이다.

function outter(){

var title = 'coding everybody';

return function(){ // return했다면 그 함수는 생을 마감했다는 것이다.

alert(title);// title은 외부함수에 존재하는 값이다.

}

inner = outter();//outter라는 함수가 생을 마감했음에도 불구하고

inner();

실행결과)

coding everybody

예제의 실행순서를 주의깊게 살펴보자. 7행에서 함수 outter를 호출하고 있다.

그 결과가 변수 inner에 담긴다. 그 결과는 이름이 없는 함수다. 실행이 8행으로 넘어오면 outter 함수는 실행이 끝났기 때문에 이 함수의 지역변수는 소멸되는 것이 자연스럽다.

하지만 8행에서 함수 inner를 실행했을 때 coding everybody가 출력된 것은 외부함수의 지역변수 title이 소멸되지 않았다는 것을 의미한다. (title은 외부함수의 지역변수이다.)

클로저란 내부함수가 외부함수의 지역변수에 접근 할 수 있고, 외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 의미한다.

조금 더 복잡한 아래 예제를 살펴보자. 아래 예제는 클로저를 이용해서 영화의 제목을 저장하고 있는 객체를 정의하고 있다.

function factory_movie(title){ // 매개변수는 함수 안에서 지역변수로 사용되기 때문에 지역변수이다.

return {

get_title : function (){// 여기 메소드들은 factory_movie의 내부함수라고 보면된다.

// 변수 가져오기는 get_title을 통해서만

return title;// factory_movie의 인자인 title이다.

set_title : function(_title){

// 변수 수정하는 것은 set_title을 통해서만 --> 보다 변수를 안전하게 사용할 수 있다.

title = _title

}

ghost = factory_movie('Ghost in the shell');

matrix = factory_movie('Matrix');

alert(ghost.get_title());

alert(matrix.get_title());

// 각각 get_title()이라는 메소드가 접근하는 외부함수의 지역변수에 담겨있는 값이 서로 다르다.

ghost.set_title('공각기동대');

alert(ghost.get_title());

alert(matrix.get_title());

실행결과)

Ghost in the shell -> Matrix -> 공각기동대 -> Matrix

위의 예제를 통해서 알 수 있는 것들을 정리해보면 아래와 같다.

1) 클로저는 객체의 메소드에서도 사용할 수 있다. 위의 예제는 함수의 리턴값으로 객체를 반환하고 있다.

이 객체는 메소드 get_title과 set_title을 가지고 있다. 이 메소드들은 외부함수인 factory_movie의 인자값으로 전달된 지역변수 title을 사용하고 있다.

2) 동일한 외부함수 안에서 만들어진 내부함수나 메소드는 외부함수의 지역변수를 공유한다. 17행에서 실행된 set_title은 외부함수 factory_movie의 지역변수 title의 값을 '공각기동대'로 변경했다. 19행에서 ghost.get_title();의 값이 '공각기동대'인 것은 set_movie와 get_movie 함수가 title의 값을 공유하고 있다는 의미다.

3) 그런데 똑같은 외부함수 factory_movie를 공유하고 있는 ghost와 matrix의 get_title의 결과는 서로 각각 다르다. 그것은 외부함수가 실행될 때마다 새로운 지역변수를 포함하는 클로저가 생성되기 때문에 ghost와 matrix는 서로 완전히 독립된 객체가 된다.

4) factory_movie의 지역변수 title은 2행에서 정의된 객체의 메소드에서만 접근 할 수 있는 값이다. 이 말은 title의 값을 읽고 수정 할 수 있는 것은 factory_movie 메소드를 통해서 만들어진 객체 뿐이라는 의미다. JavaScript는 기본적으로 Private한 속성을 지원하지 않는데, 클로저의 이러한 특성을 이용해서 Private한 속성을 사용할 수 있게된다.

cf.)

Private 속성은 객체의 외부에서는 접근 할 수 없는 외부에 감춰진 속성이나 메소드를 의미한다. 이를 통해서 객체의 내부에서만 사용해야 하는 값이 노출됨으로서 생길 수 있는 오류를 줄일 수 있다.

자바와 같은 언어에서는 이러한 특성을 언어 문법 차원에서 지원하고 있다. 아래의 예제는 클로저와 관련해서 자주 언급되는 예제다.

var arr = [];

for(var i = 0; i < 5; i++){

arr[i] = function(id){

return function(){

return id;

}

for(var index in arr) {

console.log(arr[index]());

}

실행결과)

위의 코드는 아래와 같이 변경해야 한다.

var arr = [];

for(var i = 0; i < 5; i++){

arr[i] = function(id) {

return function(){

return id;

}

}(i);

}

for(var index in arr) {

console.log(arr[index]());

}

실행결과)

※ 클로저 참고

https://developer.mozilla.org/ko/docs/JavaScript/Guide/Closures

http://ejohn.org/apps/learn/#48

http://blog.javarouka.me/2012/01/javascripts-closure.html

저작자표시

'WebFont-end > JavaScript' 카테고리의 다른 글

[JavaScript] Object Model (0)	2014.12.21
[JavaScript] arguments(유사 배열 객체) (0)	2014.12.21
[JavaScript] 유효범위 (0)	2014.12.21
[JavaScript] Object (0)	2014.12.07
[JavaScript] prototype (0)	2014.12.07

Trackback : Comment

[JavaScript] 유효범위

2014. 12. 21. 23:06

Posted in WebFont-end/JavaScript by devbox

유효범위

유효범위(Scope)는 변수의 수명을 의미한다.

var vscope = 'global';// 전역 변수

function fscope(){

alert(vscope);

}

fscope();

실행결과)

global

함수 밖에서 변수를 선언하면 그 변수는 전역변수가 된다. 전역변수는 에플리케이션 전역에서 접근이 가능한 변수다. 다시 말해서 어떤 함수 안에서도 그 변수에 접근 할 수 있다. 그렇기 때문에 함수 fscope 내에서 vscope를 호출 했을 때 함수 밖에서 선언된 vscope의 값 global이 반환된 것이다.

var vscope = 'global';

function fscope(){

var vscope = 'local';// 로컬 변수

alert('함수안 '+vscope);//local

}

fscope();

alert('함수밖 '+vscope);//grobal

실행결과)

함수 안: local

함수 밖: global

즉 함수 안에서 변수 vscope을 조회(4행) 했을 때 함수 내에서 선언한 지역변수 vscope(3행)의 값인 local이 사용되었다. 하지만 함수 밖에서 vscope를 호출(7행) 했을 때는 전역변수 vscope(1행)의 값인 global이 사용된 것이다. 즉 지역변수의 유효범위는 함수 안이고, 전역변수의 유효범위는 에플리케이션 전역인데, 같은 이름의 지역변수와 전역변수가 동시에 정의되어 있다면 지역변수가 우선한다는 것을 알 수 있다. 아래 예제를 보자. 결과는 모두 local이다.

var vscope = 'global';

function fscope(){

vscope = 'local'; // 전역 변수

alert('함수안='+vscope); //local

}

fscope();

alert('함수밖='+vscope); //grobal

실행결과)

함수안=local

함수밖=local

// local(전역변수인 vscope를 변경한 것이므로)

var vscope = 'global';

function fscope(){

var vscope = 'local';

vscope = 'local';// 지역변수가 변경

alert('함수안='+vscope);

}

fscope();

alert('함수밖='+vscope);

실행결과)

함수안=local

함수밖=global

함수밖에서도 vscope의 값이 local인 이유는 무엇일까? 그것은 함수 fscope의 지역변수를 선언할 때 var를 사용하지 않았기 때문이다. var를 사용하지 않은 지역변수는 전역변수가 된다. 따라서 3행은 전역변수의 값을 local로 변경하게 된 것이다. var을 쓰는 것과 쓰지 않는 것의 차이를 이해해야 한다.

전역변수는 사용하지 않는 것이 좋다. 여러가지 이유로 그 값이 변경될 수 있기 때문이다. 함수 안에서 전역변수를 사용하고 있는데, 누군가에 의해서 전역변수의 값이 달라졌다면 어떻게 될까? 함수의 동작도 달라지게 된다. 이것은 버그의 원인이 된다. 또한 함수를 다른 에플리케이션에 이식하는데도 어려움을 초래한다. 함수의 핵심은 로직의 재활용이라는 점을 상기하자. 변수를 선언할 때는 꼭 var을 붙이는 것을 습관화해야 한다. 전역변수를 사용해야 하는 경우라면 그것을 사용하는 이유를 명확히 알고 있을 때 사용하도록 하자.

1. 유효범위의 효용

아래 두개의 예제는 변수 i를 지역변수로 사용했을 때와 전역변수로 사용했을 때의 차이점을 보여준다. 전역변수는 각기 다른 로직에서 사용하는 같은 이름의 변수값을 변경시켜서 의도하지 않은 문제를 발생시킨다.

(1) 지역변수의 사용

function a (){

var i = 0;// i는 지역변수

}

for(var i = 0; i < 5; i++){

a();

document.write(i);

}

실행결과)

01234

(2) 전역변수의 사용

본 예제는 무한반복을 발생시킨다. for문 안의 i값이 전역변수

function a (){

i = 0;// i는 전역변수

}

for(i = 0; i < 5; i++){

a();

document.write(i);

}

불가피하게 전역변수를 사용해야 하는 경우는 하나의 객체를 전역변수로 만들고 객체의 속성으로 변수를 관리하는 방법을 사용한다.

var MYAPP = {} // MAYAPP이라는 전역변수에다 다 집어 넣음

MYAPP.calculator = { // 객체안의 속성의 값으로 다시 객체를 선언

'left' : null,

'right' : null

}

MYAPP.coordinate = {

'left' : null,

'right' : null

}

MYAPP.calculator.left = 10;

MYAPP.calculator.right = 20;

function sum(){

return MYAPP.calculator.left + MYAPP.calculator.right;

}

document.write(sum());

실행결과)

전역변수를 사용하고 싶지 않다면 아래와 같이 익명함수를 호출함으로서 이러한 목적을 달성할 수 있다.

(function(){

var MYAPP = {}

MYAPP.calculator = {

'left' : null,

'right' : null

}

MYAPP.coordinate = {

'left' : null,

'right' : null

}

MYAPP.calculator.left = 10;

MYAPP.calculator.right = 20;

function sum(){

return MYAPP.calculator.left + MYAPP.calculator.right;

}

document.write(sum());

}())

실행결과)

함수를 정의한 후에 바로 호출할 때 괄호 사용(익명함수 사용이유) -->의미: MYAPP이라는 변수는 함수안에서 사용되는 변수로서 함수의 지역변수가 된다.

이러한 방식은 JQuery에서 많이 사용하는 방식

function myappfn(){

var MYAPP = {}

MYAPP.calculator = {

'left' : null,

'right' : null

}

MYAPP.coordinate = {

'left' : null,

'right' : null

}

MYAPP.calculator.left = 10;

MYAPP.calculator.right = 20;

function sum(){

return MYAPP.calculator.left + MYAPP.calculator.right;

}

document.write(sum());

}

myappfn(); //MYAPP은 전역변수이다.

실행결과)

위와 같은 방법은 자바스크립트에서 로직을 모듈화하는 일반적인 방법이다.

2. 유효범위의 대상 (함수)

자바스크립트는 함수에 대한 유효범위만을 제공한다. 많은 언어들이 블록(대체로 {,})에 대한 유효범위를 제공하는 것과 다른 점이다.

for(var i = 0; i < 1; i++){

var name = 'coding everybody';

}

alert(name);//유효 범위 밖에서도 가능

실행결과)

coding everybody

cf.) 자바에서는 아래의 코드는 허용되지 않는다. name은 지역변수로 for 문 안에서 선언 되었는데 이를 for문 밖에서 호출하고 있기 때문이다.

for(int i = 0; i < 10; i++){

String name = "egoing";

}

System.out.println(name); //console.log()와 같다.

자바스크립트의 지역변수는 함수에서만 유효하다.

3. 정적 유효범위

자바스크립트는 함수가 선언된 시점에서의 유효범위를 갖는다. 이러한 유효범위의 방식을 정적 유효범위(static scoping), 혹은 렉시컬(lexical scoping)이라고 한다.

var i = 5;

function a(){

var i = 10;

b();

}

function b(){

document.write(i);//지역변수가 없으면 전역변수를 찾게된다.

}

a();

실행 결과)

동적 유효범위: 사용되는 대상에 따라서 그 대상이 가지고 있는 변수에 접근할 수 있다.

정적 유효범위: 사용될 때가 아니고 정의(그 시점)될 때의 전역변수가 사용되게 된다. b는 누구에게 사용될 지 모른다. 누가 사용하든 똑같은 범위이다.

저작자표시

'WebFont-end > JavaScript' 카테고리의 다른 글

[JavaScript] arguments(유사 배열 객체) (0)	2014.12.21
[JavaScript] 클로저 (1)	2014.12.21
[JavaScript] Object (0)	2014.12.07
[JavaScript] prototype (0)	2014.12.07
[JavaScript] 상속 (0)	2014.12.07

Trackback : Comment

[CSS3] CSS 선택자

2014. 12. 21. 02:18

Posted in WebFont-end/CSS3 by devbox

CSS 선택자

선택자 종류	선택자 형태	선택자 예
전체 선택자	*	*
태그 선택자	태그	h1
아이디 선택자	#id	#header
클래스 선택자	.class	.item
후손 선택자	선택자 선택자	header h1
자식 선택자	선택자 > 선택자	header > h1
속성 선택자	선택자[속성=값]	input[type=text]
	선택자[속성~=값]	div[data-role~=row]
	선택자[속성\|=값]	div[data-role\|=row]
	선택자[속성^=값]	div[data-role^=row]
	선택자[속성$=값]	div[data-role$=row]
	선택자[속성*=값]	div[data-role*=row]
동위 선택자	선택자 +선택자	h1+div
동위 선택자	선택자 ~ 선택자	h1 ~ div
구조 선택자	선택자:first-child	li:first-child
	선택자:last-child	li:last-child
	선택자:nth-child(수열)	li:nth-child(2n+1)
	선택자:nth-last-child(수열)	li:nth-last-child(2n+1)
	선택자:first-of-type	h1:first-of-type
	선택자:last-of-type	h1:last-of-type
	선택자:nth-of-type(수열)	h1:nth-of-type(2n+1)
	선택자:nth-last-of-type(수열)	h1:nth-last-of-type(2n+1)
반응 선택자	선택자:active	div:active
반응 선택자	선택자:hover	div:hover
상태 선택자	:checked	input:checked
	:focus	input:focus
	:enabled	input:enabled
	:disabled	input:disabled
링크 선택자	:link	a:link
링크 선택자	:visited	a:visited
문자 선택자	::first-letter	p::first-letter
	::first-line	p::first-line
	::after	p::after
	::before	p::before
	::selection	p::selection
부정 선택자	선택자:not(선택자)	li:not(.item)

1. 후손 선택자 예제

<!DOCTYPE html>

<html>

<head>

<title>CSS3 Selector Basic</title>

<style>

/* id 속성으로 header를 가지는 태그의

후손 위치에 있는 h1 태그의

color 속성을 red 키워드로 적용합니다.*/

#header h1 { color: red; }

/* id 속성으로 section을 가지는 태그의

후손 위치에 있는 h1 태그의

color 속성을 orange 키워드로 적용합니다.*/

#section h1 { color: orange; }

</style>

</head>

<body>

<h1 class="title">Lorem ipsum</h1>

<h1>Navigation</h1>

</div>

<h1 class="title">Lorem ipsum</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div>

</body>

</html>

※ 후손 선택자 주의사항

#header h1, h2 { color: red; }

--> id 속성이 header인 태그의 후손 위치에 있는 h1 태그와 h2 태그의 color 속성을 red로 적용한다.

#header h1, #header h2 { color: red; }

--> id 속성이 header인 태그의 후손 위치에 있는 h1 태그와 id 속성이 header인 태그의 후손 위치에 있는 h2 태그의 color 속성을 red로 적용한다.

2. 자식 선택자 예제

<!DOCTYPE html>

<html>

<head>

<title>CSS3 Selector Basic</title>

<style>

/* id 속성으로 section을 가지는 태그의

자식 위치에 있는 h1 태그의

color 속성을 orange 키워드로 적용합니다.*/

#header > h1 { color: red; }

/* id 속성으로 section을 가지는 태그의

자식 위치에 있는 h1 태그의

color 속성을 orange 키워드로 적용합니다.*/

#section > h1 { color: orange; }

</style>

</head>

<body>

<h1 class="title">Lorem ipsum</h1>

<h1>Navigation</h1>

</div>

<h1 class="title">Lorem ipsum</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div>

</body>

</html>

3. 동위 선택자 예제

<!DOCTYPE html>

<html>

<head>

<title>CSS3 Selector Basic</title>

<style>

/* h1 태그의 바로 뒤에 위치하는 h2 태그의

color 속성에 red 키워드를 적용합니다. h1 바로 뒤의 태그 1개만*/

h1 + h2 { color: red; }

/* h1 태그의 뒤에 위치하는 h2 태그의

background-color 속성에 orange 키워드를 적용합니다. h1 뒤의 모든 h2태그*/

h1 ~ h2 { background-color: orange; }

</style>

</head>

<body>

<h1>Header - 1</h1>

<h2>Header - 2</h2>

</body>

</html>

4. 반응 선택자 예제

<!DOCTYPE html>

<html>

<head>

<title>CSS3 Selector Basic</title>

<style>

/* h1 태그에 마우스를 올릴 경우에

color 속성에 red 키워드를 적용합니다. */

h1:hover { color: red; }

/* h1 태그를 마우스로 클릭할 때에

color 속성에 blue 키워드를 적용합니다. */

h1:active { color: blue; }

</style>

</head>

<body>

<h1>User Action Selector</h1>

</body>

</html>

5. 상태 선택자 예제

<!DOCTYPE html>

<html>

<head>

<title>CSS3 Selector Basic</title>

<style>

/* input 태그가 사용 가능할 경우에

background-color 속성에 white 키워드를 적용합니다. */

input:enabled { background-color: white; }

/* input 태그가 사용 불가능할 경우에

background-color 속성에 white 키워드를 적용합니다. */

input:disabled { background-color: gray; }

/* input 태그에 체크박스나 라디오 버튼에 체크되었을 경우에

background-color 속성에 white 키워드를 적용합니다. */

input:checked { background-color: orange; }

/* input 태그에 초점이 맞추어진 경우에

background-color 속성에 white 키워드를 적용합니다. */

input:focus { background-color: orange; }

</style>

</head>

<body>

<h2>Enabled</h2>

<h2>Disabled</h2>

</body>

</html>

cf.) 상태 선택자와 동위 선택자의 복합 활용

<!DOCTYPE html>

<html>

<head>

<title>CSS3 Selector Basic</title>

<style>

/* input 태그의 type 속성이 checkbox인 태그가 체크되었을 때,

바로 뒤에 위치하는 div 태그의 height 속성을 0픽셀로 적용합니다. */

input[type=checkbox]:checked + div {

height: 0px;

}

div {

overflow: hidden;

width: 650px; height: 300px;

/* 변환 효과를 적용합니다. */

-ms-transition-duration: 1s;

-webkit-transition-duration: 1s;

-moz-transition-duration: 1s;

-o-transition-duration: 1s;

transition-duration: 1s;

}

</style>

</head>

<body>

<div>

<h1>Lorem ipsum</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div>

</body>

</html>

6. 문자 선택자

(1) 시작 문자 선택자

1) ::first-letter: 첫 번째 글자를 선택한다.

2) ::first-line: 첫 번째 줄을 선택한다.

<!DOCTYPE html>

<html>

<head>

<title>CSS3 Selector Basic Page</title>

<style>

p::first-letter { font-size: 3em; }

p::first-line { color: red; }

</style>

</head>

<body>

<h1>Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<p>Aenean ac erat et massa vehicula laoreet consequat et sem.</p>

</body>

</html>

(2) 전후 문자 선택자

1) ::after: 태그 뒤에 위치하는 공간을 선택한다.

2) ::before: 태그 앞에 위치하는 공간을 선택한다.

<!DOCTYPE html>

<html>

<head>

<title>CSS3 Selector Basic Page</title>

<style>

p { counter-increment: rint; }

p::before { content: counter(rint) "."; }

p::after { content: " - " attr(data-page) " page"; }

p::first-letter { font-size: 3em; }

</style>

</head>

<body>

<h1>Lorem ipsum dolor sit amet</h1>

<p data-page="52">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<p data-page="273">Aenean ac erat et massa vehicula laoreet consequat et sem.</p>

</body>

</html>

7. 링크 선택자 예제

(1) :link: href 속성을 가지고 있는 a 태그를 선택한다.(사용자가 아직 방문하지 않은 링크레 스타일을 적용한다.)

(2) :visited: 방문했던 링크를 가지고 있는 a 태그를 선택한다.(기본 자주색)

<!DOCTYPE html>

<html>

<head>

<title>CSS3 Selector Basic</title>

<style>

/* 문서의 링크 중에서 한 번 이상 방문한 링크에 스타일을 적용한다.*/

a { text-decoration: none; }

a:visited { color: red; }

/* href 속성을 가지고 있는 a 태그의 뒤의 공간에

"- (href 속성)"을 추가합니다. */

a:link::after { content: ' - ' attr(href); }

</style>

</head>

<body>

<h1><a>Nothing</a></h1>

<h1><a href="http://hanb.co.kr">Hanbit Media</a></h1>

<h1><a href="https://github.com/">Github</a></h1>

</body>

</html>

저작자표시

Trackback : Comment

[HTML5[ <table> 태그

2014. 12. 21. 00:36

Posted in WebFont-end/HTML5 by devbox

<table> 태그

1. 표란?

table, 표는 데이터를 일목요연하게 표현하기 위한 방법이다.

2. 문법(Syntax)

<table>

<tr>

</tr>

<tr>

</tr>

</table>

3. 설명(Description)

- 데이터를 구조화할 때 사용됨

- 레이아웃으로도 활용되나, 불가피한 경우를 제외하면 div와 css등을 이용

- th는 데이터 그룹의 제목에 해당함 (header cells)

- td는 th에 속하는 데이터 그룹 (standard cells)

4. 예제(Example)

example1.html - 테이블은 행(tr) 안에 열(td)가 포함되는 형식을 가지고 있다. 아래 예제에서 tr은 3행을 의미하고, 각각의 행은 3개의 td를 가지면서 3개의 열을 표현하고 있다.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<table border="1">// 표는 table로 시작

<tr>//tr로 한줄씩 만든다.

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

example2.html - <th>는 제목을 의미한다. 아래 예제는 이름, 성별, 나이를 제목으로 표현하는 방법을 보여준다.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

<th>이름</th><th>성별</th><th>나이</th>//th은 각각의 contents의 제목에 해당한다.

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

example3.html - 행을 병합하고 싶다면 rowspan 속성을 사용한다.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

</tr>

<tr>

<td>최진혁</td><td>남</td><td rowspan="2">비공개</td>//row:행, span: 묶는다.(통합한다.)--> 두개의 행을 하나의 행으로 묶는다.--> 병합될 대상은 다음행을 말한다.

</tr>

<tr>

</tr>

</table>

</body>

</html>

example4.html - 열을 병합하고 싶다면 colspan을 사용한다.

<!DOCTYPE html>

<html>

<body>

<tr>

</tr>

<tr>

<td>최진혁</td><td colspan="2">비공개</td>// 두개의 열을 하나의 박스로 묶는다.

</tr>

<tr>

</tr>

</table>

</body>

</html>

저작자표시

'WebFont-end > HTML5' 카테고리의 다른 글

[HTML5] <a> 태그 (0)	2014.12.21
[HTML5] <input> 태그 (0)	2014.12.21
[HTML5] <form> 태그_GET과 POST (0)	2014.12.21
[HTML5] <form> 태그 2 (0)	2014.12.20
[HTML5] <form> 태그 1 (0)	2014.12.20

Trackback : Comment

[HTML5] <a> 태그

2014. 12. 21. 00:12

Posted in WebFont-end/HTML5 by devbox

<a> 태그

1. 요약(Summary)

문서에서 다른 문서로 이동할 수 있는 수단을 의미한다.

2. 문법(Syntax)

- href : 링크이름과 연결되어 있는 리소스(resource)의 주소

- title : 연결되어 있는 리소스에 대한 설명, 롤오버 했을 때 툴팁으로 표시된다.

- target : 문서가 로드될 대상으로 아래와 같은 것들이 있다.

_self : 현재의 문서가 로드된 프래임, 현재 문서 사라짐

_blank : 새로운 창(탭)을 띄우고 거기에 문서를 로드

_parent : 현재 문서가 frame나 iframe에 로드된 경우 현재 문서를 로드한 프래임에 문서로를 로드

프래임의 이름

3. 설명(Description)

하이퍼텍스트란 문서에서 다른 문서로 쉽게 이동할 수 있도록 연결되어 있는 문서시스템을 의미하는데, 이 연결성을 제공하는 것을 링크라고 한다.

- 문서에서 문서로 이동하는 수단

- 태그명 a(anchor)을 사용함

- href에 #을 사용하면 같은 문서 내에서도 특정한 위치로 이동이 가능

- target을 지정해서 문서가 로드될 위치를 지정할 수 있다.

4. 예제(Example)

example1. 아래 예제는 여러가지 형태의 링크를 보여준다.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>

<a href="http://opentutorials.org/course/1">생활코딩</a> : 생활코딩 홈페이지로 이동한다.

</p>

<p>

<a href="http://opentutorials.org/course/1" target="_blank">생활코딩</a> : 새창에서 생활코딩 홈페이지를 연다.

</p>

<p>

<a href="http://opentutorials.org" target="_self">생활코딩</a> : 현재 프래임에서 생활코딩 홈페이지를 연다.

</p>

<p>

<a href="http://opentutorials.org" title="생활코딩 홈페이지">생활코딩</a> : 링크에 부가 설명을 추가한다. 링크에 툴팁을 표시한다.

</p>

<p>

<a href="http://opentutorials.org/course/11/10#reference" title="생활코딩 html이란 무엇인가 참조">HTML 소개 참조</a> : 생활코딩의 HTML소개 페이지 중 참조 부분으로 문서를 이동한다

</p>

</body>

</html>

해당 문서 안의 a 태그중 name의 속성 값에 reference가 있는 지점으로 스크롤을 자동으로 이동시켜준다.--> 북마크 기능

example2. 아래 예제는 링크에 연결된 문서를 아이프래임으로 로드한다.--> 하나의 문서안에 다른 문서를 로드할 수 있는 기법을 프래임이라고 한다.

<!DOCTYPE html>

<html>

<body>

<a href="http://opentutorials.org/" target="sample">아이프래임</a>

</body>

</html>

--> target의 대상을 <iframe>의 id 속성이다.

5. 빈 링크

a 태그는 본래 가지고 있는 하이퍼링크 기능을 제거하고 사용하는 경우도 있다. 하지만 하이퍼링크 기능을 제거해도 웹 표준을 따르려면 a 태그에 href 속성을 반드시 입력해야 한다.

따라서 웹 표준을 지키면서 이동하지 않는 a 태그를 만들 때는 href 속성에 #을 입력한다.

그리고 이를 빈 링크라고 부른다.

6. 페이지 내부 이동

a 태그를 이용하면 현재 페이지 내부에서 원하는 장소로 이동할 수 있다. 이때는 원하는 장소에 id 속성을 부여해야 한다.

이동하기를 원하는 태그에 id 속성을 부여하고 a 태그의 href 속성에 # 아이디 형태의 문자열을 입력한다.

<!DOCTYPE html>

<html>

<head>

<title>HTML5 Basic</title>

</head>

<body>

<a href="#alpha">Move to Alpha</a>

<a href="#gamma">Move to Gamma</a>

<hr />

<h1 id="alpha">Alpha</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<p>Duis nec risus a ante pellentesque rhoncus at et leo.</p>

<h1 id="gamma">Gamma</h1>

<p>Nullam porta, felis sit amet porttitor vestibulum.</p>

</body>

</html>

a 태그를 클릭하면 지정한 id 속성이 있는 위치로 스크롤바가 자동으로 이동한다.

cf.) id 속성이 중복될 경우 먼저 나오는 태그로 이동한다.

저작자표시

'WebFont-end > HTML5' 카테고리의 다른 글

[HTML5[ <table> 태그 (0)	2014.12.21
[HTML5] <input> 태그 (0)	2014.12.21
[HTML5] <form> 태그_GET과 POST (0)	2014.12.21
[HTML5] <form> 태그 2 (0)	2014.12.20
[HTML5] <form> 태그 1 (0)	2014.12.20

Trackback : Comment

'WebFont-end > JavaScript' 카테고리의 다른 글

'WebFont-end > JavaScript' 카테고리의 다른 글

'WebFont-end > JavaScript' 카테고리의 다른 글

'WebFont-end > JavaScript' 카테고리의 다른 글

'WebFont-end > JavaScript' 카테고리의 다른 글

'WebFont-end > JavaScript' 카테고리의 다른 글

'WebFont-end > JavaScript' 카테고리의 다른 글

'WebFont-end > HTML5' 카테고리의 다른 글

'WebFont-end > HTML5' 카테고리의 다른 글

티스토리툴바