본문 바로가기
[HTML5] 인라인 편집 - 기초, Tutorial, Sample Code 출처 : 하루 1시간 3일 만에 배우는 HTML5 인라인 편집은 현재 모든 브라우저가 지원하고 있습니다. 의외로 현재 HTML5 의 가장 많은 부분을 지원하는 Opera 의 mini 버전이 지원하지 않다는 것의 좀 의외군요. 인라인 편집 - contenteditable : 개별적인 HTML 요소를 편집 가능하게 만든다. ( true / false / inherit ) - designmode : 전체 문서를 편집 가능하게 만든다. ( on / off ) - spellcheck : 스펠링 체크 기능을 활성화한다. ( true / false ) contenteditable 예제코드 Editable Element - Add Link 의 경우 블럭을 씌우지 않고 Add Link 를 수행할 경우, 최하단.. 2012. 9. 8.
[HTML5] 웹 폼 컨트롤( Web form control ) - 기초, Tutorial, Sample Code 출처 : 하루 1시간 3일 만에 배우는 HTML5 "can I use.." 에 따르면 현재 Opera 와 iOS Safari만 HTML5 의 form 을 모두 완벽히 지원하고 있습니다. 의외로 메인 브라우저의 차기 바전에서도 완벽히 지원하는 것은 없군요. 그래도 partial support 를 하는 것이 어느 정도는 사용할 수 있을 것으로 보입니다. 여기서도 독고다이를 추구하는 IE 는 현재 버전 9.0 에서 전혀 지원하고 있지 않습니다. 모바일 브라우저들도 iOS Safari 외에는 아예 지원을 안 하고 있군요. 웹 컴트롤 시작하기 ( form type & data form ) - button - checkbox : 미리 정의된 리스트 중 0 개 이상의 값 - color : 8비트 sRGB - date.. 2012. 9. 7.
[HTML5] 드래그 앤 드롭 ( Drag and Drop ) - 기초, Tutorial, Sample Code 출처 : 하루 1시간 3일 만에 배우는 HTML5 "can I use.." 에 따르면, 강력한 드래그 앤 드롭 기능을 지원하는 녀석들이 많이 보이는 군요. IE 가 9.0 까지는 부분지원하지만, 10.0 부터는 제대로 지원할 예정이고, 주력 브라우저들인 파폭, 크롬, 사파리, 오페라는 모두 지원합니다. 아쉽게도, 모바일 단말들의 브라우저는 현재 모두 지원하지 않는군요.. 모바일 브라우저들도 빨리 지원하길 기대해봅니다. 드래그 앤 드롭 API 살펴보기 - draggable : true/false - ondragenter : drag 하는 element 가 target에 처음 닿는 순간 이벤트 발생 - ondragover : drag 하는 element 가 target 위에서 움직일 떄 발생 - ondrop.. 2012. 9. 7.
[HTML5] Canvas 요소로 그림 그리기 - 기초, Tutorial, Sample Code 출처 : 하루 1시간 3일 만에 배우는 HTML5 "can I use..." 사이트에 따르면, HTML5 의 Canvas 는 최신버전의 모든 브라우저에서 제공합니다. ( Opera Mini 버전은 partial 지원이군요. ). 즉 별 부담없이 사용하시면 되겠습니다. Canvas 정의 - Canvas 에 그림을 그리기 위해서는 HTML 에서 canvas 를 정의해주고, JavaScript 코드를 이용하여 그림을 그려야 합니다. ... ... - 2DCanvas 는 canvas.getContext( "2d" ) 를 통해 얻어올 수 있다. 스타일 - canvas.fillStyle = any // ( 디폴트 검은색 ) - canvas.strokeStyle = any // ( 디폴트 검은색 ) 선 스타일 설정 .. 2012. 9. 7.
[HTML5] HTML5 개요 ( 기본 ) 출처 : 하루 1시간 3일 만에 배우는 HTML 5 HTML5 관련 추천 사이트들 - 101 Best HTML5 Sites ( http://101besthtml5sites.com ) - HTML5 Rocks ( http://www.html5rocks.com ) 구글에서 제공하는 사이트로 HTML5에 어떤 기능들이 추가되었는지와 함께 브라우저에서 그 기능들을 지원하는지를 표시. - When can I use... ( http://caniuse.com ) HTML5나 CSS3의 기능들을 언제쯤 사용할 수 있을지를 표시. HTML5 기본 HTML5 시작하기 - HTML5는 HTML과 스크립트의 장벽을 허물며 스크립트에 매우 집중적인 성향으로 변모. - 새로운 요소와 애트리뷰트가 많이 추가되었고, 스크립트 사용.. 2012. 9. 5.
[xHTML] xHTML Tutorial. #2 (xHTML 해부) xHTML 넌 뭘 맞춰줘야 하냐? xHTML의 문서는 확장자가 따로 없어요. (즉 기존의 확장자 그대로 쓰면 됩니다.) xHTML은 그저 xml 형식으로 문법만 정확히 맞춰주는 것입니다. 하하. 그럼 xHTML 과 HTML 은 뭐가 확실히 다른거야?? (확실한 문법은??) 1. xHTML은 Tag 속에 Tag 를 넣을 수 없다. 굵게 (X) 굵게 (O) 2. xHTML은 xml에서 규정하는 문법을 지켜야 한다. (머릿말, 아래 형태 필수!!) 3. Case-sensitive로 element의 이름은 반드시 소문자여야 합니다. 4. 태그를 열었으면 반드시 닫어야 한다. 5. "표준 모드"에서는 단위를 꼭 써줘야 합니다. 여기서 잠깐!! Empty Elements 란 놈이 등장합니다. 예전 HTML 을 보면.. 2012. 2. 28.
[xHTML] xHTML Tutorial. #1 (xHTML이 무엇인가요?) xHTML 넌 누구냐? xHTML 은 eXtensible HyperText Markup Language 의 이니셜입니다. 즉, 기존 HTML의 확장판(Extensible)이라는 거죠. xHTML 그럼 넌 왜 나왔냐? xHTML은 기존의 HTML을 대체하기 위해서 나왔답니다. 응?? HTML에 무슨 문제가 있다고 대체해?? HTML은 문법이 정확하지 않았지요. 예를 들면, 속상값을 줄 때, size="10" 과 size=10 이 같다는 거죠. 게다가, abc 라고만 해도, abc가 출력될 정도로 허술한 (but, 뭣도 모르는 사람에게는 가끔 행운? ㅋ) 문법이었죠. 그래서 WAP 처럼, XML 방식을 도입하여 문법을 철저히 지키는 깔끔한 HTML이 바로 xHTML이라고 볼 수 있는거죠. (HTML Ver... 2012. 2. 28.
[WAP] WAP Tutorial #13. ( Tag References ) 자 이제 마지막에 도달했습니다.요번에는 w3 tutorial에 있는 페이지를 그냥 퍼왔습니다.이걸 참조하셔서 열심히 잘 개발하시길 바래요 see ya~ Deck / Card Elements Start tagPurposeWML Defines information about the access control of a deck 1.1 Defines a card in a deck 1.1 Contains information about the document 1.1 Defines meta information about the document 1.1 Defines a code template for all the cards in a deck 1.1 Defines a WML deck (WML root) 1.1 De.. 2012. 2. 28.
[WAP] WAP Tutorial #12. ( WML Compile ) 자 이제 만든 WML Code를 compile 해야 하겠습니다. ( 열심히 만들고 컴파일 안하면 소용이 없죠? ㅋ ) http://www.forum.nokia.com/info/sw.nokia.com/id/f156b8e9-1dcd-4e5b-8e75-6e6ceded398e/NMIT_41.zip.html 요 위의 링크는 "꽁짜"로 다운받을 수 있는 toolkit으로.. WAP 2.0 specification + XHTML + CSS 에 대해 compile을 지원해줍니다. 참고로 만약 당신이 적당히 전문가여서. IIS 나 Apache server등에 올리게 되면. 그놈들이 자동 콤파일을 하기 떄문에 compile할 필요가 없습니다. 하하. (무슨 말인지 알겠습니까? 초보자님들? ㅠㅠ) + 알파로 ( + @ )... 2012. 2. 28.
반응형