긍적적인 사고, 음식의 절제, 규칙적인 운동

1. Help > Install New Software

2. http://zen-coding.ru/eclipse/updates/ 아니면 http://media.chikuyonok.ru/eclipse/updates/ 추가하시구요

3. Zen Coding for Eclipse group 체크하세요

4. 설치완료

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

웹표준 권고안 확인 사이트

http://validator.w3.org/ - 브라우저 유효성 검사
http://jigsaw.w3.org/css-validator - CSS 유효성 확인
http://www.stg.brown.edu/service/xmlvalid/ - XML유효성 확인
http://www.wah.or.kr/Achive/Kadowah.asp - 한국형 접근성 평가도구

CSS 디자인 코리아 - http://forum.standardmag.org/

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

closure-compiler - http://code.google.com/p/closure-compiler/
Compressor - http://javascriptcompressor.com/

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

Html5 적용되는 브라우저별 테스트 - http://html5test.com/
위 주소를 실행시키면 해당 브라우저의 적용 가능한 html5 Tag 가 나오고 점수가 매겨진다.
브라우저 업데이트도 아마 영향이 있을 것이다.

Firefox 4버전으로 변경하고 테스트 해보니 무려 255점이나온다. 헐~

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

jQuery selectors allow you to select and manipulate HTML elements as a group or as a single element.

---

jQuery Element Selectors

jQuery uses CSS selectors to select HTML elements.

$("p") selects all <p> elements.

$("p.intro") selects all <p> elements with class="intro".

$("p#demo") selects the first <p> element with id="demo".

---

jQuery Attribute Selectors

jQuery uses XPath expressions to select elements with given attributes.

$("[href]") select all elements with an href attribute.

$("[href='#']") select all elements with an href value equal to "#".

$("[href!='#']") select all elements with an href attribute NOT equal to "#".

$("[href$='.jpg']") select all elements with an href attribute that ends with ".jpg".

---

jQuery CSS Selectors

jQuery CSS selectors can be used to change CSS properties for HTML elements.

The following example changes the background-color of all p elements to yellow:

Some More Examples

Syntax	Description
$(this)	Current HTML element
$("p")	All <p> elements
$("p.intro")	All <p> elements with class="intro"
$(".intro")	All elements with class="intro"
$("#intro")	The first element with id="intro"
$("ul li:first")	The first <li> element of each <ul>
$("[href$='.jpg']")	All elements with an href attribute that ends with ".jpg"
$("div#intro .head")	All elements with class="head" inside a <div> element with id="intro"

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

D3.js 는 데이터를 기반으로 문서를 조작을위한 작은, 무료 자바 스크립트 라이브러리입니다.
http://mbostock.github.com/d3/

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

모바일 디바이스의 해상도

1. 320 x 480 : 아이폰3G(S), 안드로원, 레전드
2. 480 x 800 : 넥서스원,넥서스S, 디자이어(HD), HD2, 갤럭시S/A, 시리우스, 베가, 옵티머스Q, 올레패드
3. 480 x 854 : 모토로이, 모토쿼티, 모토슬램
4. 640 x 960 : 아이폰4
5. 600 x 1024 : 갤럭시탭
6. 768 x 1024 : 아이패드

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

1. 모자이크 (Mosaic)

다들 알다시피 최초의 GUI 브라우저는 "Mosaic"이다.
95년 군 입대하기 전에 학교 PC룸에서 봤었는데 그 당시에는 일본사이트에서 아리따운 모델(?)의 사진 한장을 가져오는데 반나절이상이 걸렸던 것으로 기억한다. ㅎㅎ 지금의 GUI와는 비교되지 않게 허접하지만 그 당시 대강의 웹 브라우저 GUI의 기본을만들었다고 해도 무방하다.
이 Mosaic 브라우저의 UA는 아래와 같았다고 한다.

NCSA_Mosaic/2.0 (Windows 3.1)

현재의 브라우저와는 너무나 다르게 매우 심플하다. 물론 나중에 나올 오페라(Opera) 브라우저도 상당히 심플한 편이다. 그 당시에는 브라우저의 종류가 많지 않았기 때문에 UA가 복잡할 필요는 없었을 것이다.

2. 넷스케이프 "Netscape"

