[HTML5] 먼저 간단한 HTML 5 예제를 보자.

홈페이지제작/HTML 2017. 11. 6. 09:18

 


1. Syntax

먼저 간단한 HTML 5 예제를 보자.

<!DOCTYPE HTML><html>
  <head>
    <meta charset="UTF-8">
    <title>HTML 5 예제</title>
  </head>  <body>
    <!-- 아시다시피 여기서부터 Body Contents 가 들어가겠죠? -->
    <p>안녕하시렵니까? HTML 5?</p>
  </body>
</html>

 

위에서 부터 한번 쭈욱 훑어보면 알 수 있으리라...


1-1. DOCTYPE

 

먼저 DOCTYPE 을 볼 수 있다.
너무도? 간결하지 않은가?
HTML 5 문서라면 최상단에(Enter-개행문자 도 들어가면 안된다.) 반드시 넣어줘야한다. ^^
DOCTYPE 은 "HTML" 과 "XHTML" 두가지가 있다.
HTML 5 문서를 작성할 때 HTML 로 작성할지, XHTML 로 작성할지 첫부분에 선언해 준다는 것으로 HTML 문법을 따르도록 할 것인가? 아니면 XML 문법을 따르게 할 것인가 를 결정하는 것이라고 보면 되겠다.
참고로 HTML 5 가 따르는 HTML 문법을 "HTML5", HTML 5 가 따르는 XML문법을 "XHTML5" 라 부른다.

위 문서는 "탁" 보면 "착" 알수 있듯이.
HTML5 문법을 따르도록 작성할 것이라는 것을 알 수 있다.


1-2. Encoding

그 다음 보이는 것이 Charset. 바로 Encoding  에 대한 사항이다.
기존 HTML 문서에서 볼 수 있는

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
와는 다르게

<meta charset="UTF-8">


무척이나 간단해진 것을 알 수 있을 것이다.

1-3.  SVG, MathML
그리고 아래 글상자와 같이 HTML 문서안에 SVG 나 MathML 을 사용할 수 있다.


<!doctype html>
<title>SVG in text/html</title>
<p>
 A green circle:
 <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>
</p>


(참고 : http://www.w3.org/TR/2010/WD-html5-diff-20100304/)


흠... 그리고...
Tag 이름은 XHTML Type으로 작성하든 HTML Type 으로 작성하던간에 대소문자를 가리지 않는다는 점...

이 정도면... 될 것 같은데... 또 필요한 사항이 있으면 추후에... ^^;

 

2. Language

오호~~ 이제 본격적으로 HTML 4 와 HTML 5 간의 특징들을 살펴보겠다.
새로 만들어진 Element와 Attribute, 변경된 Element 와 Attribute, 없어져 버린 Element 와 Attribute 등으로 나눠서 알아보자.

 

2-1. 새롭게 추가된 Element
이번에 추가된 Element 에는 특히나 Sementic 요소들이 많이 추가가 되었다.
아래 표는 이번에 추가된 Sementic Element 들이다.


Element

설명

 Header  문서의 Header 를 나타낼 때 사용한다.
 Footer  문서의 Footer 를 나타낼 때 사용한다.
 Nav  문서내에 Navigation 요소가 있을 때 사용한다.
 Section  문서의 영역을 구성하며, 문서 구조를 구성하는 H1~H6 와 함께 사용한다.  
 Article  뉴스기사나 블로그 article 과 같은 독립된 Contents 를 표시할 때 사용한다.
 Aside  주요 컨텐츠 이외의 참고가 될 수 있는 컨텐츠를 구성할때 사용한다.
 Hgroup  각 Section 의 Header 를 나타낼때 사용한다.
 Figure  그림, 비디오와 같은 포함된 컨텐츠의 Caption 을 표시할때 사용한다.
 Figcaption  캡션에 사용한다.

 

직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면  

아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사)

 

저작자표시

'홈페이지제작 > HTML' 카테고리의 다른 글

HTML5 텍스트 태그 (<strong>~</strong>, <b>~</b>, <em>~</em>, <i>~</i>)  (0) 2017.11.11
HTML5 텍스트 태그 (<pre>~</pre> 외 기타 텍스트 관련 태그들)  (0) 2017.11.11
[HTML5] HTML5 목록을 만드는 태그 (<ul>~</ul>, <li>~</li>, <dl>~</dl>  (0) 2017.11.03
[HTML5 ] 텍스트 태그 (<pre>~</pre> 외 기타 텍스트 관련 태그들)  (0) 2017.11.03
HTML5 텍스트 /<p>~</p>, <br>에 관해서  (0) 2017.10.30
블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

[HTML5 ] 텍스트 태그 (<pre>~</pre> 외 기타 텍스트 관련 태그들)

홈페이지제작/HTML 2017. 11. 3. 10:52

 

[HTML5 ] 텍스트 태그 (<pre>~</pre> 외 기타 텍스트 관련 태그들)


<pre>~</pre>와 이 태그 안에 같이 사용되는 몇개의 태그를 설명 드리겠습니다.

1. <pre>~</pre>

이 태그는 html에서는 몇개의 공백을 넣더라도 브라우저 창에서는

한 개의 공백만을 표시하게 됩니다.

하지만 <pre>~</pre>이 태그를 사용할 경우 소스에 표시한 그대로

​공백이 브라우저에 그대로 표시가 되기 때문에

이 태그는 프로그램 소스를 표시할 때 사용합니다.


2. <pre>~</pre> 태그 안에서 같이 사용되는 태그

(1) <kbd>~</kbd>

 이 태그는 키보드 입력이나 음성 명령과 같이

 사용자 입력 내용을 표시할 때 사용하는 태그입니다.


(2) <code>~</code>

 이 태그는 파일 이름이나 컴퓨터 프로그램 등

 컴퓨터가 인식할 수 있는 소스를 표시하는 태그입니다.


(3) <samp>~</samp>

 이 태그는 프로그램 처리 결과를 표시하는 태그입니다.


(4) <sup>~</sup>

 이 태그는 수학 식을 표현할 때 텍스트에 위 첨자를 표현하는 태그입니다.


(5) <sub>~</sub>

 이 태그는 수학 식을 표현할 때 텍스트에 아래 첨자를 표현하는 태그입니다.


(6) <s>~</s>

 이 태그는 문서에서 특정 텍스트를 제거한다는 의미로 취소선을 그리는 태그입니다.

 

 

직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면  

아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사)

