🗒️ Programming (298)

1. 2017.05.25 Ajax란?

   * Ajax란? - Ajax(Asynchronous JavaScript and XML)란, 비동기 방식의 JavaScript와 XML을 의미함. - 동기 방식과 비동식 방식의 차이점 -> 동기 방식의 경우는 서버에 신호를 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있지만, 비동기 방식은 그와 반대로 신호를 보냈을 때 응답 상태와 상관 없이 다음 동작을 수행할 수 있음. - Ajax를 이용한는 주목적 -> 화면 전환 없이 클라이언트(방문자 컴퓨터) 측과 서버(서비스를 제공하는 컴퓨터) 측 간의 XML, JSON(JavaScript Object Notation), 텍스트, (X)HTML 등의 정보를 교환하기 위해서. - Ajax를 이용하면 방문객이 보는 컴퓨터에서 서버(Server)에 자료를 요청할 ..
2. 2017.05.24 효과 제어 메서드

   * 효과 제어 메서드란? - 효과 또는 애니메이션이 적용된 요소에 동작을 정지시키거나 동작 초기 실행을 지연시키는 등의 제어를 할 수 있는 메서드 - 효과 제어 메서드의 종류 종류 풀이 stop() 현재 실행 중인 효과를 모두 정지시킴. delay() 스택에 대기 중인 애니메이션 효과를 지연시킴. 다시 말하면, 대기 중인 효과가 지정한 시간만큼 지연된 후 발생됨. queue() 선택된 요소의 스택에 대기 중인 큐를 반환하거나 함수에 실행문을 큐로 추가시킬 수 있음. clearQueue() 첫 번째 큐에 해당하는 효과 또는 애니메이션만 실행하고 대기 중인 큐를 모두 삭제함. dequeue() 스택에 쌓인 큐를 모두 제거함. finish() 선택한 요소의 진행 중인 애니메이션이 강제로 완료 시점으로 간 후 ..
