Skip to content
(*.206.136.166) 조회 수 37562 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

+ - Up Down Comment Print
?

단축키

Prev이전 문서

Next다음 문서

+ - Up Down Comment Print

다른 목적으로 번역한 글인데 괜찮은 자료라고 판단되어 공유합니다.


탈고를 거치기 전이라 번역이 매끄럽지 못한 점 이해 부탁드립니다 ^^


=================================================================================================


Nettus+ Jeffrey Way가 올린 '꼭 알아야 하는 HTML5 28가지 특징, , 테크닉'(http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/)을 빌어 HTML5의 특징을 소개 하고자 한다.


=================================================================================================

 

1. 새로워진 Doctype

 

예전에 쓰던  XHTML doctype은 기억하기가 불가능할 정도로 복잡했다. 예를 들자면 아래와 같다.

 

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

 

하지만 HTML5의 새로워진 doctype에 따르면 단지 이렇게 끝난다.


<!DOCTYPE html>  

 

사실은 HTML5에서는 위의 선언조차도 필요 없다. 단지 구시대의 브라우저들의 경우 doctype을 요구할 때가 있어서 그런 경우에만 사용하면 된다.

 




2. Figure엘리먼트(Element)

 

여태까지의 이미지 마크업을 예로 들자면 아래와 같은 형태다.

 

<img src="path/to/image" alt="About image" /> 
<p>Image of Mars. </p> 

   

위를 살펴 보면, 이미지 태그(img)가 있고 문단 태그(p)가 있다. 이들은 분명히 의미를 가지고 묶여 있지만 컴퓨터는 이를 이해하지 못한다. 하지만 HTML5에서는 <figure> <figcaption>이라는 엘리먼트를 통해 이 둘을 의미적으로 묶을 수 있다.

 

<figure>
    <img src="path/to/image" alt="About image" />   
    <figcaption> 
        <p>This is an image of something interesting. </p> 
    </figcaption> 
</figure> 

 




3. <small>의 재정의

 

예전에는 <small>을 소제목으로 사용하곤 했는데, HTML5에서는 다른 의미를 가진다. small은 진짜로 '작은 크기로의 출력(small print)'을 의미한다. 예를 들어 사이트 하단(footer)에 있는 카피라이트 문구가 <small>로 사용할 대상이다.

 




4. 스크립트나 링크에는 더 이상 Type 속성이 필요하지 않다

 

예전에는 link script 태그에 Type 속성을 사용했다.

 

<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>   

 

하지만 이제 CSS의 타입은 늘 CSS이고, 스크립트는 늘 Javascript만을 의미하므로 더이상 쓸 필요가 없다.


<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>   




 

5. 따옴표로 둘러쌀까?

 

HTML5 XHTML처럼 속성들을 반드시 따옴표로 둘러싸야 하는 건 아니다. 물론 해도 상관없다.


<p class=myClass id=someId> Start the reactor.  

 

위처럼 해도 상관없다. 하지만 좀 더 구조적인 문서로 만들기 위해서는 따옴표 사용도 좋다.

 




6. 수정 가능한 컨텐츠 만들기

 

contenteditable이라는 참 편리한 엘리먼트가 생겼다. 이 엘리먼트를 통해 엘리먼트 내부의 문자열을 편집할 수 있다. 이는 활용가치가 매우 크며 로컬 스토리지와 함께 to-do list를 만드는데 사용할 수 있다.

 

Content Editable

 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>untitled</title> 
</head>
<body> 
    <h2> To-Do List </h2> 
     <ul contenteditable="true"> 
        <li> Break mechanical cab driver. </li> 
        <li> Drive to abandoned factory 
        <li> Watch video of self </li> 
     </ul> 
</body> 
</html> 


 

5번처럼 따옴표를 사용하지 않아도 좋다.


 <ul contenteditable=true> 






 

7. 이메일 입력하기

 

input 태그에 email type을 쓰면 알아서 유효성 검증을 해준다. 이제 자바스크립트로 검사할 필요가 없다!

 

<!DOCTYPE html>
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>untitled</title> 
</head> 
<body> 
    <form action="" method="get"> 
        <label for="email">Email:</label> 
        <input id="email" name="email" type="email" /> 
        <button type="submit"> Submit Form </button> 
    </form> 
</body> 
</html>  

 

Email Validation

 

"브라우저에 따라 다르니, 아직 이 속성에 전적으로 의지하지 마세요!"

 





8. Placeholders

 

