'HTML5.0'에 해당되는 글 17건

  1. 2019.10.09 windy 실시간 기상 영상
  2. 2013.04.05 HTML --> PDF 파일로 변환 하기 . 펌) 정윤재님 노트
  3. 2012.06.08 div 불투명 깔기 . 소스
  4. 2012.06.08 html animation
  5. 2012.06.07 div의 overflow 및 postion
  6. 2012.06.05 캔버스 위에 div 를 올리자.
  7. 2012.06.05 canvas source
  8. 2012.06.04 HTML 5.0 구조 및 FORM image
  9. 2012.06.04 HTML 5 설명 글 중 (일본어를 구글로 강제 번역함 ㅠㅠ )
  10. 2012.06.04 adobe Edge
  11. 2012.06.04 캔버스 간단한 마우스 그리기
  12. 2012.06.04 캔버스 이미지 뛰우기 .
  13. 2012.05.24 canvas 사이트 모음 .
  14. 2012.05.22 Canvas
  15. 2012.05.14 html4.0 을 html 5.0 으로 변환
  16. 2012.05.14 Aptana 설치
  17. 2012.05.14 HTML 이란.

windy 실시간 기상 영상

 | HTML5.0
2019. 10. 9. 17:36

'HTML5.0' 카테고리의 다른 글

HTML --> PDF 파일로 변환 하기 . 펌) 정윤재님 노트  (0) 2013.04.05
div 불투명 깔기 . 소스  (0) 2012.06.08
html animation  (0) 2012.06.08
div의 overflow 및 postion  (0) 2012.06.07
캔버스 위에 div 를 올리자.  (0) 2012.06.05
Posted by 사라링
트랙백 : 댓글

HTML --> PDF 파일로 변환 하기 . 펌) 정윤재님 노트

 | HTML5.0
2013. 4. 5. 14:25

출처) http://shonm.tistory.com/category/JAVA/PDF%20%EB%B3%80%ED%99%98


추가글 : http://guni.tistory.com/223  < itext 설명 



itext 라는 library 로 html -> pdf 로 변환이 가능 하다.

 

소스는 아래와 같다.

 

필요한 한글 font 파일과 library 파일들은 첨부 한다.

 

 

1. 한국어는 역시 폰트 문제 때문에 고생이다. font 설정을 위한 class 파일 생성이

필요하다.

 

package com.incross.pdf;

import java.io.IOException;

import com.itextpdf.text.BaseColor;
import com.itextpdf.text.DocumentException;
import com.itextpdf.text.Font;
import com.itextpdf.text.FontFactoryImp;
import com.itextpdf.text.pdf.BaseFont;

 

public class DefaultFontProvider extends FontFactoryImp {
 private String _default;
 public DefaultFontProvider(String def) {
  _default = def;
 }
 // I believe this is the correct override, but there are quite a few others.
 public Font getFont(String fontname,String encoding, boolean embedded, float size,int style, BaseColor color) {
  try {

   return new Font(BaseFont.createFont(_default, BaseFont.IDENTITY_H, BaseFont.EMBEDDED), 9, style, BaseColor.BLACK);
  } catch (DocumentException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  } catch (IOException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
  return null;
 }
}

 

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

 

2. pdf 만드는 로직이 필요하다.

 

package com.incross.pdf;


import java.io.FileOutputStream;
import java.io.StringReader;
import java.util.HashMap;
import java.util.List;
import com.incross.pdf.DefaultFontProvider;
import com.itextpdf.text.Document;
import com.itextpdf.text.Element;
import com.itextpdf.text.PageSize;
import com.itextpdf.text.html.simpleparser.HTMLWorker;
import com.itextpdf.text.html.simpleparser.StyleSheet;
import com.itextpdf.text.pdf.PdfWriter;


public class ConvertHTMLToPDF {
 public static void main(String[] args) {     
  String file = "c:\\test.pdf";   
  
  PdfWriter pdfWriter = null;       
  
  
  try{
  
    //create a new document   
    Document document = new Document();       
      
    //get Instance of the PDFWriter    
    pdfWriter = PdfWriter.getInstance(document, new FileOutputStream(file));         
 
    document.setPageSize(PageSize.A4);      
 
    document.open();        


    HTMLWorker htmlWorker = new HTMLWorker(document);
    
    
    HashMap<String,Object> interfaceProps = new HashMap<String,Object>();
     
   
    StyleSheet styles = new StyleSheet();
    
   
    
    DefaultFontProvider dfp=new DefaultFontProvider("c:\\malgun.ttf");
    //폰트 파일 설정 (한글 나오게 하기 위해 설정 필요함
    interfaceProps.put(HTMLWorker.FONT_PROVIDER,dfp);


    
    StringBuffer sb = new StringBuffer();
       sb.append("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
       
       sb.append("<html xmlns=\"http://www.w3.org/1999/xhtml\">");    
    
       sb.append("<html>");
    
    sb.append("<head>");
    
    sb.append("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />");
    //sb.append("<link rel=\"stylesheet\" type=\"text/css\" href="+StringUtil.getPropWord("pdf.css.path")+" />");
    sb.append("</head>");
    
    sb.append("<body>");
    
    sb.append("<table border='1'>");
    
    sb.append("  <tr>");
    
    sb.append("    <td> 테스트  </td>");
    
    sb.append("  <tr>");
    
    sb.append("</table>");
    
    sb.append("<img src='http://static.naver.net/www/u/2010/0611/nmms_215646753.gif'/>");

    sb.append("</body>");
    
    
    sb.append("</html>");
    
    System.out.println("html:"+sb.toString());
    

    StringReader strReader = new StringReader(sb.toString());

    List<Element> objects = htmlWorker.parseToList(strReader, styles, interfaceProps);
    
    for (int k = 0; k < objects.size(); ++k){
     
     document.add((Element) objects.get(k));

    }

    document.close();   
    //close the writer    
    pdfWriter.close();     
  }catch(Exception e){
   e.printStackTrace();
  }
 }    
 


 }

 

 

 dom4j.jar

 

 itext-pdfa-5.3.3.jar

 

 itext-xtra-5.3.3.jar

 

 itextpdf-5.3.3.jar

 

 jaxen-full.jar

 

 jdom.jar

 

 xmlworker-1.2.0.jar

 

 malgun.ttf

 

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

 

결과 화면

저작자표시

'HTML5.0' 카테고리의 다른 글

windy 실시간 기상 영상  (0) 2019.10.09
div 불투명 깔기 . 소스  (0) 2012.06.08
html animation  (0) 2012.06.08
div의 overflow 및 postion  (0) 2012.06.07
캔버스 위에 div 를 올리자.  (0) 2012.06.05
Posted by 사라링
트랙백 : 댓글

div 불투명 깔기 . 소스

 | HTML5.0
2012. 6. 8. 18:19
<script type="text/javascript">
        // [ by Park. ] AlphaLayer Object Function
        alpha = new Object
        alpha = {
            clear  : function() { 
                        alpha.create().style.display = "none"
                        document.getElementsByTagName('HTML')[0].style.overflow = "";
                },
            apply  : function(co,op) {
                        var Alpha = alpha.create()
                        var alphacolor = co ? co : "#ffffff"
                        var opacity = op ? op : "50"
                        document.getElementsByTagName('HTML')[0].style.overflow = "hidden";
                        with (Alpha.style) {
                            width      = document.body.scrollWidth + "px";
                            height     = document.body.scrollHeight + "px";
                            background = alphacolor;
                            filter     = "alpha(opacity=" + opacity + ")";
                            opacity    = op / 100;
                            display    = "block";
                        }
                },
            create : function() {
                        if (!document.getElementById('alpha')) {
                            var alphaDiv = document.createElement('div');
                            alphaDiv.setAttribute('id', 'alpha');
                            with(alphaDiv.style) {
                                display  = "none";
                                position = "absolute";
                                top      = "0";
                                left     = "0";
                                zindex   = "90";
                            }
                            document.body.appendChild(alphaDiv)
                            window.onresize = alpha.resize
                        }
                        return document.getElementById('alpha')
                },
            resize : function() {
                        var Alpha = alpha.create()
                        with (Alpha.style) {
                            width      = document.body.scrollWidth + "px";
                            height     = document.body.scrollHeight + "px";
                        }
                }
        }
    </script>


사용방법
- 알파레이어 온    : alpha.apply('색상','투명도')  [ 색상 및 투명도 미지정시 디폴트는 흰색에 50% 입니다 예) alpha.apply() ]
- 알파레이어 오프  : alpha.clear()




+++ 추가

HTML 반투명 Layer 생성


<html>

<head> 


<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=euc-kr"> 


<title>Layer Test</title>


<script language="JavaScript"> 


var newArticleDivId = "write_article_layer";

var newArticleUrl = "http://www.naver.com/";

var minimumMargine = 50;

var maximumWidth = 800;


/*

 * openLayeredDialog

 * 레이어에 떠 있는 iFrame을 웹 페이지에 표시한다.

 */

function openLayeredDialog() {

    // 배경이 되는 반투명 레이어를 생성한다.

    var div1 = document.createElement("DIV");

    div1.id = newArticleUrl;

    div1.onclick = function () {closeLayeredDialog(false);};

    div1.style.position = "absolute";

    div1.style.height = "100%";

    div1.style.width = "100%";

    div1.style.top = "0";

    div1.style.left = "0";

    div1.style.background = "#000000";

    div1.style.opacity = "0.6";

    div1.style.filter = "alpha(opacity=60)";

    

    // iFrame을 담는 레이어를 생성한다.

    var div2 = document.createElement("DIV");

    div2.id = newArticleDivId + "_inner";

    div2.style.position = "absolute";

    div2.style.background = "#ffffff";

    

    // iFrame을 생성한다.

    var iframe1 = document.createElement("IFRAME");

    iframe1.src = newArticleUrl;

    iframe1.frameborder = "0";

    iframe1.style.height = "100%";

    iframe1.style.width = "100%";

    

    // 앞서 생성한 Element들을 웹 페이지에 추가한다.

    div2.appendChild(iframe1);

    document.body.appendChild(div1);

    document.body.appendChild(div2);

    

    // 레이어의 크기를 조정한다.

    adjustmentLayeredDialog();

    

    // 웹브라우저의 크기를 조절할 때 발생하는 이벤트의 핸들러를 등록한다.

    window.onresize = function(event) {adjustmentLayeredDialog();};

}


/*

 * closeLayeredDialog

 * 레이어를 제거한다.

 * 인자 normalClose가 true라면 Confirm 대화 창을 표시한다.

 * 인자 normalClose가 false라면 Confirm 대화 창을 표시하지 않는다.

 */

function closeLayeredDialog(normalClose) {

    // Confirm 대화 창을 표시한다.

    if (!normalClose) {

        willClose = confirm("이 페이지에서 나가면 작성하던 내용들은 저장되지 않습니다.\n정말 나가겠습니까?");

    } else {

        willClose = true;

    }

    

    // 레이어를 제거한다.

    if (willClose) {

        var child_background = document.getElementById(newArticleDivId);

        var child_inner = document.getElementById(newArticleDivId + "_inner");

        

        if (child_background) {

            document.body.removeChild(child_background);

        }

        if (child_inner) {

            document.body.removeChild(child_inner);

        }

        

        // 레이어를 제거하며 웹브라우저의 크기를 조절할 때 발생하는 이벤트의 핸들러도 제거한다.

        window.onresize = null;

    }

}


/*

 * adjustmentLayeredDialog

 * 레이어를 크기와 위치를 조정한다.

 */

function adjustmentLayeredDialog() {

    var child_inner = document.getElementById(newArticleDivId + "_inner");

    if (child_inner) {

        var clientHeight = document.body.clientHeight;

        var clientWidth = document.body.clientWidth;

        var top = minimumMargine;
        var left = 0;

       

        var height = clientHeight - minimumMargine * 2;

        var width = clientWidth - minimumMargine * 2;

        

        if (width > maximumWidth) {

            width = maximumWidth;

        }

            

        left = (clientWidth - width) / 2;

    

        child_inner.style.height = height;

        child_inner.style.width = width;

        child_inner.style.top = top;

        child_inner.style.left = left;

    }

}


</script> 


</head> 


<body>


<a href="javascript:openLayeredDialog();">레이어 보이기</a>


</body>

</html>



저작자표시

'HTML5.0' 카테고리의 다른 글

windy 실시간 기상 영상  (0) 2019.10.09
HTML --> PDF 파일로 변환 하기 . 펌) 정윤재님 노트  (0) 2013.04.05
html animation  (0) 2012.06.08
div의 overflow 및 postion  (0) 2012.06.07
캔버스 위에 div 를 올리자.  (0) 2012.06.05
Posted by 사라링
트랙백 : 댓글

html animation

 | HTML5.0
2012. 6. 8. 16:05

oinc는 Firefox와 chrome에서 테스트 했습니다. IE에서는 테이블이 깨지거나 이미지가 보이지 않을 수 있습니다. 특히 구글 Docs이미지의 경우 엑박처리될 수 있습니다.

Contents

1 시작하기
2 몇가지 알아 둘 점
2.1 자바스크립트는 변수의 이름에 대,소문자 구별을 한다
2.2 자바스크립트는 브라우저안에서 1개의 쓰레드로 돌아간다
2.3 한 개의 function이 끝날때까지 화면에 적용 되지 않는다
2.4 자바스크립트에는 sleep() 이 없다
3 애니메이션을 구현하는 방법
3.1 몇가지 필터들
3.1.1 BlendTrans
3.1.2 RevealTrans
3.2 타이머를 이용한 애니메이션
3.2.1 setInterval
3.2.2 setTimeout
3.2.3 ClearTimeout
4 마치며


1 시작하기

  • 인터넷 브라우저에서 애니메이션을 구현하는 방법은 많다. flash를 이용하는 방법도 있고 HTML 기본 매크로를 이용하는 방법도 있다.
  • 이 문서에서는 IE(Netscape에서는 동작하지 않는다)에서 JavaScript(JS)를 이용해 애니메이션을 구현하는 방법을 다루고 있다.

2 몇가지 알아 둘 점


2.1 자바스크립트는 변수의 이름에 대,소문자 구별을 한다

  • joinc, Joinc, jOiNc 는 모두 다른 변수명이며 함수 이름으로 쓰일 때 역시 모두 다른 함수로 쓰인다.

2.2 자바스크립트는 브라우저안에서 1개의 쓰레드로 돌아간다

  • 이 부분은 처음 JS를 이용한 애니메이션을 구현했을 때 간과할 수 있는 부분이다.
  • JS는 브라우저 내에서 1개의 쓰레드가 잡스케쥴 되어 동작한다.
  • 1개의 트랜지션이 시피유를 독점한다면 다음 애니메이션은 보이지 않게 될 것이고, 한개의 애니메이션이 완벽하게 보인다고 해서 이를 간과한 설계를 한다면 동시에 여러개의 애니메이션이 이루어 질 때 낭패를 보게 될 것이다. (원하지 않은 위치로 이동, 떨림 현상 등)

2.3 한 개의 function이 끝날때까지 화면에 적용 되지 않는다

  • 예를 들어 레이어를 여러 개의 지점으로 이동시키는 함수가 있다고 하자. 이 함수를 실행시키면 화면에 빠르게 레이어가 이동 할 것이라고 예상한다. 하지만 자바스크립트에서 그 함수가 완전히 끝난 후에 return 이 떨어져야만 화면의 변화가 일어난다. (재귀적으로 자신을 호출해도 역시 결과는 같다.)
<script>
function move()
{
  var div=document.body.all["box"];
  div.style.left = "10px";
  div.style.top = "10px";
  div.style.left = "100px";
  div.style.top = "100px";
}
</script>
<body onload="move()">
<div id="box" style="position:absolute;border:1px solid black;width:100px;height:100px">상자~</div>
</body>
  • 위의 내용을 저장해서 브라우저로 보면 상자는 그냥 100, 100 의 위치로 이동한다. 절대 10, 10 으로 이동했다가 100, 100 으로 이동하지 않는다. 그럼 어떻게 해야 하는가! sleep()을 쓰면 될까? 아래를 보자..

2.4 자바스크립트에는 sleep() 이 없다

  • sleep()는 대부분의 언어(스크립트 포함)들이 지원하는 함수이다. 하지만 자바스크립트에는 없다. sleep() 이라는건 설정된 시간동안 잠잔다는걸 의미한다. 위에서 얘기한대로 자바스크립트는 1개의 단일 쓰레드에서 동작한다. 1개의 function이 sleep() 한다고 해도 기다려 줄 수가 없는 것이다.
  • 편법이 있지 않을까? 하는 사람이 있을 것이다. 본인이 이미 해봤다. 아래를 보자 -_-;
<script>
function plzplzplzplz_sleep()
{
  //자바애플릿의 thread.sleep()를 호출
}
</script>
자바애플릿 자바스크립트
thread.sleep(); |
  • plzplzplzplz_sleep()를 호출하면 sleep()과 같은 효과를 낼 수 있을까? 정답은 있다! 이다.
  • 타이머가 생겼다. 뭘 할 수 있을까? 혹시 plzplzplzplz_sleep() 에서 자바애플릿의 타이머를 호출하기 전과 후에 레이어의 위치를 이동시키면 애니메이션이 일어나지 않을까? 이번엔 NO 이다. 아까 말했듯이 한 개의 function이 완전히 완료 되야만 화면에 반영된다. 결론적으로 타이머가 있다고 해서 할 수 없었던 걸 할 수 있게 된 건 아니다.

3 애니메이션을 구현하는 방법

3.1 몇가지 필터들

  • CSS에는 filter 라는 property가 있다. 대부분의 DOM 오브젝트 들에는 filters 라는 객체가 있다. 이것들 중에서 자연스럽게 애니메이션을 구현 할 수 있는 필터들이 있다. (사실 이들은 transition들 이다.)
  • 일단 아래의 필터들을 한번 보자.

3.1.1 BlendTrans 

<script>
function transition()
{
  document.all["transition_div"].style.filter="blendTrans(duration=1)";
  document.all["transition_div"].filters.blendTrans.Stop();
  document.all["transition_div"].filters.blendTrans.Apply();
  document.all["transition_div"].style.backgroundColor="black";
  document.all["transition_div"].filters.blendTrans.Play();
}
</script>
<div id="transition_div" onmouseover="transition()" style="width:100px;height:100px">마우스를 올려놓으면 배경색이 바뀐다.</div>

3.1.2 RevealTrans 

<script>
function transition()
{
        document.all["transition_div"].style.filter="revealTrans(duration=1,transition=23)";
        document.all["transition_div"].filters.revealTrans.Stop();
        document.all["transition_div"].filters.revealTrans.Apply();
        document.all["transition_div"].style.backgroundColor="black";
        document.all["transition_div"].filters.revealTrans.Play();
}
</script>
<div id="transition_div" onmouseover="transition()" style="width:100px;height:100px">마우스를 올려놓으면 배경색이 바뀐다.</div>

  • blendTrans 는 서서히 오버레이 되듯 변화하고 revealTrans 는 transition 이라는 property의 값에 따라 변하는 모양이 다르다. 23은 랜덤한 모양으로 변화한다. transition 의 값들은 이 링크를 참고.
  • http://msdn.microsoft.com/workshop/author/filter/filters.asp
  • 둘다 지켜줘야 한다면 filters.FILTERNAME.Apply() 와 Play() 사이에 변화가 일어날 조건들을 넣어줘야 한다는 것이다. Stop()를 Apply() 전에 써준 것은 혹시나 이전에 애니메이션이 일어나고 있다면 멈추게 하려고 넣은 것이다. (사실 보다 안전한 방법이 있다. 애니메이션이 play 되고 있는지 아닌지를 판별하여 플레이 되고 있다면 멈추게도 할 수 있다. 각 필터마다 status 라는 property가 있다.)

3.2 타이머를 이용한 애니메이션

  • 올것이 왔다...

3.2.1 setInterval

  • 이 함수의 원형이다. vCode에는 실행시킬 다른 함수, iMilliSeconds는 int형의 밀리초 단위의 시간을 넣어준다. 리턴되는 값은 자바스크립트 내부에서 알고 있는 이 타이머의 ID 이다.
''iTimerID'' = window.'''setInterval'''(''vCode'',''iMilliSeconds'' '''[''', ''sLanguage''''']''')

예제
<script>
var i=0;
function plus()
{
        i++;
        document.body.innerText=i;
}
setInterval("plus()",1000);
</script>
<body></body>
  • 이 놈이 하는 일은 iMilliSeconds 만큼의 시간마다 vCode를 호출 하는 것이다. 위의 예제는 애니메이션이 아니던가?

예제
<script>
function move()
{
        document.body.all[0].style.top=document.body.all[0].offsetTop+1;
}
</script>
<body onload="setInterval('move()',100)">
<div style="position:absolute;border:1px solid black;top:1px">점점 커진다!!!!!</div>
</body>
  • 속았죠? 무슨 말인지는 실행을.. 이번엔 상식적으로 이해가 가는 애니메이션 이었다.

3.2.2 setTimeout

