메뉴 건너뛰기

검색창 닫기

HEUKMYO

web publishing

140808_html5 구조

2014.09.13 22:19 read.183

html 구조를 나태내는 요소


<!DOCTYPE HTML>

<html lang="ko"> <!-- 언어선언 -->

<head>

<meta charset="utf-8"> <!-- 종료태그 없어도 됨 -->

<title></title>

</head>

<body>

<header>  <!-- 헤더영역이며 로고, 네비게이션, 유팅메뉴 등을 포함합니다. -->

<nav></nav> <!-- 중요한 네비일 경우 -->

</header>

<article>  <!-- 독립적인 글 (블로그 글/뉴스본문이 해당된다) - 배포를 목적으로 한들 h1이 다시 올 수 있다.

article 안에 section 들어갈 수 있음 -->

<hgroup>  <!-- 섹션의 제목을 나타낸다. 2014년에 삭제됨 -->

<h1>사과</h1>

<h2>맛있는 과일</h2>

</hgroup>

<p>사과는 나무에 꽃에서 열리는 인과류이다</p>

<section>  <!-- 책에서 목록에 장(1장,2장) 또는 절의 탭과 같다.

section안에 section들어갈 수 있다. -->

<h1>홍옥/부사</h1>

<figure>  <!-- 이미지 또는 멀티미디어에 제목(자막)이 있는 경우 사용합니다 -->

<img src="a.jpg" alt="" />

<figcaption>

제목(자막)

</figcaption>

</figure>

<p>빨가며 윤기가 있는 사과는 슈퍼에서 가장 많이 찾는다</p>

</section>

<section>

<h1>아오리</h1>

<p>파란 사과는 맛이 달지 않아 사과 파이를 만들때 많이 사용된다.</p>

</section>

</article>

<aside>그빡에 사과에는...</aside>  <!-- 관련이 적은 콘텐츠 -->

<footer></footer>  <!-- 푸터영역이며 하단로고, 하단메뉴등을 포함한다. -->

</body>


Input 요소에 새로 추가된 속성


새로운 입력요소 type 속성

  • tel: 전화번호
  • search: 검색
  • url: 웹 주소
  • email: 이메일
  • datetime: 날짜 및 시간
  • date: 날짜
  • moth: 달
  • week: 주
  • time: 시간
  • datetime-local: 로컬 시간
  • number: 숫자
  • range: 범위
  • color: 색상


※ checked="checked"는 checked 속성만 있어도 됨

    selected="selected"는 selected 속성만 있어도 됨


멀티미디어 요소


비디오 태그

source:

http://media.w3.org/2010/05/sintel/trailer.mp4

http://media.w3.org/2010/05/sintel/trailer.ogv


<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
</head>
<body>
	<video controls>
			<source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" />
			<source src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg" />
			<embed src="http://media.w3.org/2010/05/sintel/trailer.mp4">
		</video>
	</body>
</html>

<video width="480" height="320" autoplay preload="auto,none" controls poster="이미지경로">

<source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" />

<source src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg" />

<object data="http://media.w3.org/2010/05/sintel/trailer.mp4" width="480" height="320">

<embed width="480" height="320" src="movie.swf">

</object>

</video>


  • autoplay : 자동샐행
  • preload : play를 하지 않아도 로딩을 함
     auto: 자동
     none : 불러오지 않음
  • controls : 제어버튼(필요없으면 controls를 삭제)
  • embed : 미디어 플레이어로 재생
  • src="movie.swf" : 플래시파일에서 실행
  • type : video/ogg, video/mp4, video/webm


각 브라우저마다 코딩이 다르므로 mp4, ogg, webm등의 확장자가 다른 동영상을 사용한다.

webm은 최근 확장자로 지원이 ogv와 비슷하다. ebook에서 많이 사용된다.


브라우저별 mp4 지원여부

 IE(9이상)

FF

CH 

SF

OP 

 ○

×

○ 

○ 

× 


브라우저별 ogv 지원여부

 IE(9이상)

FF

CH 

SF

OP

×

 ○

○ 

×

○



오디오 태크

<audio controls>

    <source src-"horse.mp3" type="audio/mpeg">

    <source src-"horse.mgg" type="audio/ogg">

    <embed height="50" width="100" src="horse.mp3">

</audio>


브라우저별 mp4 지원여부

 IE(9이상)

FF

CH 

SF

OP

 ○

 ○

○ 

 ○

×


브라우저별 ogg 지원여부

 IE(9이상)

FF

CH 

SF

OP

×

 ○

○ 

×

 ○



viewport

속성

설명

 width=device-width

 플랫폼 가로 크키에 맞춤, 수치를 넣으면 그 수치에 맞게 맞춰짐

 initial-scale=1.0

 페이지 loading시 확대 비율, 초기확대비율 1:1비율 1.5=>1.5배 확대

 maximum-scale=1.0

 최대 확대비율, 확대비율

 minimum-scale=1.0

 최소 축소비율 1:1비율축소되지않음

 user-scalable=no

 사용자의 화대보기 허용 여부(no/yes)


ex)

가변성 그리드 시스템

<meta name="viewport" content="width=divice-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">


  • 전화걸기: <a href="tel:1588-1212">블루웹 고객센터</a>
  • 문자보내기: <a href="sms:000-000-000">문자보내기</a>
  • 메일보내기: <a href="mailto:123@123.com">메일보내기</a>
추가메뉴 목록
위로