세르게이의 HTML5&CSS3-내지_ indd

Size: px

Start display at page:

Download "세르게이의 HTML5&CSS3-내지_ indd"

상종 황
5 years ago
Views:

1 HTML CSS CHAPTER_2 HTML 문법

2 HTML 문서 HTML 문서기초요소와태그태그중첩빈요소특성불리언특성 XHTML5 여러버전을지원하는 HTML 문서 XHTML5 정의 문서타입과구조 MIME 타입일반적인 MIME 타입문서객체모델의미적요소 문법요약일반문법규칙 (X)HTML5 빈태그문법선택적태그를사용하는 HTML5 요소요소의타입브라우저호환성을위한스크립팅 Modernizr HTML5를활성화하는스크립트 - Polyfills

3 HTML 문서 HTML 문서기초 일반적으로 HTML 문서는독립적인 HTML 파일로표현된다. HTML 문서는요소와텍스트가혼합된코드로구성된다. 요소는기본적인 HTML 빌딩블록 Buiding Block 이며, HTML 태그에의해표현된다. 요소는계층적이며, 중첩된구조로이루어진다. 요소와태그 <!DOCTYPE html> <html> <head> <title>html5 레퍼런스 </title>  </head> <body> <h1> 둘러보기 </h1> <p>html은 HyperText Markup Language의줄임말이다.</p> </body> </html> 각요소는 <title> 처럼여는태그와 </title> 처럼그에대응하는닫는태그로구성된다. 몇몇태그는닫는태그가필요치않다. 요소는 HTML 태그의개념적인표현으로특성과자식태그를포함하고있다는점에서태그와다르다. 요소에대한자세한내용은제3장과제4장을참고하기바란다. 22 세르게이의 HTML5 & CSS3 퀵레퍼런스

4 태그중첩 이것은 <b><em> 잘못된 </b></em> 중첩입니다. 이것은 <b><em> 올바른 </em></b> 중첩입니다. 태그는불균등기호로사용되는작다기호 ( < ) 와크다기호 ( > ) 로구성된다. 중첩된태그쌍은반드시일치해야하며, 도중에다른태그쌍이나타나서는안된다. 빈요소  <img src=logo.gif><br /> <input type=text> 빈요소는여는태그만존재하기때문에다른콘텐츠를가질수없다. 종료를의미하는슬래시는요소태그의마지막에태그를닫는크다 ( >) 기호바로앞에선택적으로사용할수있다. 빈요소가아닌요소에대해슬래시를사용하면안된다. 특성 <input type=text autofocus name='first name'> 오른쪽예제에서 input 요소는 type, autofocus, name 등다양한특성을가질수있다. 특성은요소의속성이다. 특성은여는태그내부에위치한다. 태그이름과특성은모두공백으로분리한다. 특성은이름 ( type ) 과값 ( text ) 으로구성되며, 같다 ( = ) 기호로분리된다. 태그내에특성이중복되어서는안된다. HTML5 특성값은공백, 따옴표혹은불균등기호가없는경우따옴표를사용하지않아도무방하다. 그렇지않다면 'first name' 처럼작은따옴표나큰따옴표로특성값을둘러싸야한다. CHAPTER 2 _ HTML 문법 23

5 불리언특성 불리언특성이란 false 혹은 true 값을갖는속성을의미한다.  <input> 불리언특성을명시하지않으면해당속성값이 false 임을의미한다.  <input disabled=disabled> <input disabled="disabled"> <input disabled=""> <input disabled> 불리언특성이존재한다는것은해당속성의값이 true 임을의미한다. 불리언특성은다음과같이특성의이름을값으로가질수있다. <input disabled=disabled> 여러버전과호환되는 HTML/XHTML 문서에서 true 값을가지는불리언특성은다음과같이특성이름과동일한값을따옴표로표현한다. <input disabled="disabled"> 한가지버전에만호환되는 HTML 문서에서특성값은다음과같이생략가능하다. <input disabled> XHTML5 여러버전을지원하는 HTML 문서 여러버전을지원하는 HTML 문서에서는 HTML 및 XHTML 이모두유효하다. <input disabled><input disabled=disabled> <input disabled="disabled" /> <input disabled="disabled" /> 24 세르게이의 HTML5 & CSS3 퀵레퍼런스

