doctype

web/HTML 2016.05.27 00:25

doctype은 해당 html 문서가 어떤 타입으로 사용되어 선언되었는지를 말해주는 선언자 입니다.


파일로 본다면 이 문서가 doc / pdf / hwp 입니다! 라고 선언하는것과 같습니다. 


doctype에는 크게 HTML 4.01 / HTML5 / XHTML 1.0 / XHTML1.1 이 있습니다. 


 HTML 4.01 / XHTML 1.0은 각각 다시 


Strict  / Transitional  / Frameset 형식이 나눠지면서 각각 지원하는 태그들도 달라졌습니다.

또한 표준/비표준에 따라 width값이 달라지고 / inline 정렬이 달라지기 까지 했죠.


그렇습니다. 난장판이죠?


그래서 나온것이 지금의 HTML5와 XHTML1.1 입니다. 


하지만 예전의 페이지도 브라우저에서 정상적으로 랜더링을 해줘야 하기 떄문에 아직까지도 HTML4 / XHTML1 을 지원하고 있습니다. 


XHTML은 그냥 XML로 보시면 됩니다. 

<?xml version="1.0" encoding="UTF-8"?>

위와 같이 선언하시는것을 본적이 있다면!!  꽤나 웹 개발을 오래하신 분입니다. 지금은 Xml보다 json을 사용하지요.


결론!  html을 만들때는 꼭 doctype을 써야 한다! 않쓰면 브라우저가 몰라요! (요즘은 디폴트로 html5로 처리함)




저작자 표시
신고

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret

-_- html 책을 한번도 않읽어본 놈이라 웹종사 2년만에 새로운걸 알게되는군요..


html를 맞게 작성했는데 왜 데이터가 않가나.. 검색해보니


Tip: Disabled <input> elements in a form will not be submitted.


그렇군요. 규약으로 정해져있군요.


Note: The disabled attribute will not work with <input type="hidden">.


결국 hidden 으로 처리하세요. 라고 써있네요.


ㅎㅎㅎㅎㅎㅎㅎㅎ -_- 갑자기 멘붕이네요. 내가 공부를 제대로 한건지..ㅋ 기초적인것도 모르고..ㅎ



출처 : http://www.w3schools.com/tags/att_input_disabled.asp

저작자 표시
신고

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret


파이어폭스나 오페라에서 환경설정을 변경하여 pc에서도 모바일페이지로 인식하게끔할수 있습니다.

(웹페이지 요청시 user-agent를 변경하는 방법이지요.)


크롬에서도 가능하나 더욱 편리하게 플로그인이 존재 합니다.



1. 크롬으로 접속후 아래의 경로로 들어가서 플로그인을 설치 합니다.

https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg






   


2. 설치 후 아이콘을 볼수 있습니다. 클릭해보시면 각종 브라우져와 스마트폰os를 볼수 있습니다. 만일 ios 모바일 페이지로 보고 싶다면 ios를 클릭후 iphone4 나 아이패드를 클릭하면 해당 디바이스의 웹 화면으로 보실수 있습니다.




3. iphone4로 변경후 아이콘이 변경된것도 확인하실수 있습니다.




4. 변경후 아이콘을 눌러보면 Add Permanent Spoof 설정이 있습니다. 한번 클릭해주면 해당 주소로 접속시 자동으로 설정했던 웹으로 변경되어 화면을 보여줍니다.(이건 참 편리한 기능입니다.)



5. settings로 들어가보시면 첫번째 Custom User-agents 를 볼수 있습니다. 

User-agent 아이콘 클릭시 보여주는 웹페이지 속성들을 추가 및 삭제가 가능하도록 되어 있습니다.

(user-agent 를 아신다면 추가해주면 됩니다.) 



6. 상단의 Add Permanent Spoof 을 추가 했을 경우 Permanent Spoof list  에서 확인 할수 있습니다. 추가도 가능하며 삭제도 가능합니다.





iphone4로 변경후 블로그를 본 화면