(회원가입을 하시면 편리한 시간에 자세히 설명해드립니다)

 

저작자표시

'홈페이지제작 > HTML' 카테고리의 다른 글

[HTML5] 먼저 간단한 HTML 5 예제를 보자.  (0) 2017.11.06
[HTML5] HTML5 목록을 만드는 태그 (<ul>~</ul>, <li>~</li>, <dl>~</dl>  (0) 2017.11.03
HTML5 텍스트 /<p>~</p>, <br>에 관해서  (0) 2017.10.30
[HTML5 기초] 4.1 HTML5 텍스트 태그 학습  (0) 2017.10.28
HTML5 표 관련 태그  (0) 2017.10.27
블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

HTML5 표 관련 태그

홈페이지제작/HTML 2017. 10. 27. 13:09

 

오늘은 HTML5 표 관련 태그

<caption>~</caption>과 colspan, rowspan 속성

그리고 scope 속성에 대해서 설명 드리겠습니다.


1. <caption>~</caption>

이 태그는 표에 제목을 붙이는 태그입니다.


위의 사진의 빨간 박스안에 처럼

<table>~</table>태그 안에

<caption>~</caption> 태그를 작성 하시고

그 사이에 원하는 제목을 입력하시면 됩니다.


2. colspan 속성

이 속성은 <table>~</table>을 이용해서

작성된 표의 열을 합치는 속성입니다.


<td colspan="합칠 열의 개수">~</td>,

<th colspan="합칠 열의 개수">~</th>

 

3. rowspan 속성

이 속성은 <table>~</table>을 이용해서

작성된 표의 행을 합치는 속성입니다.


<td rowspan="합칠 행의 개수">~</td>,

<th rowspan="합칠 행의 개수">~</th>


위의 사진에서

1번은 rowspan 속성을 이용해서 표의 열을 합쳐 준것이고

2번은 colspan 속성을 이용해서 표의 행을 합쳐 준것입니다.


4. scope 속성

이 속성은 <th>~</th> 태그에 사용되는 속성으로

화면 상으로는 아무 변화가 없지만

셀의 제목이 어디까지 영향을 미치는지 지정을 해주어서

웹 브라우저가 표의 내용을 정확하게 이해할 수 있도록 하기 위한 것입니다.


<th scope="속성값">~</th>

 

 row
 
 <th> 태그가 있는 행의 나머지 셀에 적용
 

 col
 
 <th> 태그가 있는 열의 나머지 셀에 적용
 

 rowgroup
 
 <th> 태그가 있는 행 집합의 나머지 모든 셀에 적용
 

 colgroup
 
 <th> 태그가 있는 열 집합의 나머지 모든 셀에 적용
 

 auto
 
 소스를 기본으로 해서 <th> 셀에 적용

 

 

직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면  

아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사)

(회원가입을 하시면 편리한 시간에 자세히 설명해드립니다)

저작자표시

'홈페이지제작 > HTML' 카테고리의 다른 글

HTML5 텍스트 /<p>~</p>, <br>에 관해서  (0) 2017.10.30
[HTML5 기초] 4.1 HTML5 텍스트 태그 학습  (0) 2017.10.28
HTML5 문서의 기본 구조  (0) 2017.10.26
HTML5의 이해 -2  (0) 2017.10.25
HTML 5 는 HTML 보다 훨씬 더 Sementic 한 Web을 구성  (0) 2017.10.25
블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

HTML5 문서의 기본 구조

홈페이지제작/HTML 2017. 10. 26. 13:36

HTML5 문서의 기본 구조

 


오늘은 HTML5 문서의 기본 구조에 대해서 포스팅합니다.


1. <!doctype html>

    문서 유형을 지정하는 태그 입니다.

    HTML 문서를 작성하실때 맨 처음으로 적어주시는 태그 입니다.

    지금부터 작성하는 문서는 HTML5를 이용해서 작성할테니

    ​그 유형에 맞게 해석을 하라고 컴퓨터에게 알려주는 태그입니다.

2. <html> ~ </html>

    문서 작성의 시작과 끝을 알려주는 태그 입니다.

       ​문서를 작성하실 때 <html>~</html>사이에 작성하셔야

    제대로 된 결과를 얻으실수 있습니다.

3. <head> ~ </head>

    웹 브라우저 화면에 드러나지 않지만

    웹 브라우저가 알아두어야 할 정보들을 이 태그 사이에 작성하셔야 합니다.

​

​    예를 들어서 위에 태그 중에서

   <meta charset="utf-8">이라는 태그는 문자 인코딩을 지정하는 것입니다.

   한글과 영문 등 언어들을 웹브라우저에 나타내는데

   문자 인코딩 방법이 각자 틀리기 때문에 글자가 깨지지 않고

   화면에 잘 나타나게 하기 위해서 utf-8이라는 인코딩 방법을 지정해 준것입니다.

   이것을 제외 하고도 각자 언어에 맞는 다른 인코딩 방법이 있으며

   인코딩 말고도 문서의 키워드나 요약 정보들도 지정할 수도 있습니다.

   그리고 <title>~</title>라는 태그는 문서 제목을 지정하는 태그입니다.

   아래 사진은 위에 HTML문서를 실행 했을 때 나타나는 화면이고

   빨간 박스가 있는 곳이 <title>~</title>라는 태그를 이용해서

   문서 제목을 지정하는 부분입니다.


​4. <body>~</body>

   이 태그는 실제 브라우저에 표시된 내용을 입력하는 공간 입니다.

   앞으로 HTML에 대해서 배우게 될 대부분의 태그들은 이 사이에서 사용됩니다.


   예를 들어서 위에 쓰여진 태그들만 간단히 설명드리겠습니다.


