HTML5 교육과정(4일과정)
- kami
- 2016년 4월 25일
- 2분 분량
교육목표
HTML5 시맨틱 태그이용한 정보설계 CSS3 스타일 속성을 활용한 정보설계
HTML5 캔버스를이용한2D그래픽 HTML5 멀티미디어 연결 및 작성 HTML5 css 미디어쿼리작성 HTML5 반응형 웹 화면 설계 및 작성 HTML5 반응형 웹 프로젝트 작성
웹표준검사 : http://validator.kldp.org/
HTML5스터디 : http://www.w3schools.com
HTML5부터 생긴 태그와 예시 소스
<!DOCTYPE html> //html5임을 나타낸다.
<html>
<head>
<base herf="http://www.naver.com">
<meta charset = "utf-8">
<title> insert title here </title>
</head>
<body>
<header> header </header>
<nav>nav </nav>
<section>
<article>article 1</article>
<article>article 2</article>
<article>article 3</article>
</section>
<footer>footer</footer>
</body>
</html>
ATTRIBUTE
대부분의 속성에는 ClassName과 ID를 줄 수 있는데
ClassName은 중복되어도 상관 없지만 ID는 유니크 해야한다.
html5 content model
https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html
HTML5 콘텐츠 모델 종류
- Metadata Content
(base, command, link, meta, noscript, script, style, title)
- Flow Content
(a, abbr, address, area, article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas,
cite, code, command, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer,
form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen,
label, map, mark, math, menu, meter, nav, noscript, object, ol, output, p, pre, progress, q,
ruby, s, samp, script, section, select, small, span, strong, style, sub, sup, svg, table,
textarea, time, u, ul, var, video, wbr, text)
- Sectioning Content
( article, aside, nav, section)
- Heading Content
(h1,h2,h3,.....h6, hgroup)
- Phrasing Content
(a, abbr, area, map, audio, b, bdi, bdo, br, button, canvas, vite, code, command, detalist,
del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter,
noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub,
svg, textarea, time, u, var, video, wbr, text
- Embeded Content
(audio, canvas, embed, iframe, img, math, object, svg, video
- Interactive Content
(a, audio, button, details, embed, iframe, img, input, keygen, label, menu, object, select,
textarea, video)
HTML5 박스 모델의 구조와 속성(CSS)
- Magin border padding 등의 관계를 알아야한다.
html5 테스트 사이트
- http://www.html5test.com
- http://www.html5please.com
- http://www.html5readiness.com
실습(jdk, apache tomcat , eclipse)
C:\Program Files\Apache Software Foundation\Tomcat 8.0\webapps\ROOT
class = "kami" -> CSS 에서는 .kami{ attr}
id="kami" -> CSS 에서는 #kami{attr}
Comments