- 웹퍼블리셔나 모바일웹을 작성하시는 분들에게 추천합니다. 꽤나 편리해서 좋네요.




저작자 표시
신고

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret

Special Characters in HTML

left single quote &lsquo;
right single quote &rsquo;
single low-9 quote &sbquo;
left double quote &ldquo;
right double quote &rdquo;
double low-9 quote &bdquo;
dagger &dagger;
double dagger &Dagger;
per mill sign &permil;
single left-pointing angle quote &lsaquo;
single right-pointing angle quote &rsaquo;
black spade suit &spades;
black club suit &clubs;
black heart suit &hearts;
black diamond suit &diams;
overline, = spacing overscore &oline;
leftward arrow &larr;
upward arrow &uarr;
rightward arrow &rarr;
downward arrow &darr;
trademark sign&#x2122;&trade;
unused&#00;-
&#08;
  
horizontal tab&#09;  
line feed&#10;  
unused&#11;  
space&#32;  
exclamation mark&#33; !
double quotation mark&#34;&quot;"
number sign&#35; #
dollar sign&#36; $
percent sign&#37; %
ampersand&#38;&amp;&
apostrophe&#39; '
left parenthesis&#40; (
right parenthesis&#41; )
asterisk&#42; *
plus sign&#43; +
comma&#44; ,
hyphen&#45; -
period&#46; .
slash&#47;&frasl;/
digits 0-9&#48;-
&#57;
  
colon&#58; :
semicolon&#59; ;
less-than sign&#60;&lt;<
equals sign&#61; =
greater-than sign&#62;&gt;>
question mark&#63; ?
at sign&#64; @
uppercase letters A-Z&#65;-
&#90;
  
left square bracket&#91; [
backslash&#92; \
right square bracket&#93; ]
caret&#94; ^
horizontal bar (underscore)&#95; _
grave accent&#96; `
lowercase letters a-z&#97;-
&#122;
  
left curly brace&#123; {
vertical bar&#124; |
right curly brace&#125; }
tilde&#126; ~
ellipses&#133;&hellip;
en dash&#150;&ndash;
em dash&#151;&mdash;
unused&#152;-
&#159;
  
