달력

42025  이전 다음

  • 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

No.010 HTML 5 폼(form) 이해 [2017-05-16]

Legend 개발자/HTML5 2017. 5. 31. 17:30

10. HTML5 폼(form) 이해

1. 폼 태그 속성
action : 폼을 전송할 서버 쪽 스크립트 파일을 지정합니다.
name : 폼을 식별하기 위한 이름을 지정합니다.
accept-charset : 폼 전송에 사용할 문자 인코딩을 지정합니다.
target : action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정합니다.
method : 폼을 서버에 전송할 http 메소드를 정합니다. (GET 또는 POST)

2. 폼을 구성하는 다양한 엘리먼트
● 폼 엘리먼트 그룹 <field>, <legend> 태그
<fieldset> 태그는 폼 태그 안에 관련 있는 폼 엘리먼트들을 그룹화할 때 사용합니다.
그리고 <fieldset> 태그 하위에 <legend> 태그를 사용하여 그룹화한
폼 엘리먼트들을 목적에 맞게 이름을 지정합니다.

● 다양한 모양을 가진 <input> 태그
<input> 태그는 사용자가 다양하게 폼 태그에 입력할 수 있는 공간을 만들어 줍니다.
속성에는 type, readonly, maxlength 등이 있습니다.
type : 태그 모양을 다양하게 변경할 수 있습니다. type에는 text, radio, checkbox, password,
button, hidden, fileupload, submit, reset 등을 지정할 수 있습니다.
name : 태그 이름을 지정합니다.
readonly : 태그를 읽기전용으로 합니다.
maxlength : 해당 태그 최대 글자 수를 지정합니다.
required : 해당 태그가 필수태그로 지정됩니다. 필수 태그를 입력하지 않고, submit 버튼을
누르면 에러메시지가 웹 브라우저에 출력됩니다. (HTML5 추가사항)
autofocus : 웹 페이지가 로딩되자마자 이 속성을 지정한 태그로 포커스가 이동됩니다. (HTML5 추가사항)
placeholder : 태그에 입력할 값에 대한 힌트를 줍니다. (HTML5 추가사항)
pattern : 정규표현식을 사용하여 특정범위 내의 유효한 값을 입력받을 때 사용합니다. (HTML5 추가사항)

● 목록태그 <select>, <optgroup>, <option>
<select>는 항목을 선택할 수 있는 태그입니다. 속성 중에 size와 multiple 속성이 있습니다.
size는 한 번에 표시할 항목 수를 의미하고, multiple는 다중선택을 허용할 것인지를 지정하는 속성입니다.
<select> 태그 하위에 <optgroup> 태그와 <option> 태그가 있습니다. <optgroup>
태그 는 <select> 태그 안에서 목록들을 그룹화할 경우 사용됩니다. label 속성을 사용하여 그룹 이름을 지정합니다.
<optgroup> 태그 하위에 <option> 태그를 포함합니다. <option> 태그는 목록을 나타내는 태그입니다.

● 여러 줄 글상자 <textarea>
여러 줄을 입력받는 태그입니다. 속성 중에 rows와 cols가 있습니다. rows는 줄을, cols는 한 줄에 입력될 크기를 지정합니다.

3. HTML5 에서 추가된 엘리먼트
HTML5에서 새롭게 추가된 엘리먼트들이 있습니다. 그 중에서 유용한 엘리먼트를 소개 하겠습니다.

● 입력 값 후보 <datalist>
텍스트 상자에 입력 값 후보 목록을 지정할 경우 사용합니다.

● <input> 태그의 date
날짜를 입력받기 위한 속성값입니다. 날짜 선택을 위한 달력도 함께 표시됩니다. 이 값이 서버 프로그램에
전달되면 자바 date 객체에 바로 데이터가 전달됩니다. 그래서 쉽게 date 데이터를 서버 프로그램에서
받을 수 있는 장점이 있습니다.

날짜와 관련된 것에는 date 말고 month, week, time, datatime, datetime-local이 추가되었습니다.
date 속성과 비슷하게 지정하면 사용자가 원하는 결과를 볼 수 있습니다.

● <input> 태그의 number와 range
number와 range는 둘 다 숫자를 입력할 때 사용합니다. 차이점으로 range 태그는 슬라이더 형태의
UI로 렌더링 된다는 점입니다. min, max 속성을 사용하여 최소 최댓값을 지정합니다.

● <input> 태그의 color
색상을 입력받을 때 사용합니다. color 타입은 아직 모든 웹 브라우저에서 지원하지 않지만, 일부
웹 브라우저에서 Color Picker 형태의 UI로 렌더링 됩니다.

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