6 여러버전 HTML 문서는 HTML과 XHTML 문법의교집합에해당하는 HTML과 XHTML 문법규칙을따른다. 여러버전문서는브라우저의지원과 MIME 타입에따라 HTML과 XHTML 형식중어떤것으로도사용이가능하다. HTML과여러버전문법중어떤것을선택할것인지는프로젝트의목적과브라우저의지원및기타여러가지사실을토대로선택해야한다. XHTML5 정의 여러버전을지원하는 HTML5 코드는기본적으로 [application/xhtml+xml] 이라는 XML MIME 타입을통해제공될경우 XHTML5 문서가된다. HTML5 여러버전문서를간단히요약해보면다음과같다. HTML5 DOCTYPE/ 네임스페이스. HTML5는더는 SGML 형식을토대로하지않으므로더이상문서타입정의 DTD: Document Type Definition 을참조할필요가없다. 그러나하위호환성을위해 DOCTYPE 선언이필요하다. XHTML 기반의잘정의된문법을사용해야한다. 여러버전을지원하는문서는 HTML 혹은 XHTML로제공할수있으며, 이는브라우저의지원과 MIME 타입에따라달라진다. 여러버전을지원하는 HTML5 코드는기본적으로 application/ xhtml+xml MIME 타입을사용할경우 XHTML5 문서로취급된다. XHTML5 문서에대해간략히살펴보면다음과같다. 기본적으로 UTF-8 인코딩을사용한다면 XML 선언 <?xml version="1.0" encoding= "UTF-8"?> 이필요치않다. HTML DOCTYPE: <!DOCTYPE html> 선언은선택적이지만여러버전을지원하는문서가 HTML 혹은 XHTML 형식을모두지원할필요가있다면사용해야한다. XHTML 기반의잘정의된문법을사용해야한다. XML MIME 타입 : application/xhtml+xml을사용한다. 이 MIME 타입은소스코드에서는보이지않지만웹서버의설정에따라 HTTP Content-Type 헤더에이 MIME 타입이나타날수있다. IE는 XHTML 문서를렌더링할수있기는하지만이 XML MIME 타입은현재버전의 IE에서는아직지원되지않는다. 기본 XHTML 네임스페이스 : <html xmlns=" SVG, MathML, Xlink 등을위한 2차네임스페이스 : 필자에게있어이는마치테스트같은것이다. 2차네임스페이스가필요하지않다면 XHTML을사용하는것은과분한것이다. 그러나기본적으로 HTML5와 XHTML5의선택은단순히미디어타입을선택하는문제가아니다. CHAPTER 2 _ HTML 문법 25

7 마지막으로기본적인 XHTML5 문서는다음과같다. <!DOCTYPE html> <html xmlns=" <head> <title></title> <meta charset="utf-8" /> </head> <body> <svg xmlns=" <rect stroke="black" fill="blue" x="45px" v="45px" width="200px" height="100px" stroke-width="2" /> </svg> </body> </html> XML 선언 <?xml version="1.0" encoding="utf-8"?> 은기본인코딩으로 UTF-8을사용한다면필요치않다. XHTML5 검증기는이선언이생략되어있어도문제삼지않는다. 그러나서버에서 HTTP Content-Type 헤더를사용하여인코딩방식을설정하거나문서내에메타태그를통해 <meta charset="utf-8" /> 과같이추가할것을강력하게권장한다. 이인코딩선언은문서가여러버전을지원하는경우문서자체가 HTML인지 XHTML인지에관계없이 UTF-8 인코딩을사용하도록하기위해필요하다. 파이어폭스플러그인및데스크톱애플리케이션형태로제공하는 Total Validator 도구는 XHTML5 명세의유효성검사에대해사용자가직접선택할수있는옵션들을제공한다. XHTML5를사용할때의주요이점은 HTML5의특징을 SVG와 MathML과같은 XML을기반으로한기술로확장할수있다는점이다. 비록 HTML5 명세에따라 SVG와 MathML을인라인형태로사용할수는있지만현재브라우저의지원은제한적이다. 단점은 IE가아직지원하지않는다는점과코드가뒤섞여알아보기어렵다는점, 오류처리가되지않는다는점등이다. 이런확장기능이필요치않다면 HTML5를사용하는것이좋다. 26 세르게이의 HTML5 & CSS3 퀵레퍼런스