텍스트 박스에 미리 문자열을 적어두지만 사용자가 클릭하면 적혀있던 글은 사라지는, 즉 안내문을 넣어두던 기능으로 전에는 자바스크립트로 해결하던 것을 이제는 placeholder 속성으로 해결한다.

Validation


 <input name="email" type="email" placeholder="doug@givethesepeopleair.com" /> 

 

이 속성 역시 브라우저에 따라 다르니 유의해야 한다.

 





9. 로컬 스토리지(Local Storage)

 

한마디로 우리가 입력한 것을 브라우저가 기억하는 것이다. 브라우저 재기동시에도 말이다.

 

“로컬 스토리지는 도메인별로 작동한다. 따라서 브라우저 재기동시에도 그 도메인에 가면 해당 정보를 로컬에서 불러올 수 있다. -QuirksBlog"

 

지원 여부는 브라우저에 따라 다르니 일단 자바스크립트로 window.localStorage가 존재하는지 테스트해보고 사용하면 된다. 상세한건 다음 동영상을 참고하길 바란다.

 

http://www.youtube.com/watch?v=h0uZIljjElo&feature=player_embedded

 





10. Semantic Header and Footer

 

아래처럼 쓰는 건 더 이상 필요가 없다.

 

<div id="header">
...
</div> 

<div id="footer"> 
...
</div>  

 

아무리 id를 적용해도 div 태그 자체는 의미를 담고 있지 않기 때문에 HTML5에서는 제대로 의미를 담도록 <header> <footer> 엘리먼트를 제공한다.


<header>
...
</header>

<footer>
...
</footer> 

 

여러 개의 header footer를 써도 되며, 여기서의 header footer는 웹사이트의 header, footer를 의미하는 것이 아니며 순전히 컨테이너를 지칭한다. 물론 웹사이트의 header, footer에 이들을 놓을 수도 있지만 꼭 그렇게 써야만 하는 것은 아니다.

 





11. HTML5 Form의 특징

 

HTML5 Form에서는 input의 속성으로 placeholder, autofocus 등을 사용할 수 있으며 input type으로 email을 넣게 되면 자동으로 유효성 검증을 해주는 등 Form 태그와 관련된 특징들로 상세 내용은 아래 동영상을 참고한다.

 

http://www.youtube.com/watch?v=spjOAFGxOP0&feature=player_embedded





 

12. 인터넷 익스플로러와 HTML5

 

"모든 엘리먼트는 기본적으로 inline으로 표시한다."

 

블럭으로 엘리먼트를 제대로 렌더링하면 이렇게 스타일을 정의해야 한다.


header, footer, article, section, nav, menu, hgroup {
   display: block; 
}  

 

예전 IE는 이런 스타일을 이해하지 못하지만 이 문제는 쉽게 고칠수 있다.


document.createElement("article");
document.createElement("footer");  
document.createElement("header"); 
...  


 

이렇게 하면 출력문제도 해결된다.

 

<!--[if IE]> 
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 





 

13. hgroup

 

<h1>, <h2> 태그간의 의미적인 관계를 정의하기 위해서 HTML5에서는 hgroup 엘리먼트로 헤더 그룹을 만들어 문서의 아웃라인을 잡아준다.

 

<header>
  <hgroup> 
      <h1> Recall Fan Page </h1> 
      <h2> Only for people who want the memory of a lifetime. </h2> 
  </hgroup> 
</header>   



  

  

 

14. Required 속성(Attribute)

 

(Form)에서 required 속성을 쓰면 그 input은 반드시 입력해야 함을 의미한다.


<input type="text" name="someInput" required>  


 

또는,

 

<input type="text" name="someInput" required="required">  


 

어떻게 하든지 둘 다 작동하며 입력하지 않으면 다음으로 이동할 수 없다. placeholder 속성으로 입력받는 화면을 하나 더 예로 들자면,


<form method="post" action="">
    <label for="someInput"> Your Name: </label> 
    <input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required> 
    <button type="submit">Go</button> 
</form>   

 

input에 아무것도 넣지 않으면 텍스트박스가 하이라이트된다.

 

Required and Placeholder Attributes






 

15. Autofocus 속성

 

HTML5는 예전에 많이 작성해야 했던 자바스크립트 작업을 줄여준다. 그 중의 하나로 autofocus를 쓰면 해당 입력으로 자동으로 이동하게 된다.

 

<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>  


"autofocus=autofocus" 라고 써도 된다.

 






