01. basic html5

Study Wordpress
Joo Dongwoo
- basic html5 -

HTML의 구성 요소
요소 (Elements): 시작 태그와 종료 태그로 이루어진 모든 명령어
태그 (Tag): 요소의 일부, 시작 태그(요소를 시작)와 종료 태그(요소를 끝냄)가 있음.
속성 (Attributes): 명령을 구체화 시키는 것으로 요소의 시작태그 안에서 사용됨.
변수 (Arguments): 속성과 관련된 값.

HTML의 기본 구조
<html>
<head>
(해당 페이지 기본 정보)
</head>
<body>
(해당 페이지 본문)
</body>
</html>
Filename.html

head란?
다른 문서를 연결
Css, js, php, etc
Example)
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"
rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
문서의 메타데이터를 기록
우리 눈에는 보이지 않지만 브라우저와 검색엔진은 읽을 수 있음
Example)
<meta charset="UTF-8">
<meta property="og:image" content="http://news.karts.ac.kr/wp/wp-
content/themes/KNUANEWS/image/logo_thumbnail2.png" />

Body란?
실제 눈에 보이는 내용이 구성되는 영역
보통은 header, main, footer로 구성
반드시 지킬 필요는 없음
Example)
http://www.chairone.co.kr/NEW/
http://www.stevenholl.com/

HTML 기초 문법 (1)
모든 요소는 완벽하게 중첩되어야 한다
<p>This is a <strong>bad</p>example</strong> (X)
<p>This is a <strong>good</strong>example</p> (O)
모든 속성값은 속성이 함께 선언되어야 한다.
<option value="wrong" selected>bad example</option> (X)
<option value="right" selected="selected">good example</option> (O)
모든 요소와 속성은 소문자여야 한다.
<DIV ID="idbox">bad example.</DIV> (X)
<div id="idbox">good example.</div> (O)
모든 속성 값은 인용 부호("")안에 표기한다.
<table border=1 cellpadding=0 cellspacing=0>..bad example..</table> (X)
<table border="1" cellpadding="0" cellspacing="0">..good example..</table> (O)

HTML 기초 문법 (2)
모든 요소는 닫아야 한다.
<img src="good_sample.gif" alt="좋은 예제 이미지" />
<input type="text" /> <hr /> <br />
text나 URL, script에 포함된 특수 문자는 escape 시킨다.
<, ", &, > 은 & l t ; , & q u o t ; , & a m p ;, & g t ; 로 escape
<a href="http://tab.search.daum.net/dsa/search?
nil_profile=g&nil_searchtitle=1&w=knowledge&q=">bad example</a> (X)
<a href="http://tab.search.daum.net/dsa/search?nil_profile=g & a m p ; nil_searchtitle=1 &
a m p ; w=knowledge & a m p ; q=">good example</a> (O)

메타데이터 콘텐츠 (Metadata Content)
메타데이터는 나머지 내용의 표현 및 행동을 설정함
다른 문서와의 관계를 설정하거나, 미분류 정보들을 포함
example)
base, command, link, meta, noscript, script, style, title

플로우 콘텐츠 (flow content)
문서및 어플리케이션의 Body에서 사용되는 대부분의 요소는 플로우 콘텐츠로 분류
example)
a, abbr, address, area (map 요소의 자식 요소인 경우), 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
(scoped 속성이 있으면), sub, sup, svg, table, textarea, time, ul, var, video, wbr, text

섹션 콘텐츠 (Section Conetnt)
섹션 콘텐츠는 헤딩과 푸터의 유효범위를 지정함
제목과 그 내용을 포함하는 범위를 지정함
Example)
article, aside, nav, section

헤딩 콘텐츠 (Heading Content)
헤딩 콘텐츠는 섹션(섹션 콘텐츠나 또는 헤딩 콘텐츠에 의해 암시적으로 마크업 된 영역)의
헤더를 정의
Example)
h1, h2, h3, h4, h5, h6, hgroup

프레이징 콘텐츠 (Phrasing Content)
프레이징 콘텐츠는 문서의 텍스트이며, 그 텍스트를 단락 내부레벨에서 마크업을 하는 요
소임
프레이징 콘텐츠가 모여 문단을 구성
Example)
a (프레이징 콘텐츠만을 포함하는 경우), abbr, area (map 요소의 자식요소인 경우), audio, b,
bdi, bdo, br, button, canvas, cite, code, command, datalist, 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, sup, svg,
textarea, time, var, video, wbr, text

임베디드 콘텐츠 (Embedded Content)
임베디드 콘텐츠는 다른 리소스(음악, 영상 등)를 문서에 삽입하는 콘텐츠나, 문서에 삽입
된 다른 형태에서 유래한 콘텐츠
Example)
audio, canvas, embed, iframe, img, math, object, svg, video

실습의 시간
http://c9.io/

01. basic html5

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (15)

Similar to 01. basic html5

Similar to 01. basic html5 (20)

01. basic html5