4. 가장먼저 !doctype을 선언합니다
!doctype html!-- html5 문서형식 선언--
html
doctype은 문서의 형식을 선언해서 브라우저에게 어떤식
head
으로 렌더링을 하면 되는지를 알려주는 역할을 하게 됩니
meta charset=utf-8 /
다. 그렇게 때문에 중요하지 않을 수 없습니다. “나는
titlehello world!/title
html5 형식의 html이야!” 라고 말이죠.
/head
!
하지만 과거와는 다르게 모던브라우저들 (파이어폭스, 사
body
파리, 크롬, 익스플로러10등은 doctype을 선언하지 않았
!
다 하더라도 잘 보여줍니다. 똑똑해 진것입니다.
phello world!/p
!
그렇더라도 좋은 코드를 위해서 꼭 선언해 주어야 합니다.
!
/body
/html
5. doctype은 버전별로 다릅니다
HTML5
!DOCTYPE html
곧 많이 사용하게 될 HTML5의 문서형식 선언으로서 대소문자를 구분하지 않아도 문법오류로 처리하지 않습니다.
HTML4.01
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/
TR/html4/loose.dtd
XHTML이전에 버전으로서 특별한 차이는 없으나 대소문자 구분을 해주지 않아도 되며, 닫기태그를 닫지 않아도 문법오류
로 처리하지 않습니다.
XHTML
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd
현재로서 가장 문안하게 사용할 수 있는 문서형식으로서 반드시 소문자를 이용해서 코드를 작성해야 하며 반드시 닫는 태
그를 사용하여야 합니다. 또한 속성은 반드시 따옴표를 이용해 값을 넣어주어야 합니다.
6. doctype을 기준으로 문법검사를 할 수 있습니다
W3C에서 제공하는 마크업
문법검사기입니다.
!
작업을 한 뒤에 이런 온라인
검사기를 통해서 해당
docttype에 맞게 실수 없이
마크업이 되었는지 확인하게
됩니다
7. video를 XHTML doctype에 사용한다면?
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0
Transitional//EN http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd
html
head
meta charset=utf-8 /
titlehello world!/title
/head
body
!
!
video width=320 height=240 controls
source src=movie.mp4 type=video/mp4
/video
/body
/html
최근에 나온 html5에
추가된 video라도
브라우저에서만 지원 된다면
doctype은 문제가
되지않습니다.
이렇듯 웹표준은 브라우저를 개발하는 개발사에 얼마나 새로운 속성이 적용되는가가 중요하
게 되었습니다. 이렇게 한 것은 표준을 제정하는 W3C보다 사용자에게 그 권한을 돌려주기
위한 것입니다. 지금도 진행중인 HTML이지만 브라우저에서 지원하다보니 적극적으로 활
용 되고 있는 이유가 그것입니다.
8. head안에는 페이지를 보여 주기위한
정보들이 들어 있습니다
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml xml:lang=ko lang=ko
head
meta http-equiv=content-type content=text/html; charset=utf-8 /
인코딩타입을 선언해 줍니다
titlepage info/title
브라우저 상단탭에 페이지 제목을 보여줍니다
meta name=robots content=all /
!
구글등의 검색로봇에게 이페이지를 알릴지를 결정합니다
meta name=keywords content=디자인에이젼시, 웹디자인, CI디자인 /
!
해당페이지에 어떤 컨텐츠가 들어 있는지 알려줍니다
meta name=description content=웹디자인을 진행하는 회사 /
해당페지가 어떤 컨텐츠인지 설명해 줍니다
!
meta name=author content=eusoojung /
이페이지를 누가 만들었는지 알려줍니다
!
link rel=stylesheet type=text/css media=screen href=css/basic.css /
이페이지에 필요한 파일(CSS)을 링크해줍니다
!
script type=text/javascript src=ui.js/script
이 페이지에 필요한 스크립트파일을 처리합니다
!
/head
body
/body
/html
9. heading1 제목
h1~h6
h1NAVER/h1
!
h2오픈캐스트/h2
p열린 방송을 지향합니다./p
...
...
h3금주의 오픈캐스트/h3
p비오는 한주간의 방송입니다./p
!
h3다음주의 오픈캐스트/h3
p새로운 게스트를 모시겠습니다./p
...
...
h1은 html5이전
버전에서는 페이지에
한번만 사용.
웹 접근성을 고려해서
한 페이지에서
h1~h6를
순서대로 사용.
10. h1NAVER/h1
!
h2오픈캐스트/h2
p열린 방송을 지향합니다./p
...
...
h3금주의 오픈캐스트/h3
p비오는 한주간의 방송입니다./p
!
h3다음주의 오픈캐스트/h3
p새로운 게스트를 모시겠습니다./p
...
...
아직 CSS표현을
주지 않았을 때는
브라우저가 기본적인
인지를 위해 태그의미에
맞는 글씨크기나
여백, 간격, 기울임등의
기본표현을
주게 됩니다.
보이지 않는
박스에 담아서
화면영역(viewport)에
렌더링합니다.
13. 그 의미구조를 google(검색로봇)이
알아 차리고 검색 순위에 반영합니다.
h1
h1
웹사이트의 목적에
따라 검색이 잘되어야
하는 제목을 임으로
조정할 수 있습니다.
SEO : 검색 엔진 최적화
(Search Engine
Optimization)
14. paragraph 문장
:문장, 단락
p지난 2005년 엄청난 규모의 허리케인 카트리
나가 미국 남부 지역을 강타했다. 최고 시속 280km
의 강풍과 엄청난 양의 폭우를 동반한 카트리나로 인
해 2000억 달러 이상의 재산 피해가 발생했으며
1000명 이상의 사망자가 발생했다.br/ 한동안
미국 경제가 침제 되고 세계 증시에 까지 영향을 미쳤
을 정도이다. 수만 명의 이재민이 살 곳을 잃고 당장
노숙을 해야 하는 처지에 놓였다. /p
br/
line-break을
이용해서
강제로 줄바꿈을
했습니다.
15. p지난 2005년 엄청난 규모의 허리케인 카트리
나가 미국 남부 지역을 강타했다. 최고 시속 280km
의 강풍과 엄청난 양의 폭우를 동반한 카트리나로 인
해 2000억 달러 이상의 재산 피해가 발생했으며
1000명 이상의 사망자가 발생했다./p
p한동안 미국 경제가 침제 되고 세계 증시에 까
지 영향을 미쳤을 정도이다. 수만 명의 이재민이 살
곳을 잃고 당장 노숙을 해야 하는 처지에 놓였다. /
p
p를 두번사용
하여 의미상으로
두문장으로
나누었습니다.
p로
나누었기
때문에 CSS를
이용하여 간격을
조절할 수
있습니다.
16. list. 목록
ulli, olli, dldddt
순서없는 목록
순서있는 목록
정의하기 위한 목록
h2편의점에 파는 음료들/h2
h2제일 잘 팔리는 음료들/h2
h2음료에 대한 이해/h2
ul
ol
dl
!
li콜라/li
li사이다/li
li오렌지 쥬스/li
/ul
!
li콜라/li
li사이다/li
li오렌지 쥬스/li
/ol
!
dt종류:/dt
dd콜라/dd
dd사이다/dd
dd오렌지 쥬스/dd
dt색소가 없는것:/dt
dd오렌지쥬스/dd
/dl
17. 순서없는 목록
unordered list list item
:순서없는 목록
:목록 아이템
h2편의점에 파는 음료들/h2
ul
li콜라/li
li사이다/li
li오렌지 쥬스/li
/ul
ul
h3편의점에 파는 음료들/h3
lip콜라/p/li
p비타500/p
li사이다/li
li오렌지 쥬스/li
/ul
ul의 자식으로
li만 올 수
있습니다.
목록 표시되는
구분점은 list태그의
기본값입니다
이것을 없앨수 있도록
리셋용 CSS를
적용할 것입니다
20. 순서있는 목록
ordered list list item
:순서있는 목록
:목록 아이템
h2제일 잘팔리는 음료들/h2
ol
li사이다/li
li콜라/li
li오렌지 쥬스/li
/ol
ol
h3음료들/h3
lip사이다/p/li
p사이다는 비쌉니다/p
li콜라/li
li오렌지 쥬스/li
/ol
목록 표시되는
숫자은 list태그의
기본값입니다
이것을 없앨수 있도록
리셋용 CSS를
적용할 것입니다
22. 정의하기 위한 목록
definition list definition term definition description
:정의하는 목록
h2음료에 대한 이해/h2
dl
dt종류:/dt
dd콜라/dd
dd사이다/dd
dd오렌지 쥬스/dd
dt색소가 없는것:/dt
dd오렌지쥬스/dd
/dl
:정의될 용어
:정의하는 설명
dd의 들여쓰기는
기본값입니다
이것을 없앨수 있도록
리셋용 CSS를
적용할 것입니다
23. dl
h3음료에 대한 이해/h3
dt종류:/dt
dt콜라/dd
p콜라는 몸에 해롭습니다/p
dd사이다/dd
dd오렌지 쥬스/dd
dt종류:/dt
dd오렌지쥬스/dd
/dl
dl
dt종류:/dt
ul
li콜라/li
li사이다/li
li오렌지주스/li
/ul
/dl
dl
dd콜라/dd
dd사이다/dd
dd오렌지쥬스/dd
/dl
dl의 자식은 반드시 dtdd만 올수
있으며 같은 내용의 dt는 안됨
dl
dt종류/dt
dd콜라/dd
dd사이다/dd
dd오렌지 쥬스/dd
dt색소가 없는것:/dt
dtNo dye/dt
dd오렌지쥬스/dd
/dl
하나의 용어에 다수의 설명. 다수의 용어
에 하나의 설명이 올 수 있음.
dl
dt종류:/dt
dd
ul
li콜라/li
li사이다/li
li오렌지주스/li
/ul
/dd
dd
p콜라는 몸에 해롭습니다. 그러므로 우리는 조심해
서 마셔야합니다. 사이다도 마찮가지입니다./p
/dd
/dl
25. divisionspan 그룹핑
:나누다(Style을 위해 의미없이)
:범위(Style을 위해 글줄 안에서 의미없이)
div
h3네이버 캐스트/h3
p우리가 일상생활에서 환경을 위해 할
수 있는 가장 손쉽고 간편한 방법은 무엇이
있을까? 아마도 전력을 아껴 쓰는 일일 것
이다. span어쩌면 우리는 멀지 않은 미
래에 어둠 컴컴한 도시 속에서 살아야 할지
도 모른다./span
/p
/div
!
div
h3오픈 캐스트/h3
p스티커의 디자인이 참 독특하다. 전력
이 생산되는 과정을 보여주는 스티커, 전력
소비로 인한 환경 오염을 노골적으로 보여
주는 스티커 등 다양하다. /p
/div
span은
inline box로
표현되는 성질을 가지고
있습니다.
26. block box in-line box
block box
블록처럼 한칸에 꽊차면서
아래로 쌓여지게 랜더링됩니다.
h1~h6pulolli
dldtdddiv...
inline box
글줄(line)안(in)에 들어 있는 박스로
옆으로 흐르도록 랜더링됩니다.
spanstrongemib...
span
p안녕!/p
/span
처럼 인라인 태그 안에는
블록박스 태그를 넣을수
없습니다.
28. division VS section
:나누다(의미없이 style을 위해 그룹핑)
:한부분(의미를 기준으로 그룹핑)
div
h1네이버 캐스트/h1
h2오늘의 뉴스/h2
/div
section
h1네이버 캐스트/h1
h2오늘의 뉴스/h2
/section
div
h1오픈 캐스트/h1
h2열린광장/h2
/div
section
h1오픈 캐스트/h1
h2열린광장/h2
/section
!
한문서 안에서
h1의 의미가 문서
전체에 해당되고
div는 의미가 없으므로
h1을 두번
사용하지 않습니다.
!
html5의
새로운 태그인
section은 연관된 의미
의 컨텐츠를 묶기 때문에
h1은 section에
한번씩 한문서에
여러번 사용될 수
있습니다.
29. quotationblock quotation 인용
:인용 (짧은 인용구)
:인용 (긴 인용구)
h1링컨/h1
p링컨의 명언 중에는 q시비를 가리느라고 개에게 물리느
니보다는 개에게 차라리 길을 양보하는 것이 현명하다.개를 죽여 본들
상처는 치유될 수 없는 법이다./q 라는 말이 있다./p
!
h2대표적인 명언/h2
blockquote cite=”http://text.com”
p나는 어릴 때, 가난 속에서 자랐기 때문에
온갖 고생을 참으며 살았다. 겨울이 되어도 팔굽
이 노출되는 헌 옷을 입었고, 발가락이 나오는 헌
구두를 신었다. 그러나 소년시절의 고생은 용기
와 희망과 근면을 배우는 하늘의 은총이라 생각
하지 않으면 안 된다./p
p영웅과 위인은 모두 가난 속에 태어났다.
성실
신만
이룰
경을
향해
근면하며, 자신의 일에 최선을 다한다는 정
있으면, 가난한 집 아이들은 반드시 큰 꿈을
수 있다. 헛되이 빈고(貧苦)를 슬퍼하고 역
맞아 울기만 하지 말고, 미래의 밝은 빛을
분투 노력하며 성공을 쟁취하지 않으면 안
된다./p
/blockquote
q나
blockquote모두
출처가 있다면 cite속성
을 이용하여 URL을
표기합니다.
30. strongemphasized 강조
: 강한(중요한 내용을 강조)
h3네이버em캐스트/em/h3
: 강조된(주관적인 강조, 중요하지는 않음)
약한강조
!
p우리가 일상생활에서 환경을 위해 할 수 있
는strong가장 손쉽고 간편한 방법은 무엇이
있을까?/strong 아마도 전력을 아껴 쓰는
일일 것이다. 전 지구적으로 에너지 위기는 극대
화되고 있다. 전문가들은 2050년이면 에너지 위
기가 현실화 될 것이라고 한다. 어쩌면 우리는 멀
지 않은 미래에 어둠 컴컴한 도시 속에서 살아야
할지도 모른다./p
강한강조
em이탤릭
strong은 볼드가
기본값입니다.
32. anchor 링크
이동할 주소
:닻
hypertext reference
p해당페이지로 이동합니다.a
href=http://naver.com네이버가기/
a/p
페이지이동
p해당페이지가 새창으로 뜹니다. a
href=http://naver.com
target=_blink네이버가기/a/p
새창에서
페이지열기
!
!
pa href=#email클릭/a하시면
해당 내용으로 이동합니다./p
페이지내
id=”email”로 이동
pa href=http://
endic.naver.com/#main_footer
target=_blink클릭/a하시면
endic.naver.com로 이동하여 해당내용으로
이동합니다./p
페이지이동 후
해당 id=”main_footer”로 이동
p id=email문의 사항은 a
href=mailto:eulsoo.jung@gmail.com
정을수/a에게 문의하세요./p
이메일 보낼 수 있도록
프로그램 띄우기
!
!
35. abbreviation 약어
: 축약형
title속성으로 약어를 설명해 줍니다.
pabbr title=World Wide
WebWWW/abbr는 월드 와이드 웹의 머리글
자이다./p
!
World Wide Web
p1989년 3월 유럽 입자 물리 연구소(CERN)의
소프트웨어 공학자인 팀 버너스 리의 제안으로 시작되어
연구, 개발되었다./p
모든 브라우저가
그런것은 아니지만,
abbr에 커서를
가져가면 title속성의
설명을 보여준다.
36. definition 용어정의
: 정의
p인터넷상의 정보를 dfn하이퍼텍스트
(hypertext)/dfn방식과 멀티미디어 환경에서 검
색할 수 있게 해주는 정보검색 시스템이다./p
title속성으로 용어에 해당하는
정의를 설명할 수 있습니다.
p인터넷상의 정보를 dfn title=다른 문서로 즉
시 접근할 수 있는 텍스트하이퍼텍스트
(hypertext)/dfn방식과 멀티미디어 환경에서 검
색할 수 있게 해주는 정보검색 시스템이다./p
약어를 표시하는abbr를 다시 마크업해서
용어를 정의할 수 있습니다.
pdfnabbr title=World Wide
WebWWW/abbrdfn는 월드 와이드 웹의
머리글자이다./p
모든 브라우저가
그런것은 아니지만,
dfn은 이탤릭
으로 보여줍니다.
37. cited 참조
: 참조된
p그 후 웹표준 전도사 제프리젤드먼과 같은 디자이
너들의 주도록 널리 알려지게 되었다.
제프리젤드먼의 citeDESIGNING WITH WEB
STANDARDS/cite는 전세계적으로 인기를 끌었
다./p
시, 영화, TV프로그램
노래, 대본, 책등의
제목을 참조할 때
사용합니다.
38. strikethrough 유효하지 않은
: (줄을 그어) 지우다
dl
dtDESIGNING WITH WEB STANDARDS/dt
dda href=amazone.com/a/dd
dds20,000원/s/dd
dd15,000원/dd
/dl
지금은
유효하지 않지만
삭제해서는
안되는 내용을 표시