''iTimerID'' = window.'''setTimeout'''(''vCode'',''iMilliSeconds'' '''[''', ''sLanguage''''']''')
  • 위의 setInterval()과 똑같다! 그럼 뭐가 다른거지?
  • setInterval()은 한번 호출되면 브라우저가 종료되거나 Timer가 클리어 되기 전까지 계속 설정된 시간마다 vCode를 호출한다. 결론부터 말하면 setInterval()은 글자나 레이어를 깜빡이는 식의 단순한 동작에나 가끔 쓰인다. setTimeout()은 설정된 시간후에 vCode를 한번 실행 시킨다. 자바스크립트에서의 에니메이션에서 가장 중요한 눔이 바로 setTimeout() 이다!!!
  • 주의) setTimeout은 IE의 특정 버전에서 메모리릭 버그가 있다. 뉴스그룹을 뒤져보시라
  • 흠흠 왜 중요하냐면 애니메이션은 항상 일어나는게 아니라 특정한 동작이 있을때만 일어나고 의도하는만큼 움직이고 멈춰서야 하기 때문이다. setTimeout()은 단발성이므로 애니메이션의 한프레임 단위의 컨트롤이 가능하다.

예제
<script>
function move()
{
        document.body.all[0].style.top=document.body.all[0].offsetTop+1;
}
</script>
<body onload="setTimeout('move()',100)">
<div style="position:absolute;border:1px solid black;top:1px">점점 커진다!!!!!</div>
</body>
  • 위의 코드를 실행하면 처음에 한번 움찔 하고 말 것이다. setInterval()과 동일한 효과를 주려면 어떻게 해야 할까?

예제
<script>
function move()
{
        document.body.all[0].style.top=document.body.all[0].offsetTop+1;
        setTimeout('move()',100);
}
</script>
…
  • 똑같이 움직이는가? 이 문서를 잘! 읽은 사람이라면 질문을 할 것이다. 한 개의 function 내에서는 동작이 끝나야 화면에 적용된다는건 어디로 가버린거냐! 흥분하지 말고 아래를 보자
move() 실행
레이어를 아래로 1 픽셀 이동한다
100ms 후에 move() 호출 예약
move() 종료, 화면 반영

100ms 후, move() 실행

레이어를 아래로 1 픽셀 이동한다

100ms 후에 move() 호출 예약

move() 종료, 화면 반영
  • 이것의 반복이다.. setTimeout을 호출하고 function 는 종료 되는 것이다.. 당연히 화면에 반영된다.

예제: 100픽셀만 아래로 내리기
<script>
function move()
{
        if (document.body.all[0].offsetTop >= 100) return;
        document.body.all[0].style.top=document.body.all[0].offsetTop+1;
        setTimeout('move()',100);
}
</script>
…
  • 단 한줄이 추가되었다.
if (document.body.all[0].offsetTop >= 100) return;
  • 레이어의 위치가 위에서 100 픽셀이라면 move() 함수가 바로 return 되버린다. 당연히 return 아래에 있는 setTimeout()은 호출되지 않고 애니메이션은 중지된다. 이를 이용한 무수한 조합은 DIY!

3.2.3 ClearTimeout

  • 중요하다! 위의 setTimeout() 으로 아무리 컨트롤을 잘 한다고 해도 예외는 항상 존재한다!!

예제
<script>
function move()
{
        //레이어를 1픽셀씩 20까지 아래로 이동한다.
        if (document.body.all[0].offsetTop == 20) return;
        document.body.all[0].style.top=document.body.all[0].offsetTop+1;
        setTimeout('move()',100);
}
function move2()
{
        //레이어를 화면 맨 위로 이동한다.
        if (document.body.all[0].offsetTop == 0) return;
        document.body.all[0].style.top=document.body.all[0].offsetTop-1;
        setTimeout('move2()',100);
}
</script>
<body onload="setTimeout('move()',50); setTimeout('move2()',100);">
<div style="position:absolute;border:1px solid black;top:10px">점점 커진다!!!!!</div>
</body>
  • 어떤가! -_-; 덜덜덜 떨고 있는 레이어가 보이시는가. 이 예제는 극적인 상황을 억지로 연출한 것이지만 실제로 이렇게 의도하지 않은 상황이 벌어질 수 있다. move()와 move2()가 서로 자신이 원하는 위치로 레이어를 움직이려고 힘을 쓰는 것이다. 아래의 예제에서는 950ms 후에 move2의 타이머를 클리어 해버림으로써 950ms 후에는 정상적으로 애니메이션된다.

예제
<script>
var timer1, timer2;
function move()
{
        if (document.body.all[0].offsetTop == 20) return;
        document.body.all[0].style.top=document.body.all[0].offsetTop+1;
        timer1=setTimeout('move()',100);
}
function move2()
{
        if (document.body.all[0].offsetTop == 0) return;
        document.body.all[0].style.top=document.body.all[0].offsetTop-1;
        timer2=setTimeout('move2()',100);
}
function kill_move()
{
        clearTimeout(timer2);
}
</script>
<body onload="setTimeout('move()',50); setTimeout('move2()',100); setTimeout('kill_move()',950); ">
<div style="position:absolute;border:1px solid black;top:10px">점점 커진다!!!!!</div>
</body>
  • 저게 뭔소린가 하는 사람은 아래를 보라. (그리기 정말 귀찮다 ㅠ_ㅠ)

50ms timer1 = move()

100ms
timer2 = move2()
150ms timer1 = move()

200ms
timer2 = move2()
250ms timer1 = move()

300ms
timer2 = move2()
350ms timer1 = move()

400ms
timer2 = move2()
450ms timer1 = move()

500ms
timer2 = move2()
550ms timer1 = move()

600ms
timer2 = move2()
650ms timer1 = move()

700ms
timer2 = move2()
750ms timer1 = move()

800ms
timer2 = move2()
850ms timer1 = move()

900ms
timer2 = move2()
950ms timer1 = move()
timer2를 clearTimeout으로 해제
1000ms

move2()는 앞으로 실행되지 않는다
1050ms timer1 = move()


  • 간단히 얘기하면 setTimeout 은 앞으로 몇ms 후에 어떤 작업을 하라고 예약하는 것이고 clearTimeout은 예약된 작업이 깨어나기 전에 작업 자체를 없애버리는 것이다.

4 마치며

  • 실제 JS를 이용한 개발 작업 중에는 위의 예제들 보다 많은 예외 상황을 고려해야 하며 예기치 못한 문제가 어디서 나올지 모른다. 몇가지 특성만을 잘 파악한다면 원하는 효과들을 구현하는데 문제가 없을 것이다.

출처 : http://www.joinc.co.kr/modules/moniwiki/wiki.php/JavaScript%B8%A6%20%C0%CC%BF%EB%C7%D1%20%BE%D6%B4%CF%B8%DE%C0%CC%BC%C7#s-2.2


저작자표시

'HTML5.0' 카테고리의 다른 글

HTML --> PDF 파일로 변환 하기 . 펌) 정윤재님 노트  (0) 2013.04.05
div 불투명 깔기 . 소스  (0) 2012.06.08
div의 overflow 및 postion  (0) 2012.06.07
캔버스 위에 div 를 올리자.  (0) 2012.06.05
canvas source  (0) 2012.06.05
Posted by 사라링
트랙백 : 댓글

div의 overflow 및 postion

 | HTML5.0
2012. 6. 7. 18:33

div 태그에서 스크롤을 사용하기 위헤서는 overflow속성을 이용한다.

2D인 화면에서 스크롤은 x, y 축으로 발생할수 있는데, 각각을 따로 설정하기 위해서는 overflow-x, overflow-y를 사용하고, 둘다 한꺼번테 컨트롤 하기 위해서는 overflow만을 사용한다.

 

속성값은 항상 보이기 위해서는 scroll, div영역이 해당 설정영역을 넘어갈때 자동으로 스크롤을 보이게 하기 위해서는 auto를 값으로 사용한다. 또한, 스크롤을 숨기기위해서는 hidden을 사용하면 된다.

 

 

 

몇가를 예를 보자.

1. 가로 600px 이상이 되면 스크롤이 생김, 스크롤은 600이 넘지 않아도 보임

<div style="width:600px; overflow-x:scroll></div>

 

2. 가로 600px 이상이 되면 스크롤이 자동으로 생김. 가로 600이 넘지 않으면 스크롤은 보이지 않음

<div style="width:600px; overflow-x:auto></div>

 

3. 조금 복잡하게 사용해 보자.

스크롤을 자동으로 생기도록 하는데, 세로 스크롤이 처음부터 생기는것을 패딩해 주고, overflow-y=hidden으로 세로 스크롤을 강제로 보이지 않도록 하면된다.

<div style="width:600px; overflow:auto; overflow-y:hidden; height:auto; padding:0 0 17px 0;">

 


오랫만에 html / css 글을 작성합니다.
오늘은 css의 속성인 포지션 (position) 에 대해 포스팅해 보겠습니다.

사용된 이미지를 클릭하시면 조금은 크게 보실 수 있습니다.

일단 포지션(position) 을 이용한 예를 정리해 보겠습니다.

1. 포지션(position)을 이용한 예

다음 뷰 position:absolute;

다음뷰에서 볼 수 있는 화면입니다.
해당 제목에 마우스 오버를 하게 되면 간략한 내용의 박스가 나타나는 형태입니다.
이것도 포지션 (position)을 이용한 방법입니다.

지마켓 홈페이지 position:absolute;

홈페이지에서 많이 사용되는 퀵메뉴 or 윙메뉴 입니다.
홈페이지의 스크롤에 따라다니는 메뉴바 형태입니다.
이런 형태 또한 포지션(position) 을 이용해 위치를 고정시키고, 자바스크립트를 이용해 스크롤을 따라다는 모양으로 만들어 줍니다.

배너 position:absolute;

故노무현 전 대통령 서거 당시 블로그에 많이 보였던 배너 형태입니다.
이렇게 브라우져의 한 부분으로 위치시킬 경우에도 포지션(position)을 사용합니다.

2. 포지션 (position) 이란?
포지션 (position)은 요소의 위치를 설정할때 사용합니다.
위의 예처럼, 자신이 원하는 위치에 설정할 수 있습니다.

포지션 (position)의 속성 값에는 absolute, relative, fixed, static, inherit  총 5가지가 있습니다.
그리고 위치 설정을 하기 위해서는 top, left, bottom, right 의 스타일을 추가해주면 됩니다.
예) position:absolute, top:20px; left:20px;  절대적인 위치로 위로부터 20px 왼쪽으로부터 20px 떨어진 위치에 고정됩니다.

static - 포지션의 기본값으로 위치 설정을 해줄 수 있습니다.
absolute - 절대위치
relative - 상대위치
fixed - 위치를 고정시킵니다. 브라우져의 스크롤을 이동해도 정해진 위치에 고정시킵니다.
inherit  - 부모의 속성을 상속시켜줍니다.

지금까지는 사전적인 의미입니다.

3. 포지션 (position) 예제
가장 많이 이용하는 absolute, relative, fixed 를 예제로 보여드리겠습니다.

포지션 (position)의 속성이 relative 일 경우에는 현재 위치에서의 상대적인 위치에 이동을 합니다.

포지션 (position)의 속성이 absolute 일 경우에는 두가지 형태로 나뉘게 됩니다.
absolute 된 엘리먼트의 상위 엘리먼트의 속성이 relative 인것과 아닌것으로 나뉩니다.
아닐 경우에는, 브라우져 (body) 를 기준으로 절대적인 위치를 가지게 되고,
상위 엘리먼트의 속성이 relative 일 경우에는 상위 엘리먼트를 기준으로 절대적인 위치로 이동합니다.


포 지션 (position)의 속성인 fixed는 이미지에서 보는거와 같이 스크롤이 이동해도 항상 자신의 위치에서 이동이 없습니다. fixed 의 기준점은 브라우져 (body) 입니다. 그러므로, 브라우져의 스크롤을 이동하여도 브라우져가 기준점이기 때문에 이동하지 않습니다.

1.포지션(position)의 예에서도 보듯이, absolute의 속성을 많이 이용합니다.
relative는 주로, absolute 된 엘리먼트의 기준점으로 사용하기 위해 이용합니다.


저작자표시

'HTML5.0' 카테고리의 다른 글

div 불투명 깔기 . 소스  (0) 2012.06.08
html animation  (0) 2012.06.08
캔버스 위에 div 를 올리자.  (0) 2012.06.05
canvas source  (0) 2012.06.05
HTML 5.0 구조 및 FORM image  (0) 2012.06.04
Posted by 사라링
트랙백 : 댓글

캔버스 위에 div 를 올리자.

 | HTML5.0
2012. 6. 5. 16:51

Now it’s time to show how to crate a canvas that “overlays” your web-page. By overlay, we mean “on-top-of” or “positioned above your web page.  There are several ways to do this. One is to create the and position it above every other elements in the page.

The technique presented here creates the canvas programatically and puts it as the first element of the html body. The benefit of this approach is that you can “embed” the same code on different pages, with only minimal changes.

Creating And Appending Canvas Into Html

In the code below, we are creating a ‘canvas’ element programatically and then appending it into the of the html page.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
<script type="text/Javascript">
 function createCanvasOverlay()
 {
  myCanvas = document.createElement('canvas');
  document.body.appendChild(myCanvas);
  myCanvas.style.position = 'absolute';
  myCanvas.style.left="0px";
  myCanvas.style.top="0px";
  myCanvas.style.zIndex="100";
  myCanvas.style.width="100%";
  myCanvas.style.height="100%";
  myCanvas.width=myCanvas.offsetWidth;
  myCanvas.height=myCanvas.offsetHeight;
}
</script>

The code seems to make sense. However, if you run it, you will end up with a canvas with a dimensions of (0,0). It is because the canvas width and height (not the same as style.width and style.height) does not take percentage values, and we’re forcing them to take 100% values. What can be done about this? We can try appending the canvas into a div element instead.

Creating And Appending Canvas Into A DIV And Then Into Html

In the modified code below, we first create a div element, and then we add the canvas as the child of the div.



01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script type="text/Javascript">
 function createCanvasOverlay()
 {
   // Create a blank div where we are going to put the canvas into.
    var canvasContainer = document.createElement('div');
   // Add the div into the document
    document.body.appendChild(canvasContainer);
    canvasContainer.style.position="absolute";
    // Set to 100% so that it will have the dimensions of the document
    canvasContainer.style.left="0px";
    canvasContainer.style.top="0px";
    canvasContainer.style.width="100%";
    canvasContainer.style.height="100%";
    // Set to high index so that this is always above everything else
    // (might need to be increased if you have other element at higher index)
    canvasContainer.style.zIndex="1000";
 
    // Now we create the canvas
    myCanvas = document.createElement('canvas');
    myCanvas.style.width = canvasContainer.scrollWidth+"px";
    myCanvas.style.height = canvasContainer.scrollHeight+"px";
    // You must set this otherwise the canvas will be streethed to fit the container
    myCanvas.width=canvasContainer.scrollWidth;
    myCanvas.height=canvasContainer.scrollHeight;
    myCanvas.style.overflow = 'visible';
    myCanvas.style.position = 'absolute';
    // Add int into the container
    canvasContainer.appendChild(myCanvas);
 }
</script>