nonbreaking space&#160;&nbsp; 
inverted exclamation&#161;&iexcl;¡
cent sign&#162;&cent;¢
pound sterling&#163;&pound;£
general currency sign&#164;&curren;¤
yen sign&#165;&yen;¥
broken vertical bar&#166;&brvbar; or &brkbar;¦
section sign&#167;&sect;§
umlaut&#168;&uml; or &die;¨
copyright&#169;&copy;©
feminine ordinal&#170;&ordf;ª
left angle quote&#171;&laquo;«
not sign&#172;&not;¬
soft hyphen&#173;&shy;
registered trademark&#174;&reg;®
macron accent&#175;&macr; or &hibar;¯
degree sign&#176;&deg;°
plus or minus&#177;&plusmn;±
superscript two&#178;&sup2;²
superscript three&#179;&sup3;³
acute accent&#180;&acute;´
micro sign&#181;&micro;µ
paragraph sign&#182;&para;
middle dot&#183;&middot;·
cedilla&#184;&cedil;¸
superscript one&#185;&sup1;¹
masculine ordinal&#186;&ordm;º
right angle quote&#187;&raquo;»
one-fourth&#188;&frac14;¼
one-half&#189;&frac12;½
three-fourths&#190;&frac34;¾
inverted question mark&#191;&iquest;¿
uppercase A, grave accent&#192;&Agrave;À
uppercase A, acute accent&#193;&Aacute;Á
uppercase A, circumflex accent&#194;&Acirc;Â
uppercase A, tilde&#195;&Atilde;Ã
uppercase A, umlaut&#196;&Auml;Ä
uppercase A, ring&#197;&Aring;Å
uppercase AE&#198;&AElig;Æ
uppercase C, cedilla&#199;&Ccedil;Ç
uppercase E, grave accent&#200;&Egrave;È
uppercase E, acute accent&#201;&Eacute;É
uppercase E, circumflex accent&#202;&Ecirc;Ê
uppercase E, umlaut&#203;&Euml;Ë
uppercase I, grave accent&#204;&Igrave;Ì
uppercase I, acute accent&#205;&Iacute;Í
uppercase I, circumflex accent&#206;&Icirc;Î
uppercase I, umlaut&#207;&Iuml;Ï
uppercase Eth, Icelandic&#208;&ETH;Ð
uppercase N, tilde&#209;&Ntilde;Ñ
uppercase O, grave accent&#210;&Ograve;Ò
uppercase O, acute accent&#211;&Oacute;Ó
uppercase O, circumflex accent&#212;&Ocirc;Ô
uppercase O, tilde&#213;&Otilde;Õ
uppercase O, umlaut&#214;&Ouml;Ö
multiplication sign&#215;&times;×
uppercase O, slash&#216;&Oslash;Ø
uppercase U, grave accent&#217;&Ugrave;Ù
uppercase U, acute accent&#218;&Uacute;Ú
uppercase U, circumflex accent&#219;&Ucirc;Û
uppercase U, umlaut&#220;&Uuml;Ü
uppercase Y, acute accent&#221;&Yacute;Ý
uppercase THORN, Icelandic&#222;&THORN;Þ
lowercase sharps, German&#223;&szlig;ß
lowercase a, grave accent&#224;&agrave;à
lowercase a, acute accent&#225;&aacute;á
lowercase a, circumflex accent&#226;&acirc;â
lowercase a, tilde&#227;&atilde;ã
lowercase a, umlaut&#228;&auml;ä
lowercase a, ring&#229;&aring;å
lowercase ae&#230;&aelig;æ
lowercase c, cedilla&#231;&ccedil;ç
lowercase e, grave accent&#232;&egrave;è
lowercase e, acute accent&#233;&eacute;é
lowercase e, circumflex accent&#234;&ecirc;ê
lowercase e, umlaut&#235;&euml;ë
lowercase i, grave accent&#236;&igrave;ì
lowercase i, acute accent&#237;&iacute;í
lowercase i, circumflex accent&#238;&icirc;î
lowercase i, umlaut&#239;&iuml;ï
lowercase eth, Icelandic&#240;&eth;ð
lowercase n, tilde&#241;&ntilde;ñ
lowercase o, grave accent&#242;&ograve;ò
lowercase o, acute accent&#243;&oacute;ó
lowercase o, circumflex accent&#244;&ocirc;ô
lowercase o, tilde&#245;&otilde;õ
lowercase o, umlaut&#246;&ouml;ö
division sign&#247;&divide;÷
lowercase o, slash&#248;&oslash;ø
lowercase u, grave accent&#249;&ugrave;ù
lowercase u, acute accent&#250;&uacute;ú
lowercase u, circumflex accent&#251;&ucirc;û
lowercase u, umlaut&#252;&uuml;ü
lowercase y, acute accent&#253;&yacute;ý
lowercase thorn, Icelandic&#254;&thorn;þ
lowercase y, umlaut&#255;&yuml;ÿ
Alpha&Alpha;Α
alpha&alpha;α
Beta&Beta;Β
beta&beta;β
Gamma&Gamma;Γ
gamma&gamma;γ
Delta&Delta;Δ
delta&delta;δ
Epsilon&Epsilon;Ε
epsilon&epsilon;ε
Zeta&Zeta;Ζ
zeta&zeta;ζ
Eta&Eta;Η
eta&eta;η
Theta&Theta;Θ
theta&theta;θ
Iota&Iota;Ι
iota&iota;ι
Kappa&Kappa;Κ
kappa&kappa;κ
Lambda&Lambda;Λ
lambda&lambda;λ
Mu&Mu;Μ
mu&mu;μ
Nu&Nu;Ν
nu&nu;ν
Xi&Xi;Ξ
xi&xi;ξ
Omicron&Omicron;Ο
omicron&omicron;ο
Pi&Pi;Π
pi&pi;π
Rho&Rho;Ρ
rho&rho;ρ
Sigma&Sigma;Σ
sigma&sigma;σ
Tau&Tau;Τ
tau&tau;τ
Upsilon&Upsilon;Υ
upsilon&upsilon;υ
Phi&Phi;Φ
phi&phi;φ
Chi&Chi;Χ
chi&chi;χ
Psi&Psi;Ψ
psi&psi;ψ
Omega&Omega;Ω
omega&omega;ω
password dot&#9679;
bullet&#8226;