No.009 W3C HTML 웹 표준 및 간단한웹 페이지 만들기 [2017-05-16]  (0) 2017.05.16
No.008 HTML5 변환된 태그 [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 전설의아이
|

No.009 W3C HTML 웹 표준 및 간단한웹 페이지 만들기 [2017-05-16]

Legend 개발자/HTML5 2017. 5. 16. 15:17

9. W3C HTML 웹 표준 및 간단한 웹 페이지 만들기

 

1.W3C HTML 웹 표준 인증 받기

 1) 웹 페이지의 타입을 지정하는 선언문

 ● DOCTYPE(Document Type) :문서 유형을 정의하는 구문

 - 그 자체가 태그는 아니며, 웹 페이지의 맨 처음에 선언

 - 어떤 종류의 html을 사용할지를 웹 브라우저에 알림

 ● HTML5 태그를 사용할 때 DOCTYPE 선언 방법

 <!DOCTYPE HTML>

 ●XHTML1.0 태그를 사용할 때 DOCTYPE 선언 방법

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 ●DTD(Document Type Difinition) : 현재 사용하는 HTML 버전에서 사용할 수 있는 태그를 알려주는 지침

 - 하나의 DOCTYPE 선언을 통해 하나의 DTD와 결합

 - HTML5 는 DTD 범주가 없음

 ●Strict : 엄격한 HTML 표준을 따름

 - 시맨틱 마크업에 적합하지 않은 엘리먼트 사용하지 않음

 - Font, center, frame 등 총 14가지 엘리먼트 사용 금지

 ●transitional : 변화에 맞춰 사용하지 않는 엘리먼트 사용 금지

 - Frame, frameset 2가지 엘리먼트 사용 금지

 - Strict 에 비해 넓은 범위를 허락해주기 때문에 국내 환경에 적함

 ●frameset: 초창기 방식을 그대로 사용

 - 이전 HTML의 모든 엘리먼트 사용 가능

 

 2) HTML 웹 표준 인증 받기(https://validator.kldp.org/)

 ●웹 문서의 Markup 유효성 검사 : 태그가 올바르게 작성되었는지 확인하는 검사

<!doctype html>

 <head>

  <meta charset="UTF-8">

  <title>Testpage</title>

  <link rel="stylesheet" type="text/css" href="styles.css"/>

 </head>

 <body>

<!-- start header -->

  <header>

    <div class="container1">

    <!-- start title -->

    <h1 class="fontface" id="title"><a href="index.html" class="grn"><img src="logo.png" height="80"/></a></h1>

    <!--end title -->

    <!--start menu -->

   <nav>

    <ul>

     <li><a href="index.html" class="grn">홈</a></li>

     <li><a href="study.html" class="pnk">스터디</a></li>

     <li><a href="#" class="orng">사진모음</a></li>

     <li><a href="#" class="blu">자유글</a></li>

     <li><a href="#" class="prpl">소개</a></li>

    </ul>

   </nav>

  </div>

  <div class="bottom"></div>

  <!-- end menu -->

  <!-- end header -->

  </header>

  <div id="container">

   <section id="main"><!-- #main content and sidebar area -->

    <aside id="sidebar1"><!-- sidebar1 -->

    <div style="padding-left:0px;padding-top:10px;">

   <ul>

    <li><a href="#">로그인</a></li>

    <li><a href="#">회원정보</a></li>

    <li><a href="#">마이페이지</a></li>

    <li><a href="#">마이메뉴</a></li>

   </ul>

  </div>

  <div style="padding-left:0px;padding-top:10px;">

   <ul>

    <li><a href="#">바로가기</a></li>

    <li><a href="#">링크</a></li>

   </ul>

  </div>

 </aside><!--end of sidebar1 -->

  <section id="content"><!-- #content -->

   <article style="border:1px dashed #BDBDBD;">

    <h3 style="background-color:rgb(190,190,190);padding-left:0px;padding-top:10px;"><a href="#">프로그램 개발자 과정 과목</a></h3>

    <div style="padding-left:5px:padding-right:5px;">

     <p>HTML/CSS <span style="float:right;"><a href="#"><img src="extend.png" width="15" height="15"/></a></span></p>

     <p>Java <span style="float:right;"><a href="#"><img src="extend.png" width="15" height="15"/></a></span></p>

     <p>DBMS <span style="float:right;"><a href="#"><img src="extend.png" width="15" height="15"/></a></span></p>

     <p>JSP <span style="float:right;"><a href="#"><img src="extend.png" width="15" height="15"/></a></span></p>

     <p>Spring <span style="float:right;"><a href="#"><img src="extend.png" width="15" height="15"/></a></span></p>

     </div>

    </article>

    <article style="border:1px dashed #BDBDBD; margin-top:5px;>

    <h3 style="background-color:rgb(190,190,190);padding-left:0px;padding-top:10px;"><a href="#">필수과정</a></h3>

     <div style=padding-left:5px;padding-right:5px;">

     <p>요구사항 확인</p>

     <p>애플리케이션 구현</p>

     <p>개발자 테스트</p>

     <p>정보시스템 이행</p>

     <p>제품 소프트웨어 패키징</p>

     <p>화면 구현</p>

     <p>DB구현</p>

     <p>SQL활용</p>

     </div>

    </article>

   </section><!--end of #content -->

  <aside id="sidebar2"><!--sidebar2 -->

  <h3 class="fontface">팀별</h3><br>

   <ul>

    <li><a href="#">팀목록</a></li> 

    <li><a href="#">팀별팀원</a></li>

    <li><a href="#">팀별프로젝트</a></li>

   </ul>

   <h3 class="fontface">일정</h3><nr>

   <ul>

    <li><a href="#">05.25.11- 팀원구성</a></li>

    <li><a href="#">05.31.11- 팀장선출</a></li>

  

중략...

  

   </ul>

  </aside><!-- end of sidebar -->

 </section><!--end of #main content and sidebar -->

</div>

 <!-- start footer -->

 <footer>

  <div class="container1">

   <p> Copyright ⓒ 2011|Test </p>

  </div>

 </footer>

 <!-- end footer -->

 </body>

</html>

 

 

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

No.010 HTML 5 폼(form) 이해 [2017-05-16]  (0) 2017.05.31
No.008 HTML5 변환된 태그 [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 전설의아이
|

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 전설의아이
|

No.007 HTML5 추가 태그 [2017-05-16]

Legend 개발자/HTML5 2017. 5. 15. 23:50

7. HTML5 추가 태그


1. 폼, 텍스트, 콘텐츠 그룹화 태그

1) 폼 태그(Forms Tag)

 ● HTML5가 등장하면서 새로운 태그들이 추가

 - 사용자의 프로그램 코드 작성이 편리해짐

 - 문서의 구조도 기존과 큰 차이 없음

 ●<datalist>: <input>태그와 함께 사용하며 미리 정의된 옵션의 드롭 다운 목록을 지정함

 ●<keygen> : 인증서 관리 시스템과 웹 폼을 처리하는데 사용

 - 보안 키를 생성하고 공개 키를 제출함

 - 개인 키는 로컬에 저장되고 공개 키는 서버로 전송됨

 ●<meter< : 알려진 범위 내에서 스칼라 측정 또는 소수 값을 나타내는데 사용

 - 웹 페이지에 그래픽 형식에서 데이터를 표시할 때 유용함

 - 익스플로러와 사파리에서는 지원하지 않음

 ●<output> : 스크립트에 의해 수행 계산의 결과를 나타냄

 - 일반 텍스트가 아닌 계산의 결과 값이란 것을 브라우저에서 정확히 인식

 <output [속성="속성 값"]> 내용</output>

 ●<progress> : 작업의 진행 상황을 나타냄

 - Value : 작업이 얼마나 진행되었는지를 나타냄. 부동 소수점으로 표현

 - Max : 작업이 완료되는 양을 나타냄. 부동 소수점으로 표현


 2) 텍스트 태그(Text-level semantics Tag)

 ●<bdi> : 텍스트 방향으 주위와는 별도로 표시하도록 지시하는데 사용

 - 사용자가 방향을 모르는 텍스트를 삽입할 때 유용함

 - 브라우저가 <bdi> 태그의 텍스트를 보고 방향성을 판단

 - 해석 오류로 인해 비정상적으로 출력될 수 있음

 - 텍스트의 방향 설정 시 최후의 보루로 사용할 것을 권고

 ●<mark> : 텍스트를 하이라이트 형태로 표시하며 특정한 단어나 일부분을 강조하고 싶을 때 사용

 - 텍스트의 배경이 형광색으로 표시(크롬에서는 노란색 배경 표시)

 - 배경색은 <style> 태그로 바꿀 수 있음

 ● <ruby> : 동아시아 타이포그래피에 사용되는 루비 주석을 지정하는데 사용

 - <rt> : 작은 글씨를 주석으로 나타냄

 - <rp> : <rt> 태그를 지원하지 않는 브라우저에서 괄호 안에 주석을 표현

 ● <time> : HTML 문서 내의 날짜 및 시간을 선언하는데 사용

 - 웹 문서에 날짜나 시간을 자동으로 표시해주는 것은 아님

 - <time> 태그를 사용하면 모든 브라우저에서 해당 내용을 정확히 인식

 ● <wbr> : 강제로 원하는 위치에서 줄 바꿈을 하고자 할 때 사용됨

 - <nobr> 태그 안에서 문단을 바꿀 때 <wbr> 태그 사용

 - <wbr> 태그 묶인 부분부터 줄이 바뀜


3) 콘텐츠 그룹화 태그(Groupping content tag)

 ● <figure> : 캡션 대상을 지정할 때 사용하는 태그

 - 이미지, 다이어그램, 비디오, 텍스트 단락과 같은 멀티미디어 요소를 묶음

 - 태그 안에 <img> , <code>처럼 다른 태그 사용 가능

 <figure>

  캡션을 붙일 요소

 </figure>

 ● <figcaption> 태그 : 캡션 설명을 붙일 때 사용하는 태그

 - 반드시 <figure> 태그 다음에 사용해야 함

 - <figcaption> 없이 <figure> 태그를 사용하는 것은 미디어가 있다는 것을 브라우저에게 알려주기 위함

 <figcaption>

 내용

 </figcaption>


4) <datalist> 태그를 이용한 실습

 ● <datalist> 태그 실습 예제

 <!doctype html>

 <head>

 <meta charset="UTF=8">

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

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

 </head>

  <body>

   <h1> 폼 태그 - datalist 태그 실습하기!! </h1>

   <div> Choose a browser from this list: </div>

   <input list="browsers"/>

   <datalist id="browsers">

   <option value="Chrome">
   <option value="Firefox">

   <option value="Internet Explorer">

   <option value="Opera">

   <option value="Safari">

   </datalist>

  </body>

 </html>


5) <mark> 태그를 이용한 실습

 ● <mark> 태그 실습 예제

 <!doctype html>

  <head>

   <meta charset="UTF-*">

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

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

  </head>

  <body>

   <h1> 텍스트 태그 - mark 태그 실습하기!! </h1>

    <p> Do not forget to buy <mark>milk</mark> today. </p>

   </body>

  </html>


2. 임베디드 콘텐츠, 섹션, 대화형 태그

1) 임베디드 콘텐츠 태그(Embdded content Tag)

 ● <audio> : MP3, WAV, AIFF 등 오디오 파일을 웹 페이지에 삽입하는데 사용

 - 이전의 <objct> 태그에 비해 간편하게 오디오 첨부 가능

 - 여러 개의 오디오 소스 포함 가능

 <audio src = "오디오 파일 경로"[속성][속성="속성 값"]>

 ● <video> : 동영상 클립 또는 다른 비디오 스트림으로 비디오를 지정함

 - PC, Mobile 모두 가능(Mobile의 경우 자동재생 지원 안 함)

 - 익스플로러8 이하 버전에서는 인식 못함

 <video src = "비디오 파일 경로" [속성][속성="속성 값"]>

 ● <canvas> : 스크립트 언어(Javascript 등)를 통해 빠르게 그래픽을 그리는데 사용

 - <canvas> 태그 자체로는 아무런 기능이 없음(빈 화면만 있는 곳을 의미)

 - <canvas> 태그를 사용하기 위해서는 스크립트 언어를 사용해야 함

 ● <embed> : HTML 웹 페이지에 멀티미디어(동영상, 음악 등)를 포함하는데 사용

 - 플러그인이 필요한 파일을 재생

 - <embed> 태그는 그 자체로 기능하기 때문에 닫는 태그가 없음

 <embed src= "멀티미디어 파일 경로"[속성][속성="속성 값"]>

 ● <source> : 미디어 요소에 여러 미디어 자원을 지정하는 데 사용됨

 - <video>,<audio> 태그를 사용할 경우 해당 자료의 위치를 지정

 ● <track> : 미디어 요소에 대한 텍스트 트랙을 지정하는데 사용

 - 미디어가 재생 될 때 캡션, 설명, 자막 파일 등의 텍스트 파일을 지정

 - Srt, vtt를 확장자로 하는 자막 파일 필요(텍스트 파일의 이름을 강제로 지정)


 2) 섹션 태그(Sections Tag)

 ● <header> 태그 : 웹 페이지의 헤더를 만들 때 사용(주로 로고 영역)

 ● <nav> 태그 : 웹 페이지의 메뉴를 만들때 사용하고, 일반적으로 내부에 <ul>과<li>을 많이 사용

 ● <section> 태그 : 여러 중심 내용을 감싸는 공간을 의미

 ● <article> 태그 : 문서, 어플리케이션, 사이트 안에서 독립되어 있는 구성요소로 글자가 많이 들어가는 부분을 의미

 ● <footer> 태그 : 웹 페이지의 하단을 만들 때 사용(주로 카피라이트 영역)


 3) 대화형 태그(Sections Tag)

 ● <command> 태그 : 명령 지정 태그

 - 사용자가 호출 할 수 있는 명령을 지정하는데 사용

 - 라디오 버튼, 체크 박스 같은 명령 단추를 재성정

 - 반드시 <menu> 태그 안에 있어야 함

 ● <summary> : 세부 요약 태그

 - <details> 태그에서 눈에 보이는 제목을 정의

 - <summary> 부분을 클릭하여 세부정보를 보이기/감추기 할 수 있음

 ● <details> 태그 : 추가적인 설명 태그

 - 주로 <summary> 태그와 함께 사용

 - 웹 페이지의 세부정보나 일부에 대해 설명하고자 할 때 사용하며 내용을 숨기거나 보여지게 설정 할 수 있음


 4) <canvas> 태그를 이용한 실습

 ● <canvas< 태그 실습 예제

 <!doctype html>

 <head>

  <meta charset="UTF-8">

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

  <script type="text/javascript" src="canvas_tag.js"></script>

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

 </head>

 <body onland="loader()">

  <h1> 임베디드 콘텐츠 태그 -canvas 태그 실습하기!! </h1>

  <canvas id="canvas" width="600" height="500"/>

 </body>