The code created a canvasContainer div which we will embed the canvas into. To get the dimensions of the page, we need to embed canvasContainer into the body of the html. It needs to have absolute positioning and be above any other elements in the html, so we set the zIndex to 1000 (if your page has lots of elements, you may need to increase the zIndex.

Why this works is because canvasContainer does have pixel values (as opposed to percentage). You must remember to add the container into the document first, with 100% and 100% as the style.width and style.height. We then overlaid the canvas into the div. Another thing to pay attention is there should be no space in document.body.scrollWidth+”px”; and containerDiv.scrollHeight+”px”;. We’re using scrollWidth and scrollHeight so that if the page is larger than the window, the canvas will cover the whole page, not just the visible portion of the page.

If we want to create a canvas that fits into a particular existing element on your page, we can modify the code to take a canvasContainer as a parameter. This is shown below, where we can specify a div as the canvasContainer; if no canvasContainer is specified, the canvas will cover the whole html page.



01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script type="text/Javascript">
function createCanvasOverlay(color, canvasContainer)
 {
    if (!myCanvas)
    {
      // Append to body of the html if no container is specified
      if (!canvasContainer)
      {
        canvasContainer = document.createElement('div');
        document.body.appendChild(canvasContainer);
        canvasContainer.style.position="absolute";
        canvasContainer.style.left="0px";
        canvasContainer.style.top="0px";
        canvasContainer.style.width="100%";
        canvasContainer.style.height="100%";
        canvasContainer.style.zIndex="100";
        superContainer=document.body;
      }
      else
        superContainer=canvasContainer;
 
      myCanvas = document.createElement('canvas');
      myCanvas.style.width = superContainer.scrollWidth+"px";
      myCanvas.style.height = superContainer.scrollHeight+"px";
      // You must set this otherwise the canvas will be streethed to fit the container
      myCanvas.width=superContainer.scrollWidth;
      myCanvas.height=superContainer.scrollHeight;
      myCanvas.style.overflow = 'visible';
      myCanvas.style.position = 'absolute';
 
      var context=myCanvas.getContext('2d');
      context.fillStyle = color;
      context.fillRect(0,0, myCanvas.width, myCanvas.height);
      canvasContainer.appendChild(myCanvas);
  }
}
</script>


저작자표시

'HTML5.0' 카테고리의 다른 글

html animation  (0) 2012.06.08
div의 overflow 및 postion  (0) 2012.06.07
canvas source  (0) 2012.06.05
HTML 5.0 구조 및 FORM image  (0) 2012.06.04
HTML 5 설명 글 중 (일본어를 구글로 강제 번역함 ㅠㅠ )  (0) 2012.06.04
Posted by 사라링
트랙백 : 댓글

canvas source

 | HTML5.0
2012. 6. 5. 16:32

Our bottom layer

This text is displayed if your browser does not support HTML5 Canvas. 

function draw1() {
  ctx1.clearRect(0, 0, WIDTH, HEIGHT);
  ctx1.fillStyle = "#FAF7F8";
  ctx1.beginPath();
  ctx1.rect(0,0,WIDTH,HEIGHT);
  ctx1.closePath();
  ctx1.fill();
  ctx1.fillStyle = "#444444";
  ctx1.beginPath();
  ctx1.arc(x, y, 10, 0, Math.PI*2, true);
  ctx1.closePath();
  ctx1.fill();

  if (x + dx > WIDTH || x + dx < 0)
    dx = -dx;
  if (y + dy > HEIGHT || y + dy < 0)
    dy = -dy;

  x += dx;
  y += dy;
}

The code for this animation is fully explained here. Simple Animation in the HTML5 Canvas Element

Our middle layer

This text is displayed if your browser does not support HTML5 Canvas. 

function draw2() {
  ctx2.clearRect(0, 0, WIDTH, HEIGHT);
  ctx2.drawImage(city, 0, 0); 
}

We are simply drawing city.png http://html5.litten.com/layers/city.png to the canvas. The sky in this image is transparent.

Our top layer

This text is displayed if your browser does not support HTML5 Canvas. 

function draw3() {
  ctx3.clearRect(0, 0, WIDTH, HEIGHT);
  ctx3.fillStyle = "#444444";
  ctx3.save();
  ctx3.translate(200,200);
  ctx3.rotate(x/20); 
  ctx3.fillRect(-15, -15, 30, 30);  
  ctx3.restore();
}

Here we transform the canvas’s coordinate system and rotate the square based on the global variable x which is used in layer 1 also. For more information on transforms with save() and restore() go here Understanding save() and restore() for the Canvas Context

Now to stack them

We use CSS to set all the canvases to an absolute position of (0,0) inside our parent DIV tag.


    position:absolute;
    left:0px;
    top:0px;

We also use CSS to set the z-index of our canvases. The z-index property specifies the stack order of an element. Items with lower z-index values go behind items with higher z-index values.


Bottom layer
    canvas id="layer1" 
    style="z-index: 1;
    
Middle layer    
    canvas id="layer2" 
    style="z-index: 2;

Top Layer    
    canvas id="layer3" 
    style="z-index: 3;

DEMO Here's our finished canvas with full source code.

Now it doesn't matter that a canvas can only have one 2d context because we can just make multiple canvases and stack them.

If you have a question that you do not want published as a public comment, then use my contact page.

Have fun with the code as that is the easiest way to learn.

5 Responses to “Using Multiple HTML5 Canvases as Layers”

Dan • April 24th, 2011 at 1:46 pm

Do you know whether you can superimpose a canvas (or stack of canvases) over a Google Map and draw and animate stuff over the map? Thanks for the great writeup.

YAU • June 28th, 2011 at 2:22 am

hello james
i created a playing card game which uses multiple canvases.
in the game, each object has its own canvas.
i got the idea of using multiple canvases from this your blog post.
tank you!

ono
http://onohugou.sakura.ne.jp
*supported browsers: firefox4 and chrome10+


저작자표시

'HTML5.0' 카테고리의 다른 글

div의 overflow 및 postion  (0) 2012.06.07
캔버스 위에 div 를 올리자.  (0) 2012.06.05
HTML 5.0 구조 및 FORM image  (0) 2012.06.04
HTML 5 설명 글 중 (일본어를 구글로 강제 번역함 ㅠㅠ )  (0) 2012.06.04
adobe Edge  (0) 2012.06.04
Posted by 사라링
트랙백 : 댓글

HTML 5.0 구조 및 FORM image

 | HTML5.0
2012. 6. 4. 17:27
























저작자표시

'HTML5.0' 카테고리의 다른 글

캔버스 위에 div 를 올리자.  (0) 2012.06.05
canvas source  (0) 2012.06.05
HTML 5 설명 글 중 (일본어를 구글로 강제 번역함 ㅠㅠ )  (0) 2012.06.04
adobe Edge  (0) 2012.06.04
캔버스 간단한 마우스 그리기  (0) 2012.06.04
Posted by 사라링
트랙백 : 댓글

HTML 5 설명 글 중 (일본어를 구글로 강제 번역함 ㅠㅠ )

 | HTML5.0
2012. 6. 4. 17:11

Translation of : What Does It All Mean? - Dive Into HTML5

  1. Diving In
  2. The Doctype
  3. The Root Element
  4. The <head> Element
  5. Character Encoding
  6. Friends & (Link) Relations
    1. rel = stylesheet
    2. rel = alternate
    3. Other Link Relations in HTML5
  7. New Semantic Elements in HTML5
  8. A long digression into how browsers handle unknown elements
  9. Headers
  10. Articles
  11. Dates and Times
  12. Navigation
  13. Footers
  14. Further Reading
  15. 역주

Diving In

이 장에서는 전혀 아무것도 잘못하지 않는 HTML 페이지를 개선합니다. 일부는 줄어들 것이고, 일부는 오래 될 것입니다. 그리고 그 모두가 더욱 의미있는 것으로 (시맨틱) 될 것입니다. 훌륭 하지요?

소재가되는 페이지는 여기에 있습니다 . Learn it. Live it. Love it 새 탭에서 페이지를 열고 "소스보기"로이 페이지로 돌아 와서는 안됩니다.

❧

The Doctype

우선 처음부터 : 

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

이것은 "doctype"라는 것입니다. doctype 긴 역사 - 마술적인 -합니다. Mac 용 Internet Explorer는 Microsoft의 개발자 자신이 경악할만한 문제를 발견 수 있습니다. 다가올 새로운 버전의 브라우저에서 Web 표준에 대한 지원이 향상되었습니다 이전 웹 페이지는 올바르게 표시되지 않을 것입니다. 또는 제대로 표시되고있다 (사양에 따라)에에도 불구하고 많은 사람들이 제대로 표시되지 않는 게 좋습니다. 웹 페이지는 Netscape 4와 Internet Explorer 4 같은 점유율 우세한 브라우저 주제에 맞게 만들어진했습니다. IE5/Mac 매우 선진적인 것이었지만, 웹 페이지를 엄청했습니다.

Microsoft는 기발한 해결 방법에 겨우 도착했습니다. IE5/Mac에서 일반적으로 HTML 소스 첫 번째 라인 ( <html> 요소 이전)에있는 "doctype"을 찾게하는 것입니다. 오래된 웹 페이지 (이전 버전의 브라우저 주제에 의존하는)은 대부분의 경우 doctype이 없습니다. IE5/Mac는 그러한 웹 페이지는 오래된 브라우저와 동일하게 표시하고 새로운 Web 표준을 사용하려면 올바른 doctype을 <html> 요소 앞에두면된다 있도록했습니다.

아이디어는 순식간에 퍼져, 모든 주요 브라우저에서 "호환 모드"와 "표준 모드"의 두 모드를 가지게되었습니다. 물론 지금 힘겨운 상황에 빠지게되었습니다. Mozilla는 버전 1.1을 공개하려고했을 때, "표준 모드"로 표시되고 있음에도 불구하고 특정 주제에 의존하는 웹 페이지가 얼마든지있다는 것을 발견했습니다. Mozilla는 렌더링 엔진을 수정하여 버릇을 수정했지만 결과 단번에 많은 웹 페이지가 엉망으로 표시되도록합니다. 그래서 - 위조는 없어요 - 무려 " 거의 표준 모드 "라는 것이 만들어 버렸습니다.

Activating Browser Modes with Doctype 에서 Henri Sivonen은 각 모드의 차이를 다음과 같이 정리하고 있습니다 :

호환 모드
호환 모드에서는 1990 년대 후반에 유행했던 기법을 기반으로 만들어진 웹 페이지를 엉망으로하지 않기 때문에 Web 표준을 무시합니다.
표준 모드
표준 모드에서는 브라우저 가급적 이미 사양에 따른 형태로 구현되는 동작에 따라 문서를 보려고합니다. HTML5에서는이 모드를 "호환성 모드"라고 부르고 있습니다.
거의 표준 모드
Firefox 및 Safari, Chrome, Opera (7.5 이상), IE8은 "거의 표준 모드"를 가지고 있으며, 표 셀 가로 크기 CSS2 사양을 무시하고 결정합니다. HTML5에서는이 모드를 "제한된 호환성 모드"라고 부르고 있습니다.

(나는 아주 짧게 인용하고 있기 때문에, 제대로 Henri Sivonen 기사의 나머지 모두를 읽어야한다. 예를 들어 IE5/Mac는 Web 표준으로 지원되지 않은 일부 오래된 doctype을 지원합니다. 호환 의 명부가 증가함에 따라 "호환 모드"로 취급하는 doctype은 증가하고갔습니다. 마지막으로 내가 확인했을 때, 5 개의 doctype이 "거의 표준 모드"가되어, 73 doctype이 "호환성 모드" 되었습니다하지만 그래도 몇 가지 놓친 것이고, Internet Explorer 8이 4 개 - 4 개입니다! - 디스플레이 모드를 전환하는 똥 같은 기능에 대해서는 언급 할 생각은 없습니다. 죽으면 좋겠다. 불타 죽는)

그런데 무슨 이야기를하고 있던 것일까요. 그렇습니다, doctype군요 : 

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

이것은 많은 현재 브라우저에서 "표준 모드"로 해석되는 15 doctype 중의 하나입니다. 특히 아무것도 실수는 없습니다. 만약 이것을 사용하고 싶다면 그대로 사용해도 상관 없습니다. 더 짧고 간결하고 많은 현재 브라우저에서 "표준 모드"가 될 HTML5의 doctype 변경될 수 있습니다.

HTML5의 doctype은 이렇습니다 : 

 <!DOCTYPE html>

이것뿐입니​​다. 단 15 자입니다. 간단해서 비어 기억 유형있을 것입니다.

❧

The Root Element

HTML 페이지는 중첩된 요소의 덩어리입니다. 그 전체적인 구조는 나무와 비슷합니다. 몇 가지 요소는 "형제"이며, 그것은 같은 줄기에서 두 개의 가지가 나있는 것 같습니다. 몇 가지 요소가 다른 요소의 "자식"이고, 그것은 큰 가지에서 작은 가지가 나있는 것 같은 것입니다 (다른 말로한다면 다른 요소를 포함하는 요소 바로 아래에있는 요소의 "부모" , 그 손자 요소에 대한 "조상"입니다). 자식 요소가없는 요소는 "잎"노드라고합니다. 가장 최상위 요소, 즉 모든 요소의 조상에 해당하는 요소는 루트 요소라고합니다. HTML 페이지에서 루트 요소는 항상 <html> 입니다.

이 예제 에서는 루트 요소는 다음과 같이되어 있습니다 : 

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

특히이 태그 실수는 없습니다. 다시 말하지만, 만약 당신이 사용하고 싶다면 그대로 사용해도 상관 없습니다. 이것은 합리적인 HTML5입니다. 하지만 HTML5에서는 중요하지 않은 부분이 몇 가지 그들을 제거하여 몇 바이트 절약할 수 있습니다.

먼저 xmlns 속성에 대해 생각해 봅시다. 이것은 XHTML 1.0 의 흔적에서이 페이지에 포함된 요소는 XHTML 네임 스페이스 ( http://www.w3.org/1999/xhtml )에 속하는 것이있다는 것을 가르쳐줍니다. 그러나 HTML5 요소는 항상 네임 스페이스에 속하는 때문에 명시적으로 선언할 필요가 더 이상 없습니다. HTML5 페이지는이 특성이 있든 아니든 모든 브라우저에서 동일하게 해석되는 것입니다.

xmlns 속성을 삭제하면 루트 요소는 이렇게됩니다 : 

 <html lang="en" xml:lang="en">

HTML 페이지의 언어를 정의하는 lang 과 xml:lang 이라는 두 가지 속성이 남아 있습니다 ( en 은 "영어"를 의미합니다. 영어가 아닌 경우 자신의 언어 코드를 찾아보세요 ). 왜 같은 일을 서로의 속성으로 표현하는 것입니까? 이것도 XHTML의 흔적입니다. HTML5에서는 lang 만이 의미를 가집니다. xml:lang 을 그대로 두어도 상관 없지만 반드시 lang 속성과 동일해야합니다 .

To ease migration to and from XHTML, authors may specify an attribute in no namespace with no prefix and with the literal localname "xml : lang"on HTML elements in HTML documents, but such Attributes MUST only BE Specified IF A lang attribute in No namespace is also specified, and both attributes must have the same value when compared in an ASCII case-insensitive manner. The attribute in no namespace with no prefix and with the literal localname "xml : lang"has no effect on language processing.

또 삭제해도 될까요? 괜찮으면 지워버합시다! 루트 요소는 이렇게됩니다 : 

 <html lang="en">

루트 요소는 이상입니다.

❧

the <head> Element

대부분의 경우 루트 요소의 첫 번째 자식은 <head> 요소입니다. <head> 요소에는 해당 페이지의 본문이 아닌 메타 데이터 - 페이지에 대한 정보 -가 포함됩니다 (본문은 당연 합니다만 <body> 요소에 포함됩니다). <head> 요소 자체는 지루한 것으로, HTML5에 무엇인가 재미있는 효과를주는 것은 없습니다. 재미있는 것은 <head> 요소 중입니다. 는 다시 주제의 페이지 를 살펴 보도록하자 : 

 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My Weblog</title> <link rel="stylesheet" type="text/css" href="style-original.css" /> <link rel="alternate" type="application/atom+xml" title="My Weblog feed" href="/feed/" /> <link rel="search" type="application/opensearchdescription+xml" title="My Weblog search" href="opensearch.xml" /> <link rel="shortcut icon" href="/favicon.ico" /> </head>

우선 <meta> 요소 네요.

❧

Character Encoding

"문장"에 대해 생각할 때, "컴퓨터 화면에 표시되는 문자와 그림"에 대해서도 생각할 필요가 있습니다. 그러나 컴퓨터는 문자나 그림을 직접 취급주는 것이 아니라 비트와 바이트라는 단위로 취급합니다. 컴퓨터 화면에서 보는 문장은 모든 각각의 문자 인코딩에 따른 것입니다. 수많은 문자 인코딩 이 존재하고 러시아어나 중국어와 영어 각각 최적화된도이거나 여러 언어를 처리할 수도합니다. 간단하게 말하면 문자 인코딩은 메모리와 디스크에 저장된 데이터와 컴퓨터 화면에 표시를 매핑하는 것입니다.

실제로는 더 복잡합니다. 동일한 문자가 여러 인코딩, 각각 다른 바이트의 조합으로 메모리와 디스크에 저장하기도합니다. 문자 인코딩을 해독 열쇠와도 같은 것이라고 생각해도 좋을 것입니다. 누군가가 텍스트로 일련의 바이트의 조합을 보내온 경우 문자로 화면에 표시 (또는 인쇄하는 등)하는 경우에는 그것이 어떤 문자 인코딩인지 알 필요가 있습니다.

는 브라우저와 서버에서 들어오는 일련의 바이트에서 어떻게 문자 인코딩을 결정하는 것입니까? 좋은 질문입니다! 만약 HTTP라는 것을 알고있다면 다음과 같은 헤더를 본 적이있을 것입니다 : 

 Content-Type: text/html; charset="utf-8"

간단히 말해, 이것은 웹 서버는 HTML 문서를 보내고있는 것으로, 문서의 문자 인코딩이 UTF-8 임을 가르쳐주고 있습니다. 불행히도 위대한 잡탕 WWW는 한정된 작성 자만 HTTP 서버를 설정할 수 없습니다. 예를 들어 Blogger : 각각의 콘텐츠는 개인이 제공되지만 서버는 Google에 의해 운영되고 있습니다. 따라서 HTML 4는 HTML 문서 자체에서 문자 인코딩을 지정할 수 있도록되어 있습니다. 다음과 같은 글을 본 적이 없습니까? : 

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

간단히 말해, 이것은 웹 제작자가 HTML 문서를 문자 인코딩으로 UTF-8 을 사용하여 만든는 것을 가르쳐줍니다.

이상의 두 기술은 HTML5에서도 그대로 작동합니다. HTTP 헤더가 가장 강력한 수단으로 <meta> 태그가있어도 그것을 무시할 수 있습니다. 그러나 모두가 HTTP 헤더를 설정 할 수있는 것은 아니므로 <meta> 태그도 계속 작동하게되어 있습니다. 어쨌든 HTML5에서는 더 간결하게 작성할 수있게되어 있습니다. 는 어떻게되어 있을까요? : 

 <meta charset="utf-8" />

모든 브라우저에서 제대로 작동합니다. 이 생략 기법은 어디에서 온 것일까요? 내가 찾은 가운데는 다음과 메일링리스트 메세지 를 가장 잘 설명하고 있다고 생각합니다 :

the Rationale for the <meta charset=""> attribute Combination is that UAS already Implement it, because people tend to leave things unquoted, like :

<META HTTP-EQUIV=Content-Type CONTENT=text/html; charset=ISO-8859-1>

만약 브라우저가 제대로이 생략 기법을 다룰 것인가를 믿을 수 없다면 <meta charset> 테스트 가 있기 때문에 그것을 참조보십시오.

Ask Professor ​​Markup

질문 : 달라진 문자를 쓸 생각은 없습 니다만, 그래도 문자 인코딩을 지정하는 편이 좋을까요?

답변 : 지정하십시오! 모든 HTML 페이지에서 문자 인코딩을 지정해야합니다. 인코딩을 지정하지 않으면, 보안적인 문제를 안게 될지도 모릅니다 .

요약해 말하면, 문자 인코딩 디그은 복잡하고 교양있는 사람들이 사용하는 많은 허술한 소프트웨어를 복사 및 붙여넣기에서 일반적으로 취급할 정도로 쉽게되어 있지 않습니다. 모든 HTML 문서에서 반드시 문자 인코딩을 지정해야하고 그렇지 않으면 좋지 않은 일이 발생합니다 . HTTP의 Content-Type 헤더도 좋지만, <meta http-equiv> 좀 더 짧은 <meta charset> 의 선언을 써 주셨으면합니다. 분명 인터넷도 기뻐합니다.

❧

일반 링크 ( <a href> )은 단순히 다른 페이지를 참조하십시오. <link rel> 왜 다른 페이지를 참조하는지 설명하는 것입니다. 이들은 "나는이 페이지를 참조하십시오. 왜냐하면 ..."이라는 문장을 완성합니다 :

  • - 브라우저 표시할 때 적용해야 CSS 규칙을 설명하는 스타일 시트 때문입니다.
  • -이 페이지의 내용과 동일 있지만, 등록 가능한 형식으로 제공되는 피드이기 때문입니다.
  • - 다른 언어로 번역한 페이지 때문입니다.
  • -이 페이지와 내용이 같다는 있지만, PDF 형식이기 때문입니다.
  • -이 페이지를 포함하여 온라인 서적의 다음 장을 때문입니다.

등등. HTML5는 링크 관계를 두 가지로 나뉘어져 있습니다 :

Two categories of links can be created using the link element. Links to external resources are links to resources that are to be used to augment the current document, and hyperlink links are links to other documents ....

The exact behavior for links to external resources depends on the exact relationship, as defined for the relevant link type.

소재로 다룬 예제에서는 첫 번째 ( rel="stylesheet" )만이 외부 리소스에 대한 링크입니다. 나머지 모두는 다른 문서에 하이퍼 링크되어 있습니다. 이러한 링크는 추적도 추적 않아도 상관 없으며이 페이지를 열람하기 위해서 참조해야 할 것도 없습니다.

많은 경우 링크 관계는 웹페이지 <head> 에서 <link> 요소의 일부로 나타납니다. 일부 링크의 관계는 <a> 요소에서도 사용할 수 있지만 잘 알려지지 않았습니다. HTML5에서는 <area> 요소에서도 사용할 수있게 되었 습니다만, 더욱 알려져 있지 않은 것입니다 (HTML 4는 rel 속성을 <area> 요소로 사용할 수 없습니다.) 전체 링크의 관계 테이블 을보고 어떤 값을 rel 로 지정할 수 있는지 확인하자.

Ask Professor ​​Markup

질문 : 내 마음대로 링크 관계를 만들어도 좋을까요?

답변 : 그렇다면 무한 새로운 연결 관계가 만들어 계속하게 될 것입니다. 여러 사람이 똥 같은 것을 만드는 것을 그만두게 위해 WHATWG에서 제시한 rel 값을 관리하고 , 어떻게 승인되어가는 방법을 설명합니다 .

rel = stylesheet

그럼 주제 페이지 의 첫 번째 링크의 관계를 살펴 봅시다 : 

 <link rel="stylesheet" href="style-original.css" type="text/css" />

이것은 가장 일반적으로 사용되는 링크 관계 것입니다 (문자 그대로). <link rel="stylesheet"> 는 CSS 규칙이 작성된 외부 파일을 가리 킵니다. type 특성을 제거하는 것만이 HTML5에있는 최적화입니다. 스타일 시트 언어로 웹상에서 CSS 밖에 없기 때문에, type 속성 기본값으로되어 있습니다. 모든 브라우저에서 동일하게 작용할 것입니다 (만약 새 스타일 시트 언어가 언젠가 만들어진해도 type 속성을 추가하면된다한다.) 

 <link rel="stylesheet" href="style-original.css" />

rel = alternate

계속 소재의 페이지 를 살펴 보도록하자 : 

 <link rel="alternate" type="application/atom+xml" title="My Weblog feed" href="/feed/" />

이 링크 관계도 잘 알려져 있습니다. <link rel="alternate"> 을 type 속성 RSS 및 Atom 미디어 유형과 결합 "feed autodiscovery"라는 구조가 활성화됩니다. 그러면 피드 리더 (예 : Google Reader 와 같은)가 최신의 기사가 실려있는 피드를 자동으로 찾을 수 있습니다. 대부분의 브라우저는 URL 옆에 특별한 아이콘을 표시하여 주기도합니다. rel="stylesheet" 과 달리, type 특성은 매우 중요합니다. 삭제하지 않도록합시다!

rel="alternate" 라는 링크의 관계는 매우 다양하게 사용됩니다. HTML 4 에서조차 그렇습니다. HTML5에서 정의를 기존의 웹 콘텐츠를보다 정확하게 표현할 수 있도록 상세하게 쓰고 다시 분명한시켰습니다. 위와 같이, rel="alternate" 를 type=application/atom+xml 함께 사용하는 경우 해당 페이지의 Atom 피드를 가리 킵니다. 그러나 rel="alternate" 다른 type 속성과 함께 사용하여, 예를 들면 PDF 같이 동일한 내용의 다른 형식을 가리키는 수도 있습니다.

HTML5는 문서의 번역에 대해 어떻게 링크를 치면 좋은 것인 지라고 오랫동안 혼란 상황에 대해서도 해결했습니다. HTML 4에서는 lang 속성을 rel="alternate" 과 함께 사용하여 대상 문서의 언어를 선언하고 있었 습니다만, 이것은 실수였습니다. HTML 4 Errata 는 HTML 4 규격 4 개의 완전한 실수를 나열합니다. 그들 전체 과오 중 하나가 rel="alternate" 로 연결되는 링크가 문서의 언어를 선언하는 방법입니다. HTML 4 Errata와 HTML5에 명시된 올바른 방법은 hreflang 속성을 사용합니다. 불행히도이 정오표는 이미 HTML 4 규격에 반영되지 않습니다. W3C HTML Working Group 아무도 HTML 개발에 종사하고 있지 않기 때문입니다

Other Link Relations in HTML5

rel = "archives" - 기록이나 문서 등 과거 기록의 목록을 보려면 문서를 가리 킵니다. 블로그 인덱스 페이지에서 rel = "archives"를 사용하여 과거 로그 인덱스 페이지에 링크를 펼 수있을 것입니다.

rel="author" 는 해당 페이지의 제작자에 연결하는 데 사용합니다. mailto: 주소도 그렇고 않아도 상관 없습니다. 문의 양식에 대한 링크도 "제작에 관하여"페이지에 대한 링크도 좋습니다.

rel = "external" - 문서가 포함된 사이트의 일부가 아닌 문서를 가리 킵니다. 내 기억으로는 WordPress 에 댓글 작성자가 남긴 링크 썼는데에서 퍼졌다고 생각합니다.

HTML 4에서 rel="start" 와 rel="prev" , rel="next" 를 일련의 문서 (도서 장별 또는 블로그에 게시 등) 관계를 나타내기 위해 규정하고 있습니다. 제대로 사용되고있는 것은 rel="next" 뿐입니다. 많은 사람들은 rel="previous" 을 rel="prev" 대신 사용하거나 rel="begin" 와 rel="first" 를 rel="start" 대신 사용하거나 rel="end" 을 rel="last" 대신 사용하기도합니다. 추가에 rel="up" 에서 "부모"페이지를 지시하기도합니다.

HTML5는 "일련의 첫 번째 페이지"를 표현하기 위해서 사용되었던 다양한 것들 중에서 가장 일반적이었다 rel="first" 를 포함하기로했습니다 ( rel="start" 은 역호환성을 성을 위해 제공되는 동일한 의미를 갖는다). 다른 HTML 4와 같이 rel="prev" 와 rel="next" 이전 버전과의 호환성을 위해 rel="previous" 와 rel="last" (일련의에서 마지막 페이지 또는 rel="first" 반대), rel="up" 도 포함됩니다.

rel="up" 은 부스러기 탐색을 상기시켜 보면 좋을 것입니다. 홈 페이지가 부스러기 탐색의 첫 페이지에서 현재 페이지가 마지막으로되어 있죠? rel="up" 은 부스러기 탐색의 마지막 페이지 바로 옆집을 지시하게 될 것입니다.

rel = "icon" 는 rel="stylesheet" 에 이어 두 번째로 유명한 링크 관계입니다 . 일반적으로 shortcut 과 함께 다음과 같이 사용됩니다 : 

 <link rel="shortcut icon" href="/favicon.ico">

모든 주요 브라우저는 작은 아이콘을 해당 페이지를 연결하여줍니다. 위치 표시줄의 URL의 바로 옆에, 브라우저 탭, 혹은 그 양쪽 모두에 사용되는 경우가 많습니다.

HTML5의 새로운 기능 : icon 함께 sizes 속성을 사용하여 참조되는 아이콘의 크기를 나타낼 수 있습니다 .

rel = "license" 는 microformats로 고안되었습니다 . 현재 문서가 어떤 라이센스 형태로 제공되고있는지를 설명하고있는 문서를 가리 킵니다.

rel = "nofollow" 는 대상이 페이지의 제작 자나 발행자가 승인하지 않거나 참조하는 문서가 주로 상업적인 의도를 가지고있다는 것을 가리 킵니다. 이것은 Google가 고안한 것으로 , microformats 의해 표준화되었습니다 . WordPress 는 rel="nofollow" 주석에 포함된 링크를 추가합니다. "nofollow"링크가 PageRank에 영향을주지 않는다면, 스패머가 스팸 코멘트를 블로그에 게시하는 것을 포기하는 것이 아닌가하는 생각에 의한 것이었습니다. 그렇게는되지 않았지만 여전히 rel="nofollow" 은 사용되고 있습니다.

rel = "noreferrer" 는 링크로 참조를 전송하지 않도록 지시합니다. 현재 브라우저는 지원하지 않지만 WebKit nightly에서 지원되는 때문에 조만간 Safari 나 Google Chrome, 다른 WebKit 기반 브라우저에서 지원되게 될 것입니다. [ rel = "noreferrer"test case ]

rel = "pingback" 는 "pingback"서버 주소를 가리 킵니다. Pingback 사양 에 따르면 "pingback 시스템은 다른 웹 사이트의 링크를 붙인 것을 알려줍니다 .... 이렇게 연결 체인을 반대로 추적될 수 있습니다"라고 설명되지 있습니다. 블로그 시스템, 특히 WordPress는 pingback을 구현하고 새 게시물 링크를 연결한 페이지 제작자에게 알리도록되어 있습니다.

rel = "prefetch" 사용자가 먼저 확실히 볼 것이다 때문에 앞을 캐시하기 위해 참조해야 할 리소스를 가리 킵니다. 검색 엔진은 검색 결과에서 1 위의 페이지가 다른 결과보다 압도적으로 인기 경우 종종 <link rel="prefetch" href=" URL of top search result "> 검색 결과 페이지에 추가하고 있습니다. 예를 들어 Firefox를 사용하여 CNN을 Google 검색 소스를 열고 prefetch 키워드로 검색하여보세요. Mozilla Firefox만이 rel="prefetch" 을 지원하고 있습니다.

rel = "search" 는 문서 및 관련 리소스를 검색하기위한 인터페이스가 포함된 문서를 참조하는 것을 나타냅니다. 특히 rel="search" 를 유익하게하고 싶다면, 브라우저에서 어떻게 주어진 키워드에 현재 사이트 검색 URL을 구축하면 좋은가를 정의한 OpenSearch 에 따라 문서를 가리 키도록해야한다 시작해야한다. OpenSearch (이 OpenSearch 정의 문서를 가리키는 rel="search" )는 Microsoft Internet Explorer 7 이상과 Mozilla Firefox 2 이상에서 지원됩니다.

rel = "sidebar" 는 참조된 문서가 현재 참조중인 컨텍스트에 대한 부차적인 컨텍스트에 로드된 할 문서임을 가리 킵니다. 무슨 뜻인가하면, Opera와 Mozilla Firefox에서는 "링크를 클릭하면 책갈피하는지 질문하고 즐겨찾기에서 선택된 경우에는 그 대상 문서를 브라우저의 사이드바에서 열기"라는 의미에 되어 있습니다 (Opera에서는 "sidebar"대신 "panel"라고합니다). Internet Explorer와 Safari, Chrome는 rel="sidebar" 는 무시되고 보통 링크처럼 취급됩니다. [ rel = "sidebar"test case ]

rel = "tag" 현재 문서에 붙은 태그를 대표하는 문서를 가리 킵니다. rel 속성을 사용하여 "태그"(카테고리 키워드) 연결은 블로그에 게시 카테고리 분류를 쉽게하기 위하여 Technorati에 의해 고안되었습니다 . 초기의 블로그와 튜토리얼 사이트는 그렇게 태그를 "Technorati 태그"로 연결되었습니다 (You read that right : 영리 기업이 모든 것이 메타 데이터를 붙이면 더 일을하고 쉽게 될 것이라고 설득했습니다 입니다. Nice work if you can get it!) 후에 microformats에서 표준화된 , rel="tag" 등으로 불리게되었습니다. 많은 블로그 시스템은 rel="tag" 의 카테고리와 키워드 또는 태그 개별 게시물을 연결할 수 있도록되어 있습니다. 브라우저 이들을 이용하여 뭔가 특별한 것을하거나하지 않습니다. 주로 검색 엔진이 그 페이지가 어떻게 것들에 대해 쓰여져 있는지의 기준으로 이용할 수 염두에 두어야합니다.

❧

New Semantic Elements in HTML5

HTML5는 단순히 기존의 태그를 단축하는 것만하지는 않습니다 (대체로 적당한 길이로 짧게주고도 있겠지만). 새로운 의미 론적 요소를 정의도 있습니다.

<section>
section 요소는 문서 또는 응용 프로그램의 일반적인 부분을 표현합니다. 여기에서 말하는 섹션은 특정 주제에 맞는 내용의 집합이며 종종하고 표제가 붙어 있습니다. 섹션의 예로는 책 장 또는 탭 대화 상자의 각 탭 페이지 논문 번호가 할당된 항목 등이 될 것입니다. 웹사이트 홈페이지에서는 서론이나 신착 기사, 연락처 정보 등을 각각 섹션으로 구분할 수있을 것입니다.
<nav>
nav 요소는 다른 페이지에 대한 링크와 해당 페이지에 대한 링크가 포함된 섹션을 나타냅니다. 즉 탐색 링크를 포함하는 섹션입니다. 모든 링크의 집합이 nav 요소 다음에해야한다가하면 그런 것은 없습니다 - 주요 탐색 블럭화된 섹션만 nav 요소로 적합합니다. 바닥글에 자주 웹사이트의 주요 페이지 및 서비스 이용 약관, 홈페이지, 저작권 정보에 대한 링크에서 사용되는 경우가 많습니다. footer 요소는 그냥 그런 케이스에 충분히 대응하는 것이 있기 때문에 반드시 nav 요소를 사용할 필요는 없습니다.
<article>
article 요소, 예를 들어 그냥 피드 등으로 전송 가능하거나 재사용하는 자체로 완결하고있는 문서, 페이지 및 응용 프로그램, 웹사이트를 표현하는 것입니다. 포럼에 게시하거나 잡지나 신문 기사, 블로그 항목, 사용자 댓글이 대화식 위젯과 가젯, 기타 독립적인 컨텐츠 부분 등에 사용할 수 있습니다.
<aside>
aside 요소는 aside 요소로 묶인 부분이 본문에서 조금 탈선있어, 본문과는 별개로 파악하고 원하는 부분을 표현합니다. 신문이나 잡지 등 인쇄 매체에서 말하는 사이드바 같은 섹션을 표현할 수도 있습니다. 구체적으로 인용이나 사이드바, 광고, nav 요소 집합의 다른 웹 페이지의 기본이되는 내용에서 분리시키고 싶은하게 사용할 수 있습니다.
<hgroup>
hgroup 섹션 제목을 표현합니다. 이 요소는 소제목이 있고, 다른 표현을했다 표제가 있고, 캐치 프레이즈가 있기도하여 여러 h1 ~ h6 요소가 출현하는 경우에 그들을 구성하는 데 사용됩니다.
<header>
header 요소는 서론 및 탐색 도움이 될 것으로 정리를 표현합니다. header 요소는 주로 섹션 제목 ( h1 ~ h6 요소 또는 hgroup 요소)를 묶는 데 사용되는 경우가 많은데, 필수라고하지는 않습니다. 또한 header 요소에는 항목의 색인 및 검색 양식 적절한 로고를 포함할 수 있습니다.
<footer>
footer 요소는 최근의 조상 또는 루트 요소에 해당하는 섹션 바닥글을 표현합니다. 많은 경우 바닥글에는 누가 썼는지 및 또는 관련 문서 링크, 저작권 정보 등 그 섹션에 대한 정보가 포함되어 있습니다. 바닥글 섹션의 마지막에 있어야한다는 것은, 단순히 많은 경우 이렇게되어 있다고 할뿐입니다. footer 요소 섹션 모두를 묶어 주면, 그들에 부록이나 목차, 긴 파트너 프로그램 중복 라이센스 조건을 표현할 수 있습니다.
<time>
time 요소는 24 시간제의 시간 및 예측 태양력에 따라 정확한 날짜, 그 경우에는 옵션으로 시간과 시차 등을 포함한 것,을 나타냅니다.
<mark>
mark 요소는 참조되는 것을 고려하여 표시하거나 강조 표시 문서의 일련의 문자열을 표현합니다.

만약이 장을 아직 읽고 있지 않다면 이러한 새로운 요소를 사용하는 것에 불안을 기억하는 것입니다. 그러나, 약간 우회해야합니다.

❧

A long digression into how browsers handle unknown elements

어떤 브라우저에도 이미 지원하는 HTML 요소에 대한 습득있는 목록이 있습니다. 예를 들어 Mozilla Firefox 목록 nsElementTable.cpp 에 저장되고이 목록에없는 요소는 "알 수없는 요소"로 간주됩니다. 알 수없는 요소에는 두 가지 근본적인 문제가 있습니다 :

  1. 요소를 어떻게 스타일링하면 좋을까요? 일반적으로 <p> 상하 공간을 잡고 <blockquote> 왼쪽에 여백을 가지고 들여쓰기되어 <h1> 큰 글꼴로 표시됩니다. 그렇지만 알 수없는 요소의 경우는 어떤 스타일을 적용하면 좋을까요?
  2. 요소의 DOM 어떻게하면 좋을까요? Mozilla의 nsElementTable.cpp 에는 각각의 요소가 어떤 요소를 내포 수있는가하는 정보가 포함되어 있습니다. 만약 태그에 <p><p> 는 같은 코드를 포함하면 두 번째 단락 요소는 첫 번째 것을 자동으로 닫기 때문에,이 두 요소는 부모와 자식 관계가 아니라 형제 관계입니다 . 그러나 <p><span> 라고하는 코드를 작성하면, Firefox는 <p> 이 블록 레벨 요소 인라인 요소이다 <span> 을 내포다는 것을 알고 있기 때문에, span 요소는 단락을 닫습 없습니다. 즉, DOM에서는 <span> 은 <p> 아이는 것입니다.

브라우저마다이 문제에 대해 다른 대답을 가지고 있습니다 (나는 그것을 알고 충격을 받았다). 가장 유명한 Microsoft Internet Explorer가 이러한 문제에 대한 대답이 가장 많은 문제를 안고 있습니다만, 어떤 브라​​우저에서도 약간의 도움이 필요합니다.

첫 번째 문제에 대한 대답은 매우 간단하고 알 수없는 요소에 특히 아무것도 스타일링하지 않는 것입니다. 페이지에 나타나는 위치에 따라 CSS 속성을 상속하고 페이지 제작자 CSS에서 알 수없는 요소를 스타일링 수 있도록하면 좋습니다. 이제 대개는 잘 갑니 다만, 한가지 주의해야 할 수 있습니다.

모든 브라우저는 미확인 요소를 인라인 요소로 표시합니다. 즉 마치 display:inline 는 CSS 규칙을 가지고있는 것처럼.

HTML5에서는 새로운 요소 중 일부는 블록 요소로 정의되고 있습니다. 따라서 그들은 다른 블록 레벨 요소를 내포 수, HTML5 지원 브라우저에서 기본적으로 display:block 으로 스타일링합니다. 만약 오래된 브라우저에서 이러한 요소를 사용하려면 수동으로 스타일을 정의하지 않으면 안됩니다 : 

 article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; }

(이 코드는 장에서 만지지 같은 것에 대해서도 여러 해주는 Rich Clark의 HTML5 Reset Stylesheet 에서 따온 것입니다.)

만약, 이것은 안 하잖아요! 버전 9 이전의 Internet Explorer에서는 알 수없는 요소에 대해 전혀 스타일링 수 없습니다. 예를 들어 다음과 같은 태그가 있었다고합니다 : 

 <style type="text/css"> article { display: block; border: 1px solid red } </style> ... <article> <h1>Welcome to Initech</h1> <p>This is your <span>first day</span>.</p> </article>

Internet Explorer (IE 8 포함)에서는 <article> 요소를 블록 레벨 요소로 취급 해주지 않고, 빨간 테두리 기사 주위에 걸려도주지 않습니다. 모든 스타일 규칙은 무시됩니다. Internet Explorer 8은 아직 베타 버전이지만 , Microsoft는 Internet Explorer 9에서는이 문제가 일어나지 않을 것이라고 발표하고 있습니다 (개발자도 확인했습니다).

두 번째 문제는 알 수없는 요소를 발견했을 때 브라우저가 어떤 DOM을 구축해야하는가하는 것입니다. 또다시 Internet Explorer가 가장 귀찮습니다. IE 요소 이름이 인식하지 못하는 경우 그 요소를 자식이없는 빈 노드로 DOM에 추가하게됩니다. 그리고 알 수없는 요소의 자식에 해당하는 모든 요소는 형제로 추가됩니다.

ASCII 아트를 사용하여 그 차이를 도해하여 봅시다. 다음은 HTML5의 DOM입니다 : 

  article
 |
 + - h1 (child of article)
 | |
 | + - text node "Welcome to Initech"
 |
 + - p (child of article, sibling of h1)
    |
    + - text node "This is your"
    |
    + - span
    | |
    | + - text node "first day"
    |
    + - text node ""

대해 Internet Explorer는 다음과 같은 DOM을 구축하게됩니다 : 

  article (no children)
 h1 (sibling of article)
 |
 + - text node "Welcome to Initech"
 p (sibling of h1)
 |
 + - text node "This is your"
 |
 + - span
 | |
 | + - text node "first day"
 |
 + - text node ""

이 문제에 대해서는 불가 사 의한 해결책이 있습니다. <article> 요소가 출현 이전에 JavaScript에서 거짓으로 그 요소를 만들 때 이상하게도 Internet Explorer가 <article> 요소를 인식하게 CSS로 스타일링 할 수 있습니다. 그 더미 ​​요소는 DOM에 추가할 필요가 전혀 없습니다. IE가 인식할 수없는 요소를 스타일링 할 수있는 것처럼 한 번만 요소 만들기 (페이지 당) 해 준다뿐입니다. 

 <html> <head> <style> article { display: block; border: 1px solid red } </style>   <script> document.createElement ( "article"); </ script> 
 </ head>
 <body>
 <article>
 <h1> Welcome to Initech </ h1>
 <p> This is your <span> first day </ span> </ p>
 </ article>
 </ body>
 </ html>

이 기술은 IE 6을 포함한 모든 버전의 Internet Explorer에서 잘 작동합니다. HTML5에 새로 책정된 요소에 대해 동일한 기술을 유용 - 다시 말하지만 DOM에 아무것도 추가할 필요가 없기 때문에 더미 요소를 볼 수 없을 것입니다 - 수 있기 때문에, 그 새로운 요소를 HTML5를 지원하지 않는 브라우저에서도 특별히 의식하지 않고 사용할 수 있습니다.

Remy Sharp는이 기술을 HTML5 활성화 스크립트 는 실로 적절한 이름으로 공개하고주었습니다. 이 스크립트는 이미 14 차례나 갱신되고 있습니다만, 기본적으로 다음과 같은 코드를 기반으로합니다 : 

 <!--[if lt IE 9]> <script> var e = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < e.length; i++) { document.createElement(e[i]); } </script> <![endif]-->

