달력

52025  이전 다음

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

No.008 HTML5 변환된 태그 [2017-05-16]

Legend 개발자/HTML5 2017. 5. 16. 00:52

8. HTML5 변화된 태그


1. HTML5에서 변경된 태그

 1) 의미가 변경된 태그

 ● HTML5에서 변경된 태그의 특징

 - 속성 변화를 통해 사용자가 쉽게 코드를 작성할 수 있음

 - 포괄적인 개념으로 의미가 변경됨

 ● <a> 태그 : HTML4에서는 href="#" 또는 href="javascript:;"로 지정해야 널 링크로 사용할 수 있었지만 HTML5에서는 href 속성 없이 사용해도 널 링크로 사용할 수 있음(#은 같은 페이지도 링크가 가능함, document, JAVA Script에는 개체가 있다. JAVA Script로 링크를 할 수가 있다. )

● <address> 태그 : HTML4에서는 이름이나 이메일 주소, 전화번호 등 제작자에 대한 정보를 표시할 때 사용하였지만, HTML5에서는 실제 우편물 주소를 표시할 때 사용

 ● <b> 태그 : HTML4 에서는 텍스트를 진하게 표시할 때 사용하였지만, HTML5에서는 텍스트를 진하게 표시할 뿐 아니라, 제품 소개서 안의 제품명, 요약문서 안의 키워드처럼 특별하게 중요하지는 않지만 진하게 표시하려고 할 때 사용

 ● <hr> 태그 : HTML4 에서는 가로줄을 표시할 때 사용하였지만, HTML5에서는 단락 단위로 주제를 바꾸려고 할 때 사용

 ● < i> 태그 : HTML4 에서는 텍스트를 기울어지게 표시할 때 사용하였지만, HTML5 에서는 텍스트를 기울어지게 표시할 뿐 아니라, 중요한 정보가 들어 있지 않은 주변 콘텐츠로부터 텍스트를 따로 표시할 때 사용

 ● <menu> 태그 : HTML4 에서는 <menu> 태그를 사용하지 않도록 권고하였으나, HTML5에서는 실제 문서 메뉴 정보를 제공하는데 사용

 ● <small> 태그 : HTML4에서는 작은 글자로 표시할 때 사용하였지만, HTML5 에서는 세부 주석이나 법적 인쇄문서에서 작은 인쇄 정보를 표시할 때 사용

 ● <strong> 태그 : HTML4 에서는 글자를 강조할 때 사용하였지만, HTML5에서는 단순히 진하게 표시하는 것보다 중요한 정보를 표시할 때 사용

 

 2) <a> xorm tlftmq

 ● <a> 태그 실습 예제

 <!doctype html>

  <head>

  <meta charset="UTF-8">

  <mce:stript src="//html5shiv.googlecode.com/svn/trunk/html5.js" mce_src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></mce:script>

 <title>a 태그 실습예제</title>

 </head>

 <body>

 <ul>

  <li><a href="http://www.google.com">구글</a></li>

  <li><a href="http://www.naver.com">네이버</a></li>

 </ul>

 </body>

</html>

 

3) <address> 태그 실습

 ● <address> 태그 실습 예제

 <!doctype html>

  <head>

  <meta charset="UTF-8">

  <mce:stript src="//html5shiv.googlecode.com/svn/trunk/html5.js" mce_src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></mce:script>

 <title>adress 태그 실습예제</title>

 </head>

  <body>

  <h1>adress 태그 실습하기!!!<h1>

  <adress>

   Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>

   Visit us at:<br>

   Example.com<br>

   Box 564, Disneyland<br>

   USA

   </adress>

  </body>

 </html>

 

4) <b> 태그 실습

 ●<b> 태그 실습 예제

<!doctype html>

  <head>

  <meta charset="UTF-8">

  <mce:stript src="//html5shiv.googlecode.com/svn/trunk/html5.js" mce_src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></mce:script>

 <title>b 태그 실습예제</title>

 </head>

 <body>

  <h1> b 태그 실습하기!!! <h1>

  <p>This is normal text - <b> and this is bold text</b></p?

 </body>

</html>

 

5) <hr> 태그 실습

 ● <hr> 태그 실습 예제