16. Audio 지원

 

음성을 위해 써드 파티 플러그인에 의존하지 않고 HTML5 <audio> 엘리먼트를 이용하면 된다.


<audio autoplay="autoplay" controls="controls">
    <source src="file.ogg" /> 
    <source src="file.mp3" /> 
    <a href="file.mp3">Download this file.</a> 
</audio>   

브라우져별로 지원 포맷이 다르므로 주의해서 사용해야 한다.

 

17. Video 지원

 

<audio>처럼 HTML5 video도 지원한다. YouTube HTML5 video embed를 소개했지만 아직 HTML5 스펙이 코덱까지 정의한 건 아니라 코덱지원은 브라우저가 알아서 해야한다. Safari IE 9 H.264를 지원하며 Firefox과 오페라는 오픈진영인 Theora Vorbis를 지원하기 때문에 결국 아직까지는 둘 다 고려할 필요가 있다.


<video controls preload>
    <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" /> 
    <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" /> 
    <p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p> 
</video>   

-몇가지 주목할 점

 

1. 브라우저를 위해 비디오 type 속성을 꼭 정의해야 하는건 아니지만, 대역폭 문제를 해결을 위해 정의하는 게 낫다..

 

2. HTML5 video는 아직 미지원 브라우저가 많다. 여전히 Flash 비디오도 고려하는게 낫다.

 

3. controls preload 속성도 중요하다.

 






18. Preload Videos

 

웹사이트 방문자를 위해 비디오를 미리 로딩하여 대기시간을 줄여준다. 사용법은 preload="preload" 또는 preload 라고 비디오 태그 옆에 입력하면 된다.

 

<video preload> 






19. 디스플레이 컨트롤(Display Controls)


 

재생, 중지 같은 디스플레이 컨트롤을 붙이기 위해서는 video controls라고 적어주면 된다.

 

<video preload controls>  


Options

 






20. 정규표현식(Regular Expressions)

 

텍스트박스입력에서 특정 형식으로 입력받을때 편리하게 쓸 수 있는 정규표현식을 이제 HTML5에서는 바로 넣을 수 있다.

 

<form action="" method="post">
  <label for="username">Create a Username: </label> 
  <input type="text" 
     name="username" 
     id="username" 
     placeholder="4 <> 10" 
     pattern="[A-Za-z]{4,10}" 
     autofocus 
     required> 
  <button type="submit">Go </button> 
</form>   


위의 [A-Za-z]{4,10}라는 정규표현식은 알파벳문자로 4자에서 10자까지만 입력을 받겠다는 뜻이다.






 

21. 속성(Attributes) 지원여부 알아보기

 

속성들이 추가되어도 브라우저가 지원하지 않으면 소용이 없다. 지원 여부를 알아내는 방법은 두 가지가 있다. 첫번째는 Modernizr 라는 라이브러리를 쓰는 것이고 둘째는 브라우저가 뭘 할 수 있는지 분석하는 것이다. 이를테면, 브라우저가 pattern 속성을 지원하는지 파악하기 위해 이렇게 JavaScript를 사용한다.


alert( 'pattern' in document.createElement('input') ) // boolean;  


 

위의 방법은 브라우저 호환성을 알아내는데도 좋은 방법으로 jQuery 라이브러리도 이런식으로 한다.

 

<script>
if (!'pattern' in document.createElement('input') ) { 
    // do client/server side validation 
}
</script>  







 

22. Mark 엘리먼트

 

<mark>는 하이라이터(highlighter)로서 <mark>로 둘러싸인 문자는 현재 사용자의 액션과 관련이 된다. 예를 들어, 블로그에서 “Open your Mind”라는 문자열을 검색했다면, 자바스크립트로 그 문자가 나타날때마다 <mark> 로 둘러쌀 수 있다.

 

<h3> Search Results </h3>
<p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>   




 



23. <div>는 언제 쓰나요?

 

header,article, section, footer 이런식으로 의미적으로 다 구분이 된다면 그럼 이젠 div는 언제 쓸까요?

 

"Div는 다른 요소로 정의할 수 없을 때 쓰면 된다."

 

예를 들어, 그냥 특정 부분을 한 블럭으로 잡고 싶을 때 쓰면 된다. 하지만 관련글 목록을 블럭으로 잡는거라면 <article>이나 <nav>가 더 맞을 수 있다. 그런 의미가 있는 것 외에는 자유롭게 div를 쓰면 된다.

 