PC통신이 인터넷으로 대체되는 시기에 넷스케이프는 시장을 완전히 장악했다. 물론, 인터넷 익스플로러도 시장에 나오기는 했지만 아무래도 2인자일 수 밖에 없었다. 그 때 당시Win95를 깔고 가장 먼저 깔았던 프로그램이 "새롬데이터맨"과 "넷스케이프"였던 것 같다. ㅎㅎ. 그 당시 넷스케이프는Communicator라는 이름으로 웹브라우저 뿐만 아니라 이메일, 뉴스그룹 등의 어플리케이션도 포함한 패키지 형태로 까지업데이트 되었었다.
넷스케이프는 원래 이름이 "Mozilla"였다고 한다. 이것의 의미가 "Mosaic Killer"라고 하는데 모자이크측에 달가와 하지 않아 이름을 바꿨다고 한다.

Mozilla/1.0 (Win3.1)

그러나 UA는 그대로 Mozilla이다. 이유는 내 생각에 UA는 한번 결정되면 웹서버가 이에 의존해서 페이지를 구성해주기때문에, 한번 널리 알려진 UA를 바꾸기는 어려웠으리라 (나중에 이것이 얼마나 영향을 미치는지는 이 글을 계속 읽어보면 알 수있다).
당시 넷스케이프는 frame이라는 기능을 최초로 지원했고 모자이크는 그렇지 못했다고 한다. 따라서, 웹서버는 UA를 기준으로 frame이 있는 페이지와 없는 페이지로 서비스를 했다.

3. 인터넷 익스플로러 (Internet Explorer)

다알아시피 MS는 Windows에 인터넷 익스플로러를 기본제공하면서 넷스케이프가 차지했던 브라우저 시장을 금방 차지해버렸다.끼워팔기의 영향도 있겠지만 인터넷 익스플로러가 넷스케이프만큼의 좋은 기능을 제공했기 때문에 가능했다고 본다.
기사에서재미있는 것은 인터넷 익스플로러도 frame기능을 제공했지만 웹서버들이 UA에 "Mozilla"라는 것을 보고 frame기능이들어간 페이지를 보내줬기 때문에 인터넷 익스플로러도 어쩔 수 없이 UA에 "Mozilla"를 넣기 시작했다고 한다. 참 재미있는웹의 역사이다.

Mozilla/4.0(compatible; MSIE 7.0; Windows NT 5.1; InfoPath.2; .NET CLR 1.1.4322;.NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648)

인터넷 익스플로러의 UA는 현재 내 PC의 IE7이다. 여전히 "Mozilla"라는 문구는 사라지지 못하고 있고 단지 "compatible; MSIE 7.0"이라는 것으로 인터넷 익스플로러라는 것을 겨우 표현하고 있다.

4. 파이어폭스 (FireFox)

넷스케이프가 몇달 전에 업데이트되었다는 소식을 들었지만 당연히 누구도 사용하는 사람은 별로 없다. 나도 왜 업데이트를 하는지 잘 모르겠다. 파이어폭스는 난잡한 소스코드로 되어 있는 넷스케이프를 리팩토링하는 것보다 차라리 새로 만들자는 취지에서 모질라단체가 만든 브라우저이다."Gecko"라는 새로운 엔진을 장착하고 지금은 당연한 기능인 탭기능으로 많은 사용자를 확보하고 있다 (전세계 20%를 넘었다고한다).
무엇보다도 파이어폭스는 웹표준을 가장 잘 지켰기 때문에 인터넷 익스플로러가 장악하고 있는 브라우저에 대안으로받아드려지고 있다. 그리고, 수많은 Addon 서비스를 통해서 무한확장가능하다는 점이 파이어폭스 사용자들을 다른 브라우저가 뺏을수 없을 것이다.