(1)  <center><h1>화이팅!!</h1></center>

     이 곳에서 사용되어진 태그는 2가지 입니다.

    
     <center>~</center>

     이 것은 사이에 쓰여진 글을 중앙에 배치시키는 태그입니다.

     <h1>~</h1>

     이 태그는 글자의 크기를 지정하는 태그입니다.

(2) <hr>

     이 태그는 줄을 그어주는 태그입니다

 

직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면  

아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사)

 

저작자표시

'홈페이지제작 > HTML' 카테고리의 다른 글

[HTML5 기초] 4.1 HTML5 텍스트 태그 학습  (0) 2017.10.28
HTML5 표 관련 태그  (0) 2017.10.27
HTML5의 이해 -2  (0) 2017.10.25
HTML 5 는 HTML 보다 훨씬 더 Sementic 한 Web을 구성  (0) 2017.10.25
HTML 5 를 시작해야하는 이유  (0) 2017.10.25
블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

HTML5의 이해 -2

홈페이지제작/HTML 2017. 10. 25. 15:27

 

이번 주제는 Sementic Element 이다.

아래 내용들은 본인의 생각도 물론 많이? 포함되어 있지만

http://www.w3.org/TR/2011/WD-html5-20110525/
.

 

 

<!DOCTYPE HTML>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
  <title>HTML 5 예제</title>
  </head>  <body>
    <!-- 아시다시피 여기서부터 Body Contents 가 들어가겠죠? -->
    <p>안녕하시렵니까? HTML 5?</p>
  </body>
</html>

위 예제가 생각나시는지 모르겠다.
^^
위 요소들을 몇가지 살펴보려한다.


1. 문서타입과 Root 요소

1-1. 문서타입. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


이 문서타입은 Microsoft 가 Mac 용 internet explorer 5 를  개발하면서 예전에 만든 HTML페이지들이 제대로 표시되지 않는 심각한 문제가 발생하여, 이를 해결하기 위해서 문서의 상단에 HTML DocType 을 추가하였다...
Mac 용 Internet explorer의 경우 이 DocType 을 확인하도록 하여 이 DocType 이 포함되지 않은 기존 HTML 페이지는 옛날방식으로 렌더링하도록 하였다.

그래서 새 명세를 적용하려면 HTML Element 앞에 적절한 Doc Type만 지정하면 됐다.

그런데 아이디어가 남용되면서 (^^;) 명세를 최대한 지키는 표준모드와 표준을 따르지 않는 비표준모드로 나뉘고, 또 몇몇 요소에서 표준을 따르지 않는 준 표준모드까지 나오게 되었다.

위 DocType 은 여러 표준 Doc type 중 하나다 나머지는 이곳(http://www.w3.org/QA/2002/04/valid-dtd-list.html) 에서 확인할수 있다.

여러분이 생각해도 정리를 해야할 것 같다는 생각이 들지 않는가?
그래서 확~! 줄여서 나온 DocType !!!


<!DOCTYPE HTML>


인 것이다.
모든 브라우져가 표준모드로 작동할 것이다.
한가지 주의할 점은 있는데...
맨 첫줄에 써주어야 한다는 것이다. 빈줄이 있으면 안된다는 것.
그렇지 않으면 비표준모드로 랜할 수 있다는...

그리고 또 한가지...
기존에 HTML 4.01 이나 XHTML 1.0, 1.1 로 작성한 페이지를 HTML 5로 변환하는 작업의 시작!!! 이라는 것. ^^

1-2. Root Element
HTML 페이지의 루트 엘리먼트인 <HTML> 는 기존에 XHTML 에서 사용하는 namespace 가 포함되어있었는데 이제 HTML 5 에서는 Lang 속성만 있다.( manifast 속성은 추후에 다시 알아보기로 하자...)
그래서...
<html lang="ko"> 만 적으시면 된다.

1-3. <head> Element
head Element 는 변화 요소가 거의 없는데 문서의 Metadata 를 담는 Element 이며
Title Element 가 필수로 들어가고 Meta Element, Link Element, Script Element 가 들어간다는 것은 기본적인 사항이라 모두들 알고 있을 것이다.

1-4. Meta Element
Meta Element 는 Content 속성을 사용해서 나타내는데 이번에 새로 Charset 속성을 사용하여 문자 Encoding 을 나타낼 수 있게되었습니다.
HTTP Header 에 문자 Encoding 이 포함되어 있다면 Meta Element 의 문자 Encoding 보다 우선한다는 것도 알아두시길...

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

위와 같이 적긴하지만 다른 요소들은 생략하시더라도 아래와 같이 charset을 포함한 Meta Element 를 포함하기 바란다.

<meta charset="utf-8">

 

2. 아웃라인 구성 Element들
이번엔 이번에 추가된 아웃라인을 구성하는 Element 들을 살펴보려한다.
이전 글에서 소개했듯이 HTML 5 에 문서의 구조화와 관련된 요소들이 많이 추가되었다.

아래와 그림과 같이 간단히 나타낼 수 있는데 하나하나 중요하게 생각해야하는 사항들만 짚어 보도록 하자.

 


2-1. Section Element

Outline 을 구성하는 Element 들을 설명하기 위해서는 먼저 Section Element 를 알아봐야 할 것이라 생각한다.
Section Element 는 일반적인 Section을 나타낸다.
그런데 의미 자체로만 보게되면 기존에 사용하던 Div Element 와 사용하기에 혼동하기 쉽다.
Section Element 는 장이나 절 단위를 나타낸다고 생각하면 된다. 스타일을 적용하기위해서 Section Element 를 사용해서는 안되며 그런 용도라면 Div Element 를 사용하도록 해야한다.
Section Element 는 장이나 절을 나타내므로 제목과 본문을 하나로 묶을 때 사용합니다.
만약에 아래와 같이 제목과 본문에 스타일을 적용하고 싶다거나 구분을 지으려 한다면 Div Element 를 사용해야 할 것이다.

 

 

<section class="title">
 
<h1>제목</h1>
<section class="content">


<p>본문</p>

</section>


</section>


위와 같이 Element 를 구성하게되면 제목과 본문을 다른 Section 으로 해석하게 될 것이다.
본문의 Level 이 하나 더 내려가게 되겠지?

그래서 위그림과 같은 구조에서는 아래와 같이 Mark up해야 할 것이다.

<section class="title">
 
<h1>제목</h1>
<div class="content">


<p>본문</p>

</div>


</section>

또한 아래와 같은 구성에서도
각각을 모두 Section Element 로 나누는 것이 아닌 HTML 5 의 OutLine 구성 Element 들을 적절히 사용하여 구성해야 할 것이다.



<body>
 
<header>제목</header>
<div class="left">


<nav>...
</nav>


</div>
<div>


<article>...
</article>


</div>
<div>


<aside>....
</aside>

</div>
<footer>....</footer>


</body>


이와 같이 말이다...
아직 언급하지 않은 Element 가 있지만 후에 알아볼테니 그런것이 있구나 식으로 생각하시면 되겠다.

2-2. nav Element
nav Element 는 Navigation Section 을 나타냅니다. 페이지상의 Header 나 좌측, 우측에 표현하는 Link 모음이고 간혹 Footer 에도 표현하기도 하지요.
모든 Link 에 nav Element 를 사용하면 안되겠고, 다시한번 이야기 하지만 스타일을 적용하기 위해서 nav Element 를 사용하면 안될 것이다.
또 한가지!! Site Map Page 를 nav Element 로 표현해서도 안될 것이다. Site Map 의 Link 는 nav 특성보다는 Main Contents 이기 때문에...

주로 nav Element 내에 ul Element 를 사용하여 목록으로 Navigation Link 를 Markup 한다.

이번엔 nav Element를 그룹화하는 방법을 몇가지 알아보죠.


 


위 이미지는 제 블로그의 우측에 있는 링크들이다.
붉은 부분만 떼어놓고 본다면 아래와 같이 Markup 할 수 있을 것이다.

<nav>
 
<h3>카테고리</h3>
<ul>


<li><a href="...">분류전체보기</a></li>
<li><a href="...">VB.NET</a></li>
...


</ul>


</nav>
<nav>


<h3>글보관함</h3>
<ul>


<li><a href=">2011/05(8)</a></li>
<li><a href=">2011/04(4)</a></li>
...


</ul>


</nav>

한가지 더 생각해 보자면
위 그림상에 있는 컨텐츠의 내용은 aside element 에 속하는 것으로
아래와 같이 nav Element 들을 aside Element 내에 포함시킬 수 있을 것이다.

<aside>
<nav>
 
<h3>카테고리</h3>


<ul>


<li><a href="...">분류전체보기</a></li>


<li><a href="...">VB.NET</a></li>


...


</ul>


</nav>


<nav>


<h3>글보관함</h3>


<ul>


<li><a href=">2011/05(8)</a></li>


<li><a href=">2011/04(4)</a></li>


...


</ul>


</nav>


</aside>

 

오늘은 여기까지 실습을 해봅니다.

 

 

직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면  

아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사)

 


 