24. 즉시 사용할 수 있는 것

 

HTML5 2022년에나 완성된다고 하는데 이건 잘못된 생각이다. 사실 지금도 사용할 수 있는 HTML5 특징들이 있고, 그걸 프로젝트에 활용해도 된다. 아래 동영상을 참고바란다.

 

http://www.youtube.com/watch?v=HzCkSv3s0-k&feature=player_embedded

 






25. HTML5 가 아닌 것

 

자바스크립트를 쓰지 않고도 멋진 효과를 내는 게 웹 표준이 추구하는 방향이다. HTML5는 아니지만, 그런 역할을 하는 것들이 있다.

 

SVG   : Scalable Vector Graphics.

CSS3 :  말 그대로 CSS.

Client Storage :  HTML5에 포함되었다가 너무 복잡해질까봐 스펙에서 빠졌다.

Web Sockets : 아쉽지만 별도 스펙으로 작업이 진행된다.

 






26. The Data Attribute

 

공식적으로 모든 HTML 엘리먼트에서 사용자 속성을 지원한다. 전에는 다음과 같이 입력한 경우,

 

 <h1 id=someId customAttribute=value> Thank you, Tony. </h1> 

 

검증기가 문제를 검출해왔다. 그러나 data 속성과 함께 사용할 수 있게 되었다.

 

-HTML

 

<div id="myDiv" data-custom-attr="My Value"> Bla Bla </div>  


-사용자 정의 속성 값을 검색


var theDiv = document.getElementById('myDiv');
var attr = theDiv.getAttribute('data-custom-attr'); 
alert(attr); // My Val   


 

다음의 예제처럼 CSS에서 사용할 수도 있다.

 

<!DOCTYPE html>

<html lang="en"> 
<head>   
   <meta charset="utf-8"> 
   <title>Sort of Lame CSS Text Changing</title> 
<style> 

h1 { position: relative; } 
h1:hover { color: transparent; } 

h1:hover:after { 
    content: attr(data-hover-response); 
    color: black; 
    position: absolute; 
    left: 0; 
}

</style> 
</head> 
<body> 

<h1 data-hover-response="I Said Don't Touch Me!"> Don't Touch Me  </h1> 

</body> 
</html>






 


  

27. The Output Element

 

Output 엘레멘트는 마우스의 위치나 숫자의 합을 보여주는 등 어떤 데이터가 새롭게 삽입되어야할 때 사용한다

. 다음의 예제는 계산 버튼을 누르면 두 숫자의 합이 빈 칸에 표시되는 것을 보여준다.

 

 <form action="" method="get">  
    <p>  
        10 + 5 = <output name="sum"></output>  
    </p>  
    <button type="submit"> Calculate </button>  
</form>  
  
<script>  
(function() {  
    var f = document.forms[0];  
  
    if ( typeof f['sum'] !== 'undefined' ) {  
        f.addEventListener('submit', function(e) {  
            f['sum'].value = 15;  
            e.preventDefault();  
        }, false);  
    }  
    else { alert('Your browser is not ready yet.'); }  
})();  
</script>  


 

Output element

 






28. 슬라이더와 범위 입력(Range Input) 만들기

 

HTML5는 새로운 범위 타입의 입력 방식을 지원한다.

 

<input type="range">   

 

min, max, step, value 등의 속성을 부여할 수 있으며 브라우져에 따라 지원 정도는 다르다. 그러면 간단한 데모를 살펴보자.

 

Step 1: Mark-up

 

 <form method="post">  
    <h1> Total Recall Awesomness Gauge </h1>  
    <input type="range" name="range" min="0" max="10" step="1" value="">  
    <output name="result">  </output>  
</form>  

 

최소와 최대값을 추가하고 단위를 설정한다.

 

Unstyled range input

 

Step 2: CSS

 

 body {  
    font-family: 'Myriad-Pro', 'myriad', helvetica, arial, sans-serif;  
    text-align: center;  
}  
input { font-size: 14px; font-weight: bold;  }  
  
input[type=range]:before { content: attr(min); padding-right: 5px; }  
input[type=range]:after { content: attr(max); padding-left: 5px;}  
  
output {  
    display: block;  
    font-size: 5.5em;  
    font-weight: bold;  
}  


그림8과 같이 적용된다.

 

Styled Range

 

step 3: 자바스크립트

 

현재 브라우저의 지원 여부를 확인하여 사용자에게 알려주고 슬라이더가 움직이게 되면 현재 값을 업데이트하며 마우스 버튼에서 손을 놓을 경우 로컬 스토리지에 저장하여 다음에 사용자가 페이지를 다시 로드하게 되면 자동으로 과거 선택했던 값을 복원한다.

 

 
(function() {  
    var f = document.forms[0],  
        range = f['range'],  
        result = f['result'],  
        cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5;   
  
    // Determine if browser is one of the cool kids that  
    // recognizes the range input.  
    var o = document.createElement('input');  
    o.type = 'range';  
    if ( o.type === 'text' ) alert('Sorry. Your browser is not cool enough yet. Try the latest Opera.');  
  
    // Set initial values of the input and ouput elements to  
    // either what's stored locally, or the number 5.  
    range.value = cachedRangeValue;  
    result.value = cachedRangeValue;  
  
    // When the user makes a selection, update local storage.  
    range.addEventListener("mouseup", function() {  
        alert("The selected value was " + range.value + ". I am using local storage to remember the value. 

Refresh and check on a modern browser.");  
        localStorage ? (localStorage.rangeValue = range.value) : alert("Save data to database or 

something instead.");  
    }, false);  
  
    // Display chosen value when sliding.  
    range.addEventListener("change", function() {  
        result.value = range.value;  
    }, false);  
  
})();  


 

Styled Range with JS


TAG •

List of Articles
번호 제목 글쓴이 조회 수 날짜
공지 HTML5 참고 사이트 모음 신큰특스 161353 2010.08.30
공지 소스 코드는 Code Highlighter를 이용해주세요. sincntx 74432 2010.08.30
공지 강좌 / 팁 이용 안내 sincntx 73069 2010.08.30
133 웹표준 진단도구 신큰특스 9472 2014.04.08
132 앱템플릿 예제 활용 사이트 공유합니다. 씨트린 17470 2013.08.23
131 스프링부트, Spring Data JPA, Querydsl 쇼핑몰 실무프로젝트과정 탑크리에듀 102 2018.12.19
130 기본적인 HTML 문서 신큰특스 14582 2012.04.24
129 ◆2018년 상반기 자바 개발자 무료취업교육 (취업우수기관)◆ 수키 214 2018.03.07
128 ▶[정보처리기사학원] 정보처리기사 취득 양성과정(국비무료 자격증과정) 탑크리에듀 176 2018.05.31
127 ■ [블록체인] 블록체인 기반 자바 풀스택 개발자 양성 과정 에이콘 8 2018.11.26
126 [팁] 현재 자신의 브라우저의 HTML5 적용 시 점수는? 1 코리 9499 2010.09.10
125 [팁] 브라우저 크기를 간단하게 모바일 크기로 바꾸기 코리 16625 2010.10.19
» [팁] 꼭 알아야 하는 HTML5의 28가지 특징, 팁, 테크닉 신큰특스 37562 2011.10.28
123 [팁] video 자동 재생 되게 하는 방법 1 file 코리 19361 2010.10.15
122 [팁] CSS3 제작툴 엔토 13383 2010.09.14
121 [취업률 86%이상 NCS 무료교육]네트워크보안관리자,국가가 주목하는 4차산업시대 핵심직무 아이티윌GN 5 2018.12.10
120 [취업교육모집] 네트워크전문가,자바개발자_아이티윌 아이t 72 2018.06.13
119 [자마린학원/자마린교육]자마린(Xamarin) 크로스 플랫폼 앱개발 과정 C#으로 안드로이드, iOS 네이티브를 만들자 탑크리에듀 30 2018.10.29
118 [자마린실무강좌/자마린전문학원] 자마린(Xamarin) 크로스 플랫폼 앱개발 재직자 향상과정 탑크리에듀 26 2018.10.13
117 [자료] HTML 실전 가이드 6 코리 20379 2010.09.03
116 [오라클전문가과정/오라클학원교육]SQL 활용과 오라클(Oracle) Hint를 이용한 SQL튜닝 재직자 향상과정 탑크리에듀 38 2018.10.22
Board Pagination ‹ Prev 1 2 3 4 5 6 7 Next ›
/ 7

나눔글꼴 설치 안내


이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

이 사이트를 나눔글꼴로 보기 위해서는
나눔글꼴을 설치해야 합니다.

설치 취소

Designed by sketchbooks.co.kr / sketchbook5 board skin

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Copyright by sincntx 2014 All rights reserved.

sketchbook5, 스케치북5

sketchbook5, 스케치북5