Mozilla/5.0 (Windows; U; Windows NT 5.1; ko; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

파이어폭스의 UA는 현재 내 PC의 FF이다. "Mozilla"라 들어가는 건 당연하고 Gecko 렌더링엔진을 사용하는 것을 명시하고 있다.
여기서 재미있는 것은 IE7은 Mozilla/4.0인데 파이어폭스는 Mozilla/5.0이다. 왜 그런지는 모르겠지만 IE8이 나오면 5.0 혹은 6.0으로 바뀌지 않을까? ㅎㅎ

5. Konqueror

요즘 Linux를 거의 사용하지 않아 아니 사용할 시간이 없어서 잘 모르겠지만 이 브라우저도 매우 많이 쓰는 브라우저이다. 예전에KDE와 GNOME이 UI 패키지의 양대산맥이었는데 요즘은 어떤지 모르겠다. 아무튼 KDE 패키지에 이 브라우저가 디폴트로들어가 있다고 한다.
Konqueror는 KHTML이라는 렌더링엔진을 가지고 있고 K는 KDE의 약자라고 한다. 이 KHTML은 애플의 사파리 브라우에사도


Mozilla/5.0 (compatible; Konqueror/3.2; FreeBSD) (KHTML, like Gecko)

Konqueror 브라우저의 UA를 보면 "like Gecko"가 눈에 띤다. 이것도 Gecko라는 문구를 보고 웹서버가 페이지를 내려주기 때문에 어쩔 수 없이 붙였다고 볼 수 있다. 뭐든지 스타트업이 가장 중요한 것 같다.

6. 오페라 (Opera)

오페라(Opera)는 렌더링 속도가 아주 빠르기로 유명하다. 특히, 모바일 웹시장을 일찍 파악해서 "오페라 모바일", "오페라 미니" 등 다양한모바일 디바이스에서 최적의 성능을 제공한다. 특히 동일한 Core를 가지고 다양한 종류의 브라우저를 내놓고 있기 때문에 더욱안정성을 발휘한다.
(오페라 미니는 이전에 포스트한 적이 있으므로 참고하세요).
또한, WAP 기능도 디폴트로 지원하고 있어서 WML, WMLscript를 테스트할 때 많은 도움이 된다.

Opera/9.52 (Windows NT 5.1; U; ko)

오페라 브라우저 (PC기반) UA를 보면 "Mozilla"도 없고 자체 렌더링 엔진도 명시하지 않고 있다.
독자적으로 만들어진 브라우저이기 때문이기도 하지만 인터넷 익스플로러와는 다른 브라우저에 대한 자신감이 아닌지 생각이 든다.

7. 사파리 (Safari)

아이폰때문에 더욱 유명해진 애플이 만든 브라우저이다. Mac OS에는 기본적으로 탑재되어 있다. 사파리브 라우저는 오픈 프로젝트인데 Konqueror와 마찬가지로 KHTML 렌더링 엔진을 사용하고 많은 추가 기능이 탑재되어 있다.이것을 웹킷(Webkit)이라고 하지만 KHTML 렌더링 엔진때문에 UA에도 당연히 KHTML이 명시된다.

Mozilla/5.0 (Macintosh; U; PPC Mac OS X; de-de) AppleWebKit/85.7 (KHTML, like Gecko) Safari/85.5

사파리 브라우저 UA를 보면 갈수록 복잡해지는 것을 알 수 있다. 웹서버에게 양질(?)의 페이지를 얻기 위해서 브라우저가 얼마나 노력(?)하는지 알 수 있다.

8. 크롬 (Chrome)

며칠 전에 구글(Google)에서 크롬(Chrome)이라는 브라우저를 내놓았다. 이전에도 구글이 브라우저를 만들고 있다는 소문이 있었지만 소문이 좀 사그라드는 시점에 나온 것이라 조금 놀라웠다. 모질라(Mozilla)사람들이 말하는 크롬은 다소 놀라울 것이 없다는 반응이지만 안드로이드 + 구글기어 + 크롬이 합쳐지면 엄청난 위력을 발휘할 것이 틀림없다.
깔아서 써보면 베타도 한참 베타라 다운되는 일이 자주 발생한다. 물론, 크롬이 자랑하는 멀티 프로세스 개념이 도입되어 그 탭만 죽는다.

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.29 Safari/525.13

크롬 브라우저의 UA를 보면 지금까지의 브라우저의 역사까지 알 수 있겠다. 거의 모든 이름들이 나열되어 있다.

9. 그밖의 모바일 브라우저들

오픈웨이브 (Openwave)모바일 브라우저는 예전에 Phone.com이라는 도메인으로 모바일 브라우저의 표준을 주도했던 유명한브라우저이다. 하지만, 풀 브라우징에 촛점을 맞추지 않고 플랫폼에 신경쓰다가 지금은 모바일 웹을 리드하지 못하고 있다. 지금은리눅스 플랫폼으로 유명한 퍼플랩(PurpleLab)에 인수되었다.

SAMSUNG-XXXXXXX/Version Profile/MIDP-2.0 COnfirguration/CLDC-1.1 UP.Browser/6.2.3.3.c.1.101 (GUI) MMP/2.0

위의 UA는 현재 삼성 GSM폰에 탑재된 오픈웨이브 브라우저의 UA이다. Mozilla나 Gecko 문구는 없다. 하지만, 오픈웨이브도 모바일 웹의 대세를 거스를 수 없기에 신규 솔루션은 오픈소스를 활용할 가능성이 크다.

ACCESS는 일본회사이며 풀 브라우징이 화두가 되면서 유명해진 NetFront 브라우저를 가지고 있다.


SAMSUNG-XXXXXXX/Version NetFront/3.4 Profile/MIDP-2.0 COnfirguration/CLDC-1.1

위의 UA는 현재 삼성 GSM폰에 탑재된 NetFront 브라우저의 UA이다.

노키아(Nokia)는 이미 자체 브라우저를 가지고 있었지만 모바일 웹을 염두해두고 완전히 새로운 브라우저를 만들었다. 이 브라우저는 애플의 사파리 브라우저에 기반인 Webkit을 가지고 만들었고 기능상으로 매우 뛰어나다.

Mozilla/5.0(SymbianOS/9.2;U;Series60/3.1NokiaN95/10.0.018;Profile/MIDP-2.0Configuration/CLDC-1.1)AppleWebkit/413(KHTML,likeGecko)Safari/413

위의 UA는  사파리 브라우저가 거의 동일하다.

위의 모바일 브라우저들은 모바일 폰을 위한 브라우저이기 때문에 디바이스의 자바환경의 버전을 알 수 있도록 MIDP, CLDC 정보를 포함하고 있다.

출처 : http://aquicker.tistory.com/19

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

W3C에 의해 개발되고 있는 프로그래밍 인터페이스 규격인 DOM은, 프로그래머가 HTML 페이지나 XML 문서들을 프로그램 객체로 만들거나 수정할 수 있도록 해준다. 현재로서, HTML과 XML은 그저 데이터 구조의 형태로 문서를 표현하는 방법일 뿐이다. 이러한 문서들은 마치 프로그램 객체처럼, 자신들의 콘텐츠나, 객체 내에 감추어진 데이터를 가질 수 있게 됨으로써, 문서를 조작할 수 있는 콘트롤을 보장하는데 도움을 줄 수 있게 될 것이다. 문서들은 객체들과 마찬가지로, 메쏘드라고 불리는 객체지향 프로시저들을 함께 가지고 갈 수 있다. DOM은 문서 상에서 프로그래밍 콘트롤을 어떻게 제공할 것인지를 지정하기 위한, 전략적이고 개방된 노력이다. 이것은 다이내믹 HTML이라고 불리는 새로운 HTML과, 웹페이지 및 그 요소들이 브라우저 상에서 일관된 형태로 나타나게 장려하는 방법의 발명에 일부 영향을 받았다.

DOM은 두 가지 계층의 인터페이스 구현을 제공하는데, 그 하나는 XML을 지원하는 DOM Core로서 그 다음 계층의 기반이 되며, 다른 하나는 DOM HTML로서 그 모델을 HTML 문서로 확장한 것이다. 아래에 일부 요점이 정리되어 있다.

    * 어떠한 HTML이나 XML 요소에 대해서도 프로그래밍을 통한 개별적인 주소지정이 가능할 것이다.
    * 이 규격은 IDL을 사용하여 설명하게 될 것이므로, 언어에 독립적일 것이다.
    * 그 외에도, 인터페이스는 자바 프로그래밍 언어와 ECMAScript의 형태로 기술될 것이다.
    * DOM을 마이크로소프트의 COM이나 DCOM과 혼동해서는 안된다. COM과 CORBA는 객체를 정의하는데 있어 언어에 독립적인 방법이며, 자바와 같은 특정 언어가 할 수 있는 것과 똑같이 DOM 객체를 만드는데 사용될 수 있을 것이다.

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장