검색하기 귀찮아서 블로그에 남김.


출처 : http://www.degraeve.com/reference/specialcharacters.php

저작자 표시
신고

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret

구글에서 tilt를 검색하면 검색 화면이 기울어져서 나온다.(한번 검색해보세요.)



와..신기하다. 구글은 역시 기발해. 

생각하고 창을 닫아버린다면 당신은 개발자가 아닌것이다.(너무 심한 억측인가요?ㅎ)

개발자라면 자고로! 이것은 어떻게 만든것이지?! 라고 생각하면 소스를 뜯어봐야겠지요?!


요소검사를 해보자 5초만에 보이더군요.

<body> 자체에 css로 표현을 했습니다.

문제는 html5 에서만 지원하는 transform:rotate() 를 사용했습니다.


transfrom  함수의 경우 표준 함수가 아닌 관계로 브라우저 마다 명시를 해줘야 합니다.(html5를 공부하셧다면 당연히 아시겠지요?)


rotate()안의 변수는 기울기로 1deg(1도) 만큼 기울어 진것입니다.




더보기







왼쪽이 일반. 오른쪽이 rotate를 적용한 화면이다.




html5 브라우저별 지원하는 함수는 여기서 찾아보시길 : http://caniuse.com/

참고로 totate() 의 지원 여부는 다음과 같다.





  1. - 부작용. 너무 오래 보고 있으면 제대로 된 화면도 기울어져 보인다.

저작자 표시
신고

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret

저번 포스팅에서는 JSON형태를 jquery를 통하여 이미지 링크를 화면에 뿌려주는 작업을 했습니다.

이번에는 구글 이미지에서 보여주는것처럼 버튼을 누를때다마 이미지를 뿌려주는 작업을 해보겠습니다.

일단 구글 이미지는 다음 화면과 같습니다.


아래의 결과 더보기를 버튼을 누르면 이미지들이 아래에 생성되는 기능입니다.(트위터나 블로그에도 많이 사용되는 기능이죠?)


사실 jquery 에서 지원하는 함수만 써준다면 간단히 해결이 됩니다.

먼저 버튼 이벤트를 위해서 기존의 소스에서 페이지 실행후 바로 실행되던 스크립트를 이벤트 형식으로 바꿔줍니다.




소스보기





이제 ImageAdd() 로 호출이 가능합니다. input 버튼도 추가해줍니다. 


<input type='button' value='이미지 추가!' onclick='ImageAdd()'>


이제 소스를 실행해서 보면 1~10까지 이미지가 똑같이 붙여지는거을 볼수 있습니다. 당연히 똑같은 그림을 볼 이유가 없지요? json에서 불러오는 파라미터값 from, to 값을 조정해 주면 됩니다.


ImageAdd()함수를 다음과 같이 수정합니다.



소스보기



params 데이터가 배열이기 때문에 접근은 params.from, params.to 이렇게 접근이 가능합니다.

이제 소스를 실행해서 보면 새로운 이미지들이 붙지만 기존의 이미지가 뒤로 밀려서 앞쪽에 붙게 됩니다.

jquery after()는 현재 #twiImage 뒤에 생성되기 때문에 기존에 있던 이미지들이 뒤로 밀려보이게 됩니다.

우리가 할일은 기존의 이미지는 뒤로 밀리지 않고 맨 뒤쪽에 새로운 이미지들이 추가되게 하는겁니다.

