본문 바로가기

HTML5 + CSS3 + Javascript (웹 프로그래밍)/02. HTML5 기본 문서 만들기

(6)
6. 미디어 삽입 미디어의 표준화, , HTML5 이전까지는 오디오나 비디오를 재생하기 위해 브라우저에 적절한 플러그인 소프트웨어를 설치해야 했다. 플러그인이란 브라우저가 처리할 수 없는 비표준 형식의 데이터를 전용으로 다루는 내장형 소프트웨어로 ActiveX가 대표적이다. 아무튼 이는 여러 문제점들을 발생시켰고, 그러한 이유로 비표준 미디어를 포함하는 웹 페이지는 브라우저에 따라 재생되지 않는 문제점이 있었다. 이런 문제를 해결하기 위해, HTML5에서는 플러그인 없이 오디오나 비디오를 재생할 수 있도록 다음 태그를 표준화 하였다. , 물론 플래시 애니메이션과 같이 표준화되지 않은 미디어를 재생하기 위해서는 현재도 여전히 플러그인의 설치가 필요하며, 이런 경우 다음 두 태그를 사용한다. , 11장 5절에서는 자바스크립트..
5. 인라인 프레임 인라인 프레임 만들기, 태그를 이용하면 현재 HTML 페이지 내에 내장 윈도우를 만들고 다른 HTML 페이지를 출력할 수 있다. 태그에 의해 만들어지는 윈도우를 인라인 프래임(inline frame)이라고 부른다. 태그의 속성은 다음과 같다. iframe 태그를 다루지 않는 브라우저에 의해 대신 출력되는 텍스트 다음은 200x150 픽셀 크기의 인라인 프레임을 만들고, iframe.html을 출력하는 코드이다. 이 브라우저는 iframe 태그를 지원하지 않습니다. 으로 로드 되지 않는 사이트가 있다. 아마존, 네이버 등 대부분의 포털 사이트는 태그로는 연결할 수 없도록 하고 있다. 이들 사이트는 Clickjacking이라고 하는 '웹 침입'을 막기 위해 인라인 프레임에 출력되기를 거부한다. 다음은 2개의..
4. 하이퍼링크와 항해 들어가며 웹 사이트는 여러 개의 HTML 페이지를 가지고, 페이지들이 상호 연결하는 방식으로 전체를 구성한다. HTML 페이지에서 다른 HTML 페이지를 연결하는 고리를 하이퍼링크(hyperlink)라고 부른다. 하이퍼링크는 텍스트나 이미지에 다른 웹 페이지의 주소를 달아 만든다. 하이퍼링크는 같은 사이트에 다른 HTML 페이지뿐 아니라, 다른 사이트에 있는 웹 페이지를 연결하기도 한다. 하이퍼링크를 따라 다른 웹 페이지로 이동하는 것을 항해 혹은 내비게이션(navigation)이라 부른다. 하이퍼링크는 흔히 링크라고 줄여 부른다. 하이퍼링크 만들기, 하이퍼링크 태그의 href 속성으로 만들며 다음은 태그의 속성들을 보여준다. 텍스트 혹은 이미지 href 속성 하이퍼링크로 이동할 HTML 페이지의 URL..
3. 고급 문서 만들기 들어가며 지금까지 기초적인 HTML 문서를 만드는 방법을 다루었다. 이번 절에선는 이미지, 리스트, 테이블 등을 만드는 고오급 기능에 대해 알아본다. 이미지 삽입, 태그를 이용하면 HTML 문서에 이미지를 삽입할 수 있다. 다음 코드는 태그의 속성들을 보여주며 src 속성으로 지정할 수 있는 이미지 종류는 다음과 같다. BMP, GIF, PNG, JPG(JPEG), animated-GIF src 속성에 다른 웹 사이트 이미지 주소를 주어 다른 웹 사이트의 이미지를 출력할 수도 있다. 이미지 삽입 페페 사진입니다. 태그의 잘못된 속성 사용은 혼란을 초래 태그 속성을 잘못 사용하면, 혼란을 야기할 수도 있다. 다음과 같이 태그의 src에는 호랑이 사진(tiger.jpg)을, alt에는 '사자 사진'으로 작성..
2. HTML 기본 문서 만들기 타이틀 달기, HTML 페이지의 타이틀은 페이지의 제목으로, 브라우저의 타이틀 바에 출력된다. 타이틀은 태그를 이용하며 페이지에 타이틀을 다는 예제입니다. 타이틀은 브라우저의 타이틀바에 보여집니다. 문단 제목(장, 절, 소제목 등) 달기, , 일반적으로 보고서 등의 문서는 장, 절, 문단 등으로 구조화하고, 알아보기 쉽도록 장이나 절의 제목 크기를 달리한다. HTML은 , , ..., 의 6개의 태그를 제공하여 문단에 제목을 붙일 수 있도록 한다. h는 제목을 뜻하는 heading의 줄임말이며, 이 가장 큰 제목이고, 가 가장 작은 제목이다. 태그에 의해 출력되는 제목의 글자 크기는 브라우저가 결정하며, CSS 스타일 시트를 이용하여 개발자가 변경할 수 있다. 1장 홈페이지 만들기 1절 HTML 언어 1..
1. HTML5 개요 HTML 페이지 기본 HTML*은 웹 문서를 작성하는 태그 언어이다. * Hyper Text Markup Language HTML 태그로 만든 문서를 HTML 문서라고 부르며, 이는 여러 페이지로 구성되는데 각 페이지를 웹 페이지 혹은 HTML 페이지라고 부른다. 웹 브라우저는 한 번에 하나의 HTML 페이지를 화면에 출력한다. HTML5에서 HTML 페이지는 다음과 같이 선언과 주석문, 그리고 헤드 부분과 바디 부분으로 구성된다. 문서의 본문 텍스트, 이미지, 테이블, 자바스크립트 코드, 동영상 등 , 로 둘러싼 부분으로 문서의 제목, 본문을 설명하는 메타 태그들, 자바스크립트 코드와 CSS 스타일 시트 등을 포함하며 문서의 본문은 포함되지 않는다. 바디 부분 문서의 본문으로 로 둘러싼다. 이곳은 자바..