WebStandards-Basic 2.Semantic markup
11 likes13,109 views
http://eulsoo.com
WebStandards-Basic 2.Semantic markup
- 2. eulsoo.com
- 3. eulsoo.jung@gmail.com 이 저작물은 크리에이티브 커먼즈 저작자표시-변경금지 4.0 국제 라이선스에 따라 이용할 수 있습니다.
- 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)에 렌더링합니다.
- 11. heading은 의미구조를 갖게 합니다. h1NAVER/h1 ! h2오픈캐스트/h2 p열린 방송을 지향합니다./p ... ... h3금주의 오픈캐스트/h3 p비오는 한주간의 방송입니다./p ! h3다음주의 오픈캐스트/h3 p새로운 게스트를 모시겠습니다./p ... ... •NAVER ! ! ! •오픈캐스트 •금주의 오픈캐스트 •다음주의 오픈캐스트
- 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를 적용할 것입니다
- 18. ulli ulli
- 19. ulli
- 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를 적용할 것입니다
- 21. olli
- 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
- 24. dldtdd
- 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 처럼 인라인 태그 안에는 블록박스 태그를 넣을수 없습니다.
- 27. div박스들
- 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 이메일 보낼 수 있도록 프로그램 띄우기 ! !
- 33. a
- 34. image 이미지 파일주소 sorce 대체텍스트 alternate text 넓이 높이 img src=images/html5logo.png alt=html5로고 width=400px height=300px /
- 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 지금은 유효하지 않지만 삭제해서는 안되는 내용을 표시
- 39. deleteinsert 삭제/삽입 :삭제하다 :삽입하다 p또한 그의 디자인은 delhappydesign.png/del inshappycog.jpg/ins 에서 볼 수 있다./p
- 40. address 연락처 :주소 address p주소 : 경기도 남양주시 진접읍 원일플로라아파트/p p이메일 : a href=mailto:eulsoo.jung@gmail.comeulsoo.jung@gmail.com/a/p /address
- 41. 화면상에 보이는 기호를 사용할때는 특수기호문자를 사용하여 html코드와 구분하여 사용합니다. 기호들 h1HTML ESCAPE CODES/h1 plt;div class=quot;eulsooquot;gt;/p ! ul liCopyright : copy; #169;/li liRegistered trademark :reg; #174;/li liTrademark : trade; #8482;/li liLess than : lt; #60;/li liGreater than : gt; #62;/li liAmpersand : amp; #38;/li liQuotation mark : quot; #34;/li liLeft single quotation mark : lsquo; #8216;/li liRight single quotation rsquo; #8217;/li liAsterisk operator : lowast; #8727;/li liDivision sign : divide; #247;/li liMultiplication sign : times; #215;/li /ul
- 42. eulsoo.com
- 43. eulsoo.jung@gmail.com 이 저작물은 크리에이티브 커먼즈 저작자표시-변경금지 4.0 국제 라이선스에 따라 이용할 수 있습니다.