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 •

  1. No Image notice

    HTML5 참고 사이트 모음

    이 게시물은 HTML5 개발에 참고할 수 있는 사이트 모음입니다. 1. Stackoverflow HTML5 소개 : HTML5 관련 질문 & 답변 URL : http://stackoverflow.com/questions/tagged/html5 2. HTML5 Showcase 소개 : 애플 제공 HTML5 소개 URL : http://www.apple.com/html5/ ...
    Date2010.08.30 By신큰특스 Views161353
    read more
  2. notice

    소스 코드는 Code Highlighter를 이용해주세요.

    소스 코드를 보기 좋게 표현하기 위해서 Code Highlighter 기능을 이용해주시길 부탁드립니다. 이용 방법은 다음과 같습니다. 1. 확장 컴포넌트를 누르면 나타나는 Code Highlighter를 누릅니다. 2. 다음과 같은 새로운 창이 뜨면 언어 종류를 선택하신 후 추가를 누릅...
    Date2010.08.30 Bysincntx Views74432
    read more
  3. No Image notice

    강좌 / 팁 이용 안내

    이 곳은 HTML5 개발을 하면서 필요한 다양한 정보들을 공유할 수 있는 장소입니다. 간단한 내용이라도 좋습니다. 자신만의 노하우나 비결을 마음껏 알려주세요. 몇가지 이용에 대한 안내를 드리자면, 1. 검색을 쉽게 할 수 있도록 해주세요. 다른 사람들이 이용할 때 쉽...
    Date2010.08.30 Bysincntx Views73069
    read more
  4. No Image

    웹표준 진단도구

    http://www.koreahtml5.kr/jsp/diagnosis/SP04.jsp
    Date2014.04.08 By신큰특스 Views9472
    Read More
  5. No Image

    앱템플릿 예제 활용 사이트 공유합니다.

    네이티브 어플리케이션을 템플릿 형식으로 제공해주는 사이트가 있어서 공유합니다. 안드로이드, iOS 어플리케이션 프로젝트 소스 파일도 제공해주고 실행파일도 있어서 구조 및 소스 보기가 용이하네요. 개발언어는 MOML이라고 기존 HTML 문법과 비슷한 XML 언어네요. M...
    Date2013.08.23 By씨트린 Views17470
    Read More
  6. No Image

    스프링부트, Spring Data JPA, Querydsl 쇼핑몰 실무프로젝트과정

    [자바 웹 프로그래밍]           스프링부트, Spring Data JPA, Querydsl 쇼핑몰 실무프로젝트과정     평일주간:http://topcredu.co.kr/sub/crcl/view/java/2335 주말주간:http://topcredu.co.kr/sub/crcl/view/java/2336           ★ 교육개요 ★     Spring Boot, JPA,...
    Date2018.12.19 By탑크리에듀 Views102
    Read More
  7. No Image

    기본적인 HTML 문서

    기본적인 HTML 문서는 다음과 같은 형태를 가진다. <!DOCTYPE html> <html> <head> <title>테스트 페이지</title> </head> <body> <h1>테스트 페이지</h1> <p>이 자료는 <a href="http://www.htmlfive.co.kr">HTML5 오픈 커뮤니티</a>에서 배포합니다.</p> <...
    Date2012.04.24 By신큰특스 Views14582
    Read More
  8. ◆2018년 상반기 자바 개발자 무료취업교육 (취업우수기관)◆

    [취업연계과정 아이티윌] 국비지원 무료교육, 사물인터넷 컨텐츠 융합을 위한 자바개발자 양성과정      
    Date2018.03.07 By수키 Views214
    Read More
  9. ▶[정보처리기사학원] 정보처리기사 취득 양성과정(국비무료 자격증과정)

    정보처리기사 취득 양성과정 (국비무료 자격증과정)       상세보기:http://www.topcredu.co.kr/sub/crcl/lecture/job ▼교육일정▼ 2018.6.2(토) ~  개강임박!!            ★ 교육개요 ★   프로그래밍 전문 교육기관에서 "정보처리기사(산업기사)" 공부하세요. 국비지원 ...
    Date2018.05.31 By탑크리에듀 Views176
    Read More
  10. No Image

    ■ [블록체인] 블록체인 기반 자바 풀스택 개발자 양성 과정

    Date2018.11.26 By에이콘 Views8
    Read More
  11. No Image

    [팁] 현재 자신의 브라우저의 HTML5 적용 시 점수는?

    자신의 브라우저가 지원하는 기능에 관련되서 HTML5 적용 시 점수를 알려주는 사이트가 있습니다. http://www.html5test.com IE 6.0 으로는 12점이 나오구요. 크롬 6.0 으로는 217점이 나옵니다^^
    Date2010.09.10 By코리 Views9499
    Read More
  12. No Image

    [팁] 브라우저 크기를 간단하게 모바일 크기로 바꾸기

    실제로 빌드하기 전에 모바일 페이지를 구축해놓고 브라우저 상에서 확인하시고 싶으실때가 많으실 겁니다. 브라우저 주소창에 다음과 같이 입력 후 엔터치시면 됩니다. (주의) 구글 크롬에서는 안먹히네요. 크롬은 다른 방법을 써야할듯합니다. -- 아이폰 -- javascript...
    Date2010.10.19 By코리 Views16625
    Read More
  13. [팁] 꼭 알아야 하는 HTML5의 28가지 특징, 팁, 테크닉

    다른 목적으로 번역한 글인데 괜찮은 자료라고 판단되어 공유합니다. 탈고를 거치기 전이라 번역이 매끄럽지 못한 점 이해 부탁드립니다 ^^ ================================================================================================= Nettus+에 Jeffrey Way...
    Date2011.10.28 By신큰특스 Views37562
    Read More
  14. No Image

    [팁] video 자동 재생 되게 하는 방법

    글 작성 일시 : 2010년 10월 15일 How to Embed Movies in a Web Page for the iPhone ( 원문 ) - 링크 : http://homepage.mac.com/qt4web/embedforiphone.html 비디오 자동 재생을 위해서 애플 개발자센터에서 지원하는 AC_QuickTime.js 가 필요합니다. - 다운로드 링크...
    Date2010.10.15 By코리 Views19361
    Read More
  15. No Image

    [팁] CSS3 제작툴

    CSS3를 마우스로 쉽게 제작할수있는 웹툴입니다. http://westciv.com/tools/3Dtransforms/index.html 현재 3D로 링크를 걸었는데 크롬에서는 작동이 안되는군요. 사파리에서는 쾌적하게 작동이 잘됩니다. 상단메뉴에 보시면 Linear Gradients Radial Gradients Text Prop...
    Date2010.09.14 By엔토 Views13383
    Read More
  16. No Image

    [취업률 86%이상 NCS 무료교육]네트워크보안관리자,국가가 주목하는 4차산업시대 핵심직무

    Date2018.12.10 By아이티윌GN Views5
    Read More
  17. No Image

    [취업교육모집] 네트워크전문가,자바개발자_아이티윌

    [취업교육모집] 네트워크전문가,자바개발자_아이티윌 IT전문교육기관 아이티윌에서 국비지원으로 전액무료로 교육이가능한 국가기간전략산업직종 훈련을 실시 중이며. 구직자 대상 취업반을 모집합니다. -------------------------------------------------------- * 교...
    Date2018.06.13 By아이t Views72
    Read More
  18. No Image

    [자마린학원/자마린교육]자마린(Xamarin) 크로스 플랫폼 앱개발 과정 C#으로 안드로이드, iOS 네이티브를 만들자

    [자마린학원/자마린교육]     자마린(Xamarin) 크로스 플랫폼 앱개발 과정   C#으로 안드로이드, iOS 네이티브를 만들자      평일주간: http://topcredu.co.kr/sub/crcl/view/open/2298   평일야간: http://topcredu.co.kr/sub/crcl/view/open/2274   주말주간: http://...
    Date2018.10.29 By탑크리에듀 Views30
    Read More
  19. No Image

    [자마린실무강좌/자마린전문학원] 자마린(Xamarin) 크로스 플랫폼 앱개발 재직자 향상과정

    [자마린학원/자마린교육]     자마린(Xamarin) 크로스 플랫폼 앱개발 과정   C#으로 안드로이드, iOS 네이티브를 만들자      평일주간: http://topcredu.co.kr/sub/crcl/view/open/2298   평일야간: http://topcredu.co.kr/sub/crcl/view/open/2274   주말주간: http://...
    Date2018.10.13 By탑크리에듀 Views26
    Read More
  20. No Image

    [자료] HTML 실전 가이드

    출처 : http://webstandards.or.kr/html5 처음 시작하기전 개념 잡을 때 괜찮을 것 같습니다.
    Date2010.09.03 By코리 Views20379
    Read More
  21. No Image

    [오라클전문가과정/오라클학원교육]SQL 활용과 오라클(Oracle) Hint를 이용한 SQL튜닝 재직자 향상과정

      [오라클학원/SQL교육]     SQL 활용과 오라클(Oracle) Hint를 이용한 SQL튜닝 재직자 향상과정     평일주간: http://topcredu.co.kr/sub/crcl/view/emp/2257   주말주간: http://topcredu.co.kr/sub/crcl/view/emp/2234     ★ 교육개요 ★    프로그램 개발 시 개발자...
    Date2018.10.22 By탑크리에듀 Views38
    Read More
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