</html>


 5) <summary> 태그와 <details> 태그를 이용한 실습

 ● <summary>/<details> 태그 실습 예제

 <!doctype html>

 <head>

 <meta charset="UTF-8">

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

  <title> details, summarty 태그 실습예제 </title>

  </head>

  <body>

   <h1> 임베디드 콘텐츠 태그 - details, summarty 태그 실습하기!! </h1>

  <details>

   <summary> Copyright 1999-2014. </summary>

   <p> - by Refsnes Data. All Rights Reserved. </p>

   <p> All content and graphics on this web site are the proerty of the company Refsnes Data. </p>

  </details>

 </body>

</html>

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

No.009 W3C HTML 웹 표준 및 간단한웹 페이지 만들기 [2017-05-16]  (0) 2017.05.16
No.008 HTML5 변환된 태그 [2017-05-16]  (0) 2017.05.16
No.006 시맨틱 태그 - 입력양식 및 공간분할 [2017-05-15]  (0) 2017.05.15
No.005 시맨틱 태그 - 이미지, 비디오, 오디오 [2017-05-12]  (0) 2017.05.12
No.004 HTML5 기본 구조 및 문법의 기초 [2017-05-12]  (0) 2017.05.12
Posted by 전설의아이
|

No.006 시맨틱 태그 - 입력양식 및 공간분할 [2017-05-15]

Legend 개발자/HTML5 2017. 5. 15. 09:08

6. 시맨틱 태그 - 입력양식 및 공간분할

 

1. HTML5 시맨틱 태그(입력양식)

 1) 시맨틱 태그란?

 ● <header> : 웹 페이지의 헤더를 만들 때 사용(주로 로고 영역)

 ● <nav> : 웹 페이지의 메뉴를 만들 때 사용하고, 일반적으로 내부에 <ul>과 <li> 을 많이 사용

 ● <section> : 여러 중심 내용을 감싸는 공간을 의미

 ● <article> : 문서, 어플리케이션, 사이트 안에서 독립되어 있는 구성요소로 글자가 많이 들어가는 부분을 의미

 ● <aside> : 페이지 윈쪽이나 오른쪽에 부가적인 내용의 영역(퀵메뉴나 광고영역으로 많이 사용)

 ● <footer> : 웹 페이지의 하단을 만들 때 사용(주로 카피라이트 영역)

 

 2) HTML4 문서와 HTML5문서의 구조 비교

 ● HTML4 문서 예시

 ● HTML5 문서 예시 

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/DTD/xhtml-trnastional.dtd"?

 <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

   <meta http-equiv="Content-Type" content="text.html; charset=utf-8">

   <html>

    <title>

     HTML4 코딩 예!!!

    </title>

   </head>

   <body>

    <div id="sidebar">

    <h1>html4공부!!<h1>

    </div>

    <div id="sidebar">

    <h2>Menu</h2>

    <ul>

    <li><a href="#">지난 주</a>/<li>

    <li><a href="#">오래 된 글</a></li>

    </ul>

    </div>

    <div class="post">

    <h2>Yesterday</h2>

    <p>오늘은 문서구조(outline) 관련 부분을 2시간 동안 봤다.</p>

    </div>

    <div class="post">

    <h2>Today</h2>

    <p>HTML4에서는 문서구조를 나눌 때 div 태그를 사용한다.</p>

    </div>

    <div id="footer">

    <p><small>HTML4 문서 구조 알아보기!!</small></p>

    </div>

   </body>

  </html>

  <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/DTD/xhtml-tansitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <html>

  <title>

   HTML5 코딩 예!!!

  </title>

 </head>

 <body>

  <header>

   <h1>HTML5 공부!!! </h1>

  </header>

  <nav>

   <h2>Menu</h2>

  <ul>

  <li><a href="#">지난 주</a></li>

  <li><a href="#">오래 된 글</a></li>

  </ul>

  </nav>

  <article>

   <h2>Yesterday</h2>

   <p>오늘은 문서구조(outline) 관련 부분을 2시간 동안 봤다.</p>

  </article>

  <article>

   <h2>Today</h2>

   <p>HTML5에서는 문서구조를나눌 때 시맨틱 태그를 사용한다.</P>

  </article>

   <footer>

    <p><small>HTML5 문서 구조 알아보기!!</small></p> 

  </footer>

 </body>

</html>

 

2. HTML5 시맨틱 태그(공간분할)

 1) HTML5의 효율적인 마크업

 ● HTML4의 마크업 → 문서 구조의 파악이 어려움

 - 아무 의미 없는 <div> 태그 사용

 - 문서의 내용은 제작자들이 붙이는 id에 따라 구분

 ● HTML5의 마크업  → 문서 구조의 파악이 용이

 - 새로운 시맨틱 태그 사용(<header>,<nav>,<section> 등)

 - 태그만 보고 제목, 메뉴, 실제내용을 구분하기가 쉬움

 2) 시맨틱 태그를 활용한 홈페이지 만들기

 <header>

  <div class="container1>

   <!--start title-->

    <h1 class="fontface" id="title"><span class="orange">T</span><span class="pink">e</span><span class="purple">s</span><span class="blue">t</span><span clas="green">Page</span></h1>

   <!--end title-->

   <!--start menu-->

    <nav>

     <ul>

     <li><a href="index.html" class="grn">홈</a></li> 

     <li><a href="study.html" class="pnk">스터디</a></li>

     <li><a href="#" class="orng">사진모음</a></li>

     <li><a href="#" class="blu">자유글</a></li>

     <li><a href="#" class="prpl">소개</a></li>

     </ul>

    </nav>

   </div>

   <div class="bottom"></div>

   <!--end menu-->

   <!--end header-->

  </header>


 2) 시맨틱 태그를 활용한 홈페이지 만들기

 홈페이지 본문의 왼쪽 부분

 <did id="container>

  <section id="main><!--#main content and sidebar area -->

   <aside id="sidebar1"><!--sidebar1-->

    <h2 class="fontface">左영역</h2> <!--Title of Page -->

    <div style="background-color:rgb(255.255.190);padding-top:100px;padding-left:50px;padding-bottom:100px;font-size:30px;"><br/>상단<br/> </div>

    <div style="background-color:rgb(255.200.190);padding-top:110px;padding-left:50px;padding-bottom:110px;font-size:30px;"><br/>하단<br/> </div>

   </aside><!-- end of sidebar1 -->


 홈페이지 본문의 가운데 부분

 <section id=:content"><!-- #content -->

  <h2 class="fontface"><a gref="#">본문영역</a></h2>

   <article style="background-color:rgb(200,200,200);padding-top:100px;padding-left:50px;padding-bottom:100px;font-size:30px;">

  <h2><a href="#">본문 상단영역</a></h2>

  <p>본문 하단 내용..</P>

 </article>

</section><!-- end of #content -->


 홈페이지 본문의 오른쪽 부분

 <aside id="sidebar2"><!-- sidebar2 -->

 <h2 class="fontface">右영역</h2><br>

  <ul>

   <li><a href="#">팀목록</a></li>

   <li><a href="#">팀별팀원</a></li>

   <li><a href="#">팀별프로젝트</a></li>

  </ul>


 <h3 class="fontface">게시글</h3><br>

  <ul>

   <li><a href="#">05.24.11-팀원구성</a></li>

   <li><a href="#">05.31.11-팀장선출</a></li>

   <li><a href="#">06.01.11-아이템 구상</a></li>

   <li><a href="#">07.31.11-아이템 확정</a></li>

   <li><a href="#">07.01.11-자료수집계획</a></li>

   <li><a href="#">07.17.11-인터뷰계획</a></li>

   <li><a href="#">07.24.11-인터뷰실행</a></li>

   <li><a href="#">07.31.11-인터뷰결과</a></li>

   <li><a href="#">08.01.11-요구사항정의</a></li>

   <li><a href="#">08.15.11-요구사항분석</a></li>

   <li><a href="#">09.01.11-화면설계</a></li>

   <li><a href="#">09.15.11-DB설계</a></li>

   <li><a href="#">10.05.11-WBS 작성</a></li>

   <li><a href="#">11.06.11-발표</a></li>

  </ul>

 </aside><!-- end of sidebar -->

