SlideShare a Scribd company logo
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)
HTML Elements
메타데이터 콘텐츠 (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/

More Related Content

Viewers also liked

What 33 Successful Entrepreneurs Learned From Failure
What 33 Successful Entrepreneurs Learned From FailureWhat 33 Successful Entrepreneurs Learned From Failure
What 33 Successful Entrepreneurs Learned From Failure
ReferralCandy
 
How People Really Hold and Touch (their Phones)
How People Really Hold and Touch (their Phones)How People Really Hold and Touch (their Phones)
How People Really Hold and Touch (their Phones)
Steven Hoober
 
Upworthy: 10 Ways To Win The Internets
Upworthy: 10 Ways To Win The InternetsUpworthy: 10 Ways To Win The Internets
Upworthy: 10 Ways To Win The Internets
Upworthy
 
The Seven Deadly Social Media Sins
The Seven Deadly Social Media SinsThe Seven Deadly Social Media Sins
The Seven Deadly Social Media Sins
XPLAIN
 
How To (Really) Get Into Marketing
How To (Really) Get Into MarketingHow To (Really) Get Into Marketing
How To (Really) Get Into Marketing
Ed Fry
 
The What If Technique presented by Motivate Design
The What If Technique presented by Motivate DesignThe What If Technique presented by Motivate Design
The What If Technique presented by Motivate Design
Motivate Design
 
Design Your Career 2018
Design Your Career 2018Design Your Career 2018
Design Your Career 2018
Slides That Rock
 
10 Powerful Body Language Tips for your next Presentation
10 Powerful Body Language Tips for your next Presentation10 Powerful Body Language Tips for your next Presentation
10 Powerful Body Language Tips for your next Presentation
SOAP Presentations
 
Why Content Marketing Fails
Why Content Marketing FailsWhy Content Marketing Fails
Why Content Marketing FailsRand Fishkin
 
Crap. The Content Marketing Deluge.
Crap. The Content Marketing Deluge.Crap. The Content Marketing Deluge.
Crap. The Content Marketing Deluge.
Velocity Partners
 
What Would Steve Do? 10 Lessons from the World's Most Captivating Presenters
What Would Steve Do? 10 Lessons from the World's Most Captivating PresentersWhat Would Steve Do? 10 Lessons from the World's Most Captivating Presenters
What Would Steve Do? 10 Lessons from the World's Most Captivating Presenters
HubSpot
 
The Search for Meaning in B2B Marketing
The Search for Meaning in B2B MarketingThe Search for Meaning in B2B Marketing
The Search for Meaning in B2B Marketing
Velocity Partners
 
Digital Strategy 101
Digital Strategy 101Digital Strategy 101
Digital Strategy 101
Bud Caddell
 
How Google Works
How Google WorksHow Google Works
How Google Works
Eric Schmidt
 

Viewers also liked (15)

What 33 Successful Entrepreneurs Learned From Failure
What 33 Successful Entrepreneurs Learned From FailureWhat 33 Successful Entrepreneurs Learned From Failure
What 33 Successful Entrepreneurs Learned From Failure
 
How People Really Hold and Touch (their Phones)
How People Really Hold and Touch (their Phones)How People Really Hold and Touch (their Phones)
How People Really Hold and Touch (their Phones)
 
Upworthy: 10 Ways To Win The Internets
Upworthy: 10 Ways To Win The InternetsUpworthy: 10 Ways To Win The Internets
Upworthy: 10 Ways To Win The Internets
 
The Seven Deadly Social Media Sins
The Seven Deadly Social Media SinsThe Seven Deadly Social Media Sins
The Seven Deadly Social Media Sins
 
How To (Really) Get Into Marketing
How To (Really) Get Into MarketingHow To (Really) Get Into Marketing
How To (Really) Get Into Marketing
 
The What If Technique presented by Motivate Design
The What If Technique presented by Motivate DesignThe What If Technique presented by Motivate Design
The What If Technique presented by Motivate Design
 
Design Your Career 2018
Design Your Career 2018Design Your Career 2018
Design Your Career 2018
 
10 Powerful Body Language Tips for your next Presentation
10 Powerful Body Language Tips for your next Presentation10 Powerful Body Language Tips for your next Presentation
10 Powerful Body Language Tips for your next Presentation
 
Why Content Marketing Fails
Why Content Marketing FailsWhy Content Marketing Fails
Why Content Marketing Fails
 
Crap. The Content Marketing Deluge.
Crap. The Content Marketing Deluge.Crap. The Content Marketing Deluge.
Crap. The Content Marketing Deluge.
 
What Would Steve Do? 10 Lessons from the World's Most Captivating Presenters
What Would Steve Do? 10 Lessons from the World's Most Captivating PresentersWhat Would Steve Do? 10 Lessons from the World's Most Captivating Presenters
What Would Steve Do? 10 Lessons from the World's Most Captivating Presenters
 
The Search for Meaning in B2B Marketing
The Search for Meaning in B2B MarketingThe Search for Meaning in B2B Marketing
The Search for Meaning in B2B Marketing
 
Digital Strategy 101
Digital Strategy 101Digital Strategy 101
Digital Strategy 101
 
How Google Works
How Google WorksHow Google Works
How Google Works
 
Slideshare ppt
Slideshare pptSlideshare ppt
Slideshare ppt
 

Similar to 01. basic html5

2 1. html4.01
2 1. html4.012 1. html4.01
2 1. html4.01
JinKyoungHeo
 
Best practice of HTML5 Semantic Markup
Best practice of HTML5 Semantic MarkupBest practice of HTML5 Semantic Markup
Best practice of HTML5 Semantic MarkupToby Yun
 
[방송통신대 컴퓨터과학과] HTML 웹 프로그래밍 과제물 작성
[방송통신대 컴퓨터과학과] HTML 웹 프로그래밍 과제물 작성[방송통신대 컴퓨터과학과] HTML 웹 프로그래밍 과제물 작성
[방송통신대 컴퓨터과학과] HTML 웹 프로그래밍 과제물 작성
Lee Sang-Ho
 
2-2. html5
2-2. html52-2. html5
2-2. html5
JinKyoungHeo
 
Django를 Django답게, Django로 뉴스 사이트 만들기
Django를 Django답게, Django로 뉴스 사이트 만들기Django를 Django답게, Django로 뉴스 사이트 만들기
Django를 Django답게, Django로 뉴스 사이트 만들기
Kyoung Up Jung
 
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?Nts Nuli
 
시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?Toby Yun
 
업무자동화를 위한 파이썬
업무자동화를 위한 파이썬업무자동화를 위한 파이썬
업무자동화를 위한 파이썬
성주 이
 
3.web의역사와browser
3.web의역사와browser3.web의역사와browser
3.web의역사와browsercheonsu park
 
Html5_SYS4U
Html5_SYS4UHtml5_SYS4U
Html5_SYS4Usys4u
 
Html5 시맨틱태그
Html5 시맨틱태그Html5 시맨틱태그
Html5 시맨틱태그은심 강
 
Java script 강의자료_ed13
Java script 강의자료_ed13Java script 강의자료_ed13
Java script 강의자료_ed13
hungrok
 
Web Standards HTML5_CSS3
Web Standards HTML5_CSS3Web Standards HTML5_CSS3
Web Standards HTML5_CSS3
Eulsoo Jung
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
Eulsoo Jung
 
알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations
Chang W. Doh
 
파이썬 플라스크 이해하기
파이썬 플라스크 이해하기 파이썬 플라스크 이해하기
파이썬 플라스크 이해하기
Yong Joon Moon
 
Clearboth Study 14th
Clearboth Study 14thClearboth Study 14th
Clearboth Study 14thJiho Choo
 
웹표준 교육
웹표준 교육웹표준 교육
웹표준 교육
Aria (In Suk) Kim
 
Code_The_Web_150524_HTML_CSS
Code_The_Web_150524_HTML_CSSCode_The_Web_150524_HTML_CSS
Code_The_Web_150524_HTML_CSS
Changwhan Yea
 

Similar to 01. basic html5 (20)

2 1. html4.01
2 1. html4.012 1. html4.01
2 1. html4.01
 
Best practice of HTML5 Semantic Markup
Best practice of HTML5 Semantic MarkupBest practice of HTML5 Semantic Markup
Best practice of HTML5 Semantic Markup
 
[방송통신대 컴퓨터과학과] HTML 웹 프로그래밍 과제물 작성
[방송통신대 컴퓨터과학과] HTML 웹 프로그래밍 과제물 작성[방송통신대 컴퓨터과학과] HTML 웹 프로그래밍 과제물 작성
[방송통신대 컴퓨터과학과] HTML 웹 프로그래밍 과제물 작성
 
2-2. html5
2-2. html52-2. html5
2-2. html5
 
Django를 Django답게, Django로 뉴스 사이트 만들기
Django를 Django답게, Django로 뉴스 사이트 만들기Django를 Django답게, Django로 뉴스 사이트 만들기
Django를 Django답게, Django로 뉴스 사이트 만들기
 
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
 
시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
 
업무자동화를 위한 파이썬
업무자동화를 위한 파이썬업무자동화를 위한 파이썬
업무자동화를 위한 파이썬
 
3.web의역사와browser
3.web의역사와browser3.web의역사와browser
3.web의역사와browser
 
Html5_SYS4U
Html5_SYS4UHtml5_SYS4U
Html5_SYS4U
 
Html5 시맨틱태그
Html5 시맨틱태그Html5 시맨틱태그
Html5 시맨틱태그
 
Java script 강의자료_ed13
Java script 강의자료_ed13Java script 강의자료_ed13
Java script 강의자료_ed13
 
Web Standards HTML5_CSS3
Web Standards HTML5_CSS3Web Standards HTML5_CSS3
Web Standards HTML5_CSS3
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations
 
파이썬 플라스크 이해하기
파이썬 플라스크 이해하기 파이썬 플라스크 이해하기
파이썬 플라스크 이해하기
 
Clearboth Study 14th
Clearboth Study 14thClearboth Study 14th
Clearboth Study 14th
 
웹표준 교육
웹표준 교육웹표준 교육
웹표준 교육
 
Code_The_Web_1
Code_The_Web_1Code_The_Web_1
Code_The_Web_1
 
Code_The_Web_150524_HTML_CSS
Code_The_Web_150524_HTML_CSSCode_The_Web_150524_HTML_CSS
Code_The_Web_150524_HTML_CSS
 

01. basic html5

  • 2. HTML의 구성 요소 요소 (Elements): 시작 태그와 종료 태그로 이루어진 모든 명령어 태그 (Tag): 요소의 일부, 시작 태그(요소를 시작)와 종료 태그(요소를 끝냄)가 있음. 속성 (Attributes): 명령을 구체화 시키는 것으로 요소의 시작태그 안에서 사용됨. 변수 (Arguments): 속성과 관련된 값.
  • 3. HTML의 기본 구조 <html> <head> (해당 페이지 기본 정보) </head> <body> (해당 페이지 본문) </body> </html> Filename.html
  • 4. 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" />
  • 5. Body란? 실제 눈에 보이는 내용이 구성되는 영역 보통은 header, main, footer로 구성 반드시 지킬 필요는 없음 Example) http://www.chairone.co.kr/NEW/ http://www.stevenholl.com/
  • 6. 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)
  • 7. 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)
  • 9. 메타데이터 콘텐츠 (Metadata Content) 메타데이터는 나머지 내용의 표현 및 행동을 설정함 다른 문서와의 관계를 설정하거나, 미분류 정보들을 포함 example) base, command, link, meta, noscript, script, style, title
  • 10. 플로우 콘텐츠 (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
  • 11. 섹션 콘텐츠 (Section Conetnt) 섹션 콘텐츠는 헤딩과 푸터의 유효범위를 지정함 제목과 그 내용을 포함하는 범위를 지정함 Example) article, aside, nav, section
  • 12. 헤딩 콘텐츠 (Heading Content) 헤딩 콘텐츠는 섹션(섹션 콘텐츠나 또는 헤딩 콘텐츠에 의해 암시적으로 마크업 된 영역)의 헤더를 정의 Example) h1, h2, h3, h4, h5, h6, hgroup
  • 13. 프레이징 콘텐츠 (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
  • 14. 임베디드 콘텐츠 (Embedded Content) 임베디드 콘텐츠는 다른 리소스(음악, 영상 등)를 문서에 삽입하는 콘텐츠나, 문서에 삽입 된 다른 형태에서 유래한 콘텐츠 Example) audio, canvas, embed, iframe, img, math, object, svg, video