<!doctype html>

  <head>

  <meta charset="UTF-8">

  <mce:stript src="//html5shiv.googlecode.com/svn/trunk/html5.js" mce_src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></mce:script>

  <title>hr 태그 실습예제</title>

  </head>

  <body>

   <h1> hr 태그 실습하기!!!</h1>

   <p>HTML is a language for describing web pages.....</p>

   <hr>

   <h1>CSS</h1>

   <p>CSS defineshow to display HTML elements....</p>

  </body>

 </html>

 

6) <i> 태그 실습

 ● <i> 태그 실습 예제

<!doctype html>

  <head>

  <meta charset="UTF-8">

  <mce:stript src="//html5shiv.googlecode.com/svn/trunk/html5.js" mce_src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></mce:script>

  <title>i 태그 실습예제</title>

  </head>

  <body>

   <h1> i 태그 실습하기!!!</h1>

   <p>He named his car <i>The lightning</i>, because it was very fast.</p>

  </body>

 </html>

 

7) <menu> 태그 실습

 ● <menu> 태그 실습 예제

<!doctype html>

  <head>

  <meta charset="UTF-8">

  <mce:stript src="//html5shiv.googlecode.com/svn/trunk/html5.js" mce_src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></mce:script>

  <title>menu 태그 실습예제</title>

  </head>

  <body>

   <h1> menu 태그 실습하기!!!</h1>

    <menu type="toolbar">

     <li>

      <menu label="File">

       <button type="button" onclick="new()">New...</button>

       <button type="button" onclick="save()">Save...</button>

      </menu>

     </li>

     <li>

      <menu label="Edit">

       <button type="button" onclick="cut()">Cut..</button>

       <button type="button" onclick="copy()">Copy..</button>

       <button type="button" onclick="paste()">Paste..</button>

      </menu>

     </li>

   </menu>

   </body>

 </html>

 

8) <small> 태그 실습

 ● <small> 태그 실습 예제

<!doctype html>

  <head>

  <meta charset="UTF-8">

  <mce:stript src="//html5shiv.googlecode.com/svn/trunk/html5.js" mce_src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></mce:script>

  <title>small 태그 실습예제</title>

  </head>

  <body>

   <h1> small 태그 실습하기!!!</h1>

   <p>W3Schools.com- the worlds largest web development site. </p>

   <p><small>Copyright 1999-2050 by RefsnesData</small></p>

  </body>

 </html>

 

9) <strong> 태그 실습

 ● <strong> 태그 실습 예제

<!doctype html>

  <head>

  <meta charset="UTF-8">

  <mce:stript src="//html5shiv.googlecode.com/svn/trunk/html5.js" mce_src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></mce:script>

  <title>strong 태그 실습예제</title>

  </head>

  <body>

   <h1> strong 태그 실습하기!!!</h1>

   <p>W3Schools.com- the worlds largest web development site. </p>

   <p><strong>Copyright 1999-2050 by RefsnesData</strong></p>

  </body>

 </html>

 

2. HTML5에서 중단된 태그

 1) 중단된 태그

 ●CSS로 대체할 수 있기에 HTML5에서는 더 이상 사용을 권장하지 않음

 - <basefoont>,<big>,<center>,<font>,<frame>,<frameset>,<noframes>,<s>,<strike>,<tt>,<u> 태그 등

 ● 다른 태그들과 함께 사용하면서 혼란을 야기하는 태그

 - <acronym> : 약자를 의미하는 <abbr> 태그 사용

 - <applet> : <object> 태그로 대체

 - <isindex> : 폼 양식을 통해 대체

 - <dir> : ul 태그를 통해 대체

 - <noscript> : HTML 문법에서만 사용하고 XML 문법에서는 더 이상 사용하지 않음 

'Legend 개발자 > HTML5' 카테고리의 다른 글

No.010 HTML 5 폼(form) 이해 [2017-05-16]  (0) 2017.05.31
No.009 W3C HTML 웹 표준 및 간단한웹 페이지 만들기 [2017-05-16]  (0) 2017.05.16
No.007 HTML5 추가 태그 [2017-05-16]  (0) 2017.05.15
No.006 시맨틱 태그 - 입력양식 및 공간분할 [2017-05-15]  (0) 2017.05.15
No.005 시맨틱 태그 - 이미지, 비디오, 오디오 [2017-05-12]  (0) 2017.05.12
Posted by 전설의아이
|

티스토리툴바