저작자표시

'홈페이지제작 > HTML' 카테고리의 다른 글

HTML5 표 관련 태그  (0) 2017.10.27
HTML5 문서의 기본 구조  (0) 2017.10.26
HTML 5 는 HTML 보다 훨씬 더 Sementic 한 Web을 구성  (0) 2017.10.25
HTML 5 를 시작해야하는 이유  (0) 2017.10.25
[홈페이지 제작 ] HTML 기초와 HTML 편집기  (0) 2017.10.17
블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

HTML 5 를 시작해야하는 이유

홈페이지제작/HTML 2017. 10. 25. 14:55

HTML 5 의 등장

.

HTML 의 역사를 살펴봐서 알수 있듯이 기존의 HTML 은 단순 Markup Language 로서 한계가 명확했으며,

그런 HTML 의 한계는 HTML 5 의 등장으로 기존에 가졌던 HTML 의 기능적 한계를 커버할 수 있다.

발전된 CSS3, JavaScript API 를 통한 기능의 확장과 결합을 통해서 기존의 Markup language 이상의 의미를 가지게 되었다.

HTML 의 한계로 인해서 유행처럼 번졌던 플러그인과 엑티브엑스 컨트롤의 문제들로 인해 웹은 순수한 HTML만으로는 표현이 불가능한, 너무도 많은? 외부기술에 의존하게 되었다.

이로 인해 웹의 접근성은 현저하게 떨어지는 상황이 되었고 HTML 5 의 등장은 플러그인과 엑티브엑스기술에서 웹을 해방?시키고 웹의 접근성과 상호운영성 또한 높이게 하는 결과를 가져오게 될 것이다.

JavaScript API 를 이용한 HTML 의 확장은 서버의 부하를 줄이고 그 부하를 클라이언트와 나눔과 함께 Application으로써의 웹의활용도를 극대화 시킬것이다.

 

그 결과, HTML 5 는 웹에서 플래쉬, 실버라이트와 같은 플러그인들의 사용을 줄일 것이다.(플러그인의 사용을 아예 없애지는 못할것이라 생각한다. 사용량을 0 - Zero로 만들려 하지도 않을 것이고. 그러한 플러그인은 플러그인이 반드시 필요한 영역에서 활발히 활동할 것이라 생각한다.)

플러그인과 엑티브엑스의 설치로 인한 취약해진 보안도 걱정하지 않아도 될 것이다.

순수한 웹환경은 현재의 Device 는 물론이고 아직 세상에 있지도 않는, 미래에 나오게될 Device 들의 플랫폼이 될 것이다.

마이크로소프트, 구글을 위시한 기업들이 각 사의 브라우져를 Web OS 로서의 기반 플랫폼으로 구성하고 있고, 각 사들의 서비스들을 HTML 5로 제작하여 차세대 Web 환경에서의 주도권을 갖기위해 노력하고 있다.

 

HTML 5 를 시작해야하는 이유가 이 정도면 충분한지요?

 

HTML 5 의 디자인 원칙

 

다음은 HTML 5 은 이러한 디자인 원칙을 가지고 만들어지고 있다고 한다.

•호환성

•컨텐츠의 호환성

•이전 브라우저와의 호환성

•기능의 재사용

•이용 방법의 호환성

•혁신보다는 발전을 우선함

•실용성

