JKUN

Welcome To The Jkun.net

Blog

FormData Object 확인

2015.09.21 19:34 Development/JavaScript


HTML5 API 인 FormData 객체를 사용하여 데이터를 할당하는 도중,

삽질된통 했다.


나중에 How to FormData Object Inspect 라고 구글링 하면 여러 결과를 확인할 수 있지만 백문이불여일타다.

직접 쳐보는게 제일 좋다.

간단히 내가 겪은 상황은 아주 단순 심플하다.


var formData = new FormData();
formData.append('id', 'JKUN.NET');
console.log(formData);


위와 같은 상황이라면 요소검사의 떡하니 폼데이터 객체에 id 속성이 할당된줄만 알았다.

그래서 찍어보니... 없다... 아 돌아가시는 줄 알았다.


여기서 제가 찾은 방법은 XHR - AJAX 를 이용하여 네트워크에서 확인하는 방법말고는 특별히 없었습니다.

더 심플하고 좋으신 방법 있으신분들 조언 부탁드립니다.^^;;


일단은 내가 확인한 방법은 다음과 같다.


var formData = new FormData();
formData.append('id', 'JKUN.NET');

var xhr = new XMLHttpRequest();
xhr.open('post', 'sample', true);
xhr.send(formData);

실행결과


요 따위 삽질을 혹시나 겪으신 분이 있을수도 있어서 별거아닌 포스팅 합니다.


저작자 표시
신고
현재 1 개의 댓글이 있습니다.

힘없는염소 2015.11.13 17:45 신고

크롬 콘솔로 안보이데..삽질...ㄷㄷㄷㄷㄷ


Comment

Blog

Emmet 으로 HTML UI 개발속도 높이기

2015.04.09 14:30 Development/IDE


출처 : http://codeflow.co.kr/question/393/emmet으로-html과-css-작업-속도-높이기-accelerate-your-html-and-css-production-with-emmet/


Emmet (Zen Coding으로 알려진바 있는) 은 빠른 웹개발을 위한 마크로와 키보드 바로가기 모음집입니다. 무상 다운로드 할수있으,며10여개이상의 에디터의 플러그인으로 설치할수 있이며, 일관성 있게 사용한다면 최대 2배의 생산성을 기대할수 있습니다. 이 포스팅에서 Emmet의 설치, 사용법과 최대의 결과를 얻기위한 커스터마이징 방법들을 설명하겠습니다.

최근에 나온 에디터의 대부분은태그를 자동으로 닫아주거나 늘상 쓰이는 요소들로 미리 포맷을 잡아주거나하는, 이런 저런 종류의 마크로를 내부에 포함하고 있습니다. Emmet은 여러단계 위의 수준입니다. 또한 Emmet은 어플리케이션작업을 옮길때마다 새로 바로가기등을 배워야할 필요없이 모든 플렛폼과 편집기에서 일관적으로 작동한다는 장점이 있습니다. Emmet구문으로 코드를 빨리 짜낼수 있습니다.

설치

Emmet은 14종의 IDE에서 지원됩니다. 각각의 설치 방법들은 약간 다릅니다. 그중 coda한가지만 집중하여 다루겠습니다. 관련파일을 다운로드 하시고, 다른이름으로 저장을 하시고Emmet.codaplugin으로 이름을 바꾸시고 더블클릭하세요 (클릭해도 원도우 팝업은 나타나지 않으니 당황하지마세요)

코딩을 위해 Emmet 사용하기

Emmet이 설치되면 시작할 준비가 된것입니다. 기억하기 쉬운 바로가기 구문(syntax)들외에 염두해야될 점이 두가지 있습니다

Emmet 구문에 스페이스를 넣으면 바로가기가 작동하지 않습니다. 코드를 입력한후 반드시 키보드 바로가기를 올바르게 사용해야 구문이 확장됩니다 (Ctrl-E). 이를테면 템플렛을 사용하여 페이지 작업을 시작한다고 해봅시다. 먼저 네이게이션부터 시작하죠. 보통, 일련의 중첩 태그(nested tag)를 일일히 입력해야합니다; HTML5에서 ,<nav> 요소, <ul> 요소와 링크가 포함되있는 일련의 <li> 태그 요소 등입니다.

Emmet에선 그냥 이렇게 입력하면 됩니다:

nav>ul>li*5

그리고 Ctrl+E 를 누르면, Emmet은 다음과 같은 결과물을 보여줍니다:

<nav>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>

매우 간단하죠? Emmet은 HTML코드안의 CSS 스타일 선택자를 똑똑하게 사용하여 중첩요소들을 반복된 재귀호출(recursion)을 더하여 생성합니다.

같은 방식으로 테이블을 매우 빠르게 생성할수 있습니다:

table>tr*3>td*5

…그러면 3행5열의 태이블을 생성합니다.

잠깐만요 더 잘할수 있습니다! Emmet구문의 요소를 집합화 하여 태그를 함께 중첩화(nest)할수도 있습니다:

nav>ul>(li>a)*5

다음과 같이 확장됩니다:

<nav>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</nav>

이런 것도 할수 있습니다:

table>(thead>tr>th*5)(tbody>tr>td*5)

…그러면 헤더와 data행이 있는 테이블을 생성합니다. 또한 CSS의 인접 형제 선택자(adjacent sibling selector)에 해당하는것을 사용하여 요소들을 차례로 생성할수 있습니다.

header+main+footer

는 다음을 생성합니다.

<header></header>
<main></main>
<footer></footer>

다른 많은 조합들도 가능합니다. 어쨋거나 요점은 페이지의 기본 마크업을 힘들게 일일히 입력하지 않고, 단 몇번의 키입력으로 생성할수 있다는 것입니다

채우기 내용 생성하기

Emmet 으로 안의 내용을 채울수도 있습니다. Lorem이나 ipsum 키워드를 확장하여 로렘 입숨 표준 채우기 텍스트를 생성할수 있습니다. 괄호는 특정 채우기 택스트를 지정합니다. 예를 들면 빈 링크들을 ”Link”라는 단어로 채우려면 :

nav>ul>(li>a[href=#]{Link})*5

는 다음을 생성합니다.

<nav>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>

매우 게으른 사람들을 위한 CSS

스타일시트 작업을 할때 Emmet 은 작업을 매우 쉽게 해줄수 있습니다. 예를 들면 다음을 타이프 하기보다는

margin: 2rem;

Emmet 이 있다면 다음을 타이프 하면 됩니다.

m2r

Emmet 키보드 콤보를 적용하면margin: 2rem; 로 확장이 됩니다.

수백개의 비슷한 단축키 등이 있지만 좋은점은 단축키 하나를 사용하기 전까지 플러그인이 비활성화 상태로 있기때문에 다른 단축키까지 전부를 한꺼번에 사용할 필요는 없다는것입니다.

텍스트가 아니라 테그를 선택한다

보통의 IDE들이 제공하는 셀랙트 방법은 코딩 에디터보다는 워드 프로세서에 가깝습니다. Emmet은 HTML이나 CSS내용을 선택 작업을 쉽게 선택하게 해주는 기능들을 가지고 있습니다. 마우스를 잡고 움직이기보다는 몇개의 키를 누르는 것만으로 코드들을 편집하고 복사하고 지울수 있습니다

Emmet 과 SASS같은 pre-processor 와의 차이점은 무엇인가?

Pre-processors 와 frameworks 둘다 목적하는 언어에 맵핑을 합니다만 중요한 차이점이 있습니다: Pre-processors는 원코드가 유지되다 런타임에 비로서 번역되고 확장됩니다. 달리 말하면 SASS문서를 작업하면 SASS문서로서 존재합니다. 타자를 치자마자 자동으로 CSS로 확장되는것이 아닙니다. 이런점은 장점이 될수 있습니다. 처음으로 돌아가서 약간의 작업을 하면 결과물에 큰 변화을 줄수 있습니다. 이런 장점은 보통 복잡함 증가과 생산성 하락이라는 문제가 있습니다.

Emmet을 pre-processors로 가는 관문으로 생각하면 적당할것입니다. SASS처럼 복잡한 초기과정 없이 마크업과 CSS 작업을 할수 있게 해줍니다.

결론

Emmet으로 얼마간 작업한 후에 어떻게 이것없이 그동안 작업을 해왔는지 알수가 없을 정도입니다. Emmet의 마크로들은 HTML 과 CSS를 배우기 위한 지름길이 아닙니다: 언어와 문법을 배우는 과정은 거쳐야합니다. 그러나 이미 일년정도 코딩을 해온 상태에서 새 툴을 배우기 위한 초기의 어려움 없이 생산성 향상을 원한다면 온라인상의 튜토리얼 한두개를 읽는 정도로 Emmet 의 기초를 쉽게 배울수 있을 것입니. 그 이후로는 새로운 코드를 짜기 위한 시간을 위해 어떻게 단축키등을 이용하는가의 문제입니다.

저작자 표시
신고
현재 0 개의 댓글이 있습니다.
Comment

Blog

HTML5 미지원 IE에서 DOM Script 를 이용하여 적용하기

2013.09.23 17:29 Development/JavaScript


(function(){        
        if(!/*@cc_on!@*/0) return;
        var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,hgroup,header,mark,menu,meter,nav,output,progress,section,time,video".split(',');
        var i=0,ll=e.length;

        while (i<ll) { document.createElement(e[i++]); }
})();
createElement 메소드를 통하여 생성된 엘리먼트에게는 display:block 속성을 이용하여 초기화 시켜준다. 일반적으로 reset.css 이란 파일을 명명하여 해당 엘리먼트 속성들에게 display:block 속성을 적용시켜 놓는다.
저작자 표시
신고
현재 0 개의 댓글이 있습니다.
Comment

Blog

HTML5 / CSS3 placeholder 폰트 색상 지정

2013.09.02 12:59 Development/CSS


::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}


저작자 표시
신고
현재 0 개의 댓글이 있습니다.
Comment

Blog

FileReader - 이미지파일 미리보기

2013.08.06 09:25 Development/JavaScript


이번에 동적으로 파일을 업로드 하는 컨트롤러를 만들다 보니,

브라우저에서 반환하는 FakePath 를 이용하여 미리보기가 가능하였다.

그동안은.. 왜 안된다고.. 생각했을까..? IE7 이 처음 생기는 무렵부터 보안때문에 안된다고 들어서,

그뒤로는 안된다. 이렇게만 생각하고 있었는데.. 내가 나를 바보로 만든셈..ㅡㅡ;;

경험이 도움이 될때도 있으나 위험이 될수도 있다 싶다.


해서 구글링하다보니 다음과 같은 링크가 있다. ㅋㅋ 구글링하다보면 자주들리게 되는 스택오버플로우.ㅋㅋ

http://stackoverflow.com/questions/13718795/cross-browser-image-preview-in-image-upload-section-is-not-working-in-ie8


해서 아래와 같이 테스트한 결과를 캡추어~! 테스트 브라우저는..


인터넷익스플로러 9 이상

크롬, 사파리, 파이어폭스 등이다. 이상없이 잘 동작했고 이번에 개발하고 있는 프로젝트에 붙일 예정이다.

물론 저위에 코드 그대로 쓰진 않고, 손을 좀 봐야한다.

위에 링크 코드 참고하시고 입맛에 맞게 커스터마이징 하세요~ ^^





밑은 코드 예제파일임.^^


mozilla-dev.img-preview.html


저작자 표시
신고
현재 2 개의 댓글이 있습니다.

유영주 2014.07.02 19:26 신고

진짜 잘 참고 했습니다. 덕분에 문제가 쉽게 풀렸네요


Comment

Blog

Visual Studio 2010 HTML 유효성 검사

2012.07.09 09:42 Development/HTML / XHTML



비쥬얼 스튜디오 2010 에서 HTML5 코드를 작성하다 보니,

자꾸 인텔리센스및 유효성 검사에 걸린다.


최초 기본은 XHTML 1.0 기반으로 설정되어 있다. 아무래도 가장 활성화 되어있는 표준코드 작성양식은

XHTML 1.0 Transitional 이기에 기본설정되어 있는 것 같다.






그러다 그러다보면 HTML5 코드작성하는데 자꾸밑줄 뜨고..ㅡㅡ;;

그래서 아래 경로에서 플러그인을 다운로드 받는다. 구찮으면 아래 파일 다운로드받으시고~

http://visualstudiogallery.msdn.microsoft.com/d771cbc8-d60a-40b0-a1d8-f19fc393127d/



 VS2010유효성검사_HTML5Setup.msi





해서 해당 플러그인을 다운로드 받아 설치하고 나서 다시 옵션 > 유효성 검사란 확인해보면



ㅎㅎㅎ 이제 밑줄 사라졌다.

요새는 이런거에도 민감하고 좀 짜증이 잔잔히 인다.

그래서 구글링하다보니 고맙게도 계시더군. ㅎㅎㅎ

이제 인건비도 안나오는 포스팅한 사람에게 댓글을~ 달아주면 마무리다.



저작자 표시
신고
현재 2 개의 댓글이 있습니다.

도발 2014.07.22 11:28 신고

도움 잘 받았습니다. ^^


Comment

Blog

한국에서 HTML5는 그림의 떡?

2011.01.10 16:20 Jkun Story/뉴스 스크랩


출처 : http://hook.hani.co.kr/archives/19693

스마트폰 개통 2년 후를 기약하다

요즘 디지털 기기의 경향을 한 마디로 표현한다면 바로 ‘스마트(smart)’라고 할 수 있을 것이다. 몇 주를 기다려야 받을 수 있는 것을 감수하면서까지 아이폰을 예약하는 사람들과 인기 있는 모바일 어플리케이션(이하 앱)이 신문지상에 등장하는 것은 이러한 경향을 단적으로 표현한다. 스마트폰(smart phone)은 피처폰(feature phone : 단순 기능만 제공되는 휴대전화로 이해하시면 된다)보다 가입자 수가 적지만 이동 통신사에게는 더 많은 이익을 제공하고 있기 때문에 이러한 경향은 당분간 수그러들지 않을 것으로 보인다. 또한 앞으로 피처폰 시장은 과거의 무선호출기와 비슷한 길을 걷게 될 것이다. 필자도 최근에 이러한 경향에 편승하기 위해 스마트폰을 예약했다. 언론에서 노골적으로 특정 모델을 밀어준다는 비판을 피하기 위해 모델명은 밝히지는 않겠다. 어쨌거나 이것은 지극히 개인적인 문제이고, 본격적으로 문제를 하나 제시해보고자 한다. 아마 스마트폰을 가진 많은 독자들도 이런 생각을 한 번 쯤은 해봤을 것이다.

“난 스마트폰의 노예계약(약정기간)을 끝내고 다른 스마트폰으로 바꾸고 싶어, 하지만 이미 구입한 수많은 유료 앱들은 어떻게 하지?”

이러한 상황은 안드로이드 운영체제의 스마트폰을 아이폰 운영체제(이른바 iOS)의 스마트폰으로 바꾸거나 또는 윈도우즈 모바일 운영체제를 기반으로 하는 스마트폰으로 바꿀 때를 말한다. 물론 가장 좋은 선택은 애플의 노예였다면 앞으로도 애플의 노예로 남는 것이고, 구글의 노예였다면 계속 구글의 노예로 남는 것이라고 말할 수 있다. 이것은 선택의 고통을 없애준다는 차원에서의 현명한 선택일 뿐, 권장 사항은 아님을 밝힌다. 아무튼 여기서 화두는 바로 ‘호환성’이라고 할 수 있다. 많은 독자들의 컴퓨터는 백의 구십구는 윈도우즈 운영체제를 이용하고 있다. 물론 경제적으로 넉넉하시고 ‘난 죽어도 디자인!’이라는 것을 강조하고 싶은 분들은 맥(Mac)을 이용하기도 하지만 말이다. 필자도 그렇듯 윈도우즈를 사용한 수많은 사람들은 약 20여 년간 고통 없이 살아왔을 것이다. 항상 컴퓨터의 운영체제는 윈도우즈였기 때문이다. 여기서는 구 버전과 신 버전 사이의 호환성이 문제였고, 이것은 매우 단기적인 문제였다. 대체로 오래 전에 쓰던 소프트웨어들은 여전히 이용가능하고, 윈도우즈 7에서도 윈도우즈 98 시절의 스타크래프트는 아주 잘 돌아간다.

하지만 스마트폰 시장은 이러한 선택의 단순함을 복잡함으로 바꾸어버렸다. 필자가 예상하기에 당분간은 여러 운영체제가 난립하는 구조일 것이기 때문이다. 현재 시장의 선두주자는 애플이다. 그러나 애플의 아이폰을 처음 구입한 사람들의 노예 기간이 끝날 때 즈음은 어떨까? 아마 많은 사람들이 기기의 기능성과 새로운 디자인 등을 고려하게 될 것이다. 그리고 더불어서 피처폰 시절에는 생각조차 하지 않았던 운영체제 또한 고려 사항으로 등장하게 될 것이다. 컴퓨터는 어차피 같은 회사(마이크로소프트)니까 문제를 해결해줬겠지만 스마트폰은 그렇게 해줄 리가 만무하다. 대부분의 사람들은 필자가 권했던 고통을 줄여주는 선택을 하게 될 것이다. 애플의 CEO인 스티브 잡스(Steve Jobs)가 아이폰을 처음 구상할 때 세운 전략이 바로 이러한 잠김 효과(lock-in effect)*였으니까 말이다.

그렇다면 정말로 방법은 없는 걸까? 더 좋은 기계를 쓰고 싶은데, 이미 구입한 앱 때문에 바꿀 수 없다면 말이다. 반갑게도 이러한 문제를 해결하기 위해 등장한 것이 바로 하이브리드 앱이다. 바로 웹(web) 어플리케이션에서 처리하고 모바일은 결과만을 받아볼 수 있도록 앱을 개발하는 것이다. 하지만 이러한 웹도 현재로서는 제약이 많아서 등장한 것이 바로 HTML5라는 기술이다. 흔히들 많은 사람들이 ‘태그(tag)’라고 알고 있는 몇 가지 명령어가 바로 HTML(Hyper Text Markup Language)이다. HTML5는 웹 페이지 자체에서 아주 엄청나게 많은 일을 할 수 있도록 개발되었다. 웹 페이지에서 게임(플래쉬 게임은 아니다)도 가능하고, PPT도 작성할 수 있다. 그래서 이러한 HTML5로 제작된 웹 페이지는 모바일 브라우저(사파리나 크롬 등)에서 읽는 것이 가능하다. 즉, 스마트폰 내부에서 처리하고 수행할 것을 웹(web)이라는 인터넷 세상으로 돌려버리면 일은 매우 깔끔하게 처리된다. 그냥 주소를 따라 가서 볼 일을 보면 되기 때문이다. 웹 페이지를 하나의 전자사전처럼 꾸미면 많은 사람들은 굳이 모바일 앱 스토어에서 따로 구입하지 않고도 많은 것을 누릴 수 있다. 나중에 다른 스마트폰으로 바꾸더라도 고민도 없을 것이고 말이다.

그래서 HTML5인지는 알 수 없으나 필자가 임의적으로 본 사이트를 앱*으로 꾸며 보았다. 사실 필자가 한 것은 아무것도 없다. 그냥 스마트폰의 웹 브라우저(web browser)에서 한겨레 훅 사이트를 읽어 들이기만 한 것이다. 모든 데이터 처리는 바로 본 사이트에서 알아서 한다. 그러나 마치 앱이 구동되어서 별도의 스마트폰 앱이 구동되는 것과 마찬가지가 될 수 있다. 만약 아이폰이 아닌 구글 안드로이드를 이용한다면 안드로이드 운영체제에 맞게 새롭게 프로그래밍을 하면 같은 화면을 해당 스마트폰에서도 구현할 수 있다. 좀 더 쉽게 이야기하자면 과거에는 새로운 운영체제에 맞게 소프트웨어를 통째로 변환(conversion)해야 한다면 HTML5에서는 접근하는 통로만 바꾸어주면 된다. 내용은 원래부터 그대로 쓰기 때문에 추가적인 변환 비용이나 작업이 필요 없는 것이다.

하지만 한 가지 문제가 있다. 바로 대한민국이란 나라는 HTML5 기술이 적용되기에는 너무나도 척박한 환경이기 때문이다. 한 가지 예로서 아이폰에서는 별도의 플러그인(plug-in)이 설치될 수가 없다. 그 때문에 은행 업무를 보기 위한 공인인증서 확인과 결제를 위한 수많은 것(흔히 결제, 인증 또는 보안을 위해 설치하라고 한다)들이 스마트폰에서는 전혀 작동하지 않는다. 대한민국의 웹 환경은 지극히 윈도우즈를 위한 환경이며, 소위 액티브 X*라고 불리 우는 플러그인으로 도배가 되어 있기 때문에 스마트폰 이용자들은 결국 해당 서비스 업자가 새롭게 제작한 별도의 앱을 활용하여 업무를 보는 것이 현실이다. 더욱 간단히 이야기하자면 모바일 웹 환경으로서는 ‘최악’이라는 소리다. 당연히 필자가 앞서 말한 스마트폰 사이의 호환되는 환경과는 아주 거리가 멀다. 애플이나 구글이 이러한 문제를 가진 한국 소비자들의 요구를 들어줄 가능성은 얼마나 될까? 아마 필자가 생각하기에는 맨체스터 유나이티드의 알렉스 퍼거슨이 영국에서 은퇴 선언을 하고, 한국 대표팀 감독으로 올 확률과 비슷하다고 본다. 결국 한국 스스로가 이러한 웹 환경의 문제를 해결해야 한다는 뜻이다.

앞으로 1년 또는 2년이 지나면 본격적으로 스티브 잡스의 노예가 해방(아이폰 최초 가입자들)된다. 그들이 새로운 스마트폰을 선택할 때쯤에는 이러한 문제가 통신 서비스 소비자들의 중요한 문제가 될 것이다. 한 번쯤은 이 문제를 소비자 뿐 만이 아니라 웹 환경을 통해 이윤을 창출하는 많은 기업 또는 은행들도 생각해보아야 한다. 물론 프로그래머들은 인지하고 있다. 하지만 언제나 돈을 투자하고 웹 환경의 지휘하는 것은 기업과 정부이다. 그리고 불편함을 감수하는 것은 소비자들이다. 누가 나서서 새로운 청사진과 변화된 서비스를 먼저 제공해주지 않는다. 편리함만 가득했던 스마트 모바일 시대이지만 내면에는 이러한 일도 있다. 지금까지 소수의 사람들만이 한국의 웹 환경에 대해서 비판을 해왔다. 대부분 프로그래머들이거나 IT에 관심 많았던 법학자*도 있었다. 거기다 우리나라 사람들의 95% 이상은 인터넷 익스플로러를 이용*한다. 그래서 이토록 보안도 엉망이며, 호환성도 좋지 않은 환경*이 되었던 것일지도 모른다. 이제 남은 선택은 몇 개 없다. 잠김 효과에 의해 지속적으로 한 회사에 충성을 바치는 노예로서 소비를 하는 방법, 아니면 헤어진 남자친구의 사진을 불쏘시개로 쓰던 추억처럼 지금까지 샀던 앱을 휴지통에 쑤셔 넣고, 똑같은 기능의 앱을 새 기기에 맞춰서 구입하는 방법, 마지막으로는 모바일 기기에서 해방되고, 앞으로도 쭉 영구적으로 쓸 수 있는 환경을 구축하는 방법. 무엇이 가장 현명한 것인지는 이미 답이 나왔다고 본다.

* 잠김 효과 : 익숙함에서 오는 편리성에 의해 선택이 고정되는 효과라고 볼 수 있다. 예를 들어 특정 회사의 휴대폰 문자 타이핑 방식을 오랫동안 이용한 사람들은 지속적으로 그 회사 제품을 이용한다. 다른 회사의 휴대폰을 구매할 경우 새로운 문자 타이핑 방식을 숙련시켜야 하기 때문이다.
* HTML5는 아니지만 이와 비슷한 구조로서 접근하는 방식이다. HTML5는 그 자체가 하나의 프로그램으로서 기능할 수 있기 때문에 여러 가지 작업이 가능하다.
* ActiveX : 웹에서 특정한 목적을 가진 프로그램을 구동시키고 싶을 때 설치하는 플러그인으로서 MS에서도 이미 비표준이 되었지만 한국에서는 여전히 이용하고 있다.
* 고려대학교 법학과 김기창 교수로서 그는 『한국 웹의 불편한 진실』을 출간함으로서 이러한 웹 환경의 후진성을 지적했다.
* 다음 사이트는 HTML5를 이용한 프로그래밍의 예를 보여준다. 별도의 프로그램 설치 없이 3D 테트리스를 즐길 수 있을 것이며, 프로그래머인 Ben Joffe는 이미 HTML5 페이지를 상용화시켰다.(주의 : 크롬, 파이어폭스, 사파리에서만 가능)
URL : http://www.benjoffe.com/code/games/torus/
* 한겨레 신문 2010년 2월 19일 구본권 기자의 「MS도 버린 ‘액티브엑스’ 정부서 고집하다 자충수」를 참고하시길 바란다.


저작자 표시
신고
현재 0 개의 댓글이 있습니다.
Comment

Blog

HTML5의 모든 것

2010.07.29 14:06 Development/HTML / XHTML


출처 : http://channy.creation.net/blog/776

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

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

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

실전 HTML5 가이드

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

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

A4크기로 총 170페이지이고, B5크기로 206페이지입니다. 우선 A4에서 출력가능한 PDF 파일을 배포합니다. 많은 이용 바랍니다.
실전 HTML5 가이드 다운로드(A4 인쇄용) | B5 인쇄용

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에서는 기존의 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 기능. (보안 제한 모델이 있음)
  • (원격) 다중 메시징 처리 기능.

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 Web Sockets API
한 웹 페이지에서 서로 다른 서버에 있는 웹 페이지에 양방향 통신을 할 수 있는 별도 프로토콜을 정의할 수 있는 API이다.

4.5 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 Doctor – HTML5 이용 시 궁금증에 대한 해답을 제공.
  • HTML FIVE – 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

 

저작자 표시
신고

'Development > HTML / XHTML' 카테고리의 다른 글

최고의 HTML 편집기가 궁금합니다.  (0) 2011.11.09
3D로 강력해진 구글 ‘크롬9′ 공개  (0) 2011.02.10
HTML UI 구성  (0) 2010.11.17
UI : 엘리먼트 배치  (0) 2010.11.10
HTML UI :: 세로 100% 설정  (0) 2010.10.29
HTML5의 모든 것  (0) 2010.07.29
현재 0 개의 댓글이 있습니다.
Comment