html55 [HTML5 웹 프로그래밍] HTML5 API 웹 스토리지 클라이언트에 데이터를 저장하기 위한 영역 쿠키 웹 스토리지 저장 용량 4KB 도메인당 5MB (사실상 용량의 제한이 없음) 네트워크 전송 부하 및 보안 웹 서버에 요청을 보낼 때마다 HTTP 헤더에 담아서 전송 → 많은 트래픽의 발생 및 보안의 취약성 존재 웹 서버로 요청을 하더라도 HTTP 메시지에는 포함되지 않음 → 네트워크 부하 감소 유효 기간 유효 기간이 존재 → 기간 만료 시 자동 삭제 로컬 스토리지는 유효 기간이 없음→ 사용자에 의한 명시적인 삭제에 의해서만 삭제 가능 세션 문제 브라우저의 모든 윈도우가 고유하며, 독립적인 데이터의 저장 X 각 윈도우마다 독립적으로 데이터 저장 O 저장되는 데이터의 구성 (key , value) 키를 통해서만 원하는 데이터의 값에 대한 접근이 가능.. 2023. 6. 13. [HTML5 웹 프로그래밍] 캔버스(canvas) 캔버스란? 자바스크립트 코드를 이용해서 웹브라우저에 그림을 그리는 기능 별도 프로그램 설치 없이 사용 그림을 그리고 합성 , 변환 애니메이션 같은 효과 표현 가능 캔버스 영역 지정 캔버스 영역 웹 페이지 에서 그림이 그려지는 투명한 사각형 영역 캔버스 객체와 캔버스 컨텍스트 객체 생성 캔버스 생성 → 캔버스 객체 생성 → 캔버스 컨텍스트 객체 생성 → 실제 그림을 그림 캔버스 객체 생성 let 변수명 = document.getElementById("canvcas_id_속성값"); let canvas = document.getElementById('maCanvas') 캔버스 컨텍스트 객체 생성 let 변수명 = canvas변수.getContext('2d'); let ctx = canvas.getContex.. 2023. 6. 13. [HTML5 웹 프로그래밍] 문서 & 브라우저 객체 모델 문서 객체 모델 ( DOM, document object model ) 문서 객체 HTML 문서의 각 요소를 자바스크립트에서 사용할 수 있도록 객체로 만든 것 DOM 브라우저가 HTML 문서에 접근 할 수 있도록 정의해 놓은 표준 모델 HTML 문서를 분석하고 표시하는 방식 문서가 적재되면 브라우저는 정적으로 DOM 생성 계층적인 구조를 갖는 트리로 표현 → DOM 트리 자바스크립트를 이용하면 프로그램 실행 중에 웹 문서의 내용, 구조 및 스타일에 대한 작업 가능 → 결과가 즉각 화면에 반영 브라우저 객체 모델(BOM , browser object model) 브라우저를 객체로 표현 window ┌ document : html 문서를 표현 (최상위) ├ history : 사용자가 방문한 URL을 저장 관.. 2023. 6. 13. [HTML5 웹프로그래밍] HTML5 웹 요소 텍스트 표현 요소 요소 의미 요소 의미 ~ h6 제목 태그 문단을 나누는 단락을 생성 줄바꿈 태그 수평선을 그려줌 , 콘텐츠 구분의 용도 편집기의 문자를 그대로 출력 인용문 생성 및 들여쓰기 공백 및 특수문자 &엔티티코드; 
진수; 진수; 특수이름 문자 엔티티코드 10진수 16진수 공백 nbsp 32 20 더하기 + plus 43 2B 빼기 - minus 45 2D 곱하기 * times 42 2A 나누기 / divide 47 2F 등호 = equals 61 3D 물리적 스타일 관련 요소 단순히 웹 브라우저에 표시되는 출력 모양만을 지정하는 요소 요소 의미 글씨체 굵게 bold 처리 글씨 이탤릭체 글씨 가운데 취소 선 글씨 언더라인 글씨 위로 정렬 아래로 정렬 글씨 작게 표시 논리적 스타일 .. 2023. 6. 13. [HTML] <a> tag a 태그 태그는 하이퍼링크를 걸어주는 태그다. 속성 href: 클릭시 이동 할 링크 target: 링크를 여는 방법 _self: 링크를 현재 페이지에서 오픈. (기본값) _blank: 링크를 새로운 창 새로운 페이지에서 오픈. _parent: 링크를 현재 프레임의 부모 프레임에서 오픈. _top: 링크를 윈도우페이지에서 오픈. (최상위 페이지) 프레임이름: 직접 프레임이름을 명시하고, 명시한 프레임 이름이 있는 곳에서 오픈. 사용방법 링크 열기 a태그의 href를 사용하고 싶지 않을때, href속성을 사용하지 않고 onClick() 이벤트를 사용하거나, 디자인적으로 사용하기 위함이다. 그럴때 유용히 쓰는 방법이 href= "" 값에 특정 값을 넣어주는 방법이다. 01. # 해시(hash) # 해시(has.. 2022. 11. 25. 이전 1 다음 728x90