<!--[if lt IE 9]> 와 <![endif]--> 은 조건부 주석 (조건부 댓글) 하는 것입니다. Internet Explorer는 이러한 if 식과 같이 취급 : 만약 현재의 브라우저 버전이 버전 9 아래면이 블록은 실행됩니다. 다른 브라우저는 모든이 블록을 HTML 주석으로 처리합니다. 라는 이유로 Internet Explorer (버전 8까지)이 스크립트를 실행하고 다른 브라우저는 스크립트를 완전히 무시하는 것입니다. 이렇게하여이 해킹을 필요로하지 않는 브라우저에서는 페이지 로딩이 빨리 될 것입니다.

이 JavaScript 코드는 간단 명료 것입니다. e는 "abbr" 나 "article" " "aside" 등의 문자열 배열에서 배열을 루프로 돌려 document.createElement() 요소를 생성합니다. 그리고 반환값을 무시하여 DOM 요소가 추가되지 않도록하고 있습니다. 이제 Internet Explorer가이 새로운 요소를이 페이지에 나중에 사용할 수 있지만 우리가 원하는 정도로 취급주게됩니다.

"하나만"중요한 것은이 있습니다. 이 스크립트는 웹 페이지의 마지막이 아닌 시작, 있으면 <head> 요소에 쓸 필요가 있습니다. 이렇게하면 Internet Explorer는 웹 페이지의 태그와 속성을 구문 분석 이전에이 스크립트를 실행하여줍니다. 만약 웹 페이지의 끝에 쓸 경우 실행되는 것이 너무 느려 이후 Internet Explorer 마크업을 잘못 해석한에 잘못된 DOM을 구축하게됩니다. 그런 오류를 수정하는 것은이 스크립트는 불가능하다는 것도 이유입니다.

Remy Sharp이 스크립트를 "단축시켜" Google Code에서 공개하고 있습니다 (이 스크립트는 오픈 소스, 그리고 MIT 라이센스이므로 어떤 프로젝트에 사용할 수 있습니다.) 원한다면 Google Code에서 호스팅되고있는 코드를 다음과 같이 직접 사용할 수 있습니다 : 

 <head> <meta charset="utf-8" /> <title>My Weblog</title> <!--[if lt IE 9]> <script   src = " http://html5shiv.googlecode.com/svn/trunk/html5.js "   > </ script>
   <! [endif] ->
 </ head>

이것으로 드디어 HTML5의 새로운 의미 론적 요소를 사용할 수있게되었습니다.

❧

Headers

그럼 예로 들었다 웹 페이지 로 돌아가 보자. 우선 헤더만을 봐 : 

 <div id="header"> <h1>My Weblog</h1> <p class="tagline">A lot of effort went into making this effortless.</p> </div> … <div class="entry"> <h2>Travel day</h2> </div> … <div class="entry"> <h2>I'm going to Prague!</h2> </div>

특히 태그에 재미있는 곳은 없습니다. 만약 이것을 사용하고 싶다면 그대로 사용해도 상관 없습니다. HTML5로 합리적입니다. 그러나 HTML5에서는 헤더 및 섹션에 대한 몇 가지 의미 론적 요소를 제공합니다.

우선 <div id="header"> 을 삭제하자. 이 부분은 잘 보이는 것이지만, 뭔가 특별한 의미가있는 것은 아닙니다. div 요소는 특별한 의미를 정의하지 않고, id 속성도 마찬가지로 특별한 의미를 가지지 않습니다 (사용자 에이전트는 id 속성의 값이 어떤 의미가있는 것처럼 취급해서는 안됩니다). 이 부분을 <div id="shazbot"> 대체해도 같은 의미 즉 아무런 의미가 없습니다.

HTML5에서는 이러한 경우에 사용하는 요소로 <header> 요소가 정의되어 있습니다. HTML5의 사양은 <header> 요소의 구체적인 사용 방법 에 대해서도 언급하고 있습니다. 소재로 한 페이지 는 어떻게 될까요? : 

 <header> <h1>My Weblog</h1> <p class="tagline">A lot of effort went into making this effortless.</p> … </header>

이것만으로는 좋습니다. 이것만으로도이 헤더임을 누구나 알 수 있습니다. 그러나 캐치 프레이즈는 어떻게하면 좋을까요? 이 부분 또한 Web 표준으로 지금까지 특별히 정의되지 않았기 때문에 잘 보이는 것입니다. 이것을 태그하는 것은 꽤 어려울 것입니다. 캐치 프레이즈는 부표와 비슷하지만 큰 제목에 "붙어"있습니다. 결국 이것은 섹션이없는 부제는 것입니다.

제목 요소이다 <h1> 이나 <h2> 웹페이지를 구조화합니다. 이들을 동시에 사용하여 웹 페이지를 도해하고 (추적하거나)하는 데 사용할 수있는 윤곽선을 만들 수 있습니다. 웹 페이지 읽기 소프트웨어는 문서의 개요를 사용하여 맹목적인 사용자가 웹 페이지 탐색을 할 수 있도록하고 있습니다. 문서 개요를 시각화할 수있는 온라인 도구 와 브라우저 확장 도 있습니다.

HTML 4에서 <h1> ~ <h6> 요소만 문서의 개요를 만들었습니다. 예로 든 페이지의 개요는 다음과 같은 것이됩니다 : 

  My Weblog (h1)
    |
    + - Travel day (h2)
    |
    + - I'm going to Prague! (h2)

이것은 이것대로 문제 없지만, "A lot of effort went into making this effortless"라는 캐치 프레이즈를 마크업하는 방법이 없습니다. 만약 <h2> 를 사용하여 마크업하면 문서의 개요를 가장 단지 노드가 만들어집니다 : 

  My Weblog (h1)
    |
    + - A lot of effort went into making this effortless (h2)
    |
    + - Travel day (h2)
    |
    + - I'm going to Prague! (h2)

이것은이 문서의 구조로서 적절하지 않습니다. 캐치 프레이즈는 섹션을 만들지 않을 단순한 부제에 지나지 않는 것입니다.

그럼 캐치 프레이즈를 <h2> , 각 기사 제목을 <h3> 에하면 좋은가? 아니, 이렇게 해 버리면 더 이상한 일이됩니다 : 

  My Weblog (h1)
    |
    + - A lot of effort went into making this effortless (h2)
          |
          + - Travel day (h3)
          |
          + - I'm going to Prague! (h3)

외관뿐만 노드를 만들수에 본래라면 최상위 노드에 속하는 것이 아이를 "빼앗아 죽어 버린다 '. 이상으로부터, HTML 4는 소제목 문서 개요에 추가하지 않고 마크업 방법이 없다는 문제가있는 것으로 밝혀졌습니다. 이 문제에 대해 어떻게해도 "쓸모없는 노력의 더미"라는 결과가 끝납니다. 그래서 <p class="tagline"> 라고하는 의미적으로 전혀 의미없는 마크업을하게되어 버린 것입니다.

HTML5에서는 <hgroup> 요소에 의해이 문제를 해결할 수 있습니다. <hgroup> 요소는 두 개 이상의 관련 표제 요소를 정리해줍니다. "관련한다"는 무슨 뜻인가요? 그들 제목 요소가 문서 개요에서 하나의 노드에 저장된다는 것입니다.

다음과 같이 마크업하면 : 

 <header>   <hgroup> 
     <h1> My Weblog </ h1>
      <h2>   A lot of effort went into making this effortless.   </ h2> 
    </ hgroup> 
   ...
 </ header>

 ...

 <div class="entry">
   <h2> Travel day </ h2>
 </ div>

 ...

 <div class="entry">
   <h2> I'm going to Prague </ h2>
 </ div>

문서의 개요는 다음과 같이 구성됩니다 : 

  My Weblog (h1 of its hgroup)
    |
    + - Travel day (h2)
    |
    + - I'm going to Prague! (h2)

HTML5 Outliner 에서 자신이 만든 웹 페이지 제목 요소를 적절하게 사용하고 있는지 여부를 테스트할 수 있습니다.

❧

Articles

소재로 한 페이지 는 아직도 계속됩니다. 다음과 같은 태그는 어떻게 할 수 있을까요? : 

 <div class="entry"> <p class="post-date">October 22, 2009</p> <h2> <a href="#" rel="bookmark" title="link to this post"> Travel day </a> </h2> … </div>

이 또한 적절한 HTML5입니다. 하지만 HTML5는 웹 페이지 문서를 마크업하는 데 더 적당한 요소를 제공하고 있습니다. 그것은 <article> 요소입니다. 

  <article> 
   <p class="post-date"> October 22, 2009 </ p>
   <h2>
     <a href = "#"
        rel = "bookmark"
        title = "link to this post">
        Travel day
     </ a>
   </ h2>
   ...
  </ article>

이것은 매우 간단하다고는 말할 수 없겠 네요. 이외에도 아직 변경 할 점은 있습니다. 수정된 소스를보고하십시오. 다음 설명합니다 : 

 <article> <header> <p class="post-date">October 22, 2009</p>   <h1> 
       <a href = "#"
          rel = "bookmark"
          title = "link to this post">
          Travel day
       </ a>
      </ h1> 
   </ header>
   ...
 </ article>

알 수 있을까요? <h2> 요소를 <h1< 하고 <header> 요소에 포함합니다. <header> 에 대해서는 이미 언급한 바와 같이 그 역할은 기사의 표제 (이 경우는 기사의 제목과 발행 일자)를 구성하는 요소를 정리하는 것입니다. 아니, 그렇지만,하지만 <h1> 문서마다 하나만으로는 없나요? 문서 개요를 엉망으로 버리지 않습니까? 그런 것이되지 않지만 왜 그렇게해야하는지 이해하기 위해 조금 자세히 설명합시다

HTML 4는 문서의 개요를 만들 수있는 것은 <h1> ~ <h6> 요소 뿐이었습니다. 개요 루트 노드를 하나만하고 싶은 경우 <h1> 는 마크업에서 하나 밖에 사용할 수 없습니다. 대해 HTML5의 사양은 문서 개요를 생성하기위한 알고리즘을 정의되고 , 그것은 HTML5의 새로운 의미 론적 요소가 포함되어 있습니다. HTML5 알고리즘은 <article> 요소는 새로운 섹션, 즉 문서의 개요에 새로운 노드를 만든다는 것으로되어 있습니다. 그리고 HTML5에서는 각 섹션에 <h1> 을 가질 수 있습니다.

이것은 HTML 4에서 크게 달라진 점이지만, 왜 좋은 변경인가하는 것을 설명하겠다. 많은 웹 페이지는 어떤 종류의 편지지 (템플릿)을 사용하여 제작되고 있습니다. 내용 중 일부는 다양한 곳에서 가지고 오게되고, 그들은 웹 페이지 곳곳에 삽입됩니다. 많은 연습 "이 HTML 코드를 복사하여 웹페이지에 붙여 보자"라는식으로 설명하는 것입니다. 아주 작은 콘텐츠의 경우 이래도 괜찮은 있겠지만 전체 섹션 태그를 붙인다고하는 경우는 어떨까요? 연습에서는 다음과 같이 설명하는 것입니다 : "이 HTML 코드를 복사하여 편집기에 붙여 삽입할 웹 페이지에 적합하도록 제목 태그의 수준을 수정해야한다"

다른 말로하면, HTML 4는 융통성의 국화 제목 요소를 가지고 있지 않다는 것입니다. 단 여섯 개의 숫자가있는 제목 요소 <h1> ~ <h6> , 밖에없고, 그 숫자가 그대로 점수 순서에 중첩되지 않으면 안됩니다. 이것은 특히 웹 페이지를 "편집"이 아닌 "생성"하는 경우는 적립되지 않습니다. HTML5에서는이 문제를 새로운 세쿠쇼닌구 요소와 기존의 제목 요소에 대한 새로운 규칙을 마련하는 것으로 해결했습니다. 만약 이미 새로운 세쿠쇼닌구 요소를 웹 페이지에서 사용하는 경우 : 

 <article> <header> <h1>A syndicated post</h1> </header> <p>Lorem ipsum blah blah…</p> </article>

이 코드를 복사하여 아무것도 변경하지 않고 웹 페이지의 어디에 붙여 넣을 수 있습니다. 전체 <article> 로 둘러싸인 있으므로 <h1> 요소가 포함되어 있는지에 전혀 문제가 없습니다. 이 경우 <article> 요소는 붙여 넣은 문서 개요 노드에 새로운 노드로 삽입되고 <h1> 요소가 노드의 제목이 원래 그 웹페이지에 있던 다른 세쿠쇼닌구 요소는 문서 개요에서 이전과 동일한 상태로 유지합니다.

다른 웹 기술과 마찬가지로 현실은 좀 까다로운입니다. 새로운 "명쾌한"세쿠쇼닌구 요소 ( <h1> 가 포함된 <article> )는 오래된 "암시"세쿠쇼닌구 요소 ( <h1> ~ <h6> 자체)와 함께 생각지도 못한 일이 버립니다 . 모두가 아닌 중 하나를 이용해서 간단히 할 수 있지만. 다만 동일한 웹 페이지에서 모두 사용하지 않으면 안되는 경우, HTML5 Outliner 에서 어떤 결과가 있는지 확인하는 것이 좋습니다.

❧

Dates and Times

음모를 꾸미고 있지요? "에베레스트에서 알몸으로 성조기여 영원하라를 부르며 뒤로 스키를한다"등의 의미에서 흥미로운 아니라 시맨틱 마크업이 어디까지 진행되고 있는지라고하는 의미입니다. 는 소재로하고있는 페이지 의 자세히 살펴보겠습니다. 다음 주목하고 싶은 것은 다음과 같습니다 : 

 <div class="entry">   <p class="post-date"> October 22, 2009 </ p> 
   <h2> Travel day </ h2>
 </ div>

질리지하고 있지요? 자주있는 패턴 - 기사 발행 일자 지정 - 전혀 시맨틱 마크업이 아닌 class 속성 어떻게든하려고합니다. 이 또한 적절한 HTML5가 있습니다. 변경하는 것이 요구되고있는 것은 없습니다. 하지만 HTML5에서는이 경우에 사용할 수있는 <time> 요소가 제공됩니다. 

 <time datetime="2009-10-22" pubdate>October 22, 2009</time>

<time> 은 세 부분으로 나눌 수 있습니다 :

  1. 기계적으로 판단할 수있는 날짜와 시간
  2. 읽을 수있는 날짜와 시간
  3. pubdate 는 모든 플래그

이 예에서는 datetime 속성에 날짜만 포함되고 시간은 포함하지 않습니다, 네 자리 연도와 두 자리 월, 두 자리 날짜가 "-"로 연결됩니다 : 

 <time   datetime = "2009-10-22"   pubdate> October 22, 2009 </ time>

만약 시간을 추가하려면, T 문자를 날짜로 계속 쓰고 그 스물넷 시간 형식의 시간, 또는 시차를 씁니다. 

 <time datetime="   2009-10-22T13 :59:47-04 : 00   "pubdate>
   October 22, 2009 1:59 pm EDT
 </ time>

(이 날짜와 시각의 포맷은 매우 유연합니다. HTML5 스펙에는 정확한 날짜와 시간 예제도 포함되어 있습니다 .)

텍스트 부분 - <time> 와 </time> 사이에있는 것 -도 기계적으로 판단할 수있는 날짜와 시간에 맞게 수정했다는 것을주의하십시오. 필요든지 이렇게해야한다는 것은 없습니다. datetime 속성에서 기계적으로 판단할 수있는 날짜와 시간조차 제대로 쓰고 있으면 텍스트 부분은 어떻게 써도 상관 없습니다. 즉 다음과 같이 써도 HTML5 타당하다는 것입니다 : 

 <time datetime="2009-10-22">   last Thursday   </ time>

또는 이렇게 써도 HTML5로 적당하다 : 

 <time datetime="2009-10-22"></time>

마지막은 pubdate 속성입니다. 이것은 부울 속성에서 필요한 경우 다음과 같이 추가하면됩니다 : 

 <time datetime="2009-10-22"   pubdate   > October 22, 2009 </ time>

만약 속성을 "그대로"쓰고 싶지 않다면 이렇게 써도 상관 없습니다. 

 <time datetime="2009-10-22"   pubdate = "pubdate"   > October 22, 2009 </ time>

pubdate 속성은 어떤 의미를 갖는 것입니까? 이 속성은 두 가지 의미를 가집니다. 만약 <time> 속성이 <article> 요소에있는 경우 해당 문서의 발행 일자를 의미하고 만약 <time> 가 <article> 중에는 않으면 전체 문서의 발행 날짜를 의미합니다.

그러면 전체 기사를 HTML5를 사용하여 작성 다시 봅시다 : 

 <article> <header> <time datetime="2009-10-22" pubdate> October 22, 2009 </time> <h1> <a href="#" rel="bookmark" title="link to this post"> Travel day </a> </h1> </header> <p>Lorem ipsum dolor sit amet…</p> </article>

❧

탐색 모음은 웹 사이트의 가장 중요한 부분 중 하나입니다. CNN.com에서는 "탭"각각의 웹 페이지에서 찾을 각종 뉴스 카테고리 - "기술", "건강", "스포츠"등 -에 링크되어 있습니다. Google 검색 결과 페이지에도 비슷한 것이있어, Google 다른 서비스 - "그림", "동영상", "지도"등 -에서 같은 검색어에 따라 검색 다시 할 수있게되어 있습니다. 예제 페이지 에 탐색 도구 모음 헤더에 있으며 예로서 다른 부분 - "홈", "블로그", "갤러리"등 -에 대한 링크가 있습니다.

탐색 모음은 다음과 같이 마크업 있습니다 : 

 <div id="nav"> <ul> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">gallery</a></li> <li><a href="#">about</a></li> </ul> </div>

물론 이것도 적절한 HTML5입니다. 목록으로 네 개의 항목이 표시 등록되어 있습니다만, 그것이 웹 사이트 탐색 것은 가르쳐주지 않습니다. 헤더의 일부가되어 있거나, 연결 문자열에서 시각적으로 유추할 수 있지만, 의미적으로 다른 링크 목록과 아무런 변함이없는 것입니다.

누가 웹 사이트 탐색의 의미를 걱정하는 것입니까? 예를 들어 장애를 가진 사람 입니다. 이유는 무엇입니까? 다음과 같은 상황을 생각해보세요 : 손발의 움직임이 제한되어있어 마우스를 사용할 수 어렵다면 그 보조를 위해 기본 탐색 추적 (또는 이전)위한 브라우저 확장을 사용할 것이다 . 또는 다음과 같은 상황도 고려하십시오 : 시각 장애가있는 경우 "음성 읽기 소프트웨어"라는 문장을 읽고 나서 웹페이지를 요약주는 것을 사용하는 것이 아닐까요. 웹 페이지의 제목 다음에 중요한 것은 기본 탐색 링크에 대한 정보입니다. 신속하게 사이트를 걷고 싶은 경우 탐색 표시줄에 바로 이동할 수 있도록 음성 읽기 소프트웨어에 알려줄 필요가있을 것입니다. 또한 본문을 빨리 읽고 싶은 경우는 탐색 모음을 날려 콘텐츠 본문을 빨리 읽으 같은 음성 읽기 소프트웨어에 전달할 필요가있을 것입니다. 어쨌든 탐색 링크를 기계적으로 식별할 수 있도록하는 것이 중요합니다.

즉 <div id="nav"> 와 웹 사이트 탐색을 마크업에 아무것도 실수는 아니지만, 옳다는 것도 아닙니다. 나쁘지 않다는 정도입니다. HTML5에서는 탐색 섹션을 의미 마크업하기 위해 <nav> 요소를 제공합니다. 

  <nav> 
   <ul>
     <li> <a href="#"> home </ a> </ li>
     <li> <a href="#"> blog </ a> </ li>
     <li> <a href="#"> gallery </ a> </ li>
     <li> <a href="#"> about </ a> </ li>
   </ ul>
  </ nav>

질문 : 본문에 점프 (skip links) 는 <nav> 요소와 호환이 있습니까? 아니면 지금까지대로 HTML5에서도 메인 페이지로 이동하는 링크가 필요한 것일까요?

답변 : 본문에 점프는 읽기 소프트웨어 탐색 섹션을 건너뛸 수 있도록하는 것입니다. 이것은 타사 소프트웨어를 사용하여 마우스를 사용하지 않고 웹 사이트를 방문하는 장애인들이 매우 도움이 될 것입니다 ( 어떻게, 그리고 왜 본문에 점프 제공하는지 ).

음성 읽기 소프트웨어를 업데이 트 <nav> 요소를 인식하게되면, <nav> 요소로 마크업 탐색 섹션을 비행 여부를 자동으로 찾을 수있는 것이라고 생각되므로 본문 에 점프는 불필요하게 될 것입니다. 하지만 HTML5에 대응하는 음성 읽기 소프트웨어에 모두 장애가있는 사람들이 업데이 트까지는 아직 ​​시간이 좀 걸릴 테니 <nav> 섹션을 날리기위한 메인 컨텐츠로 가기를 지속적으로 제공해야 할 것이다.

❧

드디어 소재로 한 페이지 의 마지막에 겨우 도착했습니다. 마지막으로 이야기하는 것은 웹 페이지의 마지막에있는 것, 즉 바닥글입니다. 바닥글은 다음과 같이 마크업 있습니다 : 

 <div id="footer"> <p>&#167;</p> <p>&#169; 2001&#8211;9 <a href="#">Mark Pilgrim</a></p> </div>

합리적인 HTML5 네요. 물론 이대로도 괜찮지만, HTML5에서는보다 적절한 <footer> 요소를 제공합니다. 

  <footer> 
   <p> § </ p>
   <p> © 2001-9 <a href="#"> Mark Pilgrim </ a> </ p>
  </ footer>

<footer> 요소로 적합한 것은 어떤 것입니까? 아마 당신이 지금 <div id="footer"> 에 넣고있는 것이 그렇다. 이것은 여러 번 반복한 질문이지만, 그렇게 밖에 말할 수 없습니다. HTML5 스펙은 "보행자는 일반적 섹션에 누가 썼는지 및 관련 문서는인지, 저작권 등에 대한 정보를 저장한다"고합니다. 예제 페이지에서도 그렇게되어 있군요 : 짧은 저작권 정보 진술 문과 제작자에 대한 웹 페이지에 대한 링크 이루어져 있습니다.有名なサイトをいくつか見てみれば、フッターにどういうものが含まれるのかわかるでしょう。

  • CNNは著作権情報の他に各言語の翻訳やサービス利用規約、プライバシー・ポリシー、「CNNについて」、「お問い合わせ」、「ヘルプ」 などのリンクが納められています。これらは全て<footer>にふさわしいものです。
  • Googleでは飾り気の無さで有名なホームページですが、「広告掲載」や「ビジネス ソリューション」、「Google について」、著作権情報の一文とプライバシー・ポリシーへのリンクがあります。これらもまた<footer>で括ることができます。
  • 私(Mark Pilgrim)のブログは自分の管理する他のウェブサイトのへのリンクと著作権情報から成ります。もちろんこれらも<footer>要素にふさわしいものです(ただし、それらのリンクはナビゲーションではなく他のウェブサイトにあるプロジェクトへの単なるリンクの集合に過ぎないので<nav>要素で括るべきではありません )。

最近「 Fat footers 」は爆発的に流行しています。 W3Cのウェブサイトを見てみてください。三つのカラムに分けられて、「Navigation」、「Contact W3C」、そして「W3C Updates」とあります。これのマークアップは以下のような感じになっています: 

 <div id="w3c_footer"> <div class="w3c_footer-nav"> <h3>Navigation</h3> <ul> <li><a href="/">Home</a></li> <li><a href="/standards/">Standards</a></li> <li><a href="/participate/">Participate</a></li> <li><a href="/Consortium/membership">Membership</a></li> <li><a href="/Consortium/">About W3C</a></li> </ul> </div> <div class="w3c_footer-nav"> <h3>Contact W3C</h3> <ul> <li><a href="/Consortium/contact">Contact</a></li> <li><a href="/Help/">Help and FAQ</a></li> <li><a href="/Consortium/sup">Donate</a></li> <li><a href="/Consortium/siteindex">Site Map</a></li> </ul> </div> <div class="w3c_footer-nav"> <h3>W3C Updates</h3> <ul> <li><a href="http://twitter.com/W3C">Twitter</a></li> <li><a href="http://identi.ca/w3c">Identi.ca</a></li> </ul> </div> <p class="copyright">Copyright © 2009 W3C</p> </div>

セマンティックなHTML5に変換するためには以下のような変更を加えます:

  • いちばん外側の<div id="w3c_footer">を<footer>要素に変換する。
  • 最初の二つの<div class="w3c_footer-nav">を<nav>要素に変換し、三つ目は<section>要素に変換する。
  • <h3>の見出しを<h1>に変換し、セクショニング要素内に入るようにする。 <nav>要素は<article>要素と同じように文書のアウトラインにセクションを作成します。

最終的にマークアップは以下のようになります: 

 <footer> 
   <nav> 
     <h1>   Navigation  </h1> 
     <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/standards/">Standards</a></li>
      <li><a href="/participate/">Participate</a></li>
      <li><a href="/Consortium/membership">Membership</a></li>
      <li><a href="/Consortium/">About W3C</a></li>
     </ ul>
   </nav> 
   <nav> 
     <h1>  Contact W3C  </h1> 
     <ul>
      <li><a href="/Consortium/contact">Contact</a></li>
      <li><a href="/Help/">Help and FAQ</a></li>
      <li><a href="/Consortium/sup">Donate</a></li>
      <li><a href="/Consortium/siteindex">Site Map</a></li>
     </ ul>
   </nav> 
   <section> 
     <h1>  W3C Updates  </h1> 
     <ul>
      <li><a href="http://twitter.com/W3C">Twitter</a></li>
      <li><a href="http://identi.ca/w3c">Identi.ca</a></li>
     </ ul>
   </section> 
  <p class="copyright">Copyright © 2009 W3C</p>
 </footer>

❧

Further Reading

このページで題材としたウェブページ:

文字エンコーディングについて:

HTML5の新しい要素をInternet Explorerで有効にする方法について:

標準モードとdoctype判別について:

  • Activating Browser Modes with Doctype by Henri Sivonen . This is the only article you should read on the subject. Any article on doctypes that doesn't reference Henri's work is guaranteed to be out of date, incomplete, or wrong.

HTML5対応検証ツール:

❧

Copyright MMIX–MMX Mark Pilgrim , Kyo Nagashima

❧

訳注


저작자표시

'HTML5.0' 카테고리의 다른 글

canvas source  (0) 2012.06.05
HTML 5.0 구조 및 FORM image  (0) 2012.06.04
adobe Edge  (0) 2012.06.04
캔버스 간단한 마우스 그리기  (0) 2012.06.04
캔버스 이미지 뛰우기 .  (0) 2012.06.04
Posted by 사라링
트랙백 : 댓글

adobe Edge

 | HTML5.0
2012. 6. 4. 16:53

어도비 사에서 html5 를 적극 지원하기 위해 Edge 라는 프로그램을 선보였다.

7월 31일 부터 preveiw 버전을 다운로드 할 수 있도록 하였다.

http://labs.adobe.com/technologies/edge/



 

Edge 는 좀더 쉽게 html5 와 css3 를 이용하여 애니메이션을 만들 수 있도록 하는 툴이다. 당연히 html5 를 지원하지 않는 인터넷 익스플로러 6,7,8 에서는 동작 하지 않는다. 하지만 이를 지원하는 브라우저에서는 잘 동작 된다. 물론 아이폰과 아이패드에서도 아주 잘 동작 될 것이다(테스트 해보지 않았음.).



 

그럼 지금부터 Edge 에 대해 조금 살펴 보기로 한다. 먼저 아래 링크로 가서 Edge 의 preview 버전을 다운로드 받은 후 설치 한다.

http://labs.adobe.com/technologies/edge/

adobe 계정이 필요 하며, windows 는 vista 이상 부터 설치가 가능하며, 맥은 Mac OS X v10.6 and v10.7 부터 설치가 가능하다.

설치가 끝나면 아래와 같은 화면을 볼 수 있다.

adobe Edge Preveiw 버전의 실행화면

엣지 프로그램 튜토리얼 과 샘플 파일도 다운로드 받을 수 있다.



 

나 는 엣지 프로그램의 테스트를 위해 Create New 를 클릭 하였다. 그러면 아래와 같이 Untitled-1.html 파일이 만들어 지며 flash 나 afterEffects 를 다루어 본 사람이라면 조금 익숙한 work space를 볼 수 있다.

Create New 를 누르면 Untitled.html 문서가 만들어 진다.

일 단 상단에 선택, 도형, 택스트 입력 툴이 보인다. 좌측에는 속성 창(Properties) 창이 보이며, 여기서 Stage 의 색상 과 width, height 값을 설정 할 수 있다. 또한 Stage 를 넘어설 경우에 해당되는 css 속성자인 overflow 를 선택 할 수도 있다.

overflow 속성 선택

직사각형툴(Rectangle Tool) 을 이용해 사각형을 그려 보겠다.

직사각형 툴(Rectangle Tool)

사각형을 그린뒤 해당 사각형(Elements)를 선택하면 좌측 속성창에 해당 엘리먼트의 조정가능한 속성값들이 나온다. 해당 속성값은 아래와 같다.

  1. Element 의 ID 값을 지정한다. (<div id="Rectangle1"></div> 라고 생각하면 된다. 실제로 이렇게 된다.)
  2. Element 의 좌표값과 사이즈, 투명도를 지정할 수 있다.
    • 중 요한것은 이것은 애니메이션을 만들기 위한 툴이기 때문에 좌표값의 개념을 다르게 생각해야 한다. 최초 사각형 모양의 엘리먼트를 그린 그 위치를 x,y 각각 0으로 인식하면 된다. 그리고 그려진 위치를 기준으로 +,- 하여 애니메이션이 생성된다.
  3. Element의 background 와 border 를 지정한다.
  4. Element의 회전, 회전시 기준점, 뒤틀림, 비율 등을 지정할 수 있다.
  5. border-radius 속성을 지정할 수 있다.

* 위의 속성값들을 변화 시키면 하단 타임 라인에 해당 속성값들이 추가된다. 이 개념은 에프터 이펙트와 비슷한데 아래에서 추가로 설명 하도록 하겠다.

여기에 택스트를 하나 더 추가해 보도록 하겠다. 텍스트는 내가 자주가는 네이버카페인 '하드코딩하는 사람들' 이라고 쓰도록 하겠다.


텍스트를 적으면 해당 텍스트 에 대한 속성값들이 properties 창에 보여진다.


 

  1. Element 의 id 값이다.
  2. Element 의 좌표값과 사이즈, 투명도를 지정할 수 있다.
  3. font-family 와 size , color , text-align 및 decoration 속성들을 변경할 수 있다.
  4. Element 의 회전축, 회전각도, 뒤틀림, 비율 등을 변경 할 수 있다.

여기까지 하게되면 마크업 구조는 다음과 같아진다.

?
1
2
3
4
5
6
<div id="stage">
<div id="Rectangle">
</div>
<div id="Text2">
하드코딩하는 사람들</div>
</div>

물론 위의 코드는 Edge 가 자바스크립트 화 하여 문서가 로드될때 상위 Element에 write 해준다. 크롬 개발자 도구로 확인 할 수 있다. 이제 만들어진 엘리먼트들에게 생명을 불어 넣어 보겠다. 그전에 알아두어야 할것 몇가지..

위의 속성값들 이름 앞에 보면 ◇ 모양을 볼수 있다. 이것은 하단 Timeline 창의 Element 에 해당 속성에 대한 키프레임을 추가하는 버튼이다. 클릭하거나 해당 속성을 변경하게 되면 하단 타임라인의 엘리먼트에 속성값이 추가되는 것을 알 수 있다.

이것이 add Keyframe 버튼

키프레임추가 버튼을 누르거나 속성값을 변경하면 타임라인에 키프레임이 생성된다.(Auto-Keyframe Properties 가 체크된 상태일 경우 -> 붉은색 시계모양)


 

이것이 Auto-Keyframe Properties 로 체크되 있으면 Element 의 속성값이 변화할때 자동으로 키프레임이 추가된다.



급하게 애니메이션을 만들어 보겠다.

순서는 지금 까지 만은 앨리먼트에 속성값을 각각 타임라인의 시간에 따라 다르게 주기만 하면 된다.

예로 0:00 에서 엘리먼트의 x 축을 10 으로 주면 0:02 에서 x 축의 값을 30으로 변경하면 좌에서 우로 움직이는 애니메이션이 된다.


일단 지금 만들어 놓은 것이 최종적인 모습이므로 키프레임에서 현재 만들어 놓은 속성들을 0:02 로 끌어서 이동시켰다.


 


그런다음 타임라인의 현재 프레임을 0:00 으로 이동시켜서 시작시의 모습으로 속성을 변경 시켜본다. 위에서 회색박스가 떨어지는 효과를 주기 위해 Rectangle4 의 tY 값을 -276까지 변경해서 stage 의 위쪽으로 안보일때까지 올려 버렸다. 그러면 타임라인에 아래와 같이 모션이 적용된걸 확인 할 수 있다. 재생 버튼을 눌러 보면 위에서 아래로 떨어지는 회색 상자 모션을 볼 수 있다.


 


위의 녹색부분을 클릭하면 좌측에 속성을 변화 시킬 수 있다. 모션이 되는 부분의 아이디, 시간, 시작되고 끝나는 시간을 조절할 수 있으며 Easing(부드럽게 시작되고 끝나는 등의 효과) 를 줄 수 있다. 이부분은 직접 해보는 편이 빠를듯.


이와 같이 해서 텍스트에도 같은 효과를 주었다.


 

모션이 완료되고 저장하면, edge 파일과 함께 html, css, js 파일과 edge_includes 폴더 가 생성된다. 이것들이 모두 올라가야 하며, html 파일을 열어보면 (웹퍼블리셔, 혹은 개발자라면) 아..이렇게 되는 구나 라고 알수 있을듯...


edge_블로그.zip

 


 

위에 작업한거 샘플파일임.


시작할때는 꼼꼼하게 분석해서 포스팅 해야지..했는데.. 회사일도 바쁘고 하다보니 결국 날림이 됐다.

지금은 베타 버전이라 기능이 거의 없지만 실제 상용화 버전은 아마 이벤트를 걸고, 만들고 하는 기능 부터 해서 많은 부분이 추가될 거라 기대한다.

 

http://eyekorea.tistory.com/18 에서 가져왔습니다.


저작자표시

'HTML5.0' 카테고리의 다른 글

HTML 5.0 구조 및 FORM image  (0) 2012.06.04
HTML 5 설명 글 중 (일본어를 구글로 강제 번역함 ㅠㅠ )  (0) 2012.06.04
캔버스 간단한 마우스 그리기  (0) 2012.06.04
캔버스 이미지 뛰우기 .  (0) 2012.06.04
canvas 사이트 모음 .  (0) 2012.05.24
Posted by 사라링
트랙백 : 댓글

캔버스 간단한 마우스 그리기

 | HTML5.0
2012. 6. 4. 12:40

        <div id="container">
            <canvas title="그려주세요." id="drawCanvas" width="1200" height="250" s
                style="position: relative; border: 1px solid #000;"></canvas>
        </div>


<script type="text/javascript">

    if (window.addEventListener) {
        window.addEventListener('load', InitEvent, false);
    }
    var canvas, context, tool;

    function setTextCanvas() {

    }

    function InitEvent() {
        canvas = document.getElementById('drawCanvas');
        //       resetCanvas();
        if (!canvas) {
            alert("캔버스 객체를 찾을 수 없음");
            return;
        }
        if (!canvas.getContext) {
            alert("Drawing Contextf를 찾을 수 없음");
            return;
        }
        context = canvas.getContext('2d');
        if (!context) {
            alert("getContext() 함수를 호출 할 수 없음");
            return;
        }
        // Pencil tool 객체를 생성 한다.
        tool = new tool_pencil();
        canvas.addEventListener('mousedown', ev_canvas, false);
        canvas.addEventListener('mousemove', ev_canvas, false);
        canvas.addEventListener('mouseup', ev_canvas, false);
    }

    function tool_pencil() {
        var tool = this;
        this.started = false;
        // 마우스를 누르는 순간 그리기 작업을 시작 한다.
        this.mousedown = function(ev) {
            context.beginPath();
            context.moveTo(ev._x, ev._y);
            tool.started = true;
        };
        // 마우스가 이동하는 동안 계속 호출하여 Canvas에 Line을 그려 나간다
        this.mousemove = function(ev) {
            if (tool.started) {
                context.lineTo(ev._x, ev._y);
                context.stroke();
            }
        };
        // 마우스 떼면 그리기 작업을 중단한다
        this.mouseup = function(ev) {
            if (tool.started) {
                tool.mousemove(ev);
                tool.started = false;
            }
        };
    }

    // Canvas요소 내의 좌표를 결정 한다.
    function ev_canvas(ev) {
        if (ev.layerX || ev.layerX == 0) {// Firefox 브라우저
            ev._x = ev.layerX;
            ev._y = ev.layerY;
        } else if (ev.offsetX || ev.offsetX == 0) {// Opera 브라우저
            ev._x = ev.offsetX;
            ev._y = ev.offsetY;
        }
        // tool의 이벤트 핸들러를 호출한다.
        var func = tool[ev.type];
        if (func) {
            func(ev);
        }
    }




</script>


저작자표시

'HTML5.0' 카테고리의 다른 글

HTML 5 설명 글 중 (일본어를 구글로 강제 번역함 ㅠㅠ )  (0) 2012.06.04
adobe Edge  (0) 2012.06.04
캔버스 이미지 뛰우기 .  (0) 2012.06.04
canvas 사이트 모음 .  (0) 2012.05.24
Canvas  (0) 2012.05.22
Posted by 사라링
트랙백 : 댓글

캔버스 이미지 뛰우기 .

 | HTML5.0
2012. 6. 4. 10:22

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
};
img.src="img_flwr.png";
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>


<script type="text/javascript">

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
ctx.fillStyle=grd;
ctx.fillRect(0,0,175,50);

</script>

</body>
</html>


저작자표시

'HTML5.0' 카테고리의 다른 글

adobe Edge  (0) 2012.06.04
캔버스 간단한 마우스 그리기  (0) 2012.06.04
canvas 사이트 모음 .  (0) 2012.05.24
Canvas  (0) 2012.05.22
html4.0 을 html 5.0 으로 변환  (0) 2012.05.14
Posted by 사라링
트랙백 : 댓글

canvas 사이트 모음 .

 | HTML5.0
2012. 5. 24. 10:21
하나는 http://mrdoob.com/ 이고

하나는 http://www.nihilogic.dk/labs/ 입니다.



저작자표시

'HTML5.0' 카테고리의 다른 글

캔버스 간단한 마우스 그리기  (0) 2012.06.04
캔버스 이미지 뛰우기 .  (0) 2012.06.04
Canvas  (0) 2012.05.22
html4.0 을 html 5.0 으로 변환  (0) 2012.05.14
Aptana 설치  (0) 2012.05.14
Posted by 사라링
트랙백 : 댓글

Canvas

 | HTML5.0
2012. 5. 22. 20:21

브라우저 위의 그림판
HTML5 의 많은 새로운 기능 중 가장 자주 언급되어 왔던 것이 아마 Canvas(캔버스) 일 것이다
Canvas 는 Web Workers 나 Web Storage와 같은 다른 HTML5 스펙보다 덜 기술적이며 보다 직관적이다.
개발자 뿐만 아니라 비개발자들 역시 Canvas의 개념을 쉽게 이해할 수 있고 흥미를 보여왔기 때문에 가장 먼저 그리고 가장 흔하게 소개된 HTML5 기술인 것이다

Canvas 는 말 그대로 그림을 그릴 수 있는 화폭, 즉 그림판과 같다
그것도 다른 곳에 아닌 브라우저 위에서 동작하는 그림판인 것이다

Canvas 위에 선, 도형, 텍스트, 이미지와 같은 그래픽을 표현할 수 있고 색깔, 그림자, 패턴과 같은 여러 효과를 적용할 수 있다. 그리고 기본적으로 Canvas 는 2차원 그래픽 표현을 위한 스펙이지만 추가로
WebGL를 기반으로 하는 3D 그래픽용 Canvas 의 스펙 개발이 진행중이다

참고: WebGL은 오픈 그래픽 라이브러리인 OpenGL(OpenGL ES 2.0)에 기반한 웹 표준 그래픽 라이브러리이다. WebGL을 이용하면 브라우저에 별도의 플러그 인 없이 완벽하게 하드웨어 가속되는 3D그래픽을 표현할 수 있게 된다. 주요 브라우저 벤더사인 애플, 구글, 모질라 및 오페라와 하드웨어 업체인 AMD 및 엔비디아 등이 WebGL Working Group 멤버로 활동하고 있다. 그리고 구글의 웹 용 3D API인 O3D 플러그 인 기술을 포기하고 WebGL 을 선택했다 


브라우저 지원 현황
브라우저 지원 현황 역시 다른 HTML5 기술보다 더 일반적이다
다시 말해 대부분의 브라우저에서 Canvas를 지원한다는 의미이다


그림1. 브라우저별 2D Canvas 지원 현황 (출처: http://caniuse.com/)

IE9 이전 버전에서 Canvas 지원하기
현재까지 출시된 IE8 까지는 HTML5 지원이 거의 되지 않는다
Canvas 역시 IE9 이전 버전에서는 동작하지 않는다
다만 구글에서 제공하는 크롬프레임을 설치하면 IE9 이전버전에서도 HTML5 를 동작시킬 수 있다

그러나 Canvas의 경우 더 쉽게 IE에 적용할 방법이 있다.
ExplorerCanvas 라이브러리를 이용하면 이전버전의 IE에서도 Canvas를 동작시킬 수 있게 된다
(ExplorerCanvas는 이전 버전의 IE에서 Canvas API가 동작할 수 있도록 해 주는 오픈소스 자바스크립트 라이브러리이다)
ExplorerCanvas 다운로드: http://code.google.com/p/explorercanvas/

다운받은 excanvas.js 스크립트 파일을 Canvas가 구현된 HTML 파일의 헤더 영역에 다음과 같이
정의하여 IE일 경우 이 스크립트가 적용되도록 처리하면 된다
<html>
<head>
 <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
  ...



Canvas 학습 지원 사이트
Canvas로 구현할 수 있는 것은 아주 많다
개념적으로 보편적인 기술인 만큼 그 응용 개발 역시 매우 다양하게 펼칠 수 있다
그러나 응용도 기본이 갖춰져야 제대로 되는 만큼 기본사용법의 정확한 숙지가 필요하다

이 글에서도 기본적인 사용법과 간단한 데모를 작성해 보겠지만,
그전에 Canvas 학습을 도와주는 훌륭한 사이트가 있어 소개한다
http://diveintohtml5.org/canvas.html
https://developer.mozilla.org/en/Canvas_tutorial

이 두 사이트에서 제공하는 Canvas 튜토리얼은 정확한 기본기를 갖추고 응용력을 기르는데 충분한 도움을 줄 것이다. Canvas를 적용할 서비스는 굉장히 많으며 특히 게임과 같은 동적이고 화려한 그래픽이 필요한 서비스에는 활용도가 무궁무진할 것이다. 잘 정리된 기본 학습 도구를 활용하는 것이 매우 중요하므로 위 사이트들을 꼭 참고하기 바란다


Canvas 다루기
지금부터 Canvas를 다루는 기본적인 방법에 대해 알아 보도록 하자

<canvas> 태그와 그리기 컨텍스트
그림을 그리기 위해서는 제일 먼저 브라우저에 화폭이 준비되어 있어야 한다
<canvas>라는 마크업 태그를 이용하여 브라우저에 캔버스 영역을 지정할 수 있다
<canvas id="cv" width="400" height="300"></canvas>

HTML 문서에 <canvas> 태그를 삽입하는 것 만으로 브라우저에 그림판이 준비된다
다만 캔버스는 기본적으로 테투리가 없기 때문에 위 코드만으로는 브라우저에서 캔버스를 눈으로 확인하기는 힘들다. 따라서 스타일을 적용해 캔버스의 테두리를 보이게 하는 것이 좋을 수 있다
<canvas id="cv" width="400" height="300"
    style="position: relative; border: 1px solid #000;"></canvas>

그리고 이 캔버스를 이용해 그리기를 수행하려면 '그리기 컨텍스트'를 얻어야 한다
그리기 컨텍스트는 앞서 정의한 <canvas> DOM 객체의 getContext 메서드로 얻을 수 있다
var canvas = document.getElementById("cv"); //canvas의 DOM 객체를 얻는다
var context = canvas.getContext("2d");         //DOM 객체로부터 2D 컨텍스트를 얻는다

이후 그리기 작업은 '그리기 컨텍스트'를 통해 이루어진다

캔버스의 좌표
캔버스에 각종 도형 및 선과 같은 2차원 그래픽 작업을 할 때 각 점의 위치를 지정해야 하는데
이는 캔버스의 2차원 좌표가 기준이 된다
사각형 모양을 하고 있는 캔버스는 제일 왼쪽 상단 꼭지점이 (0,0) 시작점이 된다
(0,0) 시작점을 기준으로 그리고자 하는 도형의 가로 위치 x 와 세로위치 y 좌표를 지정하면 된다

그림2. Canvas의 좌표 (출처: http://diveintohtml5.org/canvas.html)


그리기 작업
1) 사각형 그리기
그리기의 가장 기본이 되는 도형이다. Canvas API 에서 사각형을 위한 함수를 따로 제공하고 있다
아래와 같은 사각형 함수인데, 모두 같은 매개변수를 취하고 있다
x,y : 사각형의 시작점 좌표(왼쪽 위 모서리 지점), width,height: 사각형의 너비,높이

fillRect(x, y, width, height)       : 색으로 채운 사각형을 그린다
strokeRect(x, y, width, height) : 선만 있는 사각형을 그린다
clearRect(x, y, width, height)   : 사각형 영역을 지운다

아래 그림은 간단한 사각형 그리기 샘플이다
차례로 속이 찬 사각형과, 윤곽만 있는 사각형, 그리고 절반이 지워진 사각형이다
아래 결과 화면과 코드를 참고하기 바란다



<!DOCTYPE html>
<html>
<head></head>
<body>
  <canvas id="cv" width="400" height="300" style="position: relative; border: 1px solid #000;"></canvas> 
</body>
</html>
<script type="text/javascript">
  var canvas = document.getElementById("cv");
  var context = canvas.getContext("2d");          
 
  context.fillRect(10,10,100,100);    //색으로채운 사각형
  context.strokeRect(120,10,100,100); //윤곽만 있는 사각형
 
  context.fillRect(230,10,100,100);   //색으로 채운 사각형
  context.clearRect(230,10,50,50);    //앞 사각형의 절반을 지움
</script> 


2) 각종 도형 및 선 그리기
사각형과는 달리, 삼각형, 오각형, 육각형 및 원과 같은 도형은 선들을 연결하여 직접 그려줘야 한다
완성된 도형은 선들의 집합체이며 각각의 선들을 패스(Path) 라 한다
(엄밀히 말하자면 각 선은 서브패스이며 서브패스 전체를 가리켜 패스라 한다)

결국 도형을 그린다는 것은 각 선을 연결한다는 의미이며 이는 패스(Path)를 그리는 과정인 것이다

패스(Path)그리기 순서
첫째, 패스 그리기를 시작을 알린다
: beginPath() 함수로 canvas에 패스그리기를 알린다. 이전의 패스는 모두 초기화된다

둘째, 패스 경로 즉 시작점과 종료점을 지정한다
: moveTo(x,y) 함수로 패스의 시작점을 지정하고 lineTo(x,y) 함수로 패스가 이어질 점을 지정한다
 
셋째, 패스 경로를 따라 실제로 그린다
: 이전 과정까지는 패스 즉 경로에 대한 정보를 셋팅하는 것이다
  실제 지정된 패스를 따라 선을 그려야 하는데, 이는 stroke(), fill()과 같은 잉크(ink)함수가 이용된다

삼각형 그리기
간단한 삼각형 그리기 샘플을 보자.
아래와 같은 삼각형을 그리기 위해 패스그리기를 수행한 예이다