8 HTML5와 XHTML5 사이의선택은결국여러분이사용하는문서가어떤문서인지를결정하는 MIME 타입이나콘텐츠의타입을선택하는것이다. XHTML1과 HTML4 사이에서의선택의문제와달리, XHTML5와 HTML5 사이의선택은 DOCTYPE이아니라 MEMIE 타입을통해서만가능하다. 문서타입과구조 MIME 타입 MIME 은 Multiple Internal Mail Extensions 의약자이다. MIME 타입은인터넷미디어타입 Internet Media Type 혹은콘텐츠타입 Content Type 이라고도한다. 이는정보의타입을식별하기위한파일확장자와유사하며, 최소한타입과서브타입등두가지컴포넌트로구성되어야하고, 필요한경우몇가지선택적매개변수를사용할수도있다. <!DOCTYPE html> <head> <title>html5</title> <link media=screen type=text/css href=styles.css rel=stylesheet> </head> <body></body> </html> CHAPTER 2 _ HTML 문법 27

9 일반적인 MIME 타입 타입콘텐츠타입 / 서브타입코드설명 애플리케이션 application/javascript 자바스크립트 application/xhtml+xml XHTML 오디오 audio/mpeg MPEG, MP3 오디오 audio/x-ms-wma audio/vnd.rn-realaudio Windows Media Audio 형식 RealAudio 오디오형식 이미지 image/gif GIF 이미지 image/jpeg image/png image/svg+xml JPEG 이미지 Portable Network Graphics 이미지 SVG 벡터그래픽 메시지 message/http 메시지 텍스트 text/css 스타일시트 text/csv text/html text/javascript text/plain text/xml 콤마로구분된값들 HTML 자바스크립트. 이형식은더는사용을권하지않으나 HTML5에서는여전히허용된다. application/javascript와달리크로스브라우저를지원한다. 기본텍스트 XML 형식 비디오 video/mpeg MPEG-1 비디오 video/mp4 video/quicktime video/x-ms-wmv MP4 비디오 애플퀵타임비디오 Windows Media Video 형식 주요미티어타입에대해서는 IANA(Internet Assigned Numbers Authority, assignments/media-types) 에서찾아볼수있다. 28 세르게이의 HTML5 & CSS3 퀵레퍼런스

10 문서객체모델 웹브라우저는요소, 특성및텍스트등과같은객체의트리형태로표현되는 HTML 문서를토대로모델을구축한다. 이모델은문서객체모델 DOM: Document Object Model 이라고부른다. DOM 객체는자바스크립트에의해조작이가능하다. 계층적 DOM 트리의객체인스턴스를노드 Node 라고부른다. <div onclick="document.getelementbyid('description').style.display = 'none';"> 설명숨기기 </div> <div id=description> 둘러보기 </div> 의미적요소 (X)HTML5 는새로운블록수준 block-level 과인라인수준 inline-level 요소들을제공한다. 새로운 HTML5 의블록수준과요소들은웹페이지의의미적구조를형성한다. <body> <header> <section> <header> <hgroup> <h1-h3> <article> <nav> <footer> <aside> <hgroup> <h1-h3> <article> <footer> <footer> CHAPTER 2 _ HTML 문법 29