</section><!-- end of #main content and sidebar -->

</div>


 스타일 연결

 <head>

  <meta charset="UTF-8">

   <title>TestPage</title>

  <link rel="stylesheet" type="text/css" href="styles.css"/>

 </head>

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

No.008 HTML5 변환된 태그 [2017-05-16]  (0) 2017.05.16
No.007 HTML5 추가 태그 [2017-05-16]  (0) 2017.05.15
No.005 시맨틱 태그 - 이미지, 비디오, 오디오 [2017-05-12]  (0) 2017.05.12
No.004 HTML5 기본 구조 및 문법의 기초 [2017-05-12]  (0) 2017.05.12
No.003 HTML5와 HTML4.01의 차이 [2017-05-12]  (0) 2017.05.12
Posted by 전설의아이
|

No.005 시맨틱 태그 - 이미지, 비디오, 오디오 [2017-05-12]

Legend 개발자/HTML5 2017. 5. 12. 15:43

5. 시맨틱 태그 - 이미지, 비디오, 오디오

 

1. HTML5 시맨틱 태그(이미지)

 1) 웹 문서와 이미지

 ● 이미지는 몇 가지 정해진 파일 형식만 사용할 수 있음

● 다른 형식의 이미지 파일을 사용하려면 사용 가능한 이미지 파일로 변환이 필요

 ● 웹 페이지에서 사용할 수 있는 몇 가지의 파일 형식만 사용 가능함

 ● GIF

 - Graphic Interchange Form의 약어

 - JPG나 PNG 형식에 비해 파일 크기가 작지만 표시할 수 있는 색상 수가 최대 256가지

 - 웹 페이지에서 아이콘이나 불릿 등 작은 이미지에 주로 사용

 - 투명한 배경이나 움직이는 이미지를 만들 수 있음

 ● JPG/JPEG

 - Joint Photographic Experts Group의 약어

 - 사진을 웹 페이지에 넣기 위해 개발된 형식

 - GIF에 비해 다양한 색상과명함 표현이 가능

 - 디지털 카메라의 저장 파일은 대부분 JPG형식

 ● PNG

 - Portable Network Graphics의 약어

 - 최근에 많이 사용되는 이미지 파일

 - 투명 배경을 만들 수 있고 색상을 최대한 유지

 

 2) <img> 태그와 그에 따른 속성

 ● <img> 태그 : 웹 문서에 이미지를 삽입할 때 사용되는 태그

 - <img> 태그는 인라인 태그로 이미지 바로 옆에 다른 요소가 나란히 배치됨

 - 이미지 삽입한 후 CSS 를 이용하거나 HTML5의 Canvas API를 이용해 이미지를 꾸밈

 - src 속성은 이미지 파일이 있는 경로를 표시하기 위해 반드시 사용해야 함

 - 그 외의 속성은 필요에 따라 생략 가능함

   <img src = 경로" [속성="속성 값"]>

 ● src 속성 : 이미지와 파일 경로를 지정하는 속성

 - 이미지를 웹 문서에 넣으려면 src 속성에 정확한 파일 경로를 지정해야 함

 - 이미지 파일의 경로는 웹 문서 파일의 위치를 기준으로 정해짐

 이미지가 웹 문서의 같은 폴더에 있을 때

 이미지가 웹 문서의 하위 폴더에 있을 때 

 <img src ="test2.png"> 

  <img src = "images/test2.png> 

 ● Width, Height 속성 : 이미지의 크기를 조정하는 속성

 - 이미지 파일을 브라우저 창에 원하는 크기로 조정하여 넣을 때 사용함

 - width, height 속성을 사용하지 않으면 원본 이미지 크기 출력

 ● alt 속성 : 대체 텍스트를 추가해 주는 속성

 - 그림을 내려 받지 않고 문자열만 보여주기 위해 사용

 - 음성 합성 기술을 이용한 스크린리더(또는 Text-to-speech) 소프트웨어에서 사용

 ● title 속성 : 마우스 오버 시 설명 상자를 표시해주는 속성

 - 요소에 숨겨진 뜻을 설명하는 글을 첨부하는 곳에 사용

 

 3) 이미지에 캡션을 붙이기 위한 태그

 ● <figure> 태그 : 캡션 대상을 지정할 때 사용하는 태그

 - 이미지, 다이어그램, 비디오, 텍스트 단락과 같은 멀티미디어 요소를 묶음

 - 태그 안에 <img>,<code>처럼 다른 태그 사용 가능

 <figure>

 캡션을 붙일 요소

 </figure>

 ● <figcaption> 태그 : 캡션 설명을 붙일 때 사용하는 태그

 - 반드시 <figure> 태그 다음에 사용해야 함

 - <figcaption> 없이 <figure> 태그를 사용하는 것은 미디어가 있다는 것을 브라우저에게 알려쥐 위함

 <figcaption>

 내용

 </figcaption>

 ● 이미지 삽입과 이미지 캡션달기 십습 예제

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3g.org/TR/html4/loose.dtd">

 <html>

  <head>

   <meta http-equiv="Content-Type" content="text.html; charset=utf-8">

   <title></title>

  </head>

  <body>

   <header>

    <h1>캡션 삽입하기!!!</h1>

   </header>

    <article>

     <section>

      <figure>

       <img src=:images/test.png width="300" height="150">

       <img src=:images/test.png width="300" height="150">

       <figcaption>

        이미지 2개를 묶어 하나의 캡션으로 표시하였다.

       </figcaption>

      </figure>

      <figure>

       <img src="images/test2.png" width="300" height="150"

       <figcaption>

        이미지 하나에 캡션 1개를 표시

       </figcaption>

      </figure>

     </section>

    </article>

   <br>

   <footer> Copyright &copy; 2015 All rights reserved. <footer>

  </body>

 </html>

 

2. HTML5 시맨틱 태그(비디오, 오디오)

 1) 비디오 태그

 ● <video> 태그 : HTML5에서 손쉽게 웹 문서에 비디오 파일을 삽입할 때 사용하는 태그

 - 여러 가지 속성들을 사용하여 사용자의 요구에 맞게 비디오 표현 가능

 - PC, Mobile 모두 가능

 - 익스플로러 8 이하 버전에서 인식 못함

 - Mobile의 경우 자동재생 지원 안함 

   <video src = "비디오 파일 경로" [속성][속성="속성 값"]

 ● 비디오 태그 속성

 - Src : 비디오 파일의 경로지정

 - Width : 비디오의 너비 지정

 - Height : 비디오의 높이 지정

 - Muted : 음소거

 - Controls : 비디오 재생 도구를 출력할지 지정

 - Autoplay :  비디오를 자동 재생할지 지정

 - Loop : 비디오를 반복할지 지정

 - Preload : 비디오를 재생하기 전에 모두 불러올지 지정

 

 2) 비디오 태그를 활용한 HTML5 시맨틱 태그 실습 

 ● 비디오 삽입하기의 실습 예제 

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3g.org/TR/html4/loose.dtd">

 <html>

  <head>

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>

    </title>

  </head>

  <body>

   <header>

    <h1> 비디오 삽입하기!!! </h1>

   </header>

   <article>

    <section>

     <video src="video/video_test.flv" width = "300" height = "150" controls autoplay loop >

     </video>

    </section>

   </article>

   <br>

   <footer> Copyright &copy; 2014 All rights reserved. </footer>

  </body>

</html>


 3) 오디오 태그

 ● <audio> 태그 : HTML5에서 배경 음악이나 효과음 등 오디오를 삽입할 때 사용하는 태그

 - HTML5에서 추가 됨

 - 여러 가지 속성들을 사용하여 사용자의 요구에 맞게 오디오 표현 가능

 - 여러 개의 오디오 소스를 포함할 수 있음

 <audio src = "오디오 파일 경로"[속성][속성="속성 값"]>

 ●오디오 태그 속성

 - Src : 비디오 파일의 경로지정

 - Controls : 비디오 재생 도구를 출력할지 지정

 - Autoplay : 비디오를 자동 재생할지 지정

 - Loop : 비디오를 반복할지 지정

 - Preload : 음악을 재생하기 전에 모두 불러올지 지정


4) 오디오 태그를 활용한 HTML5 시맨틱 태그 실습

 ● 오디오 삽입하기의 실습 예제

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3g.org/TR/html4/loose.dtd">

 <html>

  <head>

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>

    </title>

  </head>

  <body>

   <header>

    <h1> 오디오 삽입하기!!! </h1>

   </header>

   <article>

    <section>

     <audio src="audio/audio_test.mp3" controls=""autoplay=""loop="">

     </audio>

    </section>

   </article>

   <br>

   <footer> Copyright &copy; 2014 All rights reserved. </footer>

  </body>

