html571 2.sessionStorage 2.sessionStorage 여러분들이 웹 브라우저를 이용하여 웹 서버에 연결하면 하나의 세션(session)이 시작됩니다. 다시 말해서 여러분이 네이버나 다음 웹사이트를 웹 브라우저를 이용하여 접속하면 하나의 논리적인 연결이 된다는 말입니다. 그래서 여러분들이 웹사이트에 접속한 후 해당 세션(session)에 데이터를 저장할 수 있는데 특정 시간 동안 아무런 작업을 하지 않거나 웹브라우저를 닫으면 자동적으로 세션이 종료되어 세션에 저장되어 있던 데이터들은 삭제되게 됩니다. HTML5에서는 이러한 작업들을 sessionStorage를 이용하게 되는데 방금 전 설명한 localStorage와 비슷하게 데이터 추가 및 수정, 읽기 등의 작업을 수행할 수 있습니다. 차이점이라면 데이터가 지속적이냐 일시적이냐.. 2013. 8. 8. 6장 Drag and Drop 6장 Drag and Drop HTML5는 마우스나 기타 포인팅 장치를 이용하여 웹 브라우저 내의 문자열이나 이미지를 움직일 수 있는 끌기와 놓기(drag-and-drop) 동작을 지원합니다. 이 그 기능은 쇼핑몰과 같은 웹 페이지에서 유저로 하여금 쇼핑 카트에 구매할 상품을 끌어다 놓거나 홈페이지 내에서 특정 요소를 재배치하거나 파일 업로드 같은 기능을 구현할 때도 추가적으로 이용할 수 있는 기능입니다. 현재까지 끌기(Drag)와 놓기(Drop) 기능은 자주 업데이트 중이며 관련 명세들에 포함된 기능들을 브라우저 별로 구현이 되는 부분도 있고 구현되지 않는 부분이 있는 상태임을 알립니다. 관련 문서는 “http://dev.w3.org/html5/spec/dnd.html“에서 확인할 수 있습니다. 끌기(.. 2013. 8. 8. 9. 캔버스(canvas) 내용을 이미지로 저장 9. 캔버스(canvas) 내용을 이미지로 저장 여러분들이 canvas 내에 그린 직선이나 사각형 같은 이미지들을 이미지 형태(기본 png 형태)로 저장하는 방법은 의외로 간단합니다. 다음과 같은 toDataURL() 메서드를 이용하여 이미지 객체를 이미지 데이터 URL로 설정할 수 있으며 브라우저를 통해 직접 이미지 데이터 URL을 열거나 이미지를 저장할 수 있습니다. canvas.toDataURL([type]) 위에서 입력 파라미터가 없이 사용할 경우 기본 타입은 “image/png”를 의미하게 됩니다. 입력 파라미터의 타입(type)으로 올 수 있는 형태는 “image/jpeg”, “imag/svg+xml”, “text/plain” 등이 올 수 있습니다. toDataURL() 메서드가 실행되면 반환.. 2013. 8. 7. 8. context의 상태 저장 및 불러오기 8. context의 상태 저장 및 불러오기 context는 하나의 스택(stack)에 그림 상태들을 보유합니다. 그림 상태들은 변환(Transformation), clip() 메서드를 이용한 clipping region, strokeStyle, fillStyle 등과 같은 속성들로 구성됩니다. 그리고 이러한 그림상태들을 context는 다음과 같이 2 가지의 메서드를 사용하여 스택에 저장하거나 복원할 수 있습니다. 메서드 기능 save() 현재의 상태를 스택(stack)에 집어넣습니다. restore() Context 상태를 복원하기 위해서 스택으로부터 상태를 끄집어냅니다. 이제 “basic.html” 파일을 메모장으로 연 후 “// canvas에 그릴 선이나 도형 작성” 밑에 다음과 같이 코드를 작성.. 2013. 8. 7. 이전 1 2 3 4 5 ··· 18 다음
