'===J.O.B===/HTML'에 해당되는 글 4건

  1. 2012.03.22 Local Storage
  2. 2010.05.31 Eclipse IDE 에서 Zen-Coding 소개 1
  3. 2010.05.20 HTML5 강좌 관련 사이트
  4. 2010.05.17 HTML5 데모와 예제 목록을 공유

Local Storage

Local Storage ===J.O.B===/HTML 2012. 3. 22. 16:24
 http://dev.w3.org/html5/webstorage/ 
 http://en.wikipedia.org/wiki/Web_Storage 

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

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

localStorage.setItem("name", "Hello World!"); //saves to the database, key/value
document.write(localStorage.getItem("name")); //Hello World!
localStorage.removeItem("name"); //deletes the matching item from the database

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

if (typeof(localStorage) == 'undefined' ) {
alert('Your browser does not support HTML5 localStorage. Try upgrading.');
} else {
try {
localStorage.setItem("name", "Hello World!"); //saves to the database, "key", "value"
} catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
alert('Quota exceeded!'); //data wasn't successfully saved due to quota exceed so throw an error
}
}
 
document.write(localStorage.getItem("name")); //Hello World!
localStorage.removeItem("name"); //deletes the matching item from the database
}

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

var car = {};
car.wheels = 4;
car.doors = 2;
car.sound = 'vroom';
car.name = 'Lightning McQueen';
console.log( car );
localStorage.setItem( 'car', JSON.stringify(car) ); 
console.log( JSON.parse( localStorage.getItem( 'car' ) ) ); 

'===J.O.B=== > HTML' 카테고리의 다른 글

Eclipse IDE 에서 Zen-Coding 소개  (1) 2010.05.31
HTML5 강좌 관련 사이트  (0) 2010.05.20
HTML5 데모와 예제 목록을 공유  (0) 2010.05.17
Posted by 샤가No01

Eclipse IDE 에서 Zen-Coding 소개

Eclipse IDE 에서 Zen-Coding 소개 ===J.O.B===/HTML 2010. 5. 31. 12:47


FT개발을 하면서 일일이 HTML을 열고 닫고 하기는 여간 귀찮은일이 아니죠. 지금 소개시켜드릴 Zen-Coding은 CSS셀렉터 문법으로 작성된 문장을 HTML코드로 확장시켜주는 일종의 매크로입니다.
예제는 다음과 같습니다.

div#page>div.logo+ul#navigation>li*5>a


이렇게 입력후 Scripts 메뉴에서 Zen Coding>Expand Abbreviation을 클릭해주면 아래와 같이 펼쳐집니다.


<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <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>
</div>


지원하는 에디터는 다음과 같습니다:

  • Aptana/Eclipse (cross plat form)
  • Text Mate (Mac)
  • Coda (Mac)
  • Espresso (Mac)
  • Komodo Edit/IDE (crossplatform)
  • Notepad++ (Win dows)
  • PSPad (Win dows)
  • textarea (browser-based)
  • editArea (browser-based)


Eclipse 에서 설치하는 것을 예로 들자면:

Eclipse 최상단 메뉴에서 ‘Scripts’ 메뉴가 없으면 http://download.eclipse.org/technology/dash/update 를 통해 EclipseMonkey를 다운받습니다.
Zen.Coding-Aptana.v0.6.0.1.zip를 다운받아 압축 해제합니다.
Aptana에서 프로젝트 이름을 ‘zencoding’ 으로 하여 General Project를 만듭니다.
프로젝트에 ‘scripts‘ 라는 이름의 빈폴더를 만듭니다. (주의: 반드시 scripts 라는 이름이어야합니다!)
압축해제한 파일을 모두 scripts 아래로 복사합니다
Eclipse Reboot ing~!
부팅후, ‘Scripts’ 메뉴아래에 ‘Zen Coding’이 나오면 제대로 설치된 것입니다
임의의 프로젝트에서 .html 파일을 열거나 만들어서 예제를 실행해봅니다.
* 키변경은 scripts 아래로 복사한 Zen-Coding library의 소스에서 Key: 항목에 직접 지정합니다.


출처 : http://ajaxian.kr/archives/938





에디트플러스에서 하는방법

명령 : WScript.exe "D:\zencoding\zencoding.wsf"
인수 : $(CurLine)||$(CurSel)
디렉토리 : $(FileDir)
텍스트필터로실행 체크 후 "바꾸기" 선택

참고사이트 : http://www.emacswiki.org/emacs/ZenCoding

'===J.O.B=== > HTML' 카테고리의 다른 글

Local Storage  (0) 2012.03.22
HTML5 강좌 관련 사이트  (0) 2010.05.20
HTML5 데모와 예제 목록을 공유  (0) 2010.05.17
Posted by 샤가No01

HTML5 강좌 관련 사이트

HTML5 강좌 관련 사이트 ===J.O.B===/HTML 2010. 5. 20. 17:39
HTML5란놈이 나왔다..

공부해야지.. 더 뒤쳐지면 안돼지 하면서 관련 사이트를 찾아보았다.

참 다행으로 강좌가 올라오는 사이트를 찾았다.

근데... HTML5를 실제 사용하려면 얼마나 기다려야 할까.. ;;

한국 HTML5 사용자 그룹

'===J.O.B=== > HTML' 카테고리의 다른 글

Local Storage  (0) 2012.03.22
Eclipse IDE 에서 Zen-Coding 소개  (1) 2010.05.31
HTML5 데모와 예제 목록을 공유  (0) 2010.05.17
Posted by 샤가No01

HTML5 데모와 예제 목록을 공유

HTML5 데모와 예제 목록을 공유 ===J.O.B===/HTML 2010. 5. 17. 18:52

Remy라는 분은 HTML5데모와 예제목록을 공유하는 사이트를 오픈했습니다.

HTML5에서 구현 가능한 기능들과, 브라우저별로 한눈에 보기 쉽게 구성되어 있습니다.

각 항목별로 필터링이 가능합니다.

해당 사이트는 CSS3으로 구성되어 있으므로 CSS3데모가 가능한 브라우저에서는 CSS3가 적용됩니다. IE8이하 브라우저는 안됩니다. 하하하하하하



사이트  : http://html5demos.com/

'===J.O.B=== > HTML' 카테고리의 다른 글

Local Storage  (0) 2012.03.22
Eclipse IDE 에서 Zen-Coding 소개  (1) 2010.05.31
HTML5 강좌 관련 사이트  (0) 2010.05.20
Posted by 샤가No01
1 
하단 사이드바 열기

BLOG main image