</html>

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

No.007 HTML5 추가 태그 [2017-05-16]  (0) 2017.05.15
No.006 시맨틱 태그 - 입력양식 및 공간분할 [2017-05-15]  (0) 2017.05.15
No.004 HTML5 기본 구조 및 문법의 기초 [2017-05-12]  (0) 2017.05.12
No.003 HTML5와 HTML4.01의 차이 [2017-05-12]  (0) 2017.05.12
No.002 HTML5 기초 [2017-05-11]  (0) 2017.05.11
Posted by 전설의아이
|

No.004 HTML5 기본 구조 및 문법의 기초 [2017-05-12]

Legend 개발자/HTML5 2017. 5. 12. 14:54

4. HTML5 기본 구조 및 문법의 기초

 

1) HTML5 엘리먼트의 정의와 특징

 ● HTML5 엘리먼트의 정의

 - HTML 문서의 구성요소 중 하나로 시작태그와 종료태그로 이루어진 모든 명령어들을 의미함

 ● 엘리먼트 구문의 특징

 - 하나의 HTML 엘리먼트는 시작 엘리먼트로 시작하고, 종료 엘리먼트로 끝남

 - 일부 HTML엘리먼트는 빈 콘텐츠를 가질 수 있음

 - 빈 엘리먼트는 시작태그로 종료

 - 대부분의 엘리먼트는 속성을 가짐

 - 대부분의 엘리먼트는 중첩이 가능

 

 2) 엘리먼트와 태그

 엘리먼트

태그 

 HTML을 문서 형식으로 구성할 때 의미를 표현하는 약속된 단어들 

 부등호 기호(<>)로 둘러싸인 엘리먼트의 조합을 부르는 이름 

 Ex) p엘리먼트는 paragraph(문단)에서 img 엘리먼트는 image(이미지)의 뜻을 가진 엘리먼트임 

 Ex) <p>, <img>를 부를 때는 'p' 태그, 'img' 태그라고 함 

 

 3) 엘리먼트의 종류

 ● 블록 레벨 엘리먼트

 - 항상 새로운 줄로 줄 바꿈 하여 표시하는 요소

 - 너비 값은 브라우저 화면에 100% 꽉 차게 표시됨

 ● 인라인 레벨 엘리먼트

 - 같은 줄 안에서 이어서 표시됨

 - 너비 값은 요소가 가지고 있는 값 자체로 표시됨

 ● 블록 레벨 엘리먼트와 인라인 레벨 엘리먼트의 실습 예제

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

                                                        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

해당문서는 xhtml의 형식을 따라서 작성했다는 뜻이다.

  <html xmlns="http://www.w3.org/1999/xhtml">

html인데 소스는 xhtml에서 가져와라 라는 뜻이다.

   <head>

    <meta http-equiv="Content-Type" content="text.html; charset=utf-8" />

내 요청의 컨텐츠(content) 타입은 html이고 문자셋은 utf-8이다

    <title> 무제 문서 </title>

   </head>

   <body>

    <p>문단1</p><p>문단2</p>

    <em>강조1</em><em>강조2</em>

   </body>

  <html>

 

- Tip!!! -

AcroEdit에서 글을 작성한 후 마우스로 드레그를 하면 작성한 글자 수만큼 드레그가 된다.

여기서 Alt + C를 하면 제일 긴 블록과 제일 작은 블록만큼의 영역이 드레그가 된다.

여기서 Shift키 + 방향키를 이용해서 블록의 길이를 설정할 수 있다.

드레그된 블럭 내에서 작성하고 싶은 것을 타이핑 하면 모든 행에 글자가 타이핑 된다. 

 

FTP는 파일 전송 프로토콜이다

File Transport Protocol

 

 4) 추가 및 삭제된 HTML5 엘리먼트

 ● 삭제된 엘리먼트

 <big> 

 큰 글씨 

 <acronym> 

 두문자어

 <center> 

 중앙 정렬 

 <appletr> 

 애플릿 

 <dir>

 파일 목록 

 <basefont>

 기본서체 

 <font>

 글씨 모양 

 <frame> 

 프레임 

 <tt> 

 타이프체 

 <frameset> 

 프레임 셋 

 <u> 

 밑줄 

 <noframes> 

 프레임 미지원 

 <xmp>

 형식화 된 

 <strike> 

 가로줄 

 ● 추가된 엘리먼트

 article, aside, audio, bdi, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, outer, progress, rp, rt, ruby, section, source, summary, time, track, video, wbr

 

2. HTML5 시맨틱 태그

 1) 시맨틱 태그란?

 ● 시맨틱 태그 : 태그 이름만 보고도 역할을 짐작할 수 있는 태그

 ● 시맨틱 태그를 사용하는 이유

 - 검색 엔진에서 쉽게 웹 문서의 내용 검색

 - 웹 보조 기구에서 웹 문서를 정확하게 판독

 - 어떤 장치에서나 똑같은 문서 해석이 가능

 

 2) HTML5 시맨틱 태그 실습

 ● <h> 태그 : 제목을 나타내는 태그로 <h1> ~ <h6>까지의 범위를 가짐

 <head>

  <h1>HTML5 시맨틱 태그 알아보기!! </h1>

 </header>

  <nav>

  <h2> 시맨틱 태그란 무엇인가? </h2>

  <h3> 시맨틱 태그 왜 사용해야 하는가? </h3>

  <h4> 시맨틱 태그 어떻게 사용할 수 있는가? </h4>

  </nav>

● <ol> 태그 : 순서 있는 목록을 만드는 태그로 목록 앞에는 숫자 이외에도 알파벳이나 로마숫자로 나타낼 수 있음

 <ol>

  <li> 하나 </li>

  <li> 둘 </li>

  <li> 셋 </li>

 </ol>

 ● <ul> 태그 : 순서 없는 목록을 만드는 태그

 <ul>

  <li> 바나나 </li>

  <li> 사과 </li>

  <li> 딸기 </li>

 </ul>

 

실습예제1

 <!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">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>무제문서</title>
  </head>
  <body>
    <p>문단1</p><p>문단</p>
    <em>강조1</em><em>강조2</em>
  </body>
</html>

 

실습예제2

 <!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">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
  </header>
  <body>
    <header>
      <nav>
        <h2> 시맨틱 태그란 무엇인가? </h2>
        <h3> 시맨틱 태그 왜 사용해야 하는가? </h3>
        <h4> 시맨틱 태그를 어떻게 사용할 수 있는가? </h4>
      </nav>
    <article>
       <section>
        <ol>
          <li> 하나 </li>
          <li> 둘 </li>
          <li> 셋 </li>
        </ol>
       </section>
       <section>
        <ul>
          <li> 바나나 </li>
          <li> 사과 </li>
          <li> 딸기 </li>
        </ul>
       </section>
       <section>
        <table border="1">(표의 선 굵기를 1로하라)
          <tr>(tr은 행을 뜻한다)
            <th>과목명</th>(th는 컬럼명을 뜻한다)
            <th>시험점수</th>
          </tr>
          <tr>
            <td>영어</td>(td는 데이터를 그냥 넣는다는 뜻이다)
            <td>90점</td>
          </tr>
          <tr>
            <td>수학</td>
            <td>89점</td>
          </tr>
        </table>
      </section>
    </article>
    <br>
    <footer> Copyright &copy; 2014 All rights reserved. </footer>
  </body>
</html>

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

No.006 시맨틱 태그 - 입력양식 및 공간분할 [2017-05-15]  (0) 2017.05.15
No.005 시맨틱 태그 - 이미지, 비디오, 오디오 [2017-05-12]  (0) 2017.05.12
No.003 HTML5와 HTML4.01의 차이 [2017-05-12]  (0) 2017.05.12
No.002 HTML5 기초 [2017-05-11]  (0) 2017.05.11
No.001 HTML5 개요 [2017-05-11]  (0) 2017.05.11
Posted by 전설의아이
|

No.003 HTML5와 HTML4.01의 차이 [2017-05-12]

Legend 개발자/HTML5 2017. 5. 12. 10:34

3. HTML5와 HTML4.01의 차이

 

