IE6이여 안녕~
실제 미국시간 기준으로 3월 1일 미국 콜로라도주 덴버의 레스토랑에서 장례식을 치른다고 한다.
구글에서는 도큐멘트 이외에 지메일, 유튜브도 IE6 지원을 종료한다고 발표했다.
중국에서 IE6의 취약점을 이용해서 사이버 공격을 했다고한다.
IE6 웹표준을 지원하지 못하며, 보안적으로 좋지 못한 브라이저 이다.
진작에 사라져야할것을..
IE6 너때문에 내 작업량이 늘어난다.. 제발좀 사라져라..
2010년 3월 3일 수요일
2009년 6월 18일 목요일
[텍스트큐브]텍스트큐브닷컴 초대장 배포합니다.
웹미니에서 3번째 발송하는 초대장입니다.
나날이 발전하고 있는 텍스트큐브(http://www.textcube.com/) 입니다.
블로그를 이전할 마음이 있거나, 새롭게 블로그를 만드실분들은 마구마구 초대장 신청해주세요.
총 4장입니다.
댓글에 초대장 받으실 이메일만 남겨주세요.^^ (이메일은 텍스트큐브의 아이디가 됩니다.)
감사합니다.
나날이 발전하고 있는 텍스트큐브(http://www.textcube.com/) 입니다.
블로그를 이전할 마음이 있거나, 새롭게 블로그를 만드실분들은 마구마구 초대장 신청해주세요.
총 4장입니다.
댓글에 초대장 받으실 이메일만 남겨주세요.^^ (이메일은 텍스트큐브의 아이디가 됩니다.)
감사합니다.
2009년 5월 23일 토요일
[잡담]구글 텍스트큐브닷컴 티셔츠 도착
구글 텍스트큐브닷컴에서 진행한 구글 우수 블로거 지원 프로그램 이벤트가 있었다.
얼마전에 '텍스트큐브닷컴에서 새로운 블로그를 꽃피우세요.' 라는 포스팅을 했었는데, 기존사용자라 선착순 200명 티셔츠에 당첨이 되었다.
와이프와 같이 응모를 했는데, 와이프도 같이 당첨이 된것이다.^^
구글 코리아에서 전화가 와서 설마했는데, 택배주소가 같아서 한묶음으로 같이 보내준다는 내용이었다.
얼씨구나~
구글로고를 보니 색다른걸?
근데 두벌다 사이즈가 XL 였다. 나한테는 잘 맞았는데, 와이프가 입으면 힙합스탈이겠는걸?
두벌의 티셔츠와 두장의 카드
개인적으로 흰색 티셔츠이길 바랬는데, 남색도 나름 괜찮은거 같다..
이번 이벤트에 맥북 프로를 받는 블로거는 누구일까? 부럽...
여튼 좋은 티셔츠 보내주신 구글 텍스트큐브 관계자분들께 다시한번 감사의 말씀 드립니다.^^
얼마전에 '텍스트큐브닷컴에서 새로운 블로그를 꽃피우세요.' 라는 포스팅을 했었는데, 기존사용자라 선착순 200명 티셔츠에 당첨이 되었다.
와이프와 같이 응모를 했는데, 와이프도 같이 당첨이 된것이다.^^
구글 코리아에서 전화가 와서 설마했는데, 택배주소가 같아서 한묶음으로 같이 보내준다는 내용이었다.
얼씨구나~
구글로고를 보니 색다른걸?
근데 두벌다 사이즈가 XL 였다. 나한테는 잘 맞았는데, 와이프가 입으면 힙합스탈이겠는걸?
두벌의 티셔츠와 두장의 카드
개인적으로 흰색 티셔츠이길 바랬는데, 남색도 나름 괜찮은거 같다..
이번 이벤트에 맥북 프로를 받는 블로거는 누구일까? 부럽...
여튼 좋은 티셔츠 보내주신 구글 텍스트큐브 관계자분들께 다시한번 감사의 말씀 드립니다.^^
2009년 5월 8일 금요일
[IT뉴스]텍스트큐브닷컴에서 새로운 블로그를 꽃피우세요.
텍스트큐브닷컴에서 신규 이주자에게 푸짐한 선물을 주는 이벤트를 진행합니다.
상품목록
개인적으로 맥북이 탐나긴 하지만, 신규가입자만 해당이 되므로 두번째 이벤트를 노려야겠네요..^^
텍스트큐브닷컴 초대장 신청/프로그램 응모 기간: 2009년 5월 7일 ~ 2009년 5월 28일
텍스트큐브닷컴 활동 평가 기간: 2009년 5월 29일 ~ 2009년 6월 11일
우수 블로거 발표: 2009년 6월 18일 경
텍스트큐브닷컴에서 스킨편집기능이 가능하게 되어서, 더이상 꼼수를 사용할 필요도 없습니다.
텍스트큐브닷컴 초대장이 없으시다구요? [초대장받기]
차별화된 블로그 텍스트큐브닷컴에서 시작해보세요.^^
2008년 9월 20일 토요일
[CSS]CSS hack 정리
CSS hack 이란?
브라우저의 구현 차이나 버그를 이용하여 CSS의 적용대상에서 일부 브라우우저를 제외하거나, 특정 브라우저만을 대상으로 CSS를 적용하는 방법을 'CSS핵' 이라고 합니다.
크로스브라우징을 위한 응급대처 같은 방법이라고 생각하시면 되고, 핵일부는 CSS의 문법상 올바르지 않은 것도 있을 수 있습니다.
여러 핵들이 있지만, 자주 사용하는 핵을 살펴보겠습니다.
1. 스타핵 (star hack)
셀렉트 앞에 *html 을 붙히며 Win IE 4~6, Mac IE 4~5 등에 스타일이 적용되며 다른 브라우저에는 적용되지 않습니다.
*html p{ padding:3px; } /* 맨앞에 *html 을 붙혀줍니다. */
2. 언더스코어 핵 (underscore hack)
속성의 가장 앞부분에 언더스코어(_)를 붙이며 Win IE 4~6 등에서 스타일이 적용되고 다른브라우저에서는 적용되지 않습니다.
p { _padding:3px; } /* padding 앞에 _ 를 붙혀줍니다. */
3. 해시 핵 (hash hack)
속성의 앞에 # 를 붙이며 Win IE 4~6, Mac IE 5, Opera 7, Mozila, Firefox 등에 스타일이 적용되고 다른 브라우저에는 적용되지 않습니다. (CSS의 문법상 속성의 앞에 #를 두는 것은 문법적으로 바르지 않습니다.)
p { #padding:3px; } /* padding(속성) 앞에 #를 붙힙니다. */
4. 스타 7 핵 (star 7 hack)
셀렉트 앞에 html* 를 붙이며 Win IE 5.5~6, Map IE 5, Safari 등에서 스타일이 적용되고 다른 브라우저에서는 적용되지 않습니다. html* 과 선택자 사이에 공백을 두시면 안됩니다.
html*p { padding:3px; }
5. IE7 전용핵
셀렉트 앞에 *:first-child+html 를 붙히며, IE 7에만 적용이 됩니다.
*:first-child+html p { padding:3px; }
<추가>
구글의 크롬 브라우저가 출시되었습니다. 사파리 엔진을 사용했더군요.. 그래서 사파리용 핵은 아래와 같이 적용하시면됩니다.
body:first-of-type
ex) body:first-of-type #wrap
이밖에도 브라우저 배제를 위한 핵과 박스모델 핵 패스필터 등이 있지만, 제가 주로 사용하는 핵을 위주로 적어봤습니다.
hack 을 자주 사용하면 새로운 브라우저에 영향을 끼칠수도 있으며, 업무효율을 떨어뜨리는 요인이 될수도 있으니, 응급대처 방법이라고 생각하시고 사용하시는게 올바른 판단이라고 생각됩니다.
2008년 8월 13일 수요일
[IT뉴스]네이버와 구글 통합
네이구글버
네이버와 구글 검색을 한번에 보여준다..
네이구글버(http://nagooglever.com/)
UI를 살펴보면 구글과 비슷하다.
검색을 많이 해본사람은 누구나 한번쯤 생각할수도 있는걸 어느 개발자가 실천에 옮겼다.
그럼 검색을 해보자!
이건무엇? 네이버와 구글이 동시에 두프레임으로 나뉘어 검색이 된다. 신기할따름이다.
그밖에 상단에 다음검색결과 / 엠파스검색결과 / 야후검색결과 를 클릭하면 오른쪽 프레임에서 해당 사이트에서 검색이 된다.
NHN측과 구글코리아에서는 자사에서 제공하는 API를 사용해서 제작한듯 보여지며 양쪽에서 검색결과의 질이 어떻게 다른지 네티즌들이 확인할수 있어 문제 삼지 않는다고 한다.
Daum 에서 네이버 검색을 넘어서기 위해 많은 노력을 하고 있는데, 네이구글버의 등장으로 네이버검색 홍보가 더되지 않을까 하는생각을 해본다.
디폴트 페이지가 Daum 이였으면 반응이 어땠을까...
네이버와 구글 검색을 한번에 보여준다..
네이구글버(http://nagooglever.com/)
검색을 많이 해본사람은 누구나 한번쯤 생각할수도 있는걸 어느 개발자가 실천에 옮겼다.
그럼 검색을 해보자!
그밖에 상단에 다음검색결과 / 엠파스검색결과 / 야후검색결과 를 클릭하면 오른쪽 프레임에서 해당 사이트에서 검색이 된다.
NHN측과 구글코리아에서는 자사에서 제공하는 API를 사용해서 제작한듯 보여지며 양쪽에서 검색결과의 질이 어떻게 다른지 네티즌들이 확인할수 있어 문제 삼지 않는다고 한다.
Daum 에서 네이버 검색을 넘어서기 위해 많은 노력을 하고 있는데, 네이구글버의 등장으로 네이버검색 홍보가 더되지 않을까 하는생각을 해본다.
디폴트 페이지가 Daum 이였으면 반응이 어땠을까...
2007년 8월 15일 수요일
[잡담]광복절-태극기를 게양한 사이트는 어디?
오늘은 8월 15일 광복절입니다.
광복절
1945년 8월 15일 일본의 항복으로 제2차 세계대전이 종식되어 한국이 독립하였고, 1948년 8월 15일 대한민국 정부가 수립되었다. 대한민국 정부는 일제의 강점으로부터 벗어난 날과 독립국으로서 정부가 수립된 날을 기념하기 위해 1949년 10월 1일 '국경일에 관한 법률'을 제정하여 매년 8월 15일을 광복절이라 하고 국경일로 지정하였다. '광복'이란 '빛을 되찾다'는 뜻으로서 잃었던 국권의 회복을 의미한다.
차에 태극기를 달기위해 차량용 태극기를 샀습니다. 여기저기 창문을 열어보니 예전 보다 태극기 게양하는 곳이 많이 보이는 군요.
인터넷 사이트에서는 물론 태극기가 눈에 많이 보였습니다.
태극기가 보이는 사이트를 찾아보았습니다. (대표적인 포털 사이트를 기준)
유관순 누나(?)로 보이는 한복을 입은 여성이 태극기를 구글로고중간의 알파벳 'O' 를 태극으로 표현하고 유관순 누나의 몸을 소문자 'l" 로 표현을 했군요..
구글을 들어가는 순간 어떻게 바뀌었을까 궁금해 했는데, 역시나 구글의 로고 색과 태극기가 잘 조화가 되어있더군요..
역시나 데니스황의 작품으로 예상하고 있습니다. 광복절 구글로고가 더욱더 멋져 보이는군요..^^
네이버를 들어가 보았습니다.
항상 그래왔듯이 네이버도 태극기가 'NAVER' 의 'R' 안쪽을 태극으로 변화되어있더군요..
국경일이나 특별한 날 (크리마스등등) 네이버를 보았을때 로고가 바뀐 모습을 볼수 있었습니다.
광복절 문구도 보입니다.
구글처럼 로고를 통해 무언가를 암시 할수 있었더라면 더 좋았을텐데, 약간 아쉬움이 남습니다. 그래도 태극기가 보이는거 보니 나라를 생각하는 기업은 분명하군요.
광복절을 위해 로고를 어떻게 변화 시킬까 하고 기획자 분이 신경을 많이 쓰신 모양입니다.
역시나 파란에서도 태극기를 볼수 있었습니다.
네이트는 로고옆에 광복절이라고 표시만 되어있더군요..
엠파스는 메인에 아무리 찾아봐도 태극기를 볼수 없었습니다.
참 안타까웠습니다.
평일에 아무리 사이트에 신경을 쓴다해도 국경일에 태극기 하나쯤은 보여줬으면 좋았을텐데 라는 아쉬움이 남았습니다.
야후코리아 역시 태극기가 로고와 함께 잘 어우러져 있군요.
로고속에 korea 가 있어서, 태극기가 더욱더 돋보입니다.
*태극기의 정신(뜻)
▶태극기 전체로는 평화(平和).단일(單一).창조(創造).광명(光明).무궁(無窮).조화(造化).평등(平等)을 상징한다.
- [바탕] : 평화 - 태극기의 흰색 바탕은 백의민족의 순결성과 광명을 뜻하며, 전통적으로 평화를 사랑하는 한민족의 민족성을 표현하고 있다.
- [태극원형] : 단일 - 태극 원형의 음과 양의 양의(兩儀)는 전체적으로 둘로 갈라진 것이 아니다. 태일(太一), 즉 '지극히 큰 하나'로서 단일 민족성과 통일의 정신을 나타낸다.
- [태극음양] : 창조 - 우주의 근본인 태극이 음과 양의 양의(兩儀)로 나누어 지고 이 음양의 두 가지 힘으로 우주 만물을 창조하듯이, 우리 민족의 창조성을 나타내고 있다.
- [건곤] : 무궁한 발전 - 건괘는 하늘[天]의 상징이고, 곤괘는 땅[地]의 상징이다. 무궁한 천지를 태극기는 담고 있다. 또한 태극 도형의 청, 홍의 음양 곡선은 머리와 꼬리를 물고 끝없는 선회를 하는 것으로, 우리 민족의 역사가 무궁하게 발전한다는 것을 뜻한다.
- [리감} : 광명 - 이괘는 태양[日]의 상징하고, 감괘는 달[月]의 상징이다. 일월이 함께 비치니 광명천지를 나타낸다. 우리나라와 민족은 예로부터 광명을 숭상했음을 나타내고 있다.
- 조화 - 태극의 이론은 만물이 자연의 원칙을 벗어나지 않으면서 서로 방해하지 않는다는 데 있으며, 괘의 3효(爻)는 천지인의 조화를 상징한다. 이는 예로부터 자연과의 조화를 삶의 원칙으로 여겼던 우리의 민족성을 나타낸 것이다.
- 평등 - 태극과 4괘가 전체적으로 음과 양이 균등할 뿐만 아니라, 천지일월이 서로 마주 보는 관계에 있는 것은 우리의 평등 사상을 말해 주는 것이다.
가운데의 태극(太極)도형은 음(청색)과 양(적색)의 상호 작용에 우주만물이 생성·발전하는 대자연의 영원한 진리를 형상화한 것으로 창조와 발전을 의미한다. 태극은 우주자연의 생성근본원리이며, 창조적 우주관을 담고 있다.
사방의 사괘(四卦)는 태극 도형속에서 음과 양이 질적 변화와 양적 성장의 선회(旋回)운동을 거치는 과정을 구체적으로 나타낸 것으로 천지일월(天地日月), 사시사방(四時四方), 인의예지(仁義禮智)를 담고 있다. 하나의 괘는 3개의 효(爻)로 이루어져 있으며 천인지의 3층구조로 되어있다. 효 또한 이어진 양효(陽爻)와 갈라진 음효(陰爻)가 있다.
건곤리감 4괘가 상징하는 동서남북의 방위는 정확히 일치하지 않는다. 괘의 방위에 충실한 태극기는 1882년의 일본의 [시사신보]게재된 소위 '박영효의 태극기'라 불리는 태극기의 괘 모양이다.
우리 모두 사이트에 태극기를 게양합시다.
2007년 4월 23일 월요일
[잡담]구글 Adsense 우편물 도착
2005년에 구글 애드센스를 처음 홈페이지에 달아서 지금까지 횟수로 3년정도 된거 같은데 이제서야 PIN 번호 우편물이 도착했네요..^^;
2005년 8월 27일 토요일에 첫 클릭이 되었더군요..
거의 초반에 시작한거 같은데.. 클릭률이 좋지 않아서 잠시 없앴다가 2007년 2월 블로그를 운영하면서 다시 달았더니, 이제서야 멀리서 우편물이 왔습니다.
구글로고가 박힌(?) 우편물이 저한테 직접오니까 기분이 묘하면서도 좋더군요...
드디어 달러수표를 받는것인가~ 아~
Google
Google AdSense Support
1600 Amphitheater Parkway
Mountain View. CA 94043 USA
Google AdSense Support
1600 Amphitheater Parkway
Mountain View. CA 94043 USA
대충보니까 USA 에서 온게 분명하군요..
도메인비용은 나오는군요..음
광고를 잘 달았다는 생각이 듭니다.
[IT뉴스]"지구의날" 을 위한 구글로고
4월 22일 지구의날을 위해 구글로고가 바뀌었다.
지구의 날이란?
현재 북극의 빙하가 녹고 있어 지구의 온난화의 심각성을 보여주기 위해 구글로고가 물속에서 녹고 있는 빙하를 표현한듯하다..
관련글 보러가기
역시나 세계를 생각(?)하는 구글의 디자인을 볼수 있다.
구글로고를 디자인한 데니스황의 작품(?)일까?
무언가 와닿는듯한 구글의로고 정말 참신한거 같다는 생각이 든다..
구글의 다른 로고를 알아보자!
더많은 구글로고 보러가기
지구의 날이란?
1970년 4월 22일 미국에서 자연보호론자들이 모여
최초의 대규모적 자연보호 캠페인을 전개하고 시위한 날을 기념해서 제정된 날이다.
이날에는 전인류에게 환경오염에 대한 경각심을 높이기 위한 행사를 한다.
최초의 대규모적 자연보호 캠페인을 전개하고 시위한 날을 기념해서 제정된 날이다.
이날에는 전인류에게 환경오염에 대한 경각심을 높이기 위한 행사를 한다.
현재 북극의 빙하가 녹고 있어 지구의 온난화의 심각성을 보여주기 위해 구글로고가 물속에서 녹고 있는 빙하를 표현한듯하다..
관련글 보러가기
역시나 세계를 생각(?)하는 구글의 디자인을 볼수 있다.
구글로고를 디자인한 데니스황의 작품(?)일까?
무언가 와닿는듯한 구글의로고 정말 참신한거 같다는 생각이 든다..
구글의 다른 로고를 알아보자!
더많은 구글로고 보러가기
2007년 4월 16일 월요일
[잡담]구글메일(Gmail) 실시간 알리미
구글메일 실시간 알리미에 대해 설명할까 합니다.
물론 많은 지메일 사용자들이 사용하고 있겠지만, 지메일을 만든지 얼마 되지 않은 사용자들에게는 유익할까해서 포스팅합니다.
예전에 구글계정을 얻을려면 초대권이 필요했지만 요즘에는 무료로 제공이 되더군요.
용량도 2G 씩이나(?) 주고..^^;
자~ 그럼 지메일 실시간 알리미를 사용해봅시다..
먼저 http://gmail.google.com/ 에서 계정을 얻습니다.
Gmail에 가입하십시오. 이곳을 클릭해서 얻으면 되겠죠?
그후에 사용자 이름에 지메일 아이디를 작성합니다. ex)test@gmail.com
그리고 비번 누르고 들어오시면 됩니다.
들어오시면 받은 목록이나 기타 메일관련 메뉴가 보입니다. 여기에서 오른쪽 맨위를 보시면 설정이란 메뉴가 있는데 클릭합니다.
위와 같은 화면이 보이며, Mac 또는 PC용 Gmail 알리미를 클릭합니다.
클릭하면 아래와 같은 화면이 뜨고 Download Gmail Notifier for Windows
버튼을 누른후 실행/저장으로 설치를 진행합니다.
자 다 되었습니다.^^
바탕화면을 보시면 아래와 같은 메일 아이콘이 보이며, 메일이 오면 바로 확인하실수 있습니다. (물론 작은창으로 어디서 온지 알려줍니다.)
아웃룩은 주로 회사에서 자주사용하지만, 아웃룩 세팅하기 귀찮으신분들은 Gmail 의 이런 기능을 이용하면 좋을듯합니다.
특히나 mailto:test@test.com 메일 태그 같은 경우 클릭시 아웃룩 창이 뜨지만 Gmail 실시간 알리미를 설치하면 gmail 인터넷 창이 뜬답니다.
또한 좋은 기능중에 하나는 파이어폭스 (불여우)로 지메일을 이용할경우 지메일의 2G 용량을 웹하드처럼 하는기능도 있더군요..
우리모두 편리하게 생활합시다.
2007년 3월 2일 금요일
[잡담]다시보는 구글맵과 Ajax
이제 모르는 사람이 없을 정도로 잘알려지 '구글맵' http://maps.google.com/ 다시봐도 신기할 따름이다.
구글맵을 보면서 Ajax의 힘은 대단하다라는 생각을 볼때마다 하게 된다.물론 네이버의 맵도 훌륭하지만 액티브엑스 [ActiveX] 를 설치해야하며 좀 느리다는게 단점이다.(네이버 맵이 Ajax로 바뀐지 꽤 됐군요 ㅎㅎ 글수정합니다.)
구글맵은 액티브엑스 [ActiveX] 를 설치하지 않고도 실시간으로 화면상에 나타내주니 정말 사용자들은 고마울 따름이다.
Ajax 은 뭔가 잠깐 다시 한번 살펴보기로 하자.!
정의
XHTML, CSS, 자바스크립트 등의 기술이 고루 섞여 대화형 웹어플리케이션을 만들 수 있게 하는 웹프로그래밍 기술의 복합체. 비동기식 자바스크립트와 XML(Asynchronous JavaScript And XML)의 줄임말이다.
특징
Ajax는 XHTML, CSS, JavaScript, Document Object Model, XMLHttpRequest 등의 기술로 이루어진다. 세 특징을 소개하자면 다음과 같다. 우선 Ajax는 XML기반의 웹서비스 언어를 사용하고 클라이언트에서는 자바스크립트를 가지고 서버에 응답한다. 그 결과 브라우저와 웹서버 간의 데이터량이 줄어들어 어플리케이션의 응답성이 향상되고 웹서버의 부담이 줄어들게 된다. 두 번째 특징은, 웹에서 해당 서비스를 쓰는데 있어 별도로 프로그램을 설치(예:액티브엑스, 플래시)하거나 해당 기능을 갖춘 새 창을 띄울 필요 없다는 것이다. 일반 브라우저 화면에서 그대로 이용할 수 있다. 마지막으로 Ajax는 사용자로 하여금 직접 웹 상의 자료의 위치를 편집하는 등 커스토마이징을 가능하게 해준다.
적용 사례 및 이슈
구글의 지메일, 구글맵이 Ajax를 구현한 서비스이다. 사진공유사이트인 플릭커(Flickr)는 사진 미리보기 기능에서 플래시를 빼고 Ajax로 전환했다. 차세대 인터넷 Web 2.0에 부합하는 혁신적인 기술로 평가받기도 하나, 브라우저에 따라 XMLHttpRequest를 사용할 수 없는 경우도 있고 복잡성이 문제가 되기도 하므로 아직 논란이 존재한다.
Ajax란 웹클라이언트 화면 제어를 보다 세밀하게 하기위한 기술로써,
JavaScript + 통신객체(XMLHttpRequest) + 통신데이터(XML) 세가지가 주요 기술요소며,
JavaScript 에서 웹서버에 비동기통신을 통하여 데이터를 얻어서 화면에 반영해주는 방식으로 동작합니다.
예를들어 로그인화면이 있다고 해보죠.
일반 웹프로그램이라면, ID/Password를 입력 받은 후 웹서버로 HTTP 요청을 보내고 로그인 결과를 받아서 화면에 보여줍니다. 이과정에서 페이지가 한번 껌뻑하면서 로그인초기화면에서 로그인결과화면으로 화면이 변경되게 됩니다.
Ajax로 프로그래밍한다면, ID/Password를 입력 받은 후 XMLHttpRequest객체를 이용하여 웹서버로 HTTP 요청을 보내고 로그인 결과를 받고, 그 결과를 이용해 JavaScript로 화면 다시 그립니다. 이때 전체 HTML을 이용하여 전체화면을 다시그리는 것이 아니라 JavaScript가 로그인 초기화면을 그대로 사용하면서 프로그램적으로 화면을 재구성하기 때문에 화면 깜박임이 없습니다.
다른 예로 실시간 랭킹을 보여주는 화면을 생각해 보죠
일반 웹프로그램이라면 주기적으로 랭킹화면을 Refresh 하는 방법을 사용해야 합니다. 매번의 주기적인 요청때마다 랭킹화면 전체를 받아서 화면에 새로 뿌려야하므로, 새 화면이 나타날때 마다 화면이 껌뻑이게 되고, 브라우저 하단 상태바의 프로그래스바가 동작하고, 약간의 랙이 나타나는 등, 새로고침하면 나타나는 현상이 사용자에게 보여집니다.
Ajax로 프로그래밍한다면, 주기적으로 랭킹데이터를 XMLHttpRequest객체를 이용하여 웹서버로부터 받고, JavaScript가 이 데이터를 이용해서 랭킹화면을 재구성합니다. 이 경우 JavaScript가 화면을 재구성하기 때문에 새로고침하면 나타나는 현상이 전혀없이 랭킹화면이 부드럽게 바뀌게됩니다.
아마 네이버 검색어 입력시 나타나는 검색어 입력완성기와 실시간 랭킹 박스도 Ajax를 이용하여 구현되었을 것으로 생각됩니다.
AJaX(Asynchronous JavaScript and XML)은 대화식 웹 어플리케이션의 제작을 위해 자바스크립트, XML을 이용하는 웹 개발 기법으로, 데이터의 비동기 전송을 가능하게 함
■ AJaX(Asynchronous JavaScript and XML)
▶ A is for “Asynchronous”
- 동기, 비동기 응답 가능
- 동기식, 비동기식 정보 요청시 웹페이지의 리프레쉬(Reflesh) 없이 업데이트 가능
- 사용자는 비동기식 처리 동안 다른 프로세스의 업무 처리 가능
▶ J is for “JavaScript”
- 일반적으로 자바스크립트는 클라이언트 사용환경에 영향
- 서버통신은 다른 언어를 사용하여 HTTP 통신을 적용 할 수 있음(Java Servlets, Ruby, CGI 등)
▶ X is for “XML”
- 답변요청 및 답변 메시지는 XML 형태
- 다양한 형태의 텍스트를 포함
■ 전송기술
▶ XMLHttpRequest
- 동적 xml 데이터 통신 가능하게 하며, AJaX를 가능하게 한 가장 기본적인 기술
- Browser에 내장된 XML Parser의 DOM API, XSLT와 같은 기능과 DHTML, JavaScript의 막강한 기능을 이용하면 기존의 웹 UI와는 사뭇 다른 C/S 또는 RIA(Rich Internet Applications)과 비슷한 UI를 구성할 수 있음
▶ REST(REpresentational State Transfer)
- 별도의 추가적인 기능이나 모델없이 URL로 명기된 자원을 HTTP로 조작할 수 있는 기술
- 분산 하이퍼미디어 시스템을 위한 아키텍처로서 등록저장소에서 제공하는 서비스를 URL 을 통해 접근 가능하도록 하는 것
■ AJaX의 장점
▶ 액티브엑스나 자바애플릿을 이용하지 않고도 실시간 접속자 체크, 실시간 쪽지 등 기능 구현
▶ 페이지를 새로고침 할 필요도 없고 실시간 정보 제공
▶ 서버측에서도 필요한 데이터만을 전송하여 불필요한 트래픽 감소
Ajax 로 만든 사이트는 다음과 같다.
이밖에 Ajax 로 만든 사이트들이 계속적으로 나오고 있으며, 훌륭한 웹사이트들을 몸소 느낄수가 있다.
피드 구독하기:
글 (Atom)