<script type="text/javascript">
  var canvas = document.getElementById("cv");
  var context = canvas.getContext("2d");          
 
  context.beginPath(); //패스 그리기 시작  
  context.moveTo(50,10); //패스 시작점 지정  
  context.lineTo(20 ,100); //패스 이동점 지정
  context.lineTo(80 ,100); 
  context.lineTo(50 ,10);  
  context.stroke();    //윤관선 그리기
  //context.fill();   //색 채우기
</script>

beginPath() 로 패스그리기의 시작을 알리고 moveTo()로 패스 시작점을 설정한다
그리고 lineTo() 를 이용하여 패스의 경로를, 그리는 방향 대로 이동한다
마지막으로 stroke()로 패스의 윤곽선을 그린다
주석처리된 fill() 함수로 패스를 그릴 경우 패스 속이 색(기존 검정색)으로 채워지게 된다 

이런식으로 삼각형은 물론, 사각형, 오각형,.. N각형의 도형을 맘껏 그릴 수 있다

원 그리기
앞서 살펴본 삼각형 그리기는 직선을 연결한 도형일 경우에는 적합하지만 곡선이나 원을
그릴 수는 없다. 즉 lineTo() 함수는 직선을 그리는 함수이다

원이나 곡선 역시 패스 그리기의 일종으로 앞서 살펴본 과정을 그대로 따른다
다만 직선을 그리는 함수인 lineTo() 대신 원을 그리는 함수인 arc() 나 배지곡선을 그리는 함수인 quadraticCurveTo() 함수를 이용하면 된다

간단한 원그리기 샘플을 살펴 보자


<script type="text/javascript">
  var canvas = document.getElementById("cv");
  var context = canvas.getContext("2d");          
 
  context.beginPath(); //패스 그리기 시작   
  context.arc(70,70,50,0, 2*Math.PI, true); //원그리기 
  context.stroke();    //윤관선 그리기
</script>


패스 닫기
패스를 이용해 도형을 마음껏 그릴 수 있으려면 관련 학습을 조금 더 해야 한다
패스와 관련된 추가 학습은 다른 사이트를 참고하도록 하며 이 글에서는 명시적으로 패스를 닫는 closePath() 함수에 대해 알아보면서 패스 정리를 마치고자 한다

closePath()는 패스를 명시적으로 닫는 역할을 한다
반드시 사용해야 하는 것은 아니지만 명시적으로 closePath()를 호출해 주면
마지막 패스의 좌표와 시작좌표를 자동으로 연결해 주기 때문에 편리하다

다음은 앞서 살펴본 삼각형 그리기 예에서 마지막 패스를 생략하고 closePath()를 대신 사용하였다
즉 마지막 lineTo() 함수가 없어도 자동으로 시작점과 연결해 주기 때문에 결과는 동일하다
<script type="text/javascript">
  var canvas = document.getElementById("cv");
  var context = canvas.getContext("2d");          
 
  context.beginPath(); //패스 그리기 시작 
  context.moveTo(50,10); //패스 시작점 지정 
  context.lineTo(20 ,100); //패스 이동점 지정
  context.lineTo(80 ,100); 
  context.closePath();     //마지막 패스 이동점 대신 패스를 명시적으로 닫는다
  context.stroke();    //윤관선 그리기
</script>


스타일 및 효과
캔버스에 그리기 작업을 할 경우 별다른 스타일을 지정하지 않으면 기본 스타일이 적용된다
앞서 살펴본 샘플에서 도형의 안,팎의 색이 검정색이었던 것은 기본값이기 때문이다
스타일을 적용하면 도형의 색 지정 뿐만 아니라 그라데이션 효과, 그림자 효과등을 줄 수 있다

색 지정
우선 간단히 색을 지정하는 예를 보자. 앞서 살펴본 사각형 그리기 예에서 색을 지정한다
채우기 스타일은 fillStyle 로 윤곽선 스타일은 strokeStyle 로 색을 지정하면 된다
색을 지정할 때 blue, red 와 같은 문자는 물론 #ffffff 혹은 rgb(255,0,0) 등 모든 CSS 컬러를 사용할 수 있다. 색을 지정하지 않았을 땐 기본값으로 #000000(검정색) 이 된다


<script type="text/javascript">
  var canvas = document.getElementById("cv");
  var context = canvas.getContext("2d");                 
 
  context.fillStyle = "blue";
  context.fillRect(10,10,100,100);    //파란색으로 채운 사각형
 
  context.strokeStyle = "red";
  context.strokeRect(120,10,100,100); //빨가색 윤곽선 사각형
</script>


그라데이션 효과
fillStyle 이나 strokeStyle를 통해 색깔 지정 뿐만 아니라 그라데이션 효과도 줄 수 있다
그라데이션은 선형그라데이션과 원형그라데이션 두 가지 종류가 있다

선형 그라데이션
: (x,y) 지점에서 (x1,y1) 까지 직선으로 색조가 변화한다
  createLinearGradient(x,y,x1,y1) 함수 이용

원형 그리데이션
: 중심이 (x,y), 반지름 r인 원에서 중심이 (x1,y1), 반지름이 r1 인 원 사이의 색조가 변화한다
  createRadialGradient(x,y,r,x1,y1,r1) 함수 이용

createXXXGradient 함수로 그라데이션의 형태를 지정한 후,
addColorStop(offset, color) 함수를 이용하여 각 지점에 이용될 색을 지정한다
offset는 0.0(시작점) 에서 1.0 (끝점) 사이의 위치 값을 나타내며 해당 위치의 색을 지정한다

사각형에 선형 그라데이션 효과를 준 예를 살펴 보자
두 사각형 모두 선형 그라데이션 효과를 준 것이며 직선 방향을 조정하여 가로,세로 효과를 줬다

(화살표는 색조 변화 방향을 나타냄)

<script type="text/javascript">
  var canvas = document.getElementById("cv");
  var context = canvas.getContext("2d");                 
 
  var gradient = context.createLinearGradient(0,0,100,0);
  gradient.addColorStop(0,"white");
  gradient.addColorStop(1,"blue"); 
  context.fillStyle = gradient;   
  context.fillRect(10,10,100,100); 
 
  gradient = context.createLinearGradient(0,0,0,100);
  gradient.addColorStop(0,"white");
  gradient.addColorStop(1,"red"); 
  context.strokeStyle = gradient;
  context.strokeRect(120,10,100,100);      
</script>


그림자 효과
선이나 도형에 그림자 효과를 줄 수 있다.
shadowOffsetX, shadowOffsetY 함수를 이용하여 원본 도형의 위치를 기준으로 그림자의 위치를 지정할 수 있으며 shadowColor 로 그림자 색상 shadowBlur로 그림자의 흐리기를 조정할 수 있다


<script type="text/javascript">
  var canvas = document.getElementById("cv");
  var context = canvas.getContext("2d");                 
    
  context.shadowColor = "green";
  context.shadowOffsetX = 5;
  context.shadowOffsetY = 5;
  context.shadowBlur = 2; 
 
  context.fillStyle = "blue";
  context.fillRect(10,10,100,100);  
</script>



이미지 및 텍스트 그리기
캔버스에는 선이나 각종 도형 이외에도 이미지 파일을 삽입하거나 텍스트를 직접 그릴 수도 있다
캔버스에 텍스트 그리기를 이용하면 글자에 각종 효과를 줄 수 있는 장점이 있다
그리고 이미지 역시 각종 이미지 처리를 할 수 있다는 장점이 있겠다

텍스트 그리기
우선 캔버스에 텍스트를 그리는 예를 살펴 보자
다른 도형 그리기와 마찬가지로 채워진 텍스트 혹은 윤곽선만 있는 텍스트를 그릴 수 있다


<script type="text/javascript">
  var canvas = document.getElementById("cv");
  var context = canvas.getContext("2d");                 
    
  var msg = "Hello, Canvas!"
 
  context.font = "20px '맑은 고딕'";
  context.fillText(msg, 10  ,50);
 
  context.font = "40px 'Tahoma'";
  context.strokeText(msg, 10  ,100);
</script>


이미지 그리기
drawImage 함수를 이용하여 캔버스에 이미지 파일을 삽입할 수 있다
주의할 점은 drawImage의 호출 시점이다. 이미지가 모두 로딩된 이후에 이 함수를 호출해야 한다
따라서 이미지 로딩이 완료될 때 발생하는 onload 이벤트에서 이 함수를 사용하는 것이 일반적이다

눈의 즐거움을 위해 손담비 사진을 이용해 샘플을 만들어 보자 ^.^
Image 객체의 onload 이벤트에서 drawImage 함수가 호출되는 것을 눈여겨 보기 바라며
이미지를 이용하여 사각형을 그릴 때 채우기 패턴으로 사용할 수도 있다
예에서는 손담비 이미지를 기반으로 패턴을 생성하여 사각형의 채우기 스타일로 사용하고 있다
그리고 회전효과도 가미했다(이미지 그리기와는 무관하지만...)


<script type="text/javascript">
  var canvas = document.getElementById("cv");
  var context = canvas.getContext("2d");                 
    
  var image = new Image();
 
  image.onload = function(){
    context.rotate(20*Math.PI/180);       //회전효과
   
    context.drawImage(image,30,10);   //이미지 그리기
   
    var pattern = context.createPattern(image,"repeat"); //반복패턴정의
    context.fillStyle = pattern;                                       //fill 패턴 지정
    context.fillRect(200,10,200,250);                                   //이미지로 사각형을 채운다     
  }
 
  image.src = "sondambi.bmp";
</script>


Canvas 초기화
그림을 그리다 모두 지우고 싶을 때가 있다
캔버스에 각종 그래픽 작업을 하다가 모든 것을 지우고 다시 시작하고 싶은,
일명 리셋(reset)을 하고 싶다면 매우 단순하게 초기화를 할 수 있다

캔버스의 너비나 높이 속성을 다시 설정하는 것만으로 캔버스는 완전 초기화 된다
캔버스에 그려진 내용 뿐만 아니라 그리기컨텍스트의 각종 속성도 기본값으로 돌아 온다

function resetCanvas(){
    canvas.width = canvas.width;       
  }


마무리 데모
이제 이 글을 마치기 전에 마무리 데모를 살펴 보자
사실 이 글에서 소개된 캔버스 다루기 내용은 극히 일부에 지나지 않는다.
2D 그래픽 처리와 관련한 다양한 기법과 API들이 존재한다.

반드시 관련 자료를 참고하여 추가 학습을 하길 권하며 3D 캔버스인 WebGL도 필요하다면 관련 자료를
찾아 보기 바란다

마지막 데모는 마우스로 그림을 그릴 수 있는 그림판이다
캔버스에 마우스를 데고 자유자재로 움직이면, 선이 마우스를 따라 그려지는 샘플이다

아래 데모 실행화면을 보자. 필자가 캔버스에 대고 그린 그림이다 -.-;


전체 소스
<!DOCTYPE html>
<html>
  <head>
    <title>Canvas Paint Example</title>      
    <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->   
  </head>
  <body>
   <div id="container">
     <canvas id="drawCanvas" width="400" height="300"
            style=" position: relative; border: 1px solid #000;"></canvas>
</div>
</body>
</html>
<script type="text/javascript">   
if(window.addEventListener){
    window.addEventListener('load', InitEvent, false);
}
var canvas, context, tool;       
function InitEvent () {                                      
    canvas = document.getElementById('drawCanvas');
    if (!canvas) {
      alert("캔버스 객체를 찾을 수 없음");
      return;
    }
    if (!canvas.getContext) {
      alert("Drawing Contextf를 찾을 수 없음");
      return;
    }       
    context = canvas.getContext('2d');
    if (!context) {
      alert("getContext() 함수를 호출 할 수 없음");
      return;
    }
    // Pencil tool 객체를 생성 한다.
    tool = new tool_pencil();
    canvas.addEventListener('mousedown', ev_canvas, false);
    canvas.addEventListener('mousemove', ev_canvas, false);
    canvas.addEventListener('mouseup',   ev_canvas, false);
}
function tool_pencil ()                                  
{
    var tool = this;
    this.started = false;
    // 마우스를 누르는 순간 그리기 작업을 시작 한다.
    this.mousedown = function (ev)
    {
        context.beginPath();
        context.moveTo(ev._x, ev._y);
        tool.started = true;
    };
   // 마우스가 이동하는 동안 계속 호출하여 Canvas에 Line을 그려 나간다
    this.mousemove = function (ev)
    {
        if (tool.started)
        {
            context.lineTo(ev._x, ev._y);
            context.stroke();
        }
    };
   // 마우스 떼면 그리기 작업을 중단한다
    this.mouseup = function (ev)
    {
      if (tool.started){
            tool.mousemove(ev);
            tool.started = false;
      }
    };
}       
// Canvas요소 내의 좌표를 결정 한다.
function ev_canvas (ev)
{
    if (ev.layerX || ev.layerX == 0)
    { // Firefox 브라우저
      ev._x = ev.layerX;
      ev._y = ev.layerY;
    }
    else if (ev.offsetX || ev.offsetX == 0)
    { // Opera 브라우저
      ev._x = ev.offsetX;
      ev._y = ev.offsetY;
    }
    // tool의 이벤트 핸들러를 호출한다.
    var func = tool[ev.type];       
    if (func) {
        func(ev);
    }
}
</script>


저작자표시

'HTML5.0' 카테고리의 다른 글

캔버스 이미지 뛰우기 .  (0) 2012.06.04
canvas 사이트 모음 .  (0) 2012.05.24
html4.0 을 html 5.0 으로 변환  (0) 2012.05.14
Aptana 설치  (0) 2012.05.14
HTML 이란.  (0) 2012.05.14
Posted by 사라링
트랙백 : 댓글

html4.0 을 html 5.0 으로 변환

 | HTML5.0
2012. 5. 14. 20:49

html5 살펴보기

<!DOCTYPE html> 

DTD 선언이 간략해 졋다. 기존 DTD에 비해서,

실용성을 강조하므로, 필요없는것들을 다 제외햇다.


<html lang="ko">
<head> 요소. 열림태그와 닫힘태그로 구성,속성. 
<meta charset="utf-8" />

 

html4까지는 charset이 없다.

간략화 할수 있다. 인코딩 관련 meta태그가 간략화 되었다

 

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

ie에서만 해석

ie는 버전별로 렌더링 모드가 따로 있다.

그래서 IE=edge 로 하면 최신버전으로 렌더링해달라는 의미,

IE=7 이렇게 쓸수도 있다.

 

chrome=1 크롬프레임사용하겠다는 뜻

크롬프레임 : ActiveX이고, activeX는 ie에서민 작동한다.

크롬프레임은 activeX를 이용해서, 모양은 ie인데 그 안의 내부적으로는 크롬이 동작하는것.

그러면 ie6에서도 html5를 사용할수 있게 한다는 뜻

이것은 activeX를 사용하는 것이므로 좋은 방법은 아니다.

설치가 되어있어야만 한다. 그래서 코드를 띄우고 해야함.

chrome=1 을 기재안하면 ie6이 실행, 기재하면 activeX를 설치하는 화면을 띄워서 구동하는 원리임.

 

<title>1_html5템플릿</title>


<meta name="description" content="" />

<meta name="author" content="timo0003" />

설명과 저자.. 정도.

 

<meta name="viewport" content="width=device-width; initial-scale=1.0" />

viewport 모바일에 최적화된 page라는 뜻

모바일 기기에서 읽어서 원활하게 page를 보여준다는 의미

처음에 들어갓을때의 스케일을 1로 지정한다는것.

이 부분에 대한 내용은 3일차에서 다시 설명하도록 하겠습니다.


<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico" />

일단 데스크탑에서 favico설정하는것.

 

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

모바일에서 바탕화면에 나타나는 아이콘 지정.

 

현재 웹 표준에서 쓰고 있는 id들을 분석을 해서, 요소로 만들어버린것.

전부  div로 선언하던것들이 요소로 추가가 많이 되었다.

 

 

 

실습, 2단 레이어 만들어보기

자동완성기능도 사용해보자.

자동완성 기능중에 요소가 어디어디에서 되는지 확장해서 보기. window - preference에 가서

Aptana studio - Content Assist 에 가서 web으로 프로젝트 바꾸고 브라우저를 체크해준다.

 

 

Aptana studio 단축키 잠깐 설명!

* 자동완성기능 활성화 : Ctrl + spaceBar

* 실행 : Ctrl + F11 아이콘을 클릭, 오른쪽 마우스 Run as 로 해도 된다. 실행되는 기본 브라우저는 FireFox

 

자동 포멧팅 : Ctrl + Shift + F

 

<div id="wrap">
 
 <div id="header"></div>
 <div id="sidebar"></div>
 <div id="content"></div>
 <div id="footer"></div>
 
</div>

 

이렇게 구조를 만들고 스타일을 입혀보자 참고 : clearboth.org

 

 

html5로 바꿔보자.

 

 

  <div id="wrap">
   <header id="header"></header>
   <aside id="sidebar"></aside>
   <section id="content"></section>
   <footer id="footer"></footer>
  </div>

 

 

 

 

html5 하위호환성 고려

현재 html5에로 마크업 하기 위해서는 데스크탑 기준으로 봣을때, 모바일은 다 되니까.

하위호환성을 고려해야 하는데,

그렇게 하려면 2가지 개념이 필요하다.

 

1.

ie6,7,8 에서는 새로운 요소들을 아예 인식하지 못한다.

한마디로  DOM트리에 생성이 안됩니다.

 

해결1 : FM적인 해결책은 자바스크립트에서 createElement()로 요소를 직접 생성... 하지만 귀찮앙

해결2 : ie9.js를 사용합니다. (구글에 가서. ie9.js 를 검색한다)

첫번째 나오는 검색 클릭. 해서 붙여넣기.

  <!--[if lt IE 9]>
  <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
  <![endif]-->

 

  

 

2.

이젠이런일이 거의 없지만 표준브라우저도 예전 버전들은 FireFox 3.6같은 경우.

새로운 요소들을 인라인 요소로 인식합니다.

인라인들은 높이값이 없다.

 

 

<link rel="stylesheet" href="css/reset.css" /> 이렇게 해서 예전버전들도 블록레벨로 인정하게끔 해준다.

 

이렇게까지만 해도, html5로 마크업 할 수가 있다.

 

 

 <!DOCTYPE  html>
<html lang="ko">
 <head>
  <meta charset="utf-8"/>
  <title>2_2단레이아웃</title>
  <!--[if lt IE 9]>
  <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
  <![endif]-->
  <link rel="stylesheet" href="css/reset.css" />
  <style>
   body {
    margin: 0px;
    padding: 0px;
   }
   #wrap {
    width: 900px;
    margin: auto;
    border: 1px solid red;
   }
   #header {
    width: 900px;
    height: 100px;
    background: pink;
   }
   #sidebar {
    float: left;
    width: 300px;
    height: 300px;
    background: lightgreen;
   }
   #content {
    float: right;
    width: 600px;
    min-height: 300px;
    background: skyblue;
   }
   #footer {
    clear: both;
    display: block;
    content: '';
    width: 900px;
    height: 100px;
    background: yellow;
   }
  </style>
 </head>
 <body>
  <div id="wrap">
   <header id="header"></header>
   <aside id="sidebar"></aside>
   <section id="content"></section>
   <footer id="footer"></footer>
  </div>
 </body>
</html>

 

 

 



저작자표시

'HTML5.0' 카테고리의 다른 글

캔버스 이미지 뛰우기 .  (0) 2012.06.04
canvas 사이트 모음 .  (0) 2012.05.24
Canvas  (0) 2012.05.22
Aptana 설치  (0) 2012.05.14
HTML 이란.  (0) 2012.05.14
Posted by 사라링
트랙백 : 댓글

Aptana 설치

 | HTML5.0
2012. 5. 14. 20:19

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

Aptana설치하기 http://aptana.org/

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

 

 

일단 aptana사이트에 접속! http://aptana.org/

 

 

 

 

 

 

 

이렇게 보이는 화면에서 하단에 보시면 아이콘 있습니다.

클릭해서 다운로드하시고

ok ok ok 등등 하시면 기본설치됩니다.

 

 

 

 

 

 

 

 

 

 

계속 ok ok 해서 설치하면 됨

 

 

 

 

설치가 끝나고, 압타나를 실행시키면 첫화면에 작업할 워크스페이스 지정하는 화면이 나옴..

 

 

 

 

 

 

 

1. htnml5템플릿 만들어 보기

프로젝트 오른쪽 마우스 - new From Templete - html - html5 Templete  를 선택해서

파일명  1_html5템플릿.html 로 만들어 보기

 

저작자표시

'HTML5.0' 카테고리의 다른 글

캔버스 이미지 뛰우기 .  (0) 2012.06.04
canvas 사이트 모음 .  (0) 2012.05.24
Canvas  (0) 2012.05.22
html4.0 을 html 5.0 으로 변환  (0) 2012.05.14
HTML 이란.  (0) 2012.05.14
Posted by 사라링
트랙백 : 댓글

HTML 이란.

 | HTML5.0
2012. 5. 14. 10:28

03

HTML5의 모든 것

, , 2010-02-3

애플 iPad 논란과 유튜브 HTML5 지원 이슈와 Flash vs. HTML 5 이슈를 거치면서 HTML 5에 대한 반응이 국내에서 커지고 있군요.

지난 주에 했던 블로터 포럼 인터뷰가 어제 올라간 후 저에게 이런 저런 문의를 해 주신 분들이 많습니다. 제가 가지고 있는 지식이나 경험은 짧지만 최대한 가지고 있는 것을 하나의 글에 제공해 드려 보도록 하겠습니다. 아래 글은 개인적으로 관리하던 HTML 자료 모음집을 합친 것입니다.