1. HTML4.01 개요

 1) HTML4.01이란

 ● HTML4.01의 정의

 - 1989년 등장한 HTML의 버전(HTML4.01은 1999년에 등장함)

 - 이전 HTML문서의 개정판으로 이전 버전의 오류 수정 및 신규 기능 추가

 ● 주요 보완된 기능

 - 스타일 시트

 - 스크립트

 - 프레임(HTML5에서는 권장하지 않음, 프레임은 상하좌우영역을 구분해주는 영역임)

 - 테이블(표를 의미한다)

 - 폼(입력양식을 뜻한다 다양한 태그들이 있다)

 

 2) HTML4.01의 특징

 ● 국제화 (문자셋은 브라우저에 다 있다, 다국어를 지원하는 컨텐츠를 작성한다 프레임을 다국어 지원으로 만들어야 한다)

 - 국제화 분야 전문가들의 참여로 전 세계 언어를 모두 수용할 수 있게 됨

 - 문서 검색 엔진, 고급 인쇄술 등의 발달로 효과적인 문서의 색인이 가능

 ● 접속성

 - 개선 된 문서의 구조와 표현의 구분

 - 개선 된 form 기능

 - 새로운 사용자측 이미지맵 기능 :제작자는 이미지와 텍스트를 결합

 - 이미지에 포함 된 대체 문장 표시 기능(비추한다고 한다)

 - 모든 Element에 title과 lang 애트리뷰트 지원 기능

 - 스타일시트에서 사용하는 폭 넓은 목표 미디어

 - 개선 된 표(table) 기능 : 켑션(captioon)(표1-1 표1-2이런것이 켑션이다), 컬러그룹, hidden 기능

 ● 스타일시트

 - 문서 전체의 일관성을 유지할 수 있게 된 건 물론 일일이 스타일을 지정할 필요가 없어짐

 - HTML 작성을 간단히 하고 표현의 신빙성을 향상

 - 제작자와 사용자에게 폰트, 정렬, 색상 등 문서의 표현을 제어할 수 있음

 - 스타일 정보는 개별 Element나 그룹을 구체적으로 정의 가능

 - 스타일 정보는 HTML문서 안에서 또는 외부 스타일시트에서 정의 가능

 ● 스크립트

 - 웹 페이지를 제작하고 HTML 문서를 네트워크 상에서 동작하는 기능(동적인 것을 주로 사용한다고 함)

 ● 기타

 - 표의 구조와 배치에 있어 다양한 제어

 - 이미지, 비디오, 사운드, 수학계산 등의 기능 구현

 - 다양한 포맷의 인쇄 기능

 

 3) HTML4.01에서 권장하지 않는 기능

 ● HTML4.01버전에서는 많은 요소들과 속성들을 권장하지 않고 있음

 ● 스타일 시트 사용으로 인하여 권장되지 않는 요소

 - basefont : 기본 폰트 변경

 - center : 가운데 정렬

 - font : 폰트 변경

 - strike 또는 s : 텍스트에 가운데 선 긋기

 - u : 텍스트에 밑줄 긋기

 ● 대체 요소의 등장으로 권장되지 않는 요소

 - applet : 자바 애플릿(object의 사용)

 - dir : 디렉토리 리스트(ul의 사용)

 - isindex :입력 프롬프트(input의 사용)

 - menu : 메뉴 리스트(ul의 사용)

 

4) HTML4.01 문서 작성의 3가지 원칙

 ● 구조와 표현의 분리 : 문서의 구조와 표현 Element들의 분리

 ● 범용 웹 접속성의 고려 : 모든 사람들이 제한 없이 접근이 가능하도록 하기 위한 작업

 ● 점진적 표현으로 사용도구 돕기 : 사용도구가 문서를 더 빨리 볼 수 있게 하기 위한 표현의 방법(주석 등)

 

5) HTML4.01 문서타입의 규칙

 ● <html> 엘리먼트 - 모든 웹 페이지는 DOCTYPE으로 시작하고, 바로 그 다음에 오는 <html> 엘리먼트 웹 페이지의 가장 상위 혹은 루트 엘리먼트가 되어야 함

 - <html> 태그로 페이지를 시작해서</html>태그로 페이지를 끝내야 함

 ● <head> 와 <body> 는 반드시 사용

 - 오직 <head>와 <body> 만 <html> 엘리먼트 안으로 곧바로 들어갈 수 있음

 ● <head> 엘리먼트

 - 항상 <head> 엘리먼트에는 <title> 엘리먼트를 넣어야 함

 - <head> 엘리먼트는 <title>,<meta>(문자셋을 지정할 때 사용한다)<style> 엘리먼트를 넣을 수 있는 유일한 장소

 ● <body> 엘리먼트

 - 곧바로 <body> 엘리먼트로 넣을 수 있는 것은 오직 블록엘리먼트들(<h1> ~<h6>(글자 크기를 뜻함), <p>) 등 뿐임

 ● 블록엘리먼트는 인라인 엘리먼트 밖에 배치

 - 인라인 엘리먼트 안에는 반드시 인라인 엘리먼트 및 텍스트만 들어올 수 있음

 - 인라인 엘리먼트안에 블록 엘리먼트는 들어올 수 없음

 ● 리스트는 리스트 항목만 자식으로 포함

 - <ol>과 <ul0>의 자식으로 오직 <li> 엘리먼트만 사용될 수 있음

   <ol> = order list 순서가 이는 목록

   <ul> = un list 순서가 없는 목록

 ● <li> 엘리먼트에는 무엇이든 넣을 수 있음

 - 텍스트, 인라인, 블록 엘리먼트 등 타입의 구분업싱 삽입 가능

 

2. HTML5와 HTML4.01 차이점

1) Contents Model (컨텐츠의 유형, 배치를 어떻게 하는지를 결정함)

 ● Contents Model의 정의

 - HTML 문서작성의 큰 구조

 - 어떤 요소가 어떤 콘텐츠 또는 요소를 포함할 수 있는지에 관한 정의

 ● HTML5 기존보다 더 Sementic한 웹 구성이 가능

Contents Model 

<Header>

… (머리말)

</Header>

 <article>

…

</article>

 <Footer>

… (꼬리말)

</Footer>

 

 2) Syntax(구문) (문법이라는 뜻이다)

 ● DOCTYPE : HTML문서라면 최상단에 반드시 넣어야 함(Enter-개행문자도 들어가면 안됨)

    HTML5 문법을 따르도록 작성 된 문서임을 확인

 

 <!DOCTYPE html>

  <html>

   <head>

    <meta charset="UTF-8(다국어지원)"> UEC-KR(한글전용)

     <title>HTML5 Basic <title>

   </head>

   <body>

    <h1>HELLO HTML!!!!!!</h1>

   </body>

  </html>

 

3) Language(언어)

● 새롭게 추가된 Element(Semantic적인 요소 중심의 Element)

 Element 

 설명

 Header

 문서의 Header를 나타낼 때 사용 (머리말)

 Footer

 문서의 Footer를 나타낼 때 사용 (꼬리말)

 Nav

 문서 내에 Navigation 요소가 있을 때 사용 

 (메뉴>페이지>페이지 요즘은 거의 필수요소)

 Section 

 문서의 영역을 구성하며, 문서 구조를 구성하는 H1~H6 와 함께 사용 

 (영역을 지정, 단락이 곧 Section이다)

 Article 

 뉴스기사나 블로그 article과 같은 독립된 Contents를 표시할 때 사용 

 (만들어 놓으면 다른 사람들이 사용할 수 있다)

 Aside 

 주요 컨텐츠 이외의 참고가 될 수 있는 컨텐츠를 구성할 때 사용 

 (핵심적인 영역, side contents)

 Hgroup 

 각 Section의 Header를 나타낼 때 사용

 (단락들을 묶어서 제목을 표시하는 것)

 Figure 

 그림, 비디오와 같은 포함된 컨텐츠의 Caption을 표시할 때 사용 

 (문서를 작성할 때 도식을 표현할 때 사용)

 Figcaption 

 캡션에 사용

 (표1-1 표1-2 와같은 것을 표현할 때 사용)

 ● 새롭게 추가된 Element(Sementic적인 요소 이외의 Element)

 Element

설명

 Audio, Video

 HTML 5 Element 중 관심이 집중되는 Element 중 하나, 멀티미디어 컨텐츠를 표시하는데 사용 

 Embed 

 Plugin 컨텐츠를 표시할 때 사용 

 (API같은 것 Flash를 표현할 때 사용하는 것)

 Mark 

 별도로 표시한 문자를 표시하는데 사용 

 Progress 

 Progress 작업 진행 상황을 나타낼 때 사용  

 Meter

 Meter 측정 값을 표시할 때 사용 

 Time 

 Time 날짜, 시간을 표시할 때 사용 

 Ruby, rt, rp 

 Ruby, rt,rp Ruby 언어를 나타낼 때 사용 

 Bitmap

 Graphic 을 표시할 때 사용

 (Bitmap 방식 & 벡터 방식)

 Command 

 사용자가 호출할 수 있는 명령어를 표시하는데 사용 

 Details 

 사용자 요청에 따라 얻은 콘트롤이나 추가적인 정보를 표시하는데 사용 

 Datalist

 List Attribute 와 함께 사용하여 ComboBox를 만들 때 사용 

 Keygen

 키쌍(Key pair)을 생성할 때 사용 

 Output 

 스크립트 계산 결과 같은 실행결과를 표시하는데 사용

 ● 새롭게 추가된 Attribute(속성)

 Attribute

 설명

 contenteditable

 편집 가능한 구역 임을 나타냄 

 contextmenu 

 작성자가 제작한 Context Menu 지정하는데 사용

 data-* 

 접두사 "data-*"를 가진 속성으로 추후 HTML 버전 충돌 없이 사용자 태그로 이용하거나 추후 브라우저가 지원하게 되었을 때 사용 

 draggable 

 새로운Drag & Drop(마우스로 드래그하고 드롭하는 것을 뜻함) API에서 사용 

 hidden

 element가 아직 없거나 없을 때 사용 

 role, aria-*  

 보조기능에 가리키는데 사용 

 spellcheck 

 맞춤법 검사기능을 제공할지 여부를지정 

 ● 변경된 Element

 Element

