= HTML5 개요 = * ìžë°”스í¬ë¦½íŠ¸ + CSS + HTMLì˜ í†µí•©ê°œë… * ê¸°ì¡´ì˜ HTML : 문서를 위한 플랫í¼, HTML5 : 웹 어플리케ì´ì…˜ì„ 위한 í”Œëž«í¼ == HTML5 범위 == * HTML + XHTML + 요소 + 요건 + ê´€ë ¨ API * HTML+CSS+JavaScript == 달ë¼ì§„ì == * í’부한 웹 어플리케ì´ì…˜ 기능 : 웹 어플리케ì´ì…˜ì˜ í‘œí˜„ë ¥ ì¦ê°€ * ë™ì˜ìƒ/ìŒì„± * 2D 그래픽 처리 * 오프ë¼ì¸ì—ì„œ 구ë™ê°€ëŠ¥ * ë„ë©”ì¸ê°„ì˜ í†µì‹ ê¸°ëŠ¥ * í´ë¼ì´ì–¸íŠ¸ì¶• ë°ì´í„° ì €ìž¥ * 백그ë¼ìš´ë“œ 처리 수행 * ì„œë²„ë¡œë¶€í„°ì˜ ë°ì´í„° 푸시 * ì„œë²„ì™€ì˜ ìŒë°©í–¥ í†µì‹ ìˆ˜í–‰ * ë¡œì»¬íŒŒì¼ ì½ê¸° * etc. MathML, SVG등 외부 마í¬ì—…언어 HTMLì— ì§ì ‘ 삽입가능 (ì±… 범위 ë°–) * 기존 HTML4.- : HTMLê³¼ XHTMLì€ ë³„ê°œì˜ ì‚¬ì–‘ * HTML5 : HTMLê³¼ XHTMLì€ í‘œí˜„ë˜ëŠ” ë¬¸ë²•ì˜ ì°¨ì´, HTML5는 DOMì— ë”°ë¼ í‘œì‹œë¨ * 시맨틱한 마í¬ì—… * 기존 HTMLë¬¸ì˜ ì• ë§¤ëª¨í˜¸í•œ 문법 ê°œì„ * <head> <footer> <section> 추가 * í”„ë¡œê·¸ëž¨ì´ ë¬¸ì„œì˜ êµ¬ì¡°ë¥¼ 파악하기 쉬워ì§(HTML 파싱 수월), ê°€ë…성 ì¦ê°€ * selection : 범용ì ì¸ ì…€ë ‰ì…˜ * aticle : ì„¹ì…˜ì˜ í•œì¢…ë¥˜, 페ì´ì§€ì—ì„œ ë…립ë˜ì–´ìžˆëŠ” 부분 (ex. ë¸”ë¡œê·¸ì›¹ì˜ ë¸”ë¡œê·¸ 본문) * nav : 사ì´íŠ¸ ì „ì²´ or 내비게ì´ì…˜ 메뉴 * aside : 섹션 ë‚´ìš©ê³¼ ê´€ë ¨ë˜ì–´ìžˆì§€ë§Œ ì—†ì–´ë„ ìƒê´€ì—†ëŠ” 부분(ex. 문서 ë‚´ìš© 요약) * header : 섹션 í—¤ë” * footer : ì„¹ì…˜ì˜ í‘¸í„° * address : ì„¹ì…˜ì— ê´€í•œ 문ì˜ì²˜ ì •ë³´(ex. 회사 ì „í™”ë²ˆí˜¸ë“±) * time : ë‚ ì§œ, ì‹œìž‘ì„ ë‚˜íƒ€ëƒ„ * 마ì´í¬ë¡œ ë°ì´í„° : ë¬¸ì„œì— ì‚½ìž…ëœ ë°ì´í„°ì˜ ì†ì„± ë°ì´í„°(ë°ì´í„°ì˜ ë°ì´í„°, ë°ì´í„°ì˜ ì˜ë¯¸ê°€ 명확해ì§) = ë” ë†’ì€ ì ‘ê·¼ì„± = * 휴먼 ì¸í„°íŽ˜ì´ìŠ¤ì— ê°€ê¹Œì›Œì§ˆìˆ˜ìžˆìŒ = ë” ë†’ì€ í˜¸í™˜ì„± = * ë²„ì „ê°„ 호환성 * ì „ë°©í˜¸í™˜ì„± - HTML5ì„ ì 용하기 ì´ì „ì˜ ë¸Œë¼ìš°ì €ì—ì„œë„ HTML5사용가능(웹브ë¼ìš°ì €ì˜ fall back ì ìš©) * fall back : 모르는 ë¶€ë¶„ì€ ë¬´ì‹œí•˜ëŠ” 웹 브ë¼ìš°ì €ì˜ 특성 * 후방호환성 - HTML5ì„ ì ìš©í•œ 브ë¼ìš°ì €ì—ì„œ HTML5 ì´ì „ ë²„ì „ 문서 표시가능 * 브ë¼ìš°ì €ê°„ 호환성 : 표준만 따른다면 ì–´ë–¤ 브ë¼ìš°ì €ì—ì„œë„ ë˜‘ê°™ì´ ìž‘ë™í•œë‹¤ ì´ë¯¸ 사용ë˜ê³ 있는 ë‚´ìš©ì—ì„œ ì‚¬ì–‘ì„ ì¶”ì¶œí•œë‹¤ = ì—사 = : HTML -> XHTML , XHTML실패, ë°œì „ì„ ë©ˆì¶˜ HTMLì´ ì˜¤ížˆë ¤ ì›¹ì˜ ë°œì „ì„ ë§‰ìŒ. 그래서 ê° íšŒì‚¬ë“¤ì´ ëª¨ì—¬ 새로운 HTMLì„ ë§Œë“¤ê¸°ë¡œ....