•상호 운영성

•보편적 접근성

 

(참고: http://www.jopenbusiness.com/mediawiki/index.php/HTML5#HTML5_.ED.91.9C.EC.A4.80.ED.99.94_.EC.9D.BC.EC.A0.95)

 

 

위 내용들을 간략하게 살펴보면 아래와 같다.

 

컨텐츠의 호환성 : HTML 5 이전 버전으로 제작한 컨텐츠가 완벽히 정상 작동하리라고는 생각하진 않지만 문제없이 이용가능해야한다.

이전 브라우저와의 호환성 : 말 그대로 HTML 5 가 지원되지 않는 이전 버전의 브라우저에서도 이용가능해야 한다.

기능의 재사용 : 이전까지는 각 브라우저 사들이 각자 브라우져에 구현해 놓은 서로다른 기능들을 HTML 5 라는 이름아래 공통된 사양으로 책정하여 브라우저들간의 호환성을 가지게 한다.

이용방법의 호환성 : 기존에 사용하던 HTML Tag 의 사용법을 그대로 사용할 수 있게 한다.

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

 

실용성 : W3C 가 진행하던 이상적인 MarkUp Language 인 XHTML 2.0 와 같은 HTML 을 제작하는 것이 아닌 웹현장에서 필요로 하는 것들을 중점적으로 진행해야한다.

상호운영성 : HTML 5 를 적용한 브라우저라면 동일하게 동작해야한다.

보편적 접근성 : 컨텐츠의 소비자가 기계(Device, Search Engine) 와 모든 사람들(장애자를 포함한) 이 접근할 수 있도록 한다.

 

http://html5test.com/index.html

 

HTML5 표준화 일정

 

 

다음은 HTML 5 표준화 일정이다.

 

•2006.06 : 웹 하이퍼텍스트 워킹그룹(WHATWG) 출범

•Web Form 2.0, Web Applications 1.0

•2007.03 : 새로운 HTML 워킹 그룹 생성

•2009.10 : W3C에서 XHTML 전환 실패를 인정함

•2011.05 : HTML5 최종 초안 (Last Call Working Draft)

•2012.Q2 : HTML5 후보 표준안 (Candidate Recommendation) - 2개 이상의 브라우저에서 테스트 완료

•2014.Q1 : HTML5 제안 표준안 (Proposed Recommendation) - 브라우저 업체의 피드백 반영

•2014.Q2 : HTML5 최종 표준안 (Recommendation)

.

HTML 의 역사를 살펴봐서 알수 있듯이 기존의 HTML 은 단순 Markup Language 로서 한계가 명확했으며,

그런 HTML 의 한계는 HTML 5 의 등장으로 기존에 가졌던 HTML 의 기능적 한계를 커버할 수 있다.

발전된 CSS3, JavaScript API 를 통한 기능의 확장과 결합을 통해서 기존의 Markup language 이상의 의미를 가지게 되었다.

HTML 의 한계로 인해서 유행처럼 번졌던 플러그인과 엑티브엑스 컨트롤의 문제들로 인해 웹은 순수한 HTML만으로는 표현이 불가능한, 너무도 많은? 외부기술에 의존하게 되었다.

이로 인해 웹의 접근성은 현저하게 떨어지는 상황이 되었고 HTML 5 의 등장은 플러그인과 엑티브엑스기술에서 웹을 해방?시키고 웹의 접근성과 상호운영성 또한 높이게 하는 결과를 가져오게 될 것이다.

JavaScript API 를 이용한 HTML 의 확장은 서버의 부하를 줄이고 그 부하를 클라이언트와 나눔과 함께 Application으로써의 웹의활용도를 극대화 시킬것이다.

 

그 결과, HTML 5 는 웹에서 플래쉬, 실버라이트와 같은 플러그인들의 사용을 줄일 것이다.(플러그인의 사용을 아예 없애지는 못할것이라 생각한다. 사용량을 0 - Zero로 만들려 하지도 않을 것이고. 그러한 플러그인은 플러그인이 반드시 필요한 영역에서 활발히 활동할 것이라 생각한다.)

플러그인과 엑티브엑스의 설치로 인한 취약해진 보안도 걱정하지 않아도 될 것이다.

순수한 웹환경은 현재의 Device 는 물론이고 아직 세상에 있지도 않는, 미래에 나오게될 Device 들의 플랫폼이 될 것이다.

마이크로소프트, 구글을 위시한 기업들이 각 사의 브라우져를 Web OS 로서의 기반 플랫폼으로 구성하고 있고, 각 사들의 서비스들을 HTML 5로 제작하여 차세대 Web 환경에서의 주도권을 갖기위해 노력하고 있다.

 

HTML 5 를 시작해야하는 이유가 이 정도면 충분한지요?

 

HTML 5 의 디자인 원칙

 

다음은 HTML 5 은 이러한 디자인 원칙을 가지고 만들어지고 있다고 한다.

•호환성

•컨텐츠의 호환성

•이전 브라우저와의 호환성

•기능의 재사용

•이용 방법의 호환성

•혁신보다는 발전을 우선함

•실용성

•상호 운영성

•보편적 접근성

 

(참고: http://www.jopenbusiness.com/mediawiki/index.php/HTML5#HTML5_.ED.91.9C.EC.A4.80.ED.99.94_.EC.9D.BC.EC.A0.95)

 

 

위 내용들을 간략하게 살펴보면 아래와 같다.

 

컨텐츠의 호환성 : HTML 5 이전 버전으로 제작한 컨텐츠가 완벽히 정상 작동하리라고는 생각하진 않지만 문제없이 이용가능해야한다.

이전 브라우저와의 호환성 : 말 그대로 HTML 5 가 지원되지 않는 이전 버전의 브라우저에서도 이용가능해야 한다.

기능의 재사용 : 이전까지는 각 브라우저 사들이 각자 브라우져에 구현해 놓은 서로다른 기능들을 HTML 5 라는 이름아래 공통된 사양으로 책정하여 브라우저들간의 호환성을 가지게 한다.

이용방법의 호환성 : 기존에 사용하던 HTML Tag 의 사용법을 그대로 사용할 수 있게 한다.

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

 

실용성 : W3C 가 진행하던 이상적인 MarkUp Language 인 XHTML 2.0 와 같은 HTML 을 제작하는 것이 아닌 웹현장에서 필요로 하는 것들을 중점적으로 진행해야한다.

상호운영성 : HTML 5 를 적용한 브라우저라면 동일하게 동작해야한다.

보편적 접근성 : 컨텐츠의 소비자가 기계(Device, Search Engine) 와 모든 사람들(장애자를 포함한) 이 접근할 수 있도록 한다.

 

http://html5test.com/index.html

 

HTML5 표준화 일정

 

 

다음은 HTML 5 표준화 일정이다.

 

•2006.06 : 웹 하이퍼텍스트 워킹그룹(WHATWG) 출범

•Web Form 2.0, Web Applications 1.0

•2007.03 : 새로운 HTML 워킹 그룹 생성

•2009.10 : W3C에서 XHTML 전환 실패를 인정함

•2011.05 : HTML5 최종 초안 (Last Call Working Draft)

•2012.Q2 : HTML5 후보 표준안 (Candidate Recommendation) - 2개 이상의 브라우저에서 테스트 완료

•2014.Q1 : HTML5 제안 표준안 (Proposed Recommendation) - 브라우저 업체의 피드백 반영

•2014.Q2 : HTML5 최종 표준안 (Recommendation)

 

 

직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면  

아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사)

 

저작자표시

'홈페이지제작 > HTML' 카테고리의 다른 글

HTML5의 이해 -2  (0) 2017.10.25
HTML 5 는 HTML 보다 훨씬 더 Sementic 한 Web을 구성  (0) 2017.10.25
[홈페이지 제작 ] HTML 기초와 HTML 편집기  (0) 2017.10.17
div태그로 홈페이지 레이아웃 만들기  (0) 2017.09.25
[html] 테이블 태그 <table> </table> 태그 구조  (0) 2017.09.02
블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

[자바스크립트] Java Script 필요성

홈페이지제작/Javascript 2017. 9. 7. 18:51

 

 

자바스크립트 란?

자바스크립트를 소개해보고자 합니다.

지금은 HTML5,CSS3를 통하여 홈페이지에 동적 효과를 나타내는게 가능하지만

HTML5, CSS3가 나오기 전에는 자바스크립트를 이용하여 여러가지 다양한 효과를 구현했습니다.

그 외에 우리가 어떤 홈페이지를 가입할 때 다음과 같은 현상을 본적이 있으실 것입니다.

 "아이디 미 입력시 아이디를 입력해 달라는 문구
비밀번호가 서로 일치하지 않다는 문구
이메일을 형식에 맞게 입력해 달라는 문구"

위와 같은 경우도 있으며 또 한 어떠한 이미지 위에 마우스 포인터를 올리면

다른 이미지가 변경되거나 더 강조하는 이미지로 변경되거나 하는 작업등에 쓰이는게

 바로 자바스크립트로 구현한 것입니다.

자바스크립트는 기본 문서는 HTML문서의 head태그 안에서 사용합니다.

 

자바스크립트 소스를 넣는 곳은 head와 head 사이이다.
-------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>자바스크립트 시작</title>
<script>
// 이곳에 자바스크립트 소스를 넣습니다.
</script>
</head>
<body>
</body>
</html>

 

 

 

직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면  

아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사)

 

