Programming/HTML5
-
스타일시트 선언에서스타일시트 선언에서 media="screen" 와 media="print"의 차이점Programming/HTML5 2015. 4. 17. 18:51
media="screen" 와 media="print"의 차이점 보통 스타일시트 선언할때 보면 위 처럼 사용하는데 여기에서 media="all" 이라는 속성이 생략이 되어 있다. 즉, 아래와 같다. media 속성에 보면 screen, print, all 등이 있다.media="screen" 은 화면(컴퓨터 모니터)에 스타일시트를 출력해줄려고 할때 사용하고media="print" 은 인쇄출판에 스타일시트를 출력해줄려고 할때 사용한다.media="all" 은 화면과 인쇄출판을 동시에 사용합니다.이렇게 화면용 CSS와 출판용 CSS를 따로 만들어 줄 수 있어서 화면에는 모든 요소를 다 보여주지만, 해당 웹 페이지를 출력할 때는 원하는 부분만 출력할 수도 있게 하는 기능이다. 출처: http://sir.co...
-
HTML5 멀티미디어 태그와 입력 양식 태그Programming/HTML5 2015. 1. 13. 00:11
요약 멀티미디어 태그음악 재생 관련 태그: audio 태그, source 태그동영상 재생 관련 태그: video 태그, source 태그입력 양식 개요서버와 클라이언트서버(제공자): 웹 페이지를 제공하는 대상클라이언트(고객): 웹 페이지를 받는 대상입력 양식: 클라이언트가 서버로 데이터를 보내는 가장 기본적인 방법form 태그의 action 속성: 데이터 전달 위치 지정form 태그의 method 속성: 데이터 전달 방법 지정GET방식: URL에 데이터를 넣어 전달하는 방식으로 즐겨찾기를 추가할 수 있는 장점이 있음POST방식: 데이터를 별도로 전달하는 방식으로 보안에 좋음입력 양식 태그입력 양식 생성 주요 태그: input, textarea, select 태그입력 양식 생성 보조 태그: label, f..
-
HTML5 기본 태그Programming/HTML5 2015. 1. 12. 23:35
요약 HTML5 주요 기본 태그 정리 글자 태그 ~ 제목 글자 생성 , , 본문 생성 하이퍼링크 생성 목록 태그 글머리 기호 목록 생성 순서 번호 목록 생성 각 목록 태그 내부에서 태그를 사용하여 목록 요소를 표현 테이블 태그 , , , , , , 표 생성 이미지 태그 이미지 삽입 공간 분할 태그레이아웃을 구성할 때 사용HTML5는 시맨틱 웹을 구현하고자 시맨틱 태그를 추가함시맨틱 웹: 컴퓨터 프로그램이 읽고 의미를 인식할 수 있는 지능형 웹웹 페이지에서 시각적으로 보이는 요소는 모두 블록 형식, 인라인 형식, 인라인-블록 형식 중 하나임의미 없는 글자와 이미지 생성의미 없는 글자 생성의미 없는 이미지 생성: http://placehold.it http://placekitten.com 연습문제 다음 중 ..
-
HTML5 기본 구조와 작성법Programming/HTML5 2015. 1. 11. 21:12
요약 HTML 태그HTML5는 요소(Element)로 구성되며 요소는 태그와 속성, 내부 문자로 구성됨주석: 프로그래밍 언어에서 프로그램의 실행에 영향을 미치지 않고 설명을 위한 목적으로 사용하는 코드HTML 기본 페이지HTML5의 기본 페이지 구조 제목 head 태그 내부에 사용 가능한 태그: meta, title, script, link, style, base 태그HTML 페이지의 기본 확장자: .htm 또는 .html스타일시트정의: 마크업 언어가 표시되는 방법을 기술하는 언어로 HTML 웹 페이지의 스타일을 지정할 때에 사용종류내부 스타일시트: style 태그를 사용해 HTML 페이지 내부에 스타일시트를 직접 입력하는 방법외부 스타일시트:스타일시트 파일을 따로 생성한 후 link 태그의 href 속..
-
HTML 웹 개요와 실습 환경 구축Programming/HTML5 2015. 1. 11. 20:31
요약 웹의 역사1991년에 팀 버너스 리가 개발한 것으로 요청과 응답을 기반으로 동작함모자이크: 최초의 그래픽 유저 인터페이스 웹 브라우저플러그인: 플래시와 실버라이트처럼 웹 브라우저와 연동되는 특정 프로그램을 PC에 추가로 설치해 웹 브라우저의 기능을 확장하는 방법시맨틱 웹: 검색 엔진 같은 프로그램이 정보의 의미를 분석하고 자료를 검색 및 처리하여 제공하는 지능형 웹대표적인 웹 브라우저: 인터넷 익스플로러, 크롬, 파이어폭스, 사파리, 오페라HTML5 소개모든 운영체제에서 동작하는 응용 프로그램 개발 가능ECMAScript: ECMA에서 제정한 현재 자바스크립트 표준HTML5에 추가된 주요 기능멀티미디어 기능그래픽 기능쌍방향 통신디바이스 접근오프라인 및 저장소시맨틱CSS3 스타일시트웹의 성능 극대화 ..