11 요소 주요콘텐츠 주소부모객체 자식객체 <header> 제목, 로고, 배너, 산업정보등 Body, Section, Article Nav, Section <hgroup> h1 부터 h6까지의제목 Article, Header h1, h2, h3, h4, h5, h6 <nav> 주내비게이션메뉴 Body Section, Nav <section> 일반적인페이지섹션 Body Article, Header, Footer, Aside, Nav <article> 문서, 하위섹션, 블로그포스트등 Body, Section Section, Header, Footer <address> Footer p, a <aside> 사이드바콘텐츠, 팁, 인용문 Body Section, Article <footer> 꼬리글, 요약, 저작권정보, 2차내비게이션등 Body, Section, Article Nav, Section 다음에나열하는요소들은인라인수준의미적요소들이다. <del>, <s>, <ins>, <strong>, <small>, <b>, <cite>, <i>, <q>, <em>, <code>, <mark> 문법요약 일반문법규칙 규칙 HTML5 문법 XHTML5 문법 XML 선언 N/A 필수아님 UTF-8 인코딩사용시생략가능 <?xml version="1.0" encoding="utf-8"?> DOCTYPE 필수 필수아님 MIME 타입 text/html application/xhtml+xml 특성값대소문자구분 필수아님 필수 특성값내공백일반화 공백이일반화되지않음 몇몇예외를제외하고공백은하나의공백문자로일반화됨 특성에소문자사용 필수아님 필수 특성에따옴표사용 특성값에공백및 " ' ' = < > 등이사용되지않을경우필수아님 <img alt=logo> <img alt='company logo'> 필수 <img alt="logo" /> 30 세르게이의 HTML5 & CSS3 퀵레퍼런스

12 규칙 HTML5 문법 XHTML5 문법 불리언특성필수아님. 특성값최소화가허용됨필수. 특성값최소화는허용하지않음 <input disabled=disabled> <input disabled="disabled" /> <input disabled="disabled"> <input disabled=""> <input disabled> 빈요소에대한종료슬래시 필수아님 필수 <br> 혹은 <br /> <hr> 혹은 <hr /> <img> 혹은 <img /> <input> 혹은 <input /> <br /> <hr /> <img /> <input /> 요소이름대소문자구분없음대소문자구분, 소문자만허용 빈요소에대한열기및닫기태그선택적. 필수 예외처리되지않은특수문자 특정상태를가진일부요소의경우는다음에보여지는표를참조할것앰퍼센드 (&) 와작다기호 ( < ) 는통상요소및특성값내부에서사용가능. 몇가지예외가적용됨 앰퍼센드 (&) 와작다기호 ( < ) 를요소및특성값에서사용할수없으며, 반드시 & 및 < 로변환해서사용해야함 (X)HTML5 빈태그문법 빈태그는닫는태그가없다 : <input><input> HTML5 빈요소에대한종료슬래시가필요하지않다 : <input> XHTML5 빈요소에대한종료슬래시가필요하다 : <input /> 빈태그목록 area command img meta base embed input param br hr link source col CHAPTER 2 _ HTML 문법 31

13 선택적태그를사용하는 HTML5 요소 XHTML5 문서에서는선택적태그를사용할수없다. 조건열에서는태그가선택적으로사용될수있는조건을표시한다. 통상태그를생략하기위해서는최소하나의조건이일치해야한다. 일부태그는현재시점에사용가능한조건정보가존재하지않는다. 요소시작태그조건종료태그조건 <body> 선택적 Body 태그가비어있는경우 선택적 주석요소다음에나타나지않는경우 </body> 공백문자뒤에나타나지않는경우 주석요소다음에나타나지않는경우 다음요소가 script 나 style 인경우는제외 <colgroup> </colgroup> <dd> </dd> <dt> </dt> 필수 N/A 선택적 공백문자다음에나타나지않는경우 필수 N/A 선택적 dt나 dd 요소다음에나타나지않는경우 필수 N/A 선택적 dt나 dd 요소다음에나타나지않는경우 그룹내마지막요소인경우 <head> 선택적 head 태그가비어있는경우또는 선택적 공백문자다음에나타나지않는경우 </head> 다른요소다음에나타나지않는경우 주석요소다음에나타나지않는경우 <html> </html> 선택적 주석요소다음에나타나지않는경우선택적 주석요소다음에나타나지않는경우 <li> </li> <optgroup> </optgroup> <option> </option> <p> </p> <tbody> </tbody> 필수 N/A 선택적 다른 li 요소다음에나타나는경우 부모요소내의요소중마지막아이템인경우 필수 N/A 선택적 마지막 optgroup 요소인경우 부모요소내의마지막요소인경우 필수 N/A 선택적 다른 option 요소다음에나타나는경우 optgroup 요소다음에나타나는경우 부모요소내의마지막요소인경우 필수 N/A 선택적 address, article, aside, blockquote, dir, div, dl, fleldset, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, menu, nav, ol, p, pre, section, table 또는 ul 태그다음에나타나는경우 부모요소내의마지막요소인경우 선택적 N/A 선택적 tbody 요소다음에나타나는경우 t foot 요소다음에나타나는경우 부모요소내의마지막요소인경우 32 세르게이의 HTML5 & CSS3 퀵레퍼런스