저작자표시

'홈페이지제작 > Javascript' 카테고리의 다른 글

[자바스크립트] 변수에 대한 설명 1  (0) 2017.09.08
[자바스크립트] javaScript 경고,알림 창 띄우기  (0) 2017.09.07
[자바스크립트] JavaScript 출력에 대하여  (0) 2017.09.07
자바스크립트 객제( image, history, location)  (0) 2017.07.25
Javascript, html, php , xml 주석처리하는 법  (0) 2017.05.13
블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

[html] 테이블 태그 <table> </table> 태그 구조

홈페이지제작/HTML 2017. 9. 2. 13:24

 홈페이지제작할 때 꼭 필수적으로 알아야 하는 것일 수 있습니다.

그래도 아직도 사용하는 html 태이블 구조에 관해서 학습을 해보겠습니다.

 

예전에는 이 테이블태그를 이용하여 레이아웃을 잡았습니다.

 

div로 레이아웃을 잡는데요 표로 레이아웃을 요즘은 안잡고요. 그래도 달력이나 게시판 등은 그렇게 한답니다.

지금까지 강좌에 올린 태그들은 그 기능에만 충실히 설명을 하고 꾸미기 쪽은 아에 설명을 안했습니다. h태그로 작성한텍스트의

색을 바꾼다던지 글씨를 더 크게 한다던지의 align을 써서 오른쪽으로 정렬을 시킨다던지 그런 설명을 안했습니다.

이미지 태그도 border를 줘서 외곽을 어떻게 처리 한다던지 그런 설명도 안했는데요. 그 이유는 CSS에서 그러한 것들을 하기 때문입니다.

요즘은 html은 저렇게 구조만 짜주면 됩니다. 그리고 스타일은 스타일시트인 CSS 로 한답니다.

예를 들어서 다음페이지를 봐보겠습니다.

인터넷 익스플로러를 띄우시고 클릭하면 다음으로 갑니다.

메뉴에서 보기 - 스타일 - 스타일 없음을 눌러 보시면요 CSS가 해제된 저희가 지금 작성하고 있는 html 자체만 보실수 있습니다.

저거 입니다. html 로는 저렇게만 작성을 해주시면 되고요 CSS로 아까와 같이 배치 및 글씨 색 글씨 크기, 백그라운드 이미지, 백그라운드 색, 외곽선 굵기 스타일 외곽선색 등을 다 지정해준답니다.

 

만약 스타일 없음 했는데도 스타일 있는 페이지와 차이가 별로 없다면 그것은 웹표준을 지키지 않고 테이블로 레이아웃을 작성한 옛날 방식의

사이트 입니다. 그냥 혹시 왜이렇게 강좌를 대충 대충 하나 하시는 분이 계실까봐  말씀 드렸습니다.

 테이블에 대해서 말씀드리면

 

