개요
교육목표
HTML5 시맨틱 태그이용한 정보설계
CSS3 스타일 속성을 활용한 정보설계
CSS3 스타일 속성을 활용한 정보설계
HTML5 캔버스를이용한2D그래픽
HTML5 멀티미디어 연결 및 작성
HTML5 css 미디어쿼리작성
HTML5 반응형 웹 화면 설계 및 작성
HTML5 반응형 웹 프로젝트 작성
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 콘텐츠 모델 종류
<!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}
참조
내용 :
웹표준검사 : http://validator.kldp.org/
HTML5스터디 : http://www.w3schools.com
댓글 없음:
댓글 쓰기