설명 

 A

 href 속성이 없이 사용하면 "placeholder link"를 나타냄

 address(주소)

 sectioning의 새로운 개념으로 범위를 나타냄

 B

 문자열 강조 뿐만 아니라 제품소개 중 제품명키워드 같이 특별히 중요하지는 않으나 일반적으로 강조하기 위해 사용 

 Hr  

 단락 수준의 주제 바꿈에 사용 

 I

 기존 기능처럼 문자의 기울임 뿐 만 아니라 음성, 분류명, 기술용어, 다른 언어의 숙어구, 생각, 등을 표현 

 label Focus

 기본 플랫폼 User interface 표준이 아닐 경우 Label 에서 Control로 이동시키면 안됨 

 Menu

 툴바와 Context Menu 용으로 사용 

 Small

 세부 주석과 법적 인쇄물 같은 작은 인쇄를 나타낼 때 사용 

 strong 

 기존Strong 의 기능보다 더 중요한 것을 표시할 때 사용 

 img 의 border 

 border 값은 0일 때만 사용하고 CSS 사용 가능 

 a 의 name

 name 속성을 id 속성으로 바꾸어 사용 가능 

 table의 summary 

 다른 대안을 정의하는 중 

 script의 language

language 값은 JavaScript 에만 사용하고 type 속성과 함께 쓰지 않고 생략가능 

 

 4) API

 ● API의 정의

 - Application Programing Interface

 - 운영체제와 응용프로그램 사이의 통신에 사용되는 언어나 메시지 형식

 

 

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

No.006 시맨틱 태그 - 입력양식 및 공간분할 [2017-05-15]  (0) 2017.05.15
No.005 시맨틱 태그 - 이미지, 비디오, 오디오 [2017-05-12]  (0) 2017.05.12
No.004 HTML5 기본 구조 및 문법의 기초 [2017-05-12]  (0) 2017.05.12
No.002 HTML5 기초 [2017-05-11]  (0) 2017.05.11
No.001 HTML5 개요 [2017-05-11]  (0) 2017.05.11
Posted by 전설의아이
|

No.002 HTML5 기초 [2017-05-11]

Legend 개발자/HTML5 2017. 5. 11. 20:29

2. HTML5 기초


1. HTML과 XHTML

 1) HTML 정의와 특징

 ● HTML의 정의

 - Hyper Text Markup Language의 약어

 - Hyper Text 기능을 포함한 텍스트와 이미지 등을 웹 브라우저에 표시하는 역할을 함


 ● HTML의 특징

 - 웹 문서의 표준 포맷

 - Markup 언어 (프로그램 수준이 아닌 Checking 하는 수준, 바이너리 파일 =dll, exe같은 파일)

 - ASCII코드로 구성된 일반적인 텍스트 파일

 - 컴퓨터 시스템이나 운영체제에 독립적

 

 2) HTML의 구성요소

 ● 요소(Elements) : HTML에서 시작 태그와 종료 태그로 이루어진 모든 명력어들

 ● 태그(Tag) : 요소의 하나로서 시작태그와 종료태그로 나뉨

   <p> 대한민국 파이팅 </p>

   <p> : 시작태그   </p> : 종료태그

 ● 속성(Attributes)

 - 조금 더 구체화된 명령어로서, 요소의 시작태그 안에서 사용

 <p align="center"> 대한민국 파이팅 </p>

 시작태그 안에 "중앙정렬" 속성을 사용하여 문장을 가운데로 정렬

 ● 변수(Arguments)

 - 속성과 관련된 값을 의미함

 <p align="center"> 대한민국 파이팅 </p>

 속성을 align으로 정의하였고, 속성에 대한 변수로 center를 사용

 

3) XHTML이란?

 ● XHTML : eXtendible HyperText Markup Language의 약어로 HTML을 대체하기 위한 목적으로 만들어진언어

 ● XHTML의 주요 특징

 - 종료태그가 없는 빈(empty)태그는 스스로 종료함

 - 빈 태그를 제외한 모든 태그는 반드시 종료태그를 사용해야 함

 - 코드를 작성할 때 소문자로 입력

 - 속성태그를 사용했다면 반드시 값을 입력해야 함

 - 속성값은 반드시 " " 안에 작성

 ● XHTML을 사용해야 하는 이유

 - 호환성 및 확장 가능성

 - 유지 비용의 감소 및 재생산성 확대

 - 경량화를 통한 로딩 속도 햐상

 

4) HTML/XHTML 기본구조

 - 기본적인 구조는 동일하나 문법에서 약간의 차이점이 있음

 HTML/XHTML 문서 구조

 HTML문서

 Head

 Body

 

5) HTML과 XHTML의 차이점

 구분

 HTML

XHTML 

종료태그 

종료태그가 없는 것을 허용 

반드시 종료태그를 사용해야 함 

잘못된 중첩 

이상 없음 

직접적인 영향을 미침 

소문자 표기 

대소문자 구분 안 함 

대소문자 구분 

속성값의 따옴표 

사용하지 않아도 됨 

반드시 따옴표를 사용해야 함 

속성 값의 단축 표기 

허용 

허용하지 않음 

 

6) XHTML 일반 문법 준수

 ● 정확한 문서 구조 준수 : 문서의 루트 요소는 HTML이 되어야 하며, 이 HTML요소는 XHTML 네임 스페이스를 지정해야 함

 ● 모든 요소는 완벽하게 중첩되어야 함 : 모든 요소들이 완벽하게 내포 되어야 하는 것은 필수적이나, 중첩이 부적합함에도 불구하고 기존 웹 브라우저들에게는 관대하게 사용되기도 함

 ● 모든 속성 값은 인용 부호(" ")로 묶여야 함: 코드를 생성하거나 XHTML을 정리할 때 코드에서 속성 값을 인용 부호(" ")로 묶음

 ● 모든 요소와 속성은 소문자만 사용 : HTML 요소 및 속성의 이름을 소문자로 강제 설정

 ● 모든 요소는 닫아야 함 : 모든 요소에는 종료 태그가 포함되어야 함

 ● 모든 속성값은 속성이 함께 선언 : 모든 속성은 최소화되어 표기 되면 안됨

 ● 모든 script 및 style 요소에는 type 속성이 포함된 : HTML 4 이후로는 script 요소의 type 속성을 반드시 지정해야 함

 ● 모든 img 및 area 요소에는 alt 속성이 포함 : 코드를 생성하거나 XHTML을 정리할 때 코드에서 이들 속성을 결정

 

2. HTML5 표준문서

 1) HTML5란?

 ● HTML5의 정의

  - HTML의 기본 기능을 넘어 다양한 콘텐츠(콘텐츠는 본문 내용이라는 뜻이다. 텍스트 콘텐츠, 미디어 콘텐츠, 정적 콘텐츠 - 안내 개요가 정적 콘텐츠이다 동적 콘텐츠 - 조건에 따라 보여주는 내용이 바뀌는 콘텐츠 등이 있다)와 어플리케이션(응용 프로그래밍이라는 뜻이다)을 브라우저에 표현하고 실행하기 위해 만들어지고 있는 언어

  - 확장 가능한 형태의 HTML

 CSS + HTML + JavaScript

 CSS : 디자인 표현 및 관리적인 요소 

 HTML : 기본골격

 JavaScript : 프로그래밍적 요소

 

 2) HTML5의 등장 배경

 ● HTML5가 등장하게 된 가장 큰 이유 : 모바일 인터넷의 확장

 ● 기존 HTML의 한계

 - 다양한 서비스를 제공함과 동시에 많은 기능을 추가할 수 없는 상황

 - 다양한 스마트폰마다 웹 브라우저가 다름

 ●웹 사이트의 시대, HTML과 WAP → 웹 서비스의 시대 → 웹2.0 웹플랫폼 시대 → 웹 앱의 시대 모바일과N-Screen 시대

 

 3) HTML5의 주요 특징

 ● 임베디드 오디오 및 비디오 지원

 - 여러 종류의 디바이스에서 오디오 및 비디오를 실행할 수 있는 환경을 마련

 ● 미디어 쿼리(Media queries)

 - 스크린 사이즈(뷰포인트), 방향 또는 해사도를 기반으로 페이지에 특정 Style Sheet를 적용하기 위한 사용하는 명세

 - 스크린 사이즈, 해상도 등에 따라 CSS 코드를 분기하여 최적화된 UX(User Experience. 사용자 경험 - 사용자가 어떤 형태를 좋아한다를 파악하는 것 주로 UX보다는 UI/UX를 많이 사용한다) 제공

 ● CSS3(3은 3.0버전을 뜻한다)

 - 모듈 기반으로 개발되고 있으며 구현이 쉬움

 - 그래픽 효과를 가지는 모듈이추가되어 있음(모듈을 잘 만들어 놓으면 모듈을 복붙하여 쉽게 만들 수 있다)

 - 각종 효과를 제공해주어 포토샵과 자바스크립트및 서버측 기술에 일부를 대체

 (각 모듈에 맞춰서 보여주는 정보와 안 보여주는 정보를 자동으로 설정할 수가 있음)

 ● 위치정보(Embedded geolocation)

 - HTML5에서는 별도의 IP위치정보 서비스를 이용하지 않고도 위치 정보를 파악할 수 있음 - 브라우저가 IP 주소 또는 주위의 무선 공유기 정보 등을 파악하여 제공하기 때문

 ● 캔버스(Canvas drawing)

 - 브라우저에서 2D 그래픽을 지원하는 기능으로 SVG와는 다르게 픽셀 단위로 2D 그래픽을 그릴 수 있는 기능

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

