용성월드

Server Sent Events API server sent events API는 웹 페이지가 서버로부터 갱신된 정보를 자동으로 받을 수 있도록 설정합니다. server sent events 지원 여부 확인 server sent events를 사용하기 전에, 우선 사용자의 웹 브라우저가 이를 지원하는지 안 하는지 확인해야 합니다. if (typeof(EventSource) !== "undefined") { // server sent events를 위한 코드 부분 } else { // server sent events를 지원하지 않는 브라우저를 위한 안내 부분 } server sent events를 이용해 5초마다 웹 페이지를 갱신 if(typeof(EventSource) !== "undefined") ..

application cache API application cache API는 웹 응용 프로그램을 캐시(cache) 하여, 인터넷 접속 없이 사용자가 접근할 수 있게 해줍니다. 따라서 application cache를 사용하면 웹 응용 프로그램의 오프라인 버전을 쉽게 만들 수 있습니다. application cache를 사용해서 생기는 장점은 다음과 같습니다. - 오프라인 접속 : 사용자가 웹 응용 프로그램을 오프라인(off-line)으로도 사용할 수 있습니다. - 속도 : 캐시(cache)된 자원은 빠르게 로드(load)할 수 있습니다. - 서버의 부하 감소 : 웹 브라우저는 서버의 자원에 변동이 있을 때만 자원을 갱신하면 됩니다. 출처 : tcpschool.com/

웹 스토리지(web storage) API 웹 스토리지 API는 기존 쿠키(cookie)의 문제점을 극복하기 위해 웹 브라우저가 직접 데이터(data)를 저장할 수 있게 해줍니다. HTML5 이전에는 응용 프로그램이 데이터를 서버에게 요청할 때마다 매번 쿠키(cookie)라는 곳에 그 정보를 저장합니다. 하지만 웹 스토리지는 사용자 측에서 좀 더 많은 양의 정보를 안전하게 저장할 수 있도록 해줍니다. 웹 스토리지는 최소 5MB 이상의 많은 공간을 가지고 있으며, 이 정보는 절대 서버로 전송되지 않습니다. 이러한 웹 스토리지는 오리진(origin)마다 단 하나씩만 존재합니다. 오리진(origin)이란 도메인(domain)과 프로토콜(protocol)의 한 쌍으로 이루어진 식별자입니다. 따라서 하나의 오리진..

드래그 앤 드롭 이벤트 마우스로 객체(object)를 드래그해서 놓을 때까지 여러 단계의 이벤트가 순차적으로 발생하게 됩니다. 다음 표는 드래그 앤 드롭시 일어나는 이벤트를 순서대로 보여줍니다. 이벤트설명 dragstart 사용자가 객체(object)를 드래그하려고 시작할 때 발생함. dragenter 마우스가 대상 객체의 위로 처음 진입할 때 발생함. dragover 드래그하면서 마우스가 대상 객체의 위에 자리 잡고 있을 때 발생함. drag 대상 객체를 드래그하면서 마우스를 움직일 때 발생함. drop 드래그가 끝나서 드래그하던 객체를 놓는 장소에 위치한 객체에서 발생함. dragleave 드래그가 끝나서 마우스가 대상 객체의 위에서 벗어날 때 발생함. dragend 대상 객체를 드래그하다가 마우스 ..

HTML5 input 요소의 속성 HTML5에서 새롭게 추가된 input 요소의 속성은 다음과 같습니다. 1. autocomplete 2. autofocus 3. form 4. formaction 5. formenctype 6. formmethod 7. formnovalidate 8. formtarget 9. height and width 10. list 11. min and max 12. multiple 13. pattern 14. placeholder 15. required 16. step autocomplete 속성 autocomplete 속성은 form 요소나 input 요소에 입력된 정보를 저장할지 안 할지를 명시합니다. 이 속성의 속성값이 on으로 설정되면, 브라우저는 사용자가 입력하는 정보를..

HTML5에서 추가된 의미(semantic) 요소 의미 요소설명 HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의함. HTML 문서 사이를 탐색할 수 있는 링크(link)의 집합을 정의함. HTML 문서의 주요 콘텐츠(content)를 정의함. HTML 문서에서 섹션(section) 부분을 정의함. HTML 문서에서 독립적인 하나의 기사(article) 부분을 정의함. HTML 문서에서 페이지 부분 이외의 콘텐츠(content)를 정의함. HTML 문서에서 그래픽과 비디오 등의 독립적인 콘텐츠(content)를 정의함. figure 요소를 위한 캡션을 정의함. HTML 문서나 섹션(section) 부분에 대한 푸터(footer)를 정의함. 기본 출력방향과는 다른 방향으로 출력되..

1. 텍스트 입력 태그의 type 속성값을 "text"로 설정하면, 사용자로부터 한 줄의 텍스트를 입력받을 수 있습니다. 검색할 내용을 입력하세요 : 2. 비밀번호 입력 태그의 type 속성값을 "password"로 설정하면, 사용자로부터 비밀번호를 입력받을 수 있습니다. 비밀번호를 입력받기 때문에 화면에는 입력받은 문자나 숫자 대신 별표나 작은 원 모양이 표시됩니다. 사용자 : 비밀번호 : 3. 라디오 버튼 태그의 type 속성값을 "radio"로 설정하면, 사용자로부터 여러 개의 옵션(option) 중에서 단 하나의 옵션만을 입력받을 수 있습니다. 이때 서버로 정확한 입력을 전송하기 위해서는 반드시 모든 input 요소의 name 속성이 같아야 합니다. HTML CSS JAVA C++ 4. 체크박스(..

1. header 요소 2. nav 요소 3. main 요소 4. section 요소 5. article 요소 6. figure와 figcaption 요소 7. footer 요소 header 요소 header 요소는 HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의합니다. 헤더(header)란 도입부에 해당하는 콘텐츠(content)를 가지고 있는 부분을 의미합니다. 또한, 한 문서 내에 여러 개의 header 요소가 존재할 수 있습니다. 전체 문서에 대한 헤더(header)입니다. ... 섹션 부분에 대한 헤더(header)입니다. 헤더 부분에 들어간 단락입니다. nav 요소 nav 요소는 HTML 문서 사이를 탐색할 수 있는 링크(link)의 집합을 정의합니다. nav 요소..

HTML에서는 다음과 같은 방법으로 레이아웃을 작성할 수 있습니다. 1. div 요소를 이용한 레이아웃 2. HTML5 레이아웃 3. table 요소를 이용한 레이아웃 div 요소를 이용한 레이아웃 div 요소는 CSS 스타일을 손쉽게 적용할 수 있으므로, 레이아웃을 작성하는데 자주 사용됩니다. Header 영역 Nav 영역 Section 영역 Footer 영역 HTML5 레이아웃 HTML5에서는 웹 페이지의 레이아웃만을 위한 별도의 새로운 요소들을 제공합니다. 이러한 요소들을 의미(semantic) 요소라고 합니다. Header 영역 Nav 영역 Section 영역 Footer 영역 HTML5에서 제공하는 레이아웃만을 위한 의미(semantic) 요소는 다음과 같습니다. 의미 요소설명 HTML 문서나 ..