14 요소시작태그조건종료태그조건 <td> </td> <tfoot> </tfoot> <th> </th> <thead> </thead> <tr> </tr> 필수 N/A 선택적 td 요소다음에나타나는경우 th 요소다음에나타나는경우 부모요소내의마지막요소인경우 선택적 N/A 선택적 tbody 요소다음에나타나는경우 부모요소내의마지막요소인경우 필수 N/A 선택적 td 요소다음에나타나는경우 th 요소다음에나타나는경우 부모요소내의마지막요소인경우 선택적 N/A 선택적 tbody 요소다음에나타나는경우 t foot 요소다음에나타나는경우 필수 N/A 선택적 tr 요소다음에나타나는경우 부모요소내의마지막요소인경우 HTML5 문서내에서선택적태그를생략하는유효한경우와그에대항하는소위잘정의된 XHTML5 문서를 Total Validator 도구로검사해보자. HTML5 XHTML5 <!DOCTYPE html> <title>html5 문서 </title> <html xmlns=" xhtml"> <head> <title>xhtml5 문서 </title> </head> <body> <table title="report"> <table title=report> <tr> <td> 첫번째칸 <td> 두번째칸 <td> 세번째칸 <tr> <td> 네번째칸 <td> 다섯번째칸 <td> 여섯번째칸 <tr> <td> 첫번째칸 </td> <td> 두번째칸 </td> <td> 세번째칸 </td> </tr> <tr> <td> 네번째칸 </td> <td> 다섯번째칸 </td> <td> 여섯번째칸 </td> </tr> </table> </body> </table> </html> CHAPTER 2 _ HTML 문법 33

15 요소의타입 타입 루트 요소 html 메타데이터 head base meta title link style 스크립팅 script noscript 섹션 body nav h1, h2, h3, h4, h5, h6 footer section 요소 article address aside header 그루핑 p pre ol dl hr dialog ul dt br blockquote li dd 인라인의미요소 a dfn samp bdo q abbr kdb ruby cite time sub rt em progress sup rp strong meter span small code i mark var b 편집 ins del 포함콘텐츠 figure embed video canvas img object audio map iframe param source area 표데이터 table col tfoot th caption tbody tr colgroup thread td 폼 form input datalist textarea fieldset button optgroup output label select option 인터렉티브요소 details command bb menu 기타요소 legend div 34 세르게이의 HTML5 & CSS3 퀵레퍼런스

16 브라우저호환성을위한스크립팅 HTML5 에대한브라우저의지원이아직완벽하지않기때문에특정브라우저의기능을대상으로 하거나누락된기능을추가하기위해자바스크립트를활용한다. Modernizr 가장효율적인 HTML5 호환성감지도구는 Modernizr라는오픈소스자바스크립트라이브러리이며, HTML5와 CSS3에대한지원여부를감지한다. 최신버전의 Modernizr 라이브러리는 modernizr.com 웹사이트에서다운로드할수있다. <!DOCTYPE html> <html> <head><title></title> <script src="modernizr.min.js"></script> </head> HTML5 를활성화하는스크립트 - Polyfills HTML5 Modernizr 는감지도구이다 : 즉, 이라이브러리는 HTML5 기능이오래된브라우저에서지원되지않는다고해서이기능을추가하지는않는다. 그러나 Modernizr 라이브러리사이트는 HTML5-크로스-브라우저-Polyfill 이라는페이지를제공하며, 이페이지에서는다양한솔루션들에대한링크를제공한다. Polyfill은개발자가특정기능이지원되지않는브라우저를위해사용할수있는코드조각이나플러그인을말한다. 폴리필은 HTML5 및 CSS3와오래된브라우저사이의간격을메꾸는역할을담당한다. CHAPTER 2 _ HTML 문법 35

Overall Process

CSS ( ) Overall Process Overall Process (Contents : Story Board or Design Source) (Structure : extensible HyperText Markup Language) (Style : Cascade Style Sheet) (Script : Document Object Model) (Contents