그러기 위해서 jquery find() , eq()함수를 사용합니다.


jquery find() 레퍼런스 :  http://api.jquery.com/find/

jquery eq() 레퍼런스 : http://api.jquery.com/eq/


find()함수로 해당 태그를 찾은뒤 eq()로 가장 마지막 태그를 찾을수가 있습니다.

기존의 imageInsert()함수를 다음과 같이 수정합니다.



소스보기




#twiImage에서 a 태그를 찾습니다.  ->  $('#twiImage').find("a")

찾은 태그들중에서 가장 마지막 a태그를 찾습니다. ->  $('#twiImage').find("a").eq(-1)

그 뒤에 해당 태그를 넣어줍니다. -> $('#twiImage').find("a").eq(-1).after('...')


간단하지요? 완성된 소스 입니다.



소스보기






이미지가 쭉쭉쭉 늘어납니다. (썸네일인데도 용량이 상당한지 로딩이 느리네요;ㅋ)

이미지 대신에 글로 활용도 가능합니다. (트위터 글이나 블로그  더보기 하면 아래로 쭈욱쭈욱 늘어나는게 이거랑 비슷합니다.) 


이상끝!

- 근데 뭘 만들다가 내가 이걸하고 있는지 잊어버림..

-  소스 수정함. 빈태그<a></a> 사용으로 인한 웹표준 에러... div로 바꿈.

저작자 표시
신고

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret

JSON(JavaScript Object Notation)의 약자

 사람이 읽고 쓰기에 용이하며, 기계가 분석하고 생성함에도 용이.

 DATA 교환언어.


참고 JSON 개요 : http://www.json.org/json-ko.html


XML도 많이 사용하지만 요즘엔 JSON도 많이 지원을 해준다.(왠만한 api 및 데이터교환은 XML or json 방식으로 해주는듯하다. )

openAPI를 사용하는 도중에 xml방식보다는 JSON방식으로 사용하는편이 너무 쉬워서 예제를 올려본다.


 www.followkr.com 에서 지원해 주는 API로 만들었습니다.

아래의 예제는 http://www.followkr.com/common/html/api.html 에 있는 sample code를 변형하여 작성하였습니다.


<script type="text/javascript">

   var jsonimage = "http://www.followkr.com/rank/image.php?callback=?";

var params = {

from: 1,

to: 10

};

    $.getJSON(jsonurl, params, function(data, status) {

        if(data.rankedTwitList){

            // success

        }

    });

</script>


jQuery  에서는 getJSON()함수를 통하여 json방식을 손쉽게 가져올수 있습니다.

ex) http://api.jquery.com/jQuery.getJSON/


위의 코드를 보시면 getJSON()의 파라미터값만 잘보시면 됩니다.

jsonurl 은 가져올 json 페이지.

params 는 url 뒤에 붙을 get방식의 파라미터 들을 뜻합니다.