<table> <-- 테이블 태그의 시작

<tr> <-- 줄(열)의 시작

<td>A <-- 칸(행)의 시작

</td> <-- 칸(행)의 끝

</tr> <-- 줄(열)의 끝

</table> <-- 테이블 태그의 끝

 

위에서 tr을 열고 td를 1개만 사용했으므로 그냥 1칸뿐인 테이블이 됩니다.

 

 

  

 
<body bgcolor="#FF99CC">
<table border="1">
<tr>
<td align="center" colspan="2">A</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>

결과는

 



 

<table border="1" > 
<tr>
<td rowspan="2">A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>

 

결과는

 

 

 

<table border="1" > 
<tr>
<td rowspan="2">A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>

 

결과는

 

 

저작자표시

'홈페이지제작 > HTML' 카테고리의 다른 글

[홈페이지 제작 ] HTML 기초와 HTML 편집기  (0) 2017.10.17
div태그로 홈페이지 레이아웃 만들기  (0) 2017.09.25
[html] 홈페이지에 이미지올리는 img태그  (0) 2017.09.02
HTML 기본 구조  (0) 2017.09.01
[html] 리스트 태그와 링크태그  (0) 2017.09.01
블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

[html] 홈페이지에 이미지올리는 img태그

홈페이지제작/HTML 2017. 9. 2. 12:48

 

 

오늘은 홈페지에 어떻게 이미지을 올리는지를 학습해 봅니다.

이미지 띄우는 태그는 <img src="이미지 주소" alt="이미지 설명" /> 입니다.

단독태그이므로 닫기전에 /를 붙이고요.

 

그리고 이미지 태그에 직접적으로 가로길이 세로길이도 적용 가능 합니다.

가로 길이는 width="숫자(단위는 픽셀)"

세로 길이는 height="숫자(단위는 픽셀)" 입니다.

 

alt="이미지설명" 은 이미지에 마우스를 대고 있으면 띄어지는 글입니다. 즉 이 이미지에 대한 설명인데요.

로봇사진이라고 하면 우리가 로봇이라고 적어 놓으면 로봇이라는 글이 띄어집니다.

alt=""를 적지 않으면 웹표준 검사에서 워링이나 에러에 걸립니다.

왜 이것을 해주냐고 하면은 이미지에 대한 정확한 설명을 해줄수도 있고요.

시각장애를 갖고 있는 분께서 웹을 이용할경우 그 이미지가 어떤 이미지인지를 읽어 주는 도구가 있는데요

그 도구가 우리가 작성한 alt="설명" 를 시각장애를 갖고 있는 분께 읽어 준답니다.

이러한 것을 웹접근성이라고 하는데요. 저도 웹접근성은 잘 모릅니다만. 아무튼 그러합니다.

이렇게 사용하면 되구요.

 

<img src="asimo.jpg" alt="아시모사진, photo of asimo" />

가로 길이 적용할시

<img src="asimo.jpg" width="500" alt="아시모사진, photo of asimo" />

 

위와같이 원하는값 적용하고요.위와같은 경우는 세로값이 적용이 되어있지 않은데요 비율을 조정해서 세로값은정해진답니다.

반대로 세로값만 적용하면 세로값에 대한 비율로 가로값이 적용됩니다.

비율을 적용하지 않고 가로 세로값을 적용하면 비율이 안맞아서 보기 안좋을수도 있습니다.

 

Tip:혹시 이거 보고 웹상에서 돌아다니는 이미지 주소 알아 내기 하시려면 이미지에 마우스 오른쪽 클릭 속성

가셔서 이미지 주소 보시면 됩니다.

 

이 이미지가 아닌 다른 자신의 컴퓨터에 있는 이미지로 테스트가 하고 싶으실 경우에는 테스트 하고 계신 html파일이 있는 폴더에 이미지를 넣으시고

<img src="이미지명" alt="" />하시면 됩니다.

 

<!DOCTYPE html>

<html>

<head>

<title>이미지 띄우기</title>

</head>

<body>

<h1>이미지 띄우기</h1>

<img src="http://www.yaoo.com/asimo.png" alt="폴리아카데미 사진" />

<p>가로값만 넣어보기</p>

<img src="http://www.yaoo.com/asimo.png" width="500" alt="폴리아카데미 사진" />

<p>세로값만 넣어보기</p>

<img src="http://www.yaoo.com/asimo.png" height="300" alt="폴리아카데미 사진" />

<p>세로값을 원본 길이보다 더 늘릴 경우</p>

<img src="http://www.yaoo.com/asimo.png" height="700" alt="폴리아카데미 사진" />

<p>비율을 고려하지 않고 가로값 세로값 모두 넣기</p>

<img src="http://www.yaoo.com/asimo.png" width="500" height="500" alt="폴리아카데미 사진" />

</body>

</html>

   

이미지라 결과가 길어서 따로 띄우지 않겠습니다. 소스테스트는 했으니 위 소스로 테스트 하시면 됩니다

앞 강좌에서 배운 하이퍼링크 태그를 이용하여 이미지를 클릭했을때 원하는 링크를 걸은 주소로 이동해 봅시다.

매우 간단합니다. 이미지 태그를 하이퍼링크 태그로 씌어주면 됩니다. 제 블로그로 한번 띄어 볼까요?

 

먼저 하이퍼 링크 태그를 작성하고 주소는 http://mp17_2.blog.me 로 합니다. <a href="http://mp17_2.blog.me"></a>

그리고 하이퍼링크 태그 안에 이미지 태그를 넣어 줍니다.

이미지 주소는 이것으로 합시다.

http://www.yaoo.com/asimo.png

이미지 태그는   <img src="http://yaoo.com/asimo.jpg" alt="machine" />

그럼 위의 이미지 태그를 하이퍼 링크에 넣으면

<a href="http://mp17_2.blog.me" target="_blank">< src="http://www.yaoo.com/asimo.png" alt="machine" /></a>

가 됩니다.

위의 주소의 경우도 제측문제로 줄바꿈을 했는데요 실습하실때는 한줄로 해주시면 됩니다.

 

이상하게 연습장 에서 링크 연결시 "를 사용 하면 안되고 ''를 사용해야 하네요 참고 해주세요 아래 소스를 그대로 에디터에 붙여넣기 하셔서 테스트 하시면 됩니다.

<!DOCTYPE html>

<html>

<head>

<title>폴리아카데미 홈페이지 바로가기</title>

</head>

<body>

<a href='http://mp17_2.blog.me' target='_blank'><img src='http://www.polyacademy.co.kr/asimo.png' alt='polyacademy' /></a>

</body>

</html

 

여러분들은 여러분들의 블러그나 홈페이지에 이미지를 바꿔가면서 연습해보시길 바라면서 오늘은 여기서 마칩니다.
저작자표시

'홈페이지제작 > HTML' 카테고리의 다른 글

div태그로 홈페이지 레이아웃 만들기  (0) 2017.09.25
[html] 테이블 태그 <table> </table> 태그 구조  (0) 2017.09.02
HTML 기본 구조  (0) 2017.09.01
[html] 리스트 태그와 링크태그  (0) 2017.09.01
[HTML 강좌] iframe 태그학습 구조<iframe> </iframe>  (0) 2017.08.31
블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

[HTML] HTLM5 태그 정리

홈페이지제작/HTML 2017. 7. 25. 12:48

 

 HTLM5 태그 정리

 

<header> TAG
Header태그는 여러번 사용할 수 있으며, body태그 안에서 사용이 가능합니다. <head>태그는  <html> 사이에 들어가야 하며, 사용 또한 다릅니다. 문서 내에서의 실제 타이틀을 나타낼 때 사용이 됩니다.

<hgroup> TAG
제목과 그와 관련된 부제목을 묶어주는 기능.
In this part of the useful HTML5 features series we are going to present you the new semantic tags that were introduced with HTML5 (most of them). We have provided a simple demo of a page that uses the HTML5 semantic tags.
You usually insert into a header one or more headings ( <h1> to <h6> ) , some sort of a logo or information about the author of the post/article/document that will be discussed below it.

<nav> TAG
<nav>는 어느 위치에 와도 상관이 없으며, <header> <footer> <aside> 등 어디에서든지 사용이 가능합니다.
We include another new element which is the <nav> – it is best used for the primary navigation(s) of the page. It would not be a good idea to enclose every distant anchor on your webpage with the <nav > tag.

<aside> TAG
본문의 내용을 표시하고 남은 부분들을 표시하기 위해서 사용합니다.
Next, we have the <aside> tag which indicates sidebars or content that is related to the DOM location where it is being placed but it is not essential to it. For example, if your readers are reading an article on a page, you can use it to show the user additional information about the article such as references, highlights from it, interesting facts and even to show the user related articles.

You can also see the use of <figure> . You should use it for code snippets, images, diagrams, charts and other visual content that is related to the place where it is placed but in the same time the enclosing content should still make sense without that figure . Inside the <figure> tag you can nest other tags such as <img> and you can add a caption which explains the figure through the <figcaption> element.

<article> TAG
웹 페이지 상에서 실제 내용을 의미하고, 다른 곳에 배포하거나 재사용할 수 있으며, 검색엔진에서는 article에 있는 내용은 배포할 수 있는 것으로 인식하게 됩니다.
<seciton> TAG
웹 컨텐츠들을 그룹으로 묶어 주는 역할을 하며, 재배포 할 수 없습니다. <section>으로 묶에서 다시 <article>로 다시 묶을 수 있다. <section>안에서 다시 <section>태그를 사용하는 것은 가능하다.

HTML1(1991)으로 시작되어, HTML2(1995), HTML3(1997.1), HTML4(1997.12)를 거쳐서 HTML5로 개발되었다.

H.

HTML5은 HTML4의 제한적인 기능 때문에 액티브X, 자바스크립트, 플러그인 등으로 웹을 구현하였고, 이러한 것들을 플러그인 없이 멀티미디어 컨텐츠를 실행하기 위해서 등장하였다. (하지만 현재도 주로 사용되는 것들은 HTML4이다)

웹표준은 같은 사이트라도 브라우저마다 다르게 보이게 되는데, 이는 표준이 없이 작성이 되었기 때문이다. HTML5의 특징은 자바스크립트, CSS, HTML이 분리되지 않고 통합된 체제로 이루어진 것을 의미한다. (HTML5는 자바스크립트, CSS3, HTML5 태그 모두를 의미한다)

HTML5특징
- HTML5는 동영상 재생이 가능하다.
- 2차원 벡터가 가능하다
- 서버와 소켓 통신이 가능하다.
- GPS장치접근, 스마트폰
- 오프라인 상태에서도 작업이 가능하다.
- 시멘틱 웹을 구현이 가능하다.
새로운 태그들
section, article, aside: 간단한 위젯 프로그램, 사이드바, hgroup: 제목과 부제목, header: 본문에 있는 머리부분, footer:페이지 가장 하단의 안내, nav: 네비게이션 요소를 표현, figure: 그림, 비디오 등의 캡션, figcaption.
audio, video, embed, mark:택스트 형광펜, progress:진행바, meter, time, ruby: 미주, 각주 등, canvas, command, details, datalist, keygen: 양식을 form으로 보낼 때 하는 key를 생성, output.
변경된 태그들
a, address, b, hr, i, menu, small, strong : 더 강화되거나 내용이 확장된 태그들
중단된 태그들
basefont, big, center, font, frame, frameset, noframe, s, strike, tt, u

저작자표시

'홈페이지제작 > HTML' 카테고리의 다른 글

[HTML 강좌] iframe 태그학습 구조<iframe> </iframe>  (0) 2017.08.31
html 강좌 div 태그에 대한 학습 홈페이지 레이아웃  (0) 2017.08.31
홈페이지 제작 시 필요한 HTML 명령어 모음  (1) 2017.06.26
html주석처리는 왜하는가 ?  (0) 2017.05.13
HTML5와 CSS를 이용한 홈페이지제작  (0) 2017.04.27
블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

공지사항



카테고리

글 보관함

달력

«   2024/05   »
일 월 화 수 목 금 토
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

티스토리툴바