HTML5 등장으로 달라진 마크업

devforest443·2022년 7월 1일
0

log 2015. 7. 10. 17:49

HTML5의 DTD 선언

HTML5의 인코딩 선언

<meta charset="utf-8">

HTML5에서 의미가 변경된 엘리먼트(의미만 변경되었을 경우)

<b>, <cite>, <hr>, <i>,  <menu>, <s>, <small>, <strong>

HTML5에서 사용할 수 없는 엘리먼트

<basefont>, <big>, <center>, <font>, <s>, <strike>, <tt >, <u>, <frame>, <framesets>, <noframes>, <acronym>, <applet>, <isindex>, <dir>

HTML5에서 사용할 수 없는 속성

  • rev, charset : <link>, <a>
  • shape, coords : <a>
  • longdesc : <img>, <iframe>
  • target : <link>
  • nohref : <area>
  • profile : <head>
  • vertion : <html>
  • name : <img> id로 대체
  • scheme : <meta>
  • archive , classid, codebase, codetype, declare, standby : <object>
    valuetype, type : <param>
  • align : <caption>, <iframe>, <img>, <input>, <object>, <legend>, <table>, <hr>, <div>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>
  • alink, link, text, vlink : <body>
  • background : <body>
  • bgcolor : <table, <tr>, <td>, <th>, <body>
  • border : <table>, <object>
  • cellpadding, cellspacing : <table>
  • char, charoff : <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr >
  • clear : <br>
  • compact : <dl>, <menu>, <ol>, <ul>
  • frame : <table>
  • frameborder : <iframe>
  • height : <td>, <th>
  • hspace, vspace : <img>, <object>
  • marginheight, marginwidth : <iframe>
  • noshade : <hr>
  • nowrap : <td>, <th >
  • rules : <table>
  • scrolling : <iframe>
  • size : <hr>
  • type : <li>, <ol>, <ul>
  • valign : <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>
  • width : <hr>, <table>, <td>, <th>, <col>, <colgroup>, <pre>

iframe

테이블을 사용할 때와 마찬가지로 아이프레임 사용 시에도 기본적으로 선언해야 하는 속성이 있다.

<iframe src=" width=" height="" frameborder="0" marginwidth="0" marginheight="0" scrolling="">
 margin:0;overflow:hidden;border:none;

frameborder, marginwidth, marginheight, scrolling 속성이 HTML5 등장이후 폐지되어 사용할 수 없도록 규정하였다. 이 속성들을 대체할 수 있는 속성들이 있다.

marginwidth, marginheight : 아이프레임 내 불려지는 페이지의 <body> 태그에 margin: 0; 스타일을 선언한다.

scrolling : 아이프레임 내 불려지는 페이지의 <body> 영역이 아이프레임의 크기를 넘지 않거나, <body>에 overflow:hidden 스타일을 선언한다.

frameborder : IE를 제외한 나머지 브라우저에서 border:none 스타일을 선언한다.
IE8에서는 border:none을 주더라도 테두리가 표시된다. 이때 frameborder="0"
속성을 선언한다.

IE6,7은 frameborder가 선언되어 있지 않으면 테두리 자체를 표현하지 않는다.

스타일으로 해결할 수 없는 속성들은 HTML5에서 새롭게 생겨난 아이프레임의 속성 "seamless"을 활용한다.

이 속성은 아이프레임이 일반 콘텐츠처럼 표시되게 하여 스크롤이나 테두리를 발생시키지 않는다.
이 속성을 지원하지 않는 브라우저 일경우 아이프레임을 사용할 때는 HTML5 스펙에 어긋나지만 frameborder 속성을 사용한다.

profile
devforest443

0개의 댓글