트위터를 검색하면 맨 위에 있는 Twitter의 모든 것 처럼 HTML5에 궁금증이 있으신 분들을 위해 모아서 공유 합니다. 앞으로 좋은 자료를 찾는 대로 계속 업데이트 해 보겠습니다. 업데이트 부분만 보시려면 여기를 누르세요.

I. HTML 5 소개

HTML 5는 W3C에서 만들고 있는 차세대 웹 표준으로서 마이크로소프트, 모질라, 애플, 구글, 오페라 등 모든 웹 브라우저 벤더가 참여하고 있는 산업 표준이기도 합니다. 2004년 WHATWG의 초안으로 부터 시작된 이 표준안은 시맨틱 마크업, 편리한 웹폼 기능, 리치 웹 애플리케이션 API 들을 담고 있으며 2007년 부터 W3C HTML W/G에서 표준안이 만들어 지고 있습니다.

HTML5의 주요 목적은 과거 HTML의 호환성을 유지하면서 웹 개발자들이 실질적으로 부딫히는 문제를 해결 하고 HTML 문서가 좀더 의미 있으면서도 리치 웹 애플리케이션 기능을 수행할 수 있는 범용 표준을 만드는 데 있습니다. 즉, 웹 문서 기반을 그대로 유지하면서 웹 브라우저 간의 상호 운용성을 위한 세부적인 지침을 담고 있으며 필요에 따라 각 이해 관계자를 위한 별도 문서도 제작해서 배포하고 있습니다.

HTML5는 향후 웹 브라우저의 가장 표준 기반 렌더링 엔진의 문서 타입이 될 것입니다.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>예제 문서</title>
  </head>

  <body>
    <p>예제 단락</p>
  </body>
</html>

1. 효율적인 마크업

HTML 5에서는 그동안 모호하던 웹 브라우저 구현에 대한 상세 스펙을 제공합니다. 따라서, 웹 개발자들이 과거 스펙의 호환성을 유지하면서도 향후 버전에 정확한 기능 사용이 가능합니다. 이미 구글 및 애플 등 많은 사이트들이 HTML5로 문서 작업을 하고 있습니다.

또한, HTML 5에서는 기존의 HTML4 보다 확장된 태그들을 지원합니다. 특히, 문서 구조에 적합하게 header, footer, nav, section 같은 구조화 마크업을 사용할 수 있습니다.

time, mark, meter, datalist 등과 같은 특정 의미 기반 태그들도 추가로 지원 됩니다. 여전히 많이 쓰이고 있는 b의 경우 b는 키워드, i는 학명에 사용하도록 기존 많이 사용하는 요소도 그대로 이용할 수 있습니다.

하지만, CSS로 완전 대체 가능한 big, center, font, s, strike 같은 스타일 기반 요소는 완전히 없어집니다. 또한, frame과 applet, acronym 같은 부정적인 요소들도 사용하지 않습니다.

2. 편리한 웹 폼(WebForm) 기능

HTML5는 개발자의 수고를 들어 줄 Form 기능 개선을 담고 있습니다. input 태그의 각종 type 속성이 추가되어 다양한 기능을 제공해 줍니다.

datetime 속성값을 사용하면 달력을 웹 브라우저에서 제공해 주며, range 속성은 스크롤바를, url은 웹 사이트 목록, email은 메일 주소 유효성 확인을 해 주기도 합니다. color 속성은 색상표를 별도 개발 없이 사용할 수 있습니다.

Form 양식은 모두 유효성 확인 기능을 켜거나 끌 수 있어, 폼 작업 시 늘 하던 자바스크립트 유효성 검증 개발 시간을 줄여주어 개발자들의 효율적인 개발이 가능합니다.

3. 리치 웹 미디어

HTML 5는 웹 어플리케이션 작성에 도움을 줄 다양한 API를 제공 합니다. 새로 만든 HTML 요소들과 함께 더 좋은 어플리케이션 개발에 사용할 수 있습니다.

  • 2차원 그래픽 API에 사용할 수 있는 canvas 요소.
  • 내장 비디오 및 오디오 재생을 위한 video, audio 요소.
  • 내장 저장소. 키/값이나 SQL 기반 데이터베이스 지원을 위한 기능.
  • 오프라인 웹 애플리케이션 기반 API.
  • 웹 애플리케이션이 독립적으로 특정 프로토콜 및 미디어 형식을 등록할 수 있는 API.
  • contenteditable 속성과 함께 지원 되는 편집 API 기능.
  • draggable 속성과 함께 지원 되는 드래그앤 드롭 API 기능.
  • 페이지 앞/뒤 네비게이션을 지원할 방문 기록 표시용 API 기능. (보안 제한 모델이 있음)
  • (원격) 다중 메시징 처리 기능.

특히, 멀티미디어 가능을 제공하는 Audio, Video, Canvas는 기존의 플러그인 기능을 대체할 수 있는 요소로서 웹의 일부로 자리 잡았ㅇ으며, 내장 저장소(DOM Storage)와 오프라인 캐시(Offline Cache)등은 웹 문서를 로컬에 소프트웨어 처럼 설치할 수 있도록 하고 버전 업데이트를 할 수 있게 하여 온라인 상태에서 항상 웹 서버에 접속 해야하는 웹 애플리케이션의 문제를 해결해 줍니다.

II. HTML 5 표준 문서 소개

웹 표준을 만드는 웹 컨소시움(W3C)의 표준 문서들은 대체로 읽기 어려운 것으로 알려져 있다. HTML 워킹그룹에서는 이용자와 가장 친숙하게 접근할 수 있도록 이러한 문제점을 보완하기 다양한 관점에서 각기 다른 표준 문서를 제공하고 있습니다.

본 문서는 HTML5를 접하는 이용자들을 위해 어떠한 표준 문서가 제작되고 있는지 소개해 주고자 한다. 2009년 4월 이전에는 아래 소개된 문서들이 HTML 5 표준안에 함께 담겨 있었으나 분량이 많고 기존 마크업 기반 내용과 혼란을 준다는 측면에서 분리해서 관리하고 있습니다.

1. 일반 문서

1.1 HTML 5 :A vocabulary and associated APIs for HTML and XHTML
HTML 5의 원래 표준안으로 분량이나 내용이 모두 웹 브라우저 개발자를 위해서 만들어져 있다. 가급적이면 HTML 5 표준안 보다 아래에 있는 대로 관점에 따라 적당한 문서를 보는 것이 좋겠다.

1.2 HTML 4와 HTML 5의 차이점 (한국어)
HTML 5 differences from HTML 4라는 문서는 기존 HTML에 익숙하던 사람들이 HTML5에서 무엇이 바뀌었는지 알 수 있도록 만든 소개 문서이다. 이 문서는 HTML 5 입문자들이 읽기에 적당하며 연도별 주요 변경 내용도 담고 있으며 한국어로 번역되어 제공된다.

1.3 HTML 디자인 원칙
이 문서는 HTML5 표준을 만드는 데 있어, 의사 결정의 기본 원칙이 되는 사항을 모아 두고 있다.

  1. 호환성 – 기존의 HTML 문서를 최대한 지원, 단계적 기능 축소(Graceful degradation), 기존 기능 재사용 및 엄격한 잣대를 대지 않는 것
  2. 유용성 – 실제 웹 개발자들이 겪고 있는 가장 중요한 문제를 순위에 따라 나누되 문제점을 분리해서 독립적으로 해결 함.
  3. 상호 호환성 – 브라우저 엔진 호환을 위해 최대한 자세한 스펙을 기술하되 복잡하지 않고 오류 처리 방법을 꼭 기술.
  4. 보편적 접근성 – 미디어 포맷 독립성, 전 세계 언어 지원, 웹 접근성 보장

2. 웹 퍼블리셔

2.1 HTML5 표준안(웹 개발자 관점)
기존 HTML 5 스펙은 웹 브라우저 개발 회사를 위해 기술된 표준안이다. 개발자 관점에서 무엇이 어떻게 바뀌었고 어떻게 사용할 수 있는지 보여 줄 수 있는 문서가 필요하다. 과거 W3C 표준안들의 문제점이 바로 이용자가 아닌 개발자 위주로 만들어져 있어 읽기 어려웠다는 것이다. 이 문서는 바로 이용자 즉, 웹 개발자를 위한 스펙이다.

2.2 HTML 마크업(저작자 관점)
이 문서는 HTML5 표준안(웹 개발자 관점)의 하부 문서로서 HTML 문서를 주로 저작하는 웹 퍼블리셔 혹은 HTML 코더를 위해 만들어진 문서이다.

2.3 HTML Microdata
마이크로 데이터는 흔히 마이크로 포맷으로 알려진 시맨틱 데이터 정의를 범용적으로 만든 것이다. itemprop라는 속성을 통해 사용자 정의로 의미를 부여해 검색 엔진이나 시맨틱 엔진이 이를 처리할 수 있게 하였다. 사실상 비슷한 역할을 하는 RDFa와 함께 논의 되고 있는 중이다.

3. Rich UI 개발자

3.1 HTML Canvas 2D API
HTML5의 Canvas 태그 내 각종 객체를 그리고 생성하는 데 필요한 API를 기술하고 있다.

3.2 HTML Canvas 2D Context
HTML5의 Canvas 태그 내 각종 객체를 회전, 변환하고 그레디언트, 이미지 생성 등 각종 효과를 주는 기능 부분을 기술하고 있다.

참고로 Mozilla의 Canvas 튜토리얼이나 애플의 Canvas 예제를 보면 편할 것이다.

4. 웹 애플리케이션 및 백엔드 개발자

4.1 Server-Sent Events
웹 서버로 부터 전달(Push)되는 데이터 예를 들어 SMS 같은 것을 받을 수 있도록 EventSource를 정의하고 이벤트를 기다릴 수 있도록 하는 API를 기술하고 있다.

4.2 HTML5 Communications
이 스펙은 기존 Ajax의 단점으로 알려진 크로스 도메인 문서 접근을 가능하게 해 주는 스펙이다. 마이크로소프트의 XHR 때문에 약간 논의가 지지부진한 면이 있지만 텍스트를 위한 서버 통신을 지원해 준다. 물론 보안 사항에 대한 부분도 중요하게 다루어지고 있다.

4.3 Web SQL Database
자바 스크립트를 이용해 웹 브라우저 내장 데이터베이스에 SQL을 통해 질의하는 API이다. 오프라인 웹 애플리케이션 개발이나 모바일에서 로컬 데이터 캐싱이 필요할 때 유용하게 사용할 수 있으며, 일반적인 DB 라이브러리 수준의 메소드를 지원해 준다.

4.4 IndexedDB
IndexedDB는 Key와 Value를 기반한 데이터 스토어를 제공하는 새로운 웹 기반 클라이언트 데이터 베이스 형식으로 Web SQL Database와 경쟁을 하는 스펙으로 Mozilla와 Oracle에서 지지 하고 있다.

4.5 Web Sockets API
한 웹 페이지에서 서로 다른 서버에 있는 웹 페이지에 양방향 통신을 할 수 있는 별도 프로토콜을 정의할 수 있는 API이다.

4.6 Web Workers
웹 애플리케이션이 주 문서와 병렬적으로 스크립트를 백그라운드로 수행할 수 있게 해 주는 API. 쓰레드 기반 메시지 처리를 가능하게 해 준다. CPU 부하를 많이 잡는 작업을 여러 워커(worker)로 나누어 작업하거나 클라이언트 DB를 업데이트 하거나 나누어서 작업이 가능한 자바 스크립트 API를 제공해 준다. 흥미로운 점은 암호화 작업에 대한 유즈케이스를 담고 있어서 웹 브라우저들이 지원만 한다면 향후 전자 서명 기능을 제공해 줄 수도 있을 듯.

III. HTML 5 관련 발표 자료 및 글모음

본 문서는 제가 2005년 부터 HTML 5에 관심을 가져 오면서 만들었던 자료와 블로그 글 모음입니다. 예전 자료들인 만큼 낡은 내용도 있지만, 그간의 발전 과정 및 관련 이슈를 상세하게 다루고 있으므로 HTML 5의 역사를 파악하는데 도움이 될 것 입니다.

1. 발표 자료

HTML5와 모바일 웹 (2009)

View more presentations from Channy Yun.

HTML5 역사와 현황 (2008)

History and Status of HTML5
View more presentations from Channy Yun.

웹 표준의 미래 – HTMl5 (2006)

View more presentations from Channy Yun.

2. 블로그 글 모음

  1. IE9, HTML5 준수한다! 2009-11-19
  2. 요즘 HTML5에 무슨 일이… 2009-09-27
  3. 모바일과 HTML5 – 미래웹포럼 후기 2009-09-10
  4. HTML5 킬러앱은 ‘모바일’? 2009-08-28
  5. 마크업의 미래에 대한 오해 2009-08-24
  6. 구글은 왜 on2를 샀을까? 2009-08-07
  7. XHTML2.0 역사속으로? 2009-07-03
  8. Mozilla, 오픈 비디오 지원 10만불 쏜다! 2009-01-28
  9. 웹 애플리케이션은 전쟁 중! 2008-02-28
  10. 웹 표준, 나쁜 뉴스와 좋은 뉴스 2008-01-24
  11. HTML5에서 미디어 포맷 논쟁 중… 2007-12-12
  12. 반론: 차세대 웹은 브라우저를 초월하여… 2007-11-28
  13. 파이어폭스 SVG 비디오 시연 2007-08-22
  14. HTML5를 주목해야 하는 이유 2007-07-11
  15. HTML5와 HTML4의 차이점 2007-07-01
  16. 웹어플리케이션 전쟁 본격화 되나? 2007-06-07
  17. W3C HTML 워킹 그룹 부활! 2007-03-14
  18. HTML5와 웹 표준 전망에 대한 발표 자료 2006-12-04
  19. 팀 버너스리, 위기의 W3C 구하기 (2) 2006/11/09
  20. 팀 버너스리, 위기의 W3C 구하기 (1) 2006/11/03
  21. RFC: 새 HTML에 대한 의견 청취 2006-11-10
  22. 2차 웹 브라우저 전쟁, 관전 포인트는? 2006-11-01
  23. WHATWG의 도전 2005-9-15

3. 외부 기고

4. 만화

HTML 5가 대두되면서 기존 XHTML과의 관계에 대한 이야기를 만화로 만든 것으로 Jeremy Keith 원작이며 마크업의 미래에 대한 오해에 한국어 전문이 있다.

IV. HTML5 외부 자료

본 문서는 HTML5에 대한 외국에 있는 각종 웹 사이트, 튜토리얼, 데모, 참고 문헌 등을 모은 것입니다. 모두 영문으로 되어 있지만 많은 것을 얻을 수 있습니다. 관련 자료가 한국어로도 제공됐으면 하는 바램이 있습니다.

1. 웹 사이트

  • HTML5 Rocks – 구글이 만든 예제 슬라이드, 코드 샘플 등
  • HTML5 Games – HTML5로 만든 웹 기반 게임 목록
  • HTML5 Test- 웹 브라우저의 HTML5 지원 점수 확인 사이트
  • HTML5 Doctor – HTML5 이용 시 궁금증에 대한 해답을 제공.
  • HTML5 Gallery – HTML5 문서 형식으로 만든 웹 사이트 모음
  • HTML5 Tutorials- 간단한 예제를 튜토리얼 형식으로 소개
  • Planet HTML5 – HTML5 관련 전문가 블로그 모음

2. 문서 저작 튜토리얼

HTML5 기반 WordPress 테마

3. 리치 기능 데모

  1. SketchPad – HTML 5 Canvas 기반 그래픽 저작 도구 – by Colorjack
  2. Sublime Video Player – HTML 5 Video Player (H.264만 지원)
  3. RGraph – HTML5 Canvas Graph 라이브러리
  4. Offline Image Editor and Uploader – Drag & Drop API, DOM Storage, Application Cache, Canvas, Cross Domain Sharing 기능 등을 활용. by Mozilla Hack
  5. HTML5 Adventure – Google I/O 2009 컨퍼런스 때 선 보였던 데모 모음.
  6. HTML 5 Demos and Examples Remy Sharp가 만드는 간단한 데모 사이트
  7. Mozilla Hack Demos Firefox에 탑재된 HTML5 등 신 기능 기반 데모 모음

4. 참고 자료

각 웹 브라우저에서 HTML5의 기능을 어디까지 구현하고 있는 지 현황을 담은 문서를 제공한다.

  1. When can I use… HTML5, CSS3, SVG 등 최신 기술에 대한 브라우저 호환도표
  2. HTML5 Comparison of Layout Engines 위키피디아의 HTML5 기능별 렌더링 엔진 호환도표
  3. List of Known Implementations of HTML 5 in Web Browsers WHATWG에서 관리하고 있는 웹 브라우저 구현 문제점 목록
  4. HTML 5 coverage WHATWG 표준안 기초 호환 도표
  5. HTML5 Compatibility Quirksmode에서 관리하는 HTML5 DOM 관련 기능 호환표.
  6. HTML5 Cheat Sheet

V. 최신 소식 업데이트

이 부분은 본 가이드가 만들어진 후 추가 되는 부분을 작성한 곳입니다. 업데이트 링크를 사용할 수 있습니다. 원 글 내용 부터 가시려면 여기를 누르세요.

1. 실전 HTML5 가이드

국내 웹 표준 커뮤니티에서 HTML5 오픈 콘퍼런스를 개최하고 강사들이 발표 자료 및 실전 가이드를 공개하였습니다.

본 가이드는 HTML5의 기본 개념을 배우고 모바일 웹에서 실질적으로 사용할 수 있도록 다섯명의 발표자들이 각자 자원 봉사로 작성하였습니다. 총 5장으로 구성 되어 있으며, HTML5 소개 및 마크업, CSS3, HTML5 APIs 및 iPhone에서의 웹 앱 개발이 포함되어 있습니다.

A4크기로 총 170페이지이고, B5크기로 206페이지입니다. 우선 A4에서 출력가능한 PDF 파일을 배포합니다. 많은 이용 바랍니다.

실전 HTML5 가이드 다운로드(A4 인쇄용) | B5 인쇄용 CC nc nd

2. HTML5 강의 동영상

실전 HTML5 가이드 저자들이 HTML5 오픈 콘퍼런시 시 한 강의 동영상 전체를 다운로드해서 보실 수 있습니다.

3. HTML5 교육 과정

지난 8월에 웹 개발자를 위하여 HTML5에 대한 10일간의 개발 교육 과정을 운영하였습니다. 강의 자료 역시 다운로드 가능합니다. 대학 및 회사에서 HTML5 교육 과정에 관심이 있으시면 연락하시기 바랍니다.

4. W3C HTML5 한국어 관심 그룹

W3C와 W3C 한국 사무국에서 일본과 중국에 이어 HTML5에 대한 한국어 사용자의 논의를 활성화 하고, 이들 표준과 관련된 한국의 코멘트와 질문들을 모아 표준에 정의된 기술에 대한 특별한 유즈케이스(Use Case)를 정리하고자 W3C HTML 한국어 관심 그룹을 만들었습니다.

본 그룹은 메일링리스트에 가입함으로서 참여 가능하며, 가입하지 않더라도 전체 메일 보기를 통해 논의 내용을 볼 수 있습니다.

5. W3C HTML5 한국어판

국내 웹 표준 커뮤니티 중 하나인 클리어보스에서 작업한 W3C HTML5 명세서 한국어 번역판을 공개하였습니다. 웹 브라우저 엔진 개발자가 참조해야 하는 부분을 제외하고 일반적인 부분은 거의 모두 번역 되어 있습니다.

상단에 마우스를 보내면 영어, 한국어를 나누어 볼 수 있고 잘못된 부분이나 궁금한 내용은 HTML5 토론방에서도 활용 가능합니다. 검은태양(kipenzam)님의 주도로 번역 되었고, 스터디에 활용하기 위해 일부 마크업과 스타일 그리고 스크립트에 변경에 가해졌습니다.

단, 마크업을 다루는 사람들에게 필요한 내용이라고 판단되는 내용 위주로 번역이 진행되었기 때문에(브라우저 엔진 개발자가 읽어야 하는 부분 생략) 완역은 아닙니다. 또한, 일부 번역에 오류가 있을 수도 있습니다.


http://channy.creation.net/blog/776 펌

저작자표시

'HTML5.0' 카테고리의 다른 글

캔버스 이미지 뛰우기 .  (0) 2012.06.04
canvas 사이트 모음 .  (0) 2012.05.24
Canvas  (0) 2012.05.22
html4.0 을 html 5.0 으로 변환  (0) 2012.05.14
Aptana 설치  (0) 2012.05.14
Posted by 사라링
트랙백 : 댓글
<< PREV : [1] : NEXT >>
BLOG main image
.. by 사라링

카테고리

사라링님의 노트 (301)
JSP (31)
J-Query (41)
JAVA (24)
VM-WARE (0)
디자인패턴 (1)
스크랩 (0)
스트러츠 (3)
안드로이드 (11)
오라클 (45)
우분투-오라클 (1)
이클립스메뉴얼 (6)
스프링3.0 (23)
자바스크립트 (10)
HTML5.0 (17)
정보처리기사 (1)
기타(컴퓨터 관련) (1)
문제점 해결 (3)
프로젝트 (2)
AJAX (4)
하이버네이트 (3)
트러스트폼 (11)
Jeus (2)
재무관리(회계) (5)
정규식 (5)
아이바티스 (8)
취미 (2)
소프트웨어 보안 관련모음 (0)
정보보안기사 (6)
C언어 베이직 및 프로그램 (3)
보안 관련 용어 정리 (2)
넥사크로 (6)
Total :
Today : Yesterday :
rss