코딩공부51 HTML5 API 2 application Cache API application cache API는 웹 응용 프로그램을 캐시(cache) 하여, 인터넷 접속 없이 사용자가 접근할 수 있게 해준다. 따라서 application cache를 사용하면 웹 응용 프로그램의 오프라인 버전을 쉽게 만들 수 있다. application cache를 사용해서 생기는 장점은 다음과 같다. - 오프라인 접속 : 사용자가 웹 응용 프로그램을 오프라인(off-line)으로도 사용할 수 있다. - 속도 : 캐시(cache)된 자원은 빠르게 로드(load)할 수 있다. - 서버의 부하 감소 : 웹 브라우저는 서버의 자원에 변동이 있을 때만 자원을 갱신하면 된다. application cache를 지원하는 주요 웹 브라우저의 버전은 다음과 같다. A.. 2020. 10. 6. HTML5 API 1 HTML5에서 새롭게 추가된 API는 모두 자바스크립트로 구현되어 있다. 그러므로 본 내용을 이해하기 위해서는 자바스크립트에 대한 기초 지식이 필요하다. Geolocation geolocation API geolocation API는 사용자의 현재 위치 정보를 가져올 때 사용하는 자바스크립트 API이다. 사용자의 위도 및 경도에 관한 정보는 자바스크립트를 이용해 웹 서버로 전송된다. 이것을 이용하면 사용자의 위치를 지도에 표시하거나, 사용자 근처의 상점을 찾아주는 등의 위치기반 서비스를 할 수 있다. 하지만 이러한 정보는 사용자의 사생활을 침해할 가능성이 높으므로, 사용자의 동의 없이는 사용할 수 없도록 하고 있다. geolocation API를 지원하는 주요 웹 브라우저의 버전은 다음과 같다. API .. 2020. 10. 6. HTML5 그래픽 2 SVG (Scalable Vector Graphics) SVG 요소 svg 요소는 Scalable Vector Graphics를 의미하며, XML 기반의 W3C 그래픽 표준 권고안이다. 기존에 사용해 왔던 canvas 요소로는 벡터(vector) 이미지를 표현할 수 없었다. 하지만 svg 요소는 픽셀 기반인 웹 페이지에서 픽셀의 영향을 받지 않는 벡터 이미지를 표현할 수 있게 해준다. 따라서 이 요소는 도표나 그래프 등 벡터 기반의 다이어그램(diagram)를 표현하는 데 매우 효과적이다. svg 요소를 지원하는 주요 웹 브라우저의 버전은 다음과 같다. 요소 ie chrome firefox safari opera svg 9.0 4.0 3.0 3.2 10.1 사각형 그리기 다음 예제는 rect 요소를 사용.. 2020. 10. 6. HTML5 그래픽 1 캔바스 (Canvas) Canvas 요소 canvas 요소는 웹 페이지에 그래픽을 그려주는 쉽고 강력한 방법을 제공한다. 이 요소는 그래픽을 위한 컨테이너(container) 역할만을 수행한다. 따라서 실제로 그래픽을 그리기 위해서는 자바스크립트(JavaScript) 등의 스크립트 언어를 이용해야 한다. canvas 요소를 지원하는 주요 웹 브라우저의 버전은 다음과 같다. 요소 ie chrome firefox safari opera canvas 9.0 4.0 2.0 3.1 9.0 Canvas 요소의 속성 canvas 요소는 테두리(border)도 콘텐츠(content)도 없는 웹 페이지 내의 단순한 사각형의 공간이다. 그러므로 반드시 style 속성을 이용하여 캔버스의 크기를 설정해 주어야 한다. can.. 2020. 10. 5. HTML5 멀티미디어 멀티미디어 파일 형식 HTML5에서는 플래시와 같은 외부 플러그인의 도움 없이도 멀티미디어 파일을 간단히 사용할 수 있게 되었다. 웹 브라우저는 파일의 타입(type)을 파일의 확장자로 판단한다. 만약에 확장자가 .html인 파일을 보면, 웹 브라우저는 이 파일을 HTML 파일로써 다루게 될 것이다. 비디오(video)나 사운드(sound)와 같은 멀티미디어 요소들은 멀티미디어 파일에 저장된다. 이와 같은 멀티미디어 파일도 다음과 같이 다양한 파일 형식으로 저장될 수 있다. 비디오(Video) 파일 형식 파일 형식 파일 확장자 설명 MPEG .mpg .mpeg Moving Picture Experts Group에 의해 개발되었으며, 변환 코덱을 이용하는 손실 압축 방식을 사용함. MP4 .mp4 Movi.. 2020. 10. 5. HTML5 기본정리 2 HTML5 입력(input) 요소 타입(type) html5에서 추가된 input 요소의 타입 HTML5에서 새롭게 추가된 input 요소의 타입은 다음과 같다. 숫자 입력(number) 입력 범위 지정(range) 색상 입력(color) 날짜 입력(date) 시간 입력(time) 날짜와 시간 입력(datetime-local) 연도와 월 입력(month) 연도와 주 입력(week) 이메일 입력(email) URL 주소 입력(url) 전화번호 입력(tel) 검색어 입력(search) 숫자 입력(number) 태그의 type 속성값을 "number"로 설정하면, input 요소는 사용자가 숫자를 입력할 수 있도록 해준다. number 타입이 일반 text 타입과 다른 점은 입력 필드 우측에 숫자의 크기를 조.. 2020. 10. 3. HTML5 기본정리 1 HTML5 변경사항 HTML5 기본 구조 HTML5에서는 DOCTYPE 선언이 매우 간단해졌다. 또한, 문자셋(character set)의 선언도 매우 간단해졌다. HTML5에서의 기본 문자 인코딩(character encoding) 방식은 UTF-8이다. 이전의 기본 문자 인코딩 HTML5에 추가된 요소 및 타입 - 의미(semantic) 요소 : 참조 : https://www.w3schools.com/html/html5_browsers.asp HTML5 Semantic 요소 시멘틱(semantic) 요소란 그 자체에 의미를 가지고 있는 요소를 말한다. 즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미한다. 시멘틱 요소가 아닌 div, span 요.. 2020. 10. 3. HTML 확장 CSS, Javascript, html과 xhtml CSS (Cascading Style Sheet) CSS는 HTML 요소들이 각종 미디어에서 어떻게 보일지에 대한 정의하는 언어이다. HTML4 부터는 이러한 모든 서식 설정을 HTML 문서로부터 따로 분리하는 것이 가능해졌다. HTML 문서에 CSS 스타일을 적용하는 방법은 다음과 같다. - 인라인 스타일(Inline style) - 내부 스타일 시트(Internal style sheet) - 외부 스타일 시트(External style sheet) 인라인 스타일 (inline style) 인라인 CSS이란 HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법이다. 이러한 인라인 스타일은 해당 요소에만 스타일을 적용할 수 있다. 이 글은 녹색이고 밑줄이 있습니다. 내부 스타일 .. 2020. 10. 3. HTML select, textarea, button, fieldset, label 선택 입력 select 요소 select 요소는 여러 개의 옵션이 드롭다운 리스트(drop-down list)로 되어 있으며, 그 중에서 단 하나의 옵션만을 입력 받을 수 있다. 콤보 박스라고도 하며, 풀다운 메뉴(pull-down menus)라고도 한다. option 요소는 드롭다운 리스트에 선택할 수 있는 각각의 옵션을 명시한다. 좋아하는 과일은? 사과 바나나 오렌지 딸기 selected 속성을 이용하여 드롭다운 리스트 중에서 처음에 미리 선택되는 옵션을 지정할 수 있다. option 요소 option 요소는 여러 항목 중에 선택 가능한 항목이다. option 요소에서 사용하는 value 속성은 텍스트 필드에서의 value 속성과는 조금 다르다. 텍스트 필드에서 value 속성에 값을 입력하면 기본값.. 2020. 10. 3. HTML 입력폼(Forms), 타입(Type), 속성(Attributes) 입력폼 (form) 웹 페이지에서는 form 요소를 사용하여 사용자로부터 입력을 받을 수 있다. 또한, 사용자가 입력한 데이터를 서버로 보낼 때에도 form 요소를 사용한다. form 요소는 다음과 같은 문법으로 사용한다. action 속성 action 속성은 입력받은 데이터를 처리할 서버 상의 URL 주소를 명시한다. 전달받은 데이터를 처리하는 서버 프로그램을 폼 핸들러(form-handler)라고 한다. method 속성 method 속성은 입력받은 데이터를 서버에 전달할 방식을 명시한다. 따라서 사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달된다. method 속성을 통해 명시할 수 있는 form 요소의 전달 방식은 GET 방식과.. 2020. 10. 3. HTML 텍스트 요소 제목 (Headings) 제목 ~ 제목을 표현하는 태그를 에서 까지 제공한다. 가장 크기가 큰 태그부터 가장 작은 태그까지의 제목을 표현할 수 있다. 이 것은 제목1 입니다. 이 것은 제목2 입니다. 이 것은 제목3 입니다. 이 것은 제목4 입니다. 이 것은 제목5 입니다. 이 것은 제목6 입니다. ~ 태그의 위아래로는 약간의 여백이 자동으로 삽입된다. 제목은 중요하다. 검색 엔진은 제목를 사용하여 웹 페이지의 구조와 내용을 색인화한다. 사용자는 제목을 보고 페이지의 내용을 파악 하기에 문서 구조에 있어서 제목을 사용하는 것을 중요하다. 표제는 주 표제 다음에 표제 다음 덜 중요한 등으로 사용되어야 한다. 머리말에만 HTML 제목을 사용하기 바란다. 제목을 사용하여 텍스트를 크게 또는 굵게 표시하지 말아.. 2020. 9. 30. HTML 기본요소3, list(리스트), table(테이블) 리스트(List) 리스트(list)란 여러 요소들을 일렬로 나열한 목록이나 명단을 의미한다. HTML에서는 여러 요소들을 나열한 목록이나 명단을 표현 할 수 있는 태그를 제공하고 있다. - 순서가 있는 목록(ordered list) - 순서가 없는 목록(unordered list) - 정의 목록(definition list) 순서가 있는 목록 (ordered list) 순서가 있는 목록는 태그로 작성하고, 여기에 포함되는 각각의 리스트 요소는 태그로 작성한다. 각각의 목록 요소 앞에는 기본 마커(marker)로 아라비아 숫자가 표시된다. HTML Java C++ CSS의 list-style-type 속성을 사용하면 리스트 요소 앞에 위치하는 마커(marker)를 다른 모양으로 변경할 수 있다. - dec.. 2020. 9. 30. HTML 기본요소 2, link(링크), image(이미지) 링크 (link) 하이퍼링크(hyperlink)를 간단히 링크(link)라고 부르며, 태그로 표현 'a'는 앵커(Anchor)를 의미한다. 표현 : 링크제목 데니 target 속성 속성값 설명 _blank 링크로 연결된 문서를 새 창이나 새 탭에서 열린다. _self 링크로 연결된 문서를 현재 프레임(frame)에서 열린다. (기본설정) _parent 링크로 연결된 문서를 부모 프레임(frame)에서 열린다. _top 링크로 연결된 문서를 현재 창의 가장 상위 프레임(frame)에서 열린다. frame 이름 링크로 연결된 문서를 지정된 프레임(frame)에서 열린다. _blank _self _parent _top frame 링크의 상태(state) 다음과 같이 4가지가 있다. 상태 설명 link 아직 한.. 2020. 9. 29. HTML 기본요소 1, meta tag(메타태그), color(색), background(배경) Meta Tag(메타태그) 정리 및 사용법 검색엔진 최적화(SEO)를 위해 중요한 요소인 Meta tag의 속성을 정리 해보자. 태그 요소는 HTML 문서가 어떤 내용을 담고 있고, 문서의 키워드는 무엇이며, 누가 만들었는지 등의 문서의 정보, 요약을 담고 있다. Meta tag 속성 정리 ■ 캐쉬 완료(파기) 시간 정의 ■ 최종 수정일을 정의 ■ 캐쉬가 되지 않게 하는 태그 , ■ 웹문서의 언어 설정 ■ 그림 위에 마우스 오버시 이미지 관련 툴바가 생기지 않음 ■ 페이지 이동 ■ 페이지 로딩시 트랜지션 효과(장면 전환 효과) ■ 문서의 제목 , ■ 문서에 대한 간략 한 설명 ■ 키워드 ■ 문서 작성자 ■ 문서의 발행 주체 ■ 문서의 관리자 ■ 문서의 카테고리 ■ 문서를 작성한 에디터 프로그램 ■ 문서 .. 2020. 9. 29. HTML 공간 분할(layout, iframe, block & inline) Layout 레이아웃은 특정 공간에 여러 구성 요소를 효과적이고 효율적으로 배치하는 작업을 의미하며, 보기 좋게 구조화 하는 매우 중요한 요소이다. 주로 시맨틱 요소들이 사용되며, 시멘틱(Semantic) 요소는 웹페이지를 쉽게 이해할 수 있도록 정의된 의미론적 태그를 말한다. ● header 웹사이트 상단에 위치하며 주로 로고, 검색, 웹사이트의 이름 등을 표현한다. ● nav 네비게이션 바(Navigation Bar)를 의미하며 카테고리, 메뉴 등을 위치 시킨다. - header 안에 nav 가 포함될 수도 있으며 header 밖으로 나와 단독적으로 사용되기도 한다. ● aside 보통 웹사이트 양옆에 위치하며 본문과는 연관성이 떨어진 내용을 추가한다. ● section html 문서의 전체적인 내용.. 2020. 9. 28. 이전 1 2 3 4 다음