3. 2017.05.24 효과 및 애니메이션 메서드

   * 효과 및 애니메이션 메서드 - 문서 객체를 보이게 했다가 숨기려면 스타일(CSS)에 display 속성을 사용해야 함. - 스타일을 이용하면 객체는 단순히 보였다가 숨겨짐. - 하지만 효과(Effect) 메서드를 사용하면 스타일(CSS)을 사용하는 것보다 좀 더 역동적인 동작을 적용하여 객체를 화려하게 숨기거나 보이게 만들 수 있음. - 효과에 애니메이션 메서드까지 사용하면 선택한 요소에 다양한 동작(Motion)을 적용시킬 수 있음 * 효과 메서드 - 효과(Effect) 메서드에는 선택한 요소를 역동적으로 숨겼다가 보이게 만드는 기능을 가진 메서드, 선택한 요소에 동작을 적용시킬 수 있는 애니메이션 메서드가 있음. - 효과 메서드의 종류 종류 풀이 hide() 노출되어 있는 요소를 숨김. show(..
4. 2017.05.24 그룹 이벤트 등록 및 삭제하기

   * 그룹 이벤트 등록 메서드 - 그룹 이벤트 등록 메서드를 상요하면 한 번에 2개 이상의 이벤트를 등록할 수 있음. - 예를 들어, 선택한 요소에 메서드를 한 번만 적용하여 '마우스를 올렸을 때'와 '포커스가 생생되었을 때'와 같이 두 이벤트가 발생되도록 만들 수 있음. - 그룹 이벤트 등록 메서드의 종류 종류 설명 on() 선택한 요소에 한 개 이상의 이벤트를 등록할 수 있음. 그리고 사용 방식에 따라 이벤트를 등록한 이후에도 동적으로 생성된 이벤트를 등록한 요소와 동일한 새 요소에도 이벤트가 등록됨. 이 메서드는 제이쿼리 1.7 버전 이상부터 지원하고 있음. bind() 선택한 요소에 한 개 이상의 이벤트를 등록할 수 있음. delegate() 선택한 요소의 지정한 하위 요소에 이벤트를 등록함. 이벤..
5. 2017.05.23 자주 사용되는 기타 이벤트 메서드

   (1) change() 이벤트 메서드 - 선택한 입력 요소의 값(value)이 새 값으로 바뀌고 포커스가 다른 요소로 이동되었을 때 발생함. - 주로 폼 요소에 입력된 새 값을 스크립트에 이용할 때 사용됨. - 또는 change 이벤트를 강제로 발생시킬 수 있음. - 기본형 1. $(요소 선택).change(function() {...}); // 선택한 입력 요소의 값(value)이 새 값으로 바뀌고 포커스가 다른 요소로 이동되었을 때 이벤트 핸들러에 있는 실행문을 실행함. 2. $(요소 선택).change(); // 선택한 요소에 강제로 change 이벤트 메서드를 발생시킴. - 예) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 사이트 선택 네이버 네이트 ..
6. 2017.05.23 이벤트 등록 메서드 - 키보드 이벤트

   * 키보드 이벤트 - 키보드로만 이벤트를 발생시킬 수 있는 이벤트. - 예를 들어, 키보등 있는 키를 눌렀을 때나 키에서 손을 떼었을 때 이벤트가 발생하는 것. * keydown() / keyup() / keypress() 이벤트 메서드 - keydown()와 keypress() 이벤트 메서드는 선택한 요소에서 키보드 자판을 눌렀을 때 이벤트를 발생시킴. - 또한 강제로도 이벤트를 발생시킬 수 있음. - keydown() 이벤트 메서드는 이벤트가 발생했을 때 이벤트의 객체를 이용하면 눌려진 모든 자판에 대한 고유 키 코드값을 받아올 수 있지만, keypress() 이벤트 메서드는 문자(a~z, !, @, #... 등) 자판에 대한 고유 키 코드값은 받아오지 못함. - 키보드에 눌려진 자판 고유 키 코드값..
7. 2017.05.23 키보드 접근성을 위한 이벤트 등록법

   * 키보드 접근성을 위한 이벤트 등록법 - 키보드 접근성이란, 마우스 이벤트를 등록했을 때 만약 현재 마우스가 없더라도 제이쿼리로 만든 최소한의 기능을 키보드만으로 사용할 수 있도록 보장하는 것을 말함. - 키보드 접근성을 고려하여 마우스 이벤트를 등록할 때는 포커스를 이동할 수 있는 요소들인 와 태그, 또는 입력 요소인 , , 태그에 이벤트를 등록해야 함. [마우스에 대응하는 키보드 이벤트] - 마우스 이벤트를 등록할 때는 마우스에 대응하는 키보드 이벤트도 함께 등록해야 함. - 그래야 마우스가 없는 방문객이 사이트를 방문했을 때 키보드만으로도 접근할 수 있어 방문자가 불편함을 느끼지 않을 수 있음. - 마우스 이벤트에 대응하는 키보드 이벤트 마우스 이벤트 마우스 이벤트에 대응하는 키보드 이벤트 mou..
8. 2017.05.23 이벤트 등록 메서드 - 마우스 이벤트

   * 마우스 이벤트 - 방문자가 사이트에서 마우스를 이용해 취하는 모든 행위를 말함. - 예) 방문자가 지정한 요소에 마우스를 올리거나 클릭하는 등의 행위. (1) click() / dblclick() 이벤트 메서드 - click() 이벤트 메서드는 선택한 요소를 클릭했을 때 이벤트를 발생시킴. - 또는 선택한 요소에 강제로 클릭 이벤트를 발생시킬 때 사용. - 기본형 1. $(요소 선택).click(function() {...}); // 선택한 요소를 클릭할 때마다 이벤트 핸들러에 일련의 실행문을 실행시킴. 2. $(요소 선택).click(); // 마치 사이트 방문자가 선택한 요소를 클릭한 것처럼 선택한 요소에 강제로 click 이벤트가 발생함. - dblclick() 이벤트 메서드는 선택한 요소를 연..
9. 2017.05.23 이벤트 등록 메서드 - 로딩 이벤트 메서드

   * 로딩 이벤트 메서드 - 로딩 이벤트 메서드는 브라우저에서 HTML 문서를 불러올 때 HTML 문서 객체를 로딩(Loading)해 옴. - 이때 지정한 객체의 로딩이 완료되면 이벤트 핸들러가 실행됨. * ready() / load() 이벤트 메서드 - ready()와 load() 이벤트 메서드는 HTML에 지정된 문서 객체의 로딩이 완료된 후 이벤트 핸들러가 실행됨. - 어떤 선택자(Selector)를 사용하려면 먼저 문서 객체를 불러와야 함. - 문서 객체를 먼저 불러와야할 때 ready() 이벤트 메서드를 사용함. - 이때 문서 객체가 완전히 로딩되더라도 이미지나 프레임에 연동된 소스는 그 이후 로딩됨. - load() 이벤트 메서드는 이런 이미지나 프레임에 연동된 소스가 로딩이 완료되면 이벤트 핸..
10. 2017.05.23 이벤트 등록 메서드란?

    * 이벤트 등록 메서드란? - 이벤트 : 사이트에서 방문자가 취하는 모든 행동 - 이벤트 핸들러 : 이벤트가 발생했을 때 실행되는 일련의 실행 코드 - 이벤트 등록 메서드를 사용하면 방문자가 지정한 요소에서 어떠한 특정 동작이 일어났을 때 저장된 실행문을 실행시킬 수 있음. - 이벤트 등록 메서드에는 단독 이벤트 등록 메서드와 그룹 이벤트 등록 메서드가 있음. - 단독 이벤트 등록 메서드 : 한 동작에 대한 이벤트를 등록할 때 사용하는 메서드 - 그룹 이벤트 등록 메서드 : 하나 이상의 이벤트를 등록할 때 사용하는 메서드 - 이벤트 사용의 기본형 버튼 : 이벤트 대상 : 이벤트 등록 메서드 : 이벤트 핸들러 - 이벤트 등록 메서드의 종류 구분 종류 설명 로딩 이벤트 load() 선택한 이미지 또는 프레임..
11. 2017.05.22 객체 조작 메서드 - 객체 편집 메서드

    (3) 객체 편집 메서드 - 선택한 요소를 복제/새 요소를 생성/복제하거나 새로 생성한 요소를 위도한 위치에 삽입/선택한 요소를 삭제하는 기능을 갖고 있는 메서드. - 객체 편집 메서드의 종류 종류 사용법 설명 before() $("요소 선택").before("새 요소"); 선택한 요소 이전 위치에 새 요소 추가 after() $("요소 선택").after("새 요소"); 선택한 요소 다음 위치에 새 요소 추가 append() $("요소 선택").append("새 요소"); 선택한 요소의 마지막 위치에 새 요소 추가 appendTo() $("새 요소").appendTo("요소 선택"); 선택한 요소의 마지막 위치에 새 요소 추가 prepend() $("요소 선택").prepend("새 요소"); 선택한 ..
12. 2017.05.22 객체 조작 메서드 - 수치 조작 메서드

    (2) 수치 조작 메서드 - 속성 조작 메서드와 성격이 비슷하지만, 선택한 요소의 수치 관련된 속성을 변경하거나 기존에 입력된 값을 불러올 때 사용. - 예를 들어, 요소의 너비 또는 높이의 속성값을 바꾸거나 불러올 때 사용. - 수치 조작 메서드 종류 사용법 설명 height() $("요소 선택").height(); $("요소 선택").height(100); 안쪽 여백과 선을 제외한 높잇값을 반환하거나 변환 width() $("요소 선택").width(); $("요소 선택").width(100); 안쪽 여백과 선을 제외한 너빗값을 반환하거나 변환 innerHeight() $("요소 선택").innerHeight() $("요소 선택").innerHeight(300); 안쪽 여백을 포함한 높잇값을 반환하거..
13. 2017.05.22 객체 조작 메서드 - 속성 조작 메서드

    * 객체 조작 메서드 - 객체 조작 메서드는 속성 조작 메서드와 수치 조작 메서드 그리고 객체 편집 메서드로 나눌 수 있음. - 속성 조작 메서드는 요소의 속성을 바꿀 때 사용하고, 수치 조작 메서드는 요소의 너비 또는 높잇값과 같은 수치를 바꿀 때 사용 -> 선택한 요소의 속성을 바꾸는 메서드이므로 성격이 비슷하다고 볼 수 있음. - 객체 편집 메서드는 객체를 생성하거나 삭제 또는 복제할 때 사용하는 메서드임. (1) 속성 조작 메서드 - 요소의 속성을 조작할 때 사용하는 메서드 - 속성 조작 메서드 종류 사용법 설명 html() $("요소 선택").html(); $("요소 선택").html("새 요소"); 선택한 요소의 하위 요소들을 반환하거나 새 요소로 변환함. text() $("요소 선택").te..
14. 2017.05.22 선택자와 함께 사용하면 편리한 메서드들

    [선택자와 함께 사용하면 편리한 메서드들] - 메서드 종류 종류 사용법 설명 is() $("li").is(".visible") 선택한 요소가 보이면 true를 반환함. noConflict() var m=$.noConflict(); m("h1").width(100); 선택자 메서드를 사용할 때 "$"를 앞에 붙여 사용했음. $.onConflict()를 사용하면 "$" 메서드를 변수에 참조시켜 "$"문자 대신 임의의 문자를 지정하여 사용할 수 있음. get() $("li").get(0).style.color="red" 제이쿼리로 선택한 요소에 get(0) 메서드를 적용하면 자바스크립트에 DOM 선택자로 선택한 태그로 인식되어 이전 자바스크립트의 DOM 방식을 따름. each() / $.each() $("lI..
15. 2017.05.22 탐색 선택자 - 콘텐츠 탐색 선택자

    [그 외의 선택자 - 콘텐츠 탐색 선택자] - 콘요소 또는 속성의 포함 여부에 따라 특정 요소를 선택하는 선택자. - 콘텐츠 탐색 선택자의 종류 종류 사용법 설명 $("요소 선택":contains(텍스트)") $("li:contains('내용2')") 요소 중 '내용2'라는 텍스트를 포함하는 요소만 선택 $("요소 선택").contents() $("p").contents() 선택한 요소의 하위 요소 중 가장 가까운 하위 요소를 선택 $("요소 선택:has(요소명)") $("요소 선택").has(요소명) $("li:has('span')") $("li").has('span') 요소 중 을 포함하는 요소만 선택 $("요소 선택:not(:제외 요소)") $("요소 선택").not("제외 요소) $("li:not..
16. 2017.05.22 탐색 선택자 - 속성 탐색 선택자

    [속성 탐색 선택자] - 선택해 온 요소를 기준으로 일치하는 속성의 포함 여부를 따져서 요소를 선택해오는 선택자. - 속성 탐색 선택자 종류 종류 사용법 설명 $("요소 선택[속성]") $("li[title]") 요소 중 title 속성이 포함된 요소만 선택 $("요소 선택[속성=값]") $("li[title='리스트']") 요소 중 title 속성값이 '리스트'인 요소만 선택 $("요소 선택[속성^=텍스트]") $("a[href^='http://']") 요소 중 href 속성값이 'http://'로 시작하는 요소만 선택 $("요소 선택[속성$=텍스트]") $("a[href$='.com']") 요소 중 href 속성값이 '.com'으로 끝나는 요소만 선택 $("요소 선택[href*=텍스트]") $("a[..
17. 2017.05.22 탐색 선택자 - 위치 탐색 선택자

    * 탐색 선택자 - 탐색 선택자를 사용하면 직접 선택자를 이용해 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 정확히 선택할 수 있음. - 탐색 선태자는 선택한 요소 중 요소의 위치를 기준으로 선택하는 위치 탐색 선택자, 요소의 지정된 속성을 기준으로 선택하는 속성 탐색 선택자가 있음. - 그 외의 탐색 선택자로 요소 내에서 콘텐츠의 포함 여부를 따져 선택하는 콘텐츠 탐색 선택자, 선택한 요소를 한 번 더 필터링할 수 있는 필터링 선택자 등이 있음. [위치 탐색 선택자] - 기본 선택자로 선택한 요소 중 요소의 위치 또는 인덱스 번호를 이용하여 특정 요소를 좀 더 정확히 선택. - 위치 탐색 선택자 종류 종류 사용법 설명 $("요소 선택:first") $("요소 선택").first() $("li:fi..
18. 2017.05.22 직접 선택자와 인접 관계 선택자

    * 제이쿼리의 직접 선택자 및 인접 관계 선택자 - 앞으로 '문서 객체'라는 말을, '요소' 또는 '태그'라 표현하겠음. - 자바스크립트의 DOM(Document Object Model) 서낵자는 IE 8 이하와 그 외의 브라우저 사이에 호환성에 대한 문제점이 있었음. - 하지만 제이쿼리는 이러한 호환성과 관련된 문제들을 모두 해결함. - 제이쿼리 선택자는 자바스크립트의 DOM 선택자보다 사용이 편리하고 쉬움. - 제이쿼리의 선택자에는 크게 직접 선택자와 인접 관계 선택자로 나눌 수 있음. - 직접 선택자에는 전체 선택자, 아이디 선택자, 클래스 선택자, 요소명(tag Name) 선택자, 그룹 선택자가 있음. - 인접 관계 선택자에는 부모 요소 선택자, 자식 요소 선택자, 형(이전) 요소 선택자, 동생(..
19. 2017.05.22 선택자 (Selector)

    * 선택자란? - 선택자(Selector)를 사용하면 지정한 문서 객체를 선택해 올 수 있음. - 제이쿼리 선택자에는 직접 선택자, 이미 선택한 요소를 기준으로 근접한 요소의 관계를 따져 선택하는 인접 관계 선택자, 선택된 요소 중 더 세밀하게 선택할 수 있는 탐색 선택자가 있음. * 제이쿼리 선택자 사용 준비하기 - 선택자를 사용하기 위해서는 문서 객체가 필요함. 1. 잘못된 적용 1 2 3 4 5 6 7 8 9 10 11 12 13 14 잘못된 선택자 적용 문단 요소보다 먼저 실행됨 문단 요소 Colored by Color Scripter cs -> 자바스크립트가 인터프린터 언어이기 때문에 제이쿼리가 먼저 실행되고 난 후 영역에 문서 객체가 로딩됨. -> 선택자가 먼저 실행되어 문서 객체를 선택할 수..
20. 2017.05.22 제이쿼리란?

    * 제이쿼리란? - 제이쿼리는 모질라 사의 자바스크립트 개발자였던 존 레식(John Resig)이 창시함. - 제이쿼리는 자바스크립트를 이용해 만든 라이브러리 언어(자바스크립트로 만들어진 다양한 한수들의 집합). - 제이쿼리에서 개선된 사항 1) 호환성 문제점 해결 - 자바스크립트는 호환성(크로스 브라우징)이 떨어짐. - 자바스크립트에서는 이벤트 객체를 생성할 때 IE 브라우저 8 이하 버전과 그 외의 브라우저(파이어폭스, 크롬, 사파리, 오페라, IE 9 이상 버전)는 코드를 실행했을 때 그 결과에 많은 차이가 있었음. - 제이쿼리에서는 이 문제들을 모두 해결함. 2) 쉽고 편리한 애니메이션 효과 기능 구현 - 자바스크립트로 애니메이션 효과를 구현하려면 많은 코드를 사용해야 했고, 개발하는 데도 많은 ..
21. 2017.05.21 이벤트 객체 (Event Object)

    * 이벤트 객체 생성하기 - 이벤트 객체는 사이트에서 방문자가 이벤트를 발생시킬 때마다 생성할 수 있음. - 이렇게 생성된 이벤트 객체의 속성을 이용하면 다양한 이벤트 정보를 가져올 수 있음. - 이벤트 객체 생성은 IE 8 이하 버전의 브라우저와 그 외의 브라우저(파이어폭스, 크롬, 사파리, 오페라, IE(9 이상) 등)에서 각각 방법이 다름. [파이어폭스, 크롬, 사파리, 오페라, IE 9 이상에서 이벤트 객체 생성하기] 1 2 3 4 5 document.onkeydown=function(e){ alert(e); } cs [IE 8 이하 브라우저에서 이벤트 객체 생성하기] 1 2 3 4 5 document.onkeydown=function(e){ alert(window.event); } cs - IE..
22. 2017.05.21 이벤트 (Event)

    * 이벤트란? - 브라우저에서 방문객이 취하는 모든 동작을 이벤트라고 함. - 이벤트가 발생했을 때 자바스크립트 실행문을 실행하는 것을 이벤트 핸들러라고 함. - 즉, 이벤트 발생 시 자바스크립트 코드가 실행됨. - 이벤트 종류 종류 설명 마우스 이벤트 onmouseover 마우스가 지정한 요소에 올라갔을 때 발생함. onmouseout 마우스가 지정한 요소에서 벗어났을 때 발생함. onmousemove 마우스가 지정한 요소 영역에서 움직일 때 발생함. onclick 마우스가 지정한 요소를 클릭했을 때 발생함. ondblclick 마우스가 지정한 요소를 연속 두 번 클릭했을 때 발생함. 키보드 이벤트 onkeypress 지정한 요소에서 키보드가 눌렸을 때 발생함. onkeydown 지정한 요소에서 키보드..
23. 2017.05.20 함수 (Function)

    * 기본 함수 정의문 - 함수를 사용하여 실행문을 저장한 것을 함수 정의문이라고 함. - 함수 정의문의 기본형 function 함수명() { 일련의 실행문; } 참조 변수 = function() { 일련의 실행문; } - 정의되어 있는 함수를 호출하는 기본형 함수명(); 또는 참조 변수(); * 매개 변수가 있는 함수 정의문 - 기본형 function 함수명(매개 변수 1, 매개 변수 2, ... , 매개 변수 n) { 스크립트 실행문; } 함수명(데이터 1, 데이터 2, ..., 데이터 n); * 내장 함수 - 내장 함수는 자바스크립트 엔진에 내장된 함수 정의문을 말함. - 내장 함수는 함수 정의문의 선언 없이 단지 함수 호출만으로 자바스크립트에 이미 내장된 함수를 사용할 수 있음. - 내장 함수의 종..
24. 2017.05.20 문서 객체 모델(DOM)

    * 문서 객체 모델(DOM) - (X)HTML 문서의 구조를 가리켜 문서 객체 모델(DOM: Document Object Model)이라고 함. - (X)HTML 각 태그마다 기능과 속성이 있음. - (X)HTML 태그는 각각의 기능(Method)과 속성(Properties)을 갖고 있는 문서 객체임. - 자바스크립트의 문서 객체 모델(DOM)은 IE 8 이하 버전과 그 외 파이어폭스, 크롬, 사파리 등의 브라우저 간에 호환성이 떨어진다는 단점이 있음. - 하지만 제이쿼리는 이런 호환성이 떨어지는 단점들을 모두 해결함. [선택자] - (X)HTML에서 사용하는 스타일(CSS)과 자바스크립트 내에서 사용하는 스타일은 모두 (X)HTML의 선택한 요소에 디자인 속성을 바꿀 때 사용함. - 하지만 (X)HTM..
25. 2017.05.20 브라우저 객체 모델(BOM)

    * 브라우저 객체 모델(BOM) - 브라우저에 내장된 객체를 '브라우저 객체'라고 함. - window는 브라우저 객체의 최상위 객체가 됨. - window 객체에는 하위 객체를 포함하고 있음. - 즉, 계층적 구조로 이루어져 있으며, 이를 일컬어 브라우저 객체 모델(BOM: Browser Object Model)이라고 함. [window 객체] - window 객체 메서드 종류 종류 설명 open() 새 창을 열 때 사용함. alert() 경고 창을 띄움. prompt() 질의응답 창을 띄움. confirm() 확인/취소 창을 띄움. moveTo() 창의 위치를 이동시킬 때 사용함. resizeTo() 창의 크기를 변경시킬 때 사용함. setInterval() 일정 간격으로 지속적으로 실행문을 실행시킬..
26. 2017.05.20 객체 / 내장객체

    * 객체란? - 자바스크립트는 객체(Object) 기반 프로그래밍 언어. - 객체를 구성하는 요소로는 속성(Property)과 기능(Method)가 있음. - 자바스크립트 객체의 메소드와 속성을 사용하는 기본형 1. 객체.메서드() // 갹체의 매서드를 실행함. 2. 객체.속성; 또는 객체.속성=값; // 객체의 속성값을 가져옴. || 객체의 속성값을 바꿈. * 객체의 종류 - 자바스크립트의 객체는 크게 내장 객체, 브라우저 객체 모델(BOM: Browser Object Model), 문서 객체 모델(DOM: Document Object Model)로 나눌 수 있음. 1) 내장 객체 - 내장 객체는 자바스크립트 엔진에 내장되어 있어, 필요한 경우 생성해 사용할 수 있음. - 내장 객체로는 문자(Strin..
27. 2017.05.20 자바스크립트 기초 문법

    * 자바스크립트 선언문 - 자바스크립트 선언문은 태그 영역 또는 태그 영역에 선언하면 됨. 1 2 3 자바스크립트 실행문; cs * 자바스크립트 주석 처리 // 한 줄 설명글인 경우 /* 설명글이 여러 줄인 경우 이렇게 처리함 */ * 내부 스크립트 외부로 분리하기 - 외부 자바스크립트 연동 코드로 파일을 연결하는 기본형 * 자바스크립트 코드 입력 시 주의할 점 1. 자바스크립트는 대·소문자를 가려서 씀 2. 실행문을 마치고 나서는 세미콜론(;)을 쓰는 것이 좋음. 세미콜론을 쓰지 않으면, 한 줄에 여러개의 실행문을 작성할 때 문제가 생김. 3. 실행문을 작성할 때는 한줄에 한 문장만 작성하는 것이 가독성을 위해 좋음. 4. 문자형 데이터를 작성할 때는 큰따옴표("")와 작은따옴표('')겹침 오류를 주의..
28. 2017.05.20 CSS 요점 정리

    * CSS 선언문 - 선언문은 CSS를 HTML의 내부에 작성할 때 반드시 필요함. - 만일 이 선언문이 없으면 브라우저는 CSS를 HTML 언어로 인식하게 됨. * 외부 스타일 연동 방식 link 방식 import 방식 @import:url("경로"); * 선택자의 종류 종류 사용 예 설명 전체 선택자 *{속성:값;} 전체 요소를 선택할 때 사용 요소명 선택자 요소명{속성:값;} 예) h1{속성:값;} 태그 이름(요소명)으로 선택할 때 사용 아이디 선택자 #아이디명{속성:값;} 아이디를 가진 요소를 선택할 때 사용(단독 사용 시) 클래스 선택자 .클래스명{속성:값;} 클래스를 가진 요소를 선택할 때 사용(반복해서 사용 시) 가상 클래스 선택자 a:link{속성:값;} 링크 걸린 텍스트 선택 a:visi..
29. 2017.05.20 (X)HTML 요점 정리

    *요소의 종류와 특징 구분 블록 요소 인라인 요소 범용 요소 특징 - 줄 바꿈 속성을 가지고 있음. - 기본 너비 속성이 100%임. - 블록 요소를 포함할 수 없지만, 예외인 요소도 있음. - 인라인 요소를 포함할 수 있음. - 줄 바꿈 속성이 없음. - 내용만큼 너비가 유지됨. - 너비와 높이의 속성을 사용할 수 없음. - 블록 요소를 포함할 수 없으며, 인라인 요소는 포함할 수 있음. - 블록 요소임에도 불구하고 모든 요소를 포함할 수 있음. 종류 ~, , , , , , , , , , , , , , , , , , , , , , , , (p 요소만 가능) * 문단 태그 종류 설명 종류 설명 ~ 제목 요소 / 숫자가 작을수록 큰 제목 이미지 요소 단락 구분 요소 링크 요소 주소 태그, 주소를 작성할 때..
30. 2017.05.19 WebSocket

    * WebSocket이란? - WebSocket은 서버와 실시간으로 쌍방향 통신을 하기 위한 장치임. - 통상 HTTP 프로토콜에서는 리퀘스트/리스폰스 모델로 통신을 수행하지만, WebSocket에서는 TCP/IP상의 독자적인 프로토콜을 통해 통신을 수행함. - WebSocket은 드래프트75(hixie-75)판 이전과 드래프트76(ietf-hybi-00)판 이후의 사양과 프로토콜의 호환성이 없음. - 웹 브라우저가 자원하고 있는 버전과 서버가 지원하는 버전이 일치하도록 해야 할 필요가 있음. IE Firefox Chrome Safari Opera hixie-76/hybi-00 6 5.0.1 11(무효)※ hybi-07 6 hybi-10 7 14 RFC 6455 10 11 16 ※ Opera에서는 기본값..