No.006 시맨틱 태그 - 입력양식 및 공간분할 [2017-05-15]  (0) 2017.05.15
No.005 시맨틱 태그 - 이미지, 비디오, 오디오 [2017-05-12]  (0) 2017.05.12
No.004 HTML5 기본 구조 및 문법의 기초 [2017-05-12]  (0) 2017.05.12
No.003 HTML5와 HTML4.01의 차이 [2017-05-12]  (0) 2017.05.12
No.001 HTML5 개요 [2017-05-11]  (0) 2017.05.11
Posted by 전설의아이
|

No.001 HTML5 개요 [2017-05-11]

Legend 개발자/HTML5 2017. 5. 11. 19:42

1.HTML5 개요


1. 웹 표준의 기본지식

 1) 웹의 역사

 ● 초창기 웹

 - 목적 : 인터넷을 통한 정보(문서형태) 공유

 - 네트워크 속도, 서버, PC 사양 등에 따라 제약을 받음

 - 표현 범위 : 텍스트, 이미지

 - HTML의 태그 등을 이용하여 데이터의 구조를 명기

 - 웹문서를 위한 마크업 언어 수준

 

 ● 현재 웹

 - 네트워크 속도, 서버, PC 사양 등의 제약 사항이 완화됨

 - 표현 범위 : 텍스트, 이미지, 비디오, 음성 등


 ● HTML5의 가치

 - 시장의 요구(Market Demand)

 - 비용절감의 효과

 - 네이티브 앱 개발 대비 생산성의 증대


 2) 브라우저 전쟁

 ● 브라우저 전쟁 : 웹 브라우저 시장에서 웹 브라우저들이 점유율 경쟁을 하는 것


 ● 1차 브라우저 전쟁

 - 1990년대 후반 Netspace사의 Netscape Navigator와 Microsoft사의 Internet Explorer의 사용자 확보 경쟁(Internet Explorer의 완승)

 - 점유율을 높이기 위해 W3C 규정을 무시한 기능 구현 기술 확산
   (Active-X, Plug-in, javascript 등 동적 기술의 출현)


 ● 2차 브라우저 전쟁

 - Internet Explorer의 보안 문제 발견(RSS리더/탭브라우저 기능의 취약성)

 - Firefox 및 Chrome 등 웹 표준을 기반으로 하는 브라우저 등장

   (W3C가 권고하는 웹 표준에 부합하는 Firefox가 Internet Explore에 비해 우위)

 - 전 세계적으로 IE 점유율이 지속적으로 낮아지고 있으며(약 80% → 28.96%), Chrome(40.44%), Firefox(25%) 등은 빠른 속도로 늘고 있음.

 - 스마트 폰을 비롯한 MID 기기의 등장으로 인한 다양한 웹 브라우징 환경 확산


 3) 웹 표준

 ● 웹 표준 : 다양한 접속환경을 가진 인터넷 사용자들이 정보에 소외되지 않고, 동등하게 정보를 이용할 수 있도록 표준에 따라 웹을 개발하는 것 또는 웹을 구현하는데 있어 표준으로 사용되는 지침과 기술방식의 집합


 ● 웹 표준의 특징

 - 제공하는 정보를 모든 사람이 접근하여 보다 빠르고 즐겁게 웹 개발이 가능

 - 웹을 이용하기 위해서 특별한 요구를 갖는 사람들이 보다 쉽게 웹을 이용할 수 있음

 - 보편적인 웹 표준을 유지함으로써 기술개발에 따른 상위호환성을 확보할 수 있음


 ● 웹 접근성 : 신체적, 환경적 조건에 관계없이 인터넷에 접속하여 웹 서비스를 이용할 수 있어야 한다는 것(장애인차별금지법)


 4) W3C(World Wide Web Consortium)

 - 1994년 10월 웹의 창시자인 팀 버너스 리를 중심으로 창립된 국제 컨소시엄

 - 웹을 위한 표준을 개발하고 장려하는 조직

 - 웹사이트에서 HTML, XML, CSS 등의 웹 기술과 운영방식에 대한 정보를 제공


 5) 웹 표준 도입의 효과

 ● 비즈니스적 분석

 - 버전관리 및 유지보수의 용이성

 - 넓은 확장성과 신기술 도입이 용이

 - 더 넓은 사용자층 확보


 ● 접근성 분석

 - 멀티 브라우징 가능

 - 멀티 플랫폼

 - 다양한 사용자의 접근 가능


 ● 개발 지향적 분석

 - 트래픽 컨트롤

 - 확장성 및 신기술 도입 용이


 ● 디자인 지향적 분석

 - 수정/변경의 자유로움

 - 디자인 기간 단축


 6) 웹 2.0

 - 개방과 참여, 공유로 대표되는 인터넷 환경

 - 가벼워진 웹 S/W와 풍부한 사용자 경험이 바탕

 - 참여구조에 의한 네트워크 효과


 7) HTML5가 주목 받는 이유

 - 애플사 사례 : Flash 기술을 버리고 HTML5기술을 선택

 - 구글 사례 : Google Gears 개발 중단하고 HTML5로 방향 전환


2. 웹 개발 방법론의 이해

 1) 웹 개발 방법의 종류

 네이티브 앱 → 모바일 웹 → 하이브리드 앱


 2) 정의

 ● 네이티브 앱

 - 보편적으로 지칭하는 모바일 애플리케이션

 - 특정한 플랫폼에서만 작동되는 앱 Ex) 아이폰 앱을 안드로이드 폰에서는 실행 불가

 - App Store에서 판매, 배포가 이루어 짐


 ● 모바일 웹

 - PC용 사이트의 구성을 모바일에 맞추어 표현한 웹

 - 스마트 디바이스에 최적화 된 홈페이지


 ● 하이브리드 앱

 - 웹 앱과 네이티브 앱이 융합된 방식

 - 내부 : 앱(App) → 웹 기술을 이용하여 개발

 - 외부 : 웹(Web) → 플랫폼에 맞게 컴파일


 3) HTML5의 설계원칙

 ● 호환성(Compatibility)

 - 콘텐츠의 호환성 : HTML5 이전 버전으로 제작한 콘텐츠가 문제없이 구동되어야 함

 - 이전 브라우저와의 호환성 : HTML5 가 지원되지 않는 이전 버전의 브라우저에서도 이용할 수 있어야 함

 - 기능의 재사용 : 각 브라우저사들이 각자 브라우저에 구현해 놓은 서로 다른 기능들을 HTML5라는 이름 아래 공통된 사양으로 정의하여 브라우저들간의 호환성을 가져야 함

 - 이용방법의 호환성 : 기존에 사용하던 HTML Tag의 사용법을 그대로 사용할 수 있어야 함

 - 혁신보다는 발전을 우선함 : HTML5의 Version UP은 새로운 MarkUP Language를 구현하는 것이 아닌 기존에 존재하던 HTML을 개량하는 것


 ● 실용성(Utility)

 - 웹 현장에서 필요로 하는 것들을 중점적으로 진행

 - 우선순위 : 사용자 → 개발자 → 브라우저 개발자 → 사양서 → 이론상의 순수함

 - 보안성을 고려하여 새로운 사양을 개발


 ● 상호운용성(Interoperability)

 - 웹 개발자가 브라우저의 차이를 의식하지 않더라도 HTML5를 적용한 브라우저라면 똑같이 동작하도록 가능한 쓸데없이 복잡한 것들을 없애야 하는 원칙


 ● 보편적 접근성(Universal Access)

 - 다양한 조건의 환경 : 신체적 조건부터 외부 환경까지의 포함됨

 - 다양한 장치 : 하드웨어와 소프트웨어를 포함 ex) 데스크 탑 환경의 웹 브라우징 장치, 모바일 기기, 장애인들이 사용하는 보조기 등

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

No.006 시맨틱 태그 - 입력양식 및 공간분할 [2017-05-15]  (0) 2017.05.15
No.005 시맨틱 태그 - 이미지, 비디오, 오디오 [2017-05-12]  (0) 2017.05.12
No.004 HTML5 기본 구조 및 문법의 기초 [2017-05-12]  (0) 2017.05.12
No.003 HTML5와 HTML4.01의 차이 [2017-05-12]  (0) 2017.05.12
No.002 HTML5 기초 [2017-05-11]  (0) 2017.05.11
Posted by 전설의아이
|

티스토리툴바