만일 파라미터가 없다면 '' ( $.getJSON(jsonurl, '', function(data, status) ) 이렇게 하시면 됩니다.

마지막 파라미터는 json의 연결이 성공했을때 받아오는 데이터 값입니다.

성공적으로 연결이 되었다면 모든 값들은 data 변수에 들어가게 됩니다.




이제 우리가 할일은 주석처리된 success 부분에 data를 가져와서 뿌려주기만 하면됩니다.

먼저 data에 어떤 형식으로 값이 들어왔는지 알아봐야 합니다.

 http://www.followkr.com/rank/realtime.php 로 들어가보면 배열 형식으로 데이터가 쭈욱~ 나열된것을 볼수 있습니다. (아래 그림과 같이 데이터가 data로 들어가게 되는것입니다.)



여기서 알아두셔야 될것은 []은 배열. {}은 key, value로 이루어진 데이터 형식이라는것입니다.

(자세한 형식은  http://www.json.org/json-ko.html 를 읽어 보시기 바랍니다.)


그러므로 [0], [1], [2] .. 형식으로 데이터들이 묶여 있으며, [0].id, [0].body, [0].wener 등으로 데이터에 접근이 가능합니다. 또한 [0].links[0].url , [0].links[0].type 같이 value값이 배열형식으로 되어 있을수 있습니다.

이 형식을 익숙한  XML형태로 나타내면 다음과 같습니다.



rankedTwitlist[0],rankedTwitlist[1],rankedTwitlist[2].... 쭈욱~ 데이터가 있는것이다. 

단지 그것들을 한줄에 써서 보내주는것이 json 방식인것.

데이터 접근 방식만 알았다면 간단하게 데이터를 뿌려줄수 있다.

해당 소스는 아래와 같다.




소스보기





jquery 의 after()를 통하여 가져온 이미지를 페이지에 붙여주는 방식으로 처리해보았다.

필요한 데이터는 

이미지 경로(data.rankedTwitList[i].links.image[0].thumbnailUrl)

 원본 url (data.rankedTwitList[i].links.image[0].url) 로 접근하였다.

- 여기에서 i는 for 문으로 돌리기 위하여 선언된 변수이다.


해당 화면의 소스 결과는 다음과 같다.




해당사진 10개를 불어들여와서 이미지를 뿌려주고, 이미지를 클릭하면 원본 페이지로 <a>태그로 생성하였다.

JSON은 그렇게 어렵지가 않다. 원리만 안다면 상당히 유용하게 쓰일 형식!!

이로써 간단하게 json jquery 예제를 살펴 보았습니다~


관련글


1. JSON은 무엇일까? (JSON + jquery 예제) 


2. JSON을 응용해보자. (JSON + jquery 예제2)



- 덧1 : naver openAPI는 JSON방식을 지원해 주지 않습니다.(이걸 몰라서 하루를 날렸습니다.)

- 덧2 : 처음에 다음 API를 사용하려 했으나 apikey값을 받기 위해선 도메인이 필요하더라..그래서 포기.

- 덧3 : 개인적으로 XML보다 파싱이 훨씬 쉬워서 좋다.



저작자 표시
신고

WRITTEN BY
No.190
세계정복의 시작점

트랙백이 하나이고 , 댓글  5개가 달렸습니다.
  1. ㅜㅡㅜ 미천한 글귀를 참고하시다니! 감사합니다!
  2. 비밀댓글입니다
  3. 혹시나 해서 해당 경로로 들어가서 봤었습니다만..
    json 지원하는 라이블러리가 설치가 않되신거 아닌가요? getjson이 작동하지 않는것으로 봐서는 소스상에서는 문제가 없어 보입니다만 서버구축쪽을 보셔야 할거 같습니다.
  4. 오뎅과국물 2012.11.11 22:33 신고
    학교에서 하이브리드앱 관련해서 플젝중인데 많은 도움이 되었습니다. 감사합니다.
  5. 프로젝트 하시는데 제가 도움을 드렸군요! ㅎㅎ
    댓글 감사합니다.
secret

HTML5 webDB 예제

web/HTML 2012.06.11 15:16

저번 포스팅에서는 local Storage에 대하여 간략하게 예제를 해보았습니다.

local Storage의 장점은 사용하기 간편하다는것이지만 단점은 해쉬형태로 저장되기 때문에 일괄의 데이터(객체형태)를 다루기에는 무리가 있습니다. 이점을 보안하기 위하여 webDB가 있습니다. 실제 DB사용과 매우 유사하며 저장,삭제,변경 또한 간편합니다.


-파이어폭스 브라우저에서는 webDB를 현재 지원하지 않습니다. 아래의 내용은 크롬에서 실행한 결과입니다.

- IE는 당연히 안됩니다.(IE10에서도 안된다고 하던데... 확인 부탁드립니다.)


참고 싸이트는 요기 : http://www.html5rocks.com/en/tutorials/webdatabase/todo/


소스 코드

소스보기


참고링크에는 없던 update와 drop을 추가하였습니다.  소스는 상당히 쉬운편입니다.(예제이다 보니)

저의 예제는 todo테이블을 살짝 변형시켰습니다. text하나 추가하였습니다.


1. update는 input text 두개의 칸에 value값을 넣어주고 update를 눌러주면 해당 row가 input 값에 따라 update

   됩니다. 

   아래 화면과 같이 input 텍스트칸에 데이터를 넣고 변경하려는 row의 update버튼을 눌러줍니다.

  아래와 같이 update됩니다.(3번째에 udpate했습니다.)

 



2. drop의 경우엔 sql 구문에서 truncate가 먹히지 않아서 drop으로 처리했으며, 테이블 drop 후 init()함수를 통하

   여 다시 테이블을 생성하도록 했습니다.

 

  delete all Item 버튼을 눌러주면 테이블이 drop됩니다.


크롬의 요소검사->resources->Databases 에서 테이블을 확인하시면 테이블 데이터가 없는것을 볼수 있습니다.



3. 나머지 select, insert, delete 구문은 어떻게 돌아가는지 실행해보시면 쉽게 아실수 있을겁니다.


 



저작자 표시
신고

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글  2개가 달렸습니다.
  1. 잘보고 갈께요!!
  2. 댓글 감사하합니다!
secret

Web Storage 란?

지원 브라우저 : 크롬 파이어폭스 인터넷익스플로러 사파리 오페라

Web Storage는 일종의 클라이언트-사이드 데이터베이스이다. 이 데이터는 서버가 아닌 각 사용자의 브라우저에 보관된다. 일반 데이터베이스와의 두드러진 차이점은 우리에게 익숙한 key-value 형식으로 보관/갱신/호출 한다는 것이다. 이것은 Web Storage를 사용하기위해 별도의 쿼리 문법이나 복잡한 메커니즘을 이해하지 않아도 됨을 의미한다. 그렇기 때문에 우리는 한가지만 기억하면 된다. Web Storage는 Web Database와 마찬가지로 브라우저에서 제공하는 저장공간을 사용한다는 것이다. 만약에 사용자가 사파리에서 파이어폭스로 전환하는 경우 동일한 데이터를 가져올 수 없다는 것을 유념하자.

Web Storage는 localStorage와 sessionStorage로 구분된다. 이들의 차이점은 브라우저가 완전히 종료되고 난 후에도 데이터가 유지 되느냐 마느냐이다. 데이터의 용도에 따라서 적절한 방식을 선택하면 된다.



출처 : http://html5.firejune.com/doc.html#storage

-지원 브라우저가 IE도 포함이지만 몇몇 함수는 돌아가지 않는듯하다. 아래의 소스는 IE9에서 돌아가지 않았다. 참고하시길. (아래 이미지는  IE9에서의 실행)




세션과 쿠키는 인터넷 창을 닫으면 없어지니 소용이 없고, 결국 클라이언트 단에서 파일저장을 찾다가 javascript에서  ActiveXObject() 가 있지만 IE에서만 동작하니 당연히 쓸모가 없고, 생각끝에 html5에서 본기억이 있어서 찾아보니 web Storage와 DB가지 있더라..


그래서 간단하게 web storage 사용법만 간단히 기록한다. (예제는 html5.firejune.com/doc.html#storage 에서 변형 한것입니다.)


1. 먼저 localStorage 의 값은 해쉬맵형태로 들어갑니다. value와 key 값으로 들어가므로 유의하시기바랍니다.

localStorage는 총 4개의 함수로 구성됩니다. setItem(key, value), removeItem(key), getItem(key), clear() 입니다. 함수 이름만 보더라도 쉽게 알수 있을겁니다.





<script>


if (typeof(localStorage) == 'undefined' ) {

  alert('당신의 브라우저는 HTML5 localStorage를 지원하지 않습니다. 브라우저를 업그레이드하세요.');

} else {

  try {

 

  localStorage.setItem("1", "Hello World!"); // key-value 형식으로 저장

  localStorage.setItem("2", "Hello World!"); // key-value 형식으로 저장

  localStorage.setItem("3", "Hello World!"); // key-value 형식으로 저장

  localStorage.setItem("4", "Hello World!"); // key-value 형식으로 저장

  localStorage.setItem("5", "Hello World!"); // key-value 형식으로 저장

  localStorage.setItem("6", "Hello World!"); // key-value 형식으로 저장


  } catch (e) {

     if (e == QUOTA_EXCEEDED_ERR) {

       alert('할당량 초과!'); // 할당량 초과로 인하여 데이터를 저장할 수 없음

    }

  }

 

 for(var i = 1; i <= localStorage.length; i++){

document.write(localStorage.getItem(i)+"<br><br>"); // 저장된 값 호출

 }

}

</script>




6개의 데이터를 집어 넣었으며, for문으로 localStorage만큼 돌리면서 출력하는 예제입니다.

위의 소스를 실행해보면 아래와 같은 결과 화면이 나옵니다. (크롬에서 실행한 화면입니다.)


2. 이제 setItem()쪽을 빼고 다시한번 돌려보겠습니다.




  <script>

if (typeof(localStorage) == 'undefined' ) {

  alert('당신의 브라우저는 HTML5 localStorage를 지원하지 않습니다. 브라우저를 업그레이드하세요.');

} else {

  try {

 

  } catch (e) {

     if (e == QUOTA_EXCEEDED_ERR) {

       alert('할당량 초과!'); // 할당량 초과로 인하여 데이터를 저장할 수 없음

    }

  }

 


 for(var i = 1; i <= localStorage.length; i++){

document.write(localStorage.getItem(i)+"<br><br>"); // 저장된 값 호출

 }


}

</script>




위의 결과은 아래 화면처럼 나옵니다.


결과 화면이 같습니다! 데이터를 넣지 않았는데 말이죠. 브라우저를 껐다켜도 똑같습니다. PC에 저장이 되어 있기 때문입니다. 쓰기 편리하죠?


모든 결과 물을 지우고 싶다면    localStorage.clear();

해당 키값만 지우고 싶다면  removeItem(key);  를 사용하면 됩니다. 



어떤 키값이 들어갔는 지 보고 싶다면 크롬으로 실행후 해당 실행화면에서 오른쪽마우스->요소검사->Resources ->Local Storage를 클릭해보면 어떤 데이터가 들어있는지 확인할수 있습니다.


(순서가 맞지 않는 이유는 당연히 해쉬 값은 순서에 맞게 정렬하지 않습니다. 오직 키값만을 통해서 가져오기 때문에 정렬을 할필요가 없지요.)


local Storage를 간단하게 살펴 보았습니다. 클라이언트단에서 데이터를 저장할수 있다는 메리트가 너무나 크게 작용하지만 해쉬형태로 저장하기 때문에 key, value 라는 매핑이기 때문에 객체를 저장하기에는 마땅치 않습니다.(ex- 객체를 구성하는 요소가 3가지라면 name, age, address 라면 불필요한 키값들이 늘어나게 됩니다.)

이제 다음 포스팅은 web SQL database 에서 포스팅 하도록 하겠습니다.







저작자 표시
신고

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret

script 소스

var table = document.getElementById("dynamic_table");
var newRow = table_menu.insertRow();

var td0= newRow.insertCell(0);
td0.style.cssText="font-size:9pt;color:#FF0000";  
var td1= newRow.insertCell(1); 
td1.style.cssText = "background-color:red"; 

td0.innerHTML = "<td rowspan=2 id=td1_menu >font</td>";
td1.innerHTML = "<input type =text value=background  size=8%  readonly  style=text-align:center;>"; 


html 소스
<table border="1" cellspacing="1" cellpadding="1" style="border-collapse:collapse ;" id="dynamic_table">
</table> 
 


 
 newRow.insertCell() 로 들어가는 변수에 해당하는 style.cssText 를 선언하여 집어 넣으면 된다.
 
저작자 표시
신고

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret