안녕하세요. 정상현입니다.

신년계획

2010-12-28T10:15:00.000+09:00

0. 아내와 아이에게 끊임없는 사랑 주기

1. 담배 끊기(담배값이 오른데요..;; 아이도 태어나는데;;)

2. 블로그 관리좀 제발 하기

3. 개인사이트 만들기(블로그 폐쇄-_-;;)

4. 개인모바일사이트만들기

5. 위에것들을 만들기 위한 php공부-_-.........

6. flax 와 javascript 그리고 actionscript3.0 제발 공부좀하기

7.하코사 번개 및 모임에 제발좀 나가기..ㅠ,.ㅜ;;

플래시 액션스크립트 xml연동시 캐싱 문제

2010-11-03T14:50:00.000+09:00

액션스크립트를 이용해 xml과 연동하여 게시글 및 메뉴 등을 불러오는 스크립트를 짜고 테스트중 문제에 봉착했다.

인터넷 임시 파일에(로컬에) 최초 저장된 xml 파일이 서버에 올라가있는 xml 파일로 안덥히고 계속적으로 로컬꺼를 가져다 쓰는 문제였다. 이런젠장...

xml 파일을 asp 로 바꾸고(개발언어가 asp였음) 난리 부르스를 쳐도 안됨.ㅡㅡ;

해결은 플래시 에서 XML 을 로드 할때 패러미터 값에 랜덤함수를 뿌려 새로운 파일인듯 받아 오는것이다.

네이버에서 검색질을 좀 하니 비슷한 문제로 고민하시던 분들이 계시더라.

윈도우 비스타 이상 운영체제에서는 같은 파일을 되풀이 해서 읽을경우 로컬에 캐싱해 뒀다가 읽어 준다고 한다.

Math.round(Math.random() * 100000000);

변수 하나에 랜덤값을 넣고(혹시 모르니 수를 크게 보냈다.)고때 고때 불러 왔다.

사이트 전체url 및 메뉴이미지 등을 하나의 xml 파일에 쑤셔 넣고 돌리는 방식으로 작업 했기때문에 위에 방법이 아니었으면 액션스크립트 작업을 처음부터 다시해야 할 뻔 했던...

운영 및 개발의 편의 성을 위해 3일간 작업한 것 이 물거품이 될뻔했다..ㅡㅡ;

html5 의 찬양반론

2010-07-08T14:38:00.000+09:00

간만에 시간이 나서 주저리주저리 적어 봅니다.(아..정말 간만이네요-0-;)

요 앞전에 html5 와 웹퍼블리셔 라는 직군에 대항 긍정적 견해를 적은적이 있습니다.

그래서 이번에는 여러 악플과 의견들이 달릴 것 을 각오하고 부정적인 측면에서 바라 보았습니다.

많은 의견 기대하고 있겠습니다...ㅠ,.ㅜ;;

얼마전 저의 주관으로 회사의 wp팀 내부 세미나를 아주 짧막하게 진행 했습니다.

저도 한 두군데 정도 세미나를 둘러 보고, 구글링 등과 관련 서적을 통해 공부를 한터라, 또한 아직 개발중인 언어인지라 뭔가 주관한다기 보다는 토론에 가까운 세미나가 되었는데요.

세미나를 하면서 드는 몇가지 의문점에 대한 열띈(?) 토론이 이어졌습니다.

1. 대체 왜 아직 개발중인, 그리고 당장 쓸지 말지 의문인 html5 에 대해 우리나라는 이렇게 열정적으로 나서는가?

얼마전 윤석찬씨와 함께 한 질의 응답 식 세미나에 간적이 있었습니다.

국내에서 html5관련 세미나를 한다고 공지를 띄우자 마자 자리가 만석이 되었다고 모질라 커뮤니티 사람들에게 말했더니 (외국분들 이겠죠?)모두 놀랐다고 합니다. 외국에서는 아마 이정도로 뜨거운 반응은 아직 아닌가 봅니다.

아마도 외국은 몇몇 개발자 및 좀 앞서가시는 분들께서 집중적으로 여러가지 테스트와 실험적인 것 들을 생산해 내서 그것들을 블로그등을 통해 공유를 많이 하시는 듯 합니다. 여기서 중요한것은 몇몇 이겠죠.

국내에서는 일단 활활 타오르고 있습니다. html5 와 css3라는 신 기술에 대해서 말이죠.

스티브 잡스가 IOS 에서 플래시를 지원을 하던지 말던지 사실은 모바일 사이트를 따로 제작하는 국내에서 작은 휴대폰으로 풀브라우징 웹사이트를 보지 않는이상 용량도 그렇고 사용자 편의성도 그렇고 그닥 플래시를 끼워 넣을 일도 별로 없는데 말입니다.

당장 내일 출근해서 html5의 장점에 대해 목이 터져라 얘기해도 실상 회사에서 html5를 어디서부터 얼마나 어떻게 사용을 해야 할지도 의문이구요. 명확하게 개발이 완료되고 거기에 맞춰 샘플이 생성된 뒤에 공부해도 늦지는 않을 것 같다는 느낌이 드는 html5 에 대한 국내 웹개발자 들의 과도한 관심에 대한 결과가 저는 몹시 흥미롭게 보입니다. 아시는 분들은 아시겠지만 세미나를 두세군대 따라다녀 보면 비슷비슷 한 이야기들이죠. 얼마 전까지만 해도 저역시 html5 의 선두에 서겠다는 일념하나로 열공 했지만 오늘 문득 드는 생각은 이것이 어쩌면 거품일 수 있겠다 라는 것 입니다.

2. 모바일 브라우저에 html5 와 css3 를 적용할 수 있다. 그리고 구글은 웹사이트를 html5로 해뒀잖아!!!

네. 모바일브라우저에서 아주 유용하게 사용할 수 있습니다.

하지만 사실 모바일 접근자가 아이폰, 안드로이드폰 사용자만 있는 것 은 아닙니다.

또, 국내 대형 포털등도 아직은 적용하지 않고 있구요.

네이버 모바일(http://m.naver.com/)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

다음 모바일(http://m.daum.net/)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

파란 모바일(http://m.paran.com/)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

네이트 모바일(http://m.nate.com/)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

sk-w 모바일(http://m.sk-w.co.kr/)

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN""http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">

<html>

기아 자동차 모바일(http://m.kia.co.kr/)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

아쉽게도 국내 모바일 사이트 조차 아직 html5에 대한 적용은 실시 하지 않고 있는듯 합니다.

css3조차도 말이죠. 자바스크립트 라이브 러리 를 통한 html5 적용은 시도조차 되지 않고 있네요. 아마도 업체에서 html5로 구축 하는 것 보다는 리소스 측면에서 기존 방식을 이어 가는 편이 더 이득이라는 판단을 했을 것이라고 생각 됩니다.

아시다시피 구글에서 메인 페이지를 html5로 적용했다고 합니다(저도 몰랐다가 웹서핑 중 알았는데요..)

구글 메인은..

<!DOCTYPE html><html>

와!! 놀랍습니다. 정말이었네요!!

하지만 아쉽게도 우리가 알고 있던 header, footer, nav 등의 새로운 요소들은 찾아 볼 수 없었습니다.

아니..못찾은 것일 수도 있겠군요. 그렇다면 지금 바로 구글 메인에서 소스보기를 시도 해 보세요. 검색엔진이라 그런지 여백들이 거의 없이 압축되어 있는 소스를 보실 수 있을 것 입니다.

사실 구글 같은 경우 국내 포털 사이트와 레이아웃 부터 디자인적인 요소까지 너무도 다릅니다.

가장 대표적인 포털 검색엔진인 네이버 같은 경우를 보더라도 뭔가 시도를 하기에는 위험요소가 많아 보입니다. 국내 사용자 측면에서는 구글 보다 네이버 같은 포털 사이트에 더 관심을 갖겠죠. 이것은 구글이 국내에서 많은 사용자 층을 확보하지 못하는 이유중 하나 일 수 있겠습니다.

3. 과거 CSS2.1을 이용한 레이아웃으로의 변화도 쉽지 않을 것 이라 했지만 결국 됐잖아!!!

네. 맞습니다. 과거에 분명 테이블로 레이아웃을 잡고 드림위버 같은 이지윅 툴이 없으면 홈페이지 자체를 만든다는 것 은 어려울 정도 였던 시절이 있었습니다. 99년도즈음 처음 홈페이지를 만들어 보겠다며 무작정 html을 이용해 홈페이지를 만들었던 때가 기억 나네요. 이지윅도 모르고 css도 몰랐습니다. 순전히 html태그만을 이용해서 홈페이지를 만들어 댔죠. 붉은 배경에 제가 그린 그림 몇장을 올리고, 검색해서 퍼온 소스로 배경음악도 넣었던 기억이 납니다. 친구들은 옆에서 스타크레프트를 할때 저는 열심히 html로 뭔가를 만들겠다고 열을 올렸죠. 그러던중 나모웹 에디터를 만나고..뭐...주절주절....

네스케이프가 망하고 익스플로러가 독자적으로 살아남을즈음...그리고 윈도우 98이 없어지고, 윈도우 XP가 거의 모든 국내 컴퓨터에 설치 될 즈음 익스플로러 5.5는 서서히 사라져 갔을 것 입니다. 그리고 대부분의 사용자가 익스플로러6.0을 사용할 즈음 익스5.5를 맞추는 일이 점점 사라져갈 즈음입니다.
이미 익스플로러6.0이 나온지 9년이 다되어 갑니다. 지금 사용하고 있는css가 약 10년 정도 됐다고 하니까 거의 비슷하네요. 익스 6은 css를 지원했고, 대부분의 사용자가 이미 css를 지원하는 브라우저를 사용했습니다. 테이블 레이아웃에서 css를 이용한 레이아웃으로의 이동은 새로운 기술을 배워야 하고 사이트 자체를 뒤엎어야 하는 번거로운 일이었으며, 그로인한 반론들은 많았지만 이미 지원하는 브라우저를 많은 사용자가 사용중인 시점에서의 시도는 가능 했을 것이라고 생각 합니다.
실제로 이런 사이트 들이 하나 둘 생겨나고 장점들이 부각 되면서 이젠 css가 표준이 되었지요.
물론 클라이언트는 잘 모르겠지만요. 사용자가 알아체지 못하는 사이에 이미 웹은 한번 진화 했습니다.
사용자들은 그것을 지원하는(문제점은 있었지만) 브라우저를 사용하고 있었기 때문입니다.
하지만 지금은 아닙니다.
아직도 익스플로러 6 사용자가 50% 이상이고, 그외에도 7,8 브라우저 이용자가 많이 있습니다.
인터넷 익스플로러9가 나온다고 해도 사용자가 익스플로러9 이상의 브라우저를 사용하기 위해서는 꽤 많은 시간이 걸리지 않을까 라는 생각입니다. 네이버, 다음과 같은 포털에서 굿바이 익스6 캠페인등을 펼쳐 사용자 층의 인식개선을 위한 노력을 하는 것은 굉장히 좋은 일입니다. 덕분에 익스6을 다른 브라우저로 갈아타는 동시에 인터넷브라우저 라는 개념을 약간이라도 갖게 되기 때문이죠.
지금 우리는 약10%~15% 되는 사용자(크롬,사파리,오페라,파폭..)를 위해 크로스 브라우징을 열심히 하고 있습니다. 익스9 혹은 그외에 html5지원 브라우저 사용자가 80%이상 된다면 자바스크립트 라이브러리를 추가해서라도 html5의 편리한 기능을 널리 알리고 싶어 하겠으나 현실은 좀 어둡지요.
css레이아웃 적용 전파 시점과 현재는 시기적으로 조금 아니지 않을까 라는 생각이 듭니다.

4. 그럼 이렇게 html5 세미나도 많이 하고 사람들이 열광하는 이유는 뭐야!! 어쩌라고!!?
네..지금 html5 는 국내와 국외에서 열광하고 있습니다.
새롭고, 편하기 때문입니다. 우리가 원하는 장점을 많이 가지고 있습니다.
이렇게 좋은게 나와도 많은 개발자들이 알아야 사용합니다. 그래서 많은 새로운 시도들을 계속해서 우리들에게 노출시켜 줍니다. 그리고 이미 많은 사람들이 html5에 대해 알고 있습니다.
앞에서 말했듯 아이폰이나 안드로이드 폰과 같은 스마트폰 브라우저 에서 html5를 많이 지원하고 있습니다. 반대로 말해 개발자가 아닌 사용자 측면에서 html5 에 대해 아는 사람도, 관심 갖는 사람도 없습니다.
스마트폰이 대중화 되고 있지만 아직까지 피쳐폰 사용자가 더 많습니다. 그 많은 스마트폰 사용자 역시 서울 경기등 수도권에 밀집 되어 있지요. 우리가 느끼기에 모바일 웹이 엄청나게 커진것 같아 보이지만 그렇지 만은 않습니다. 분명 굉장히 많이 발전 되었고 성장했고 성장 중입니다. 중요한 것은 일부라는 것 입니다. 지금 이글을 보고 계신 당신이 스마트폰을 갖고 있다면 그 스마트 폰으로 웹브라우저를 열었을때 자주 가는 사이트는 정해져 있을 것 입니다. 지금 수없이 많은 모바일 사이트 들이 우후죽순 생겨나고 있는데 말이죠. 회사 입장에서 보면 (을의 입장) 단가가 그렇게 높지도 않은 웹페이지를 만들기 위해 html5까지 써가기엔 리소스나 효율면에서 적용하기 쉽지많은 않을 것 입니다.
개인적으로 제가 생각했던 모바일 웹은 일반 브라우저로 접근했을때의 페이지를 모바일로 접근했을때 좀더 보기 편한 css를 적용해서 만들어져 있는 방식입니다만 회사의 입장에서는 그것 역시 아니었나 봅니다.

html5와 css3를 이용하여 멋진 웹어플리케이션을 만들어 낼 수 있습니다. 이것은 스마트폰 사용자들을 주 대상으로 하는 어플리케이션 이기 때문에 인터넷 홈페이지와는 약간 다른 계념의 것 이군요.
하지만 홈페이지를 만드는데 있어서는 아직까지 너무나 넘어야 할 벽과 산이 많습니다. 홈페이지는 여러분이 지금 하고 계신 접근성 을 준수해야 하기 때문입니다. 이러한 산과 벽이 하루빨리 사라졌으면 하는 바램이 있지만 언제가 될지는 의문입니다.

html5에 대해서 많은 글들을 읽어 봤지만 하나같이 긍정적이고 희망적이어서 그 반대의 입장에서 개인적인 얼마안되는 지식을 짜내서 요렇게 긴 글을 써 봤습니다.

html5 에 대한 너무 많은 기대와 거품이 있지 않을까 라는 생각에서 말이죠. 저역시 html5에 대한 많은 기대를 하고 있습니다. 감사합니다.

테이블을 위한 자바스크립트 샘플

2010-06-17T15:13:00.000+09:00

게시판, 자료실 등에 테이블을 자주 사용합니다.

하지만 테이블의 디자인은 만만하지 않게 산출되어 나오지요.

오늘 제가 만들어 놓은 테이블은 대충 이런 식입니다.

흠...제가 디자이너 출신이긴 하지만..-_- 영귀찮아서 대충 쳐서 만든것이니....

모든 부분은 css를 만들어 클래스만 주면 쉽게 만들 수 있는 부분입니다.

하지만 잘 생각해보면, 각각 tr 의 짝수줄만 색이 들어가 있습니다.

또 가장 마지막 라인은 dashed 가 빠진 클래스가 들어가 있네요.

이게 하드코딩으로 들어가는 부분이라면 문제는 전혀 되지 않습니다. 그냥 각각 tr에 클래스 값을 따로 넣어 주면 되기 때문입니다. 하지만 만약 개발이 붙는 테이블이라면 얘기가 조금 달라지지요.

개발하시는 분께서 어느정도로 어떤식으로 코딩하느냐에 따라 다르지만 통상은 한개의 라인을 잡아서 반복문을 줘 버리기 때문이죠.

</colgroup>

<tr>

</tr>

<tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

<tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

<tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

</table>

위와 같이 각각 tr에 클래스를 먹이고 더군다나 마지막에는 두개의 클래스가 함께 들어갔습니다. 이럴경우 개발자분은...

<tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

대충 위와같이 tr하나를 잡고 서버사이드 언어를 넣어 반복을 주시지요.

물론 신경써서 하나한 잡아주시는 분들도 계시지만 웹퍼블리셔라는 직군이 생긴이상 이정도는 퍼블리셔가 만들어 넘겨 주는게 이상적이라고 생각이 됩니다.

충분히 접근성 높으면서 내용에 제약이 되지않고, 표준을 지키는 스크립트로 컨트롤이 가능하기 때문이죠.

먼저 css입니다.

table#con_table{width:500px; color:#555555; font-size:12px; text-align:center; border-top:1px solid #575757;border-bottom:1px solid #575757}

table#con_table a{text-decoration:none; color:#CDA9A9;}

table#con_table a:hover{text-decoration:underline; color:#892525;}

table#con_table th{background:#C2DAD6; padding:8px 0; border-bottom:1px solid #7B7B7B}

table#con_table td{padding:10px 0 10px 0; background:#fff;border-bottom:1px dashed #CDCDCD}

table#con_table tr.gry td{background:#f2f2f0;}

table#con_table tr.last td{border-bottom:0px;}

특별한것은 없고 각각 속성을 설정후 메인 td를 잡아주고, 각각 tr 클레스에 따라 td속성값을 따로 줬습니다.

결국 사용될 td속성은 세가지군요. 그냥 td , 회색배경 td, 마지막에 사용될 보더 없는 td, 추가로 회색배경과 보더없는 td는 함께 사용될 수 있습니다.

(설명이 어렵..-_-;)

다음은 코딩 입니다.

</colgroup>

<tr>

</tr>

<tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

<tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

<tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

<tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

<tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

<tr>

<td><a href="#">한국이 오늘은 꼭 이겼으면 좋겠습니다.</a></td>

</tr>

</table>

편의상 헤더부분등은 제외 했습니다.

또한 자바스크립트로 클레스를 추가 할 것이므로 tr에 클래스 등을 따로 넣지는 않았습니다.

이런 모습이 되겠군요.

다음은 자바스크립트를 코딩하도록 하겠습니다.

function tdBgChanger(){

var trs = document.getElementById('con_table').getElementsByTagName('tr');

var finalNum = Number(trs.length - 1);

for(var j=0;j<trs.length;j++){

if(j%2 == 0){

trs[j].className = 'gry';

if(j == finalNum){

trs[j].className = 'gry last';

}

}else{

if(j == finalNum){

trs[j].className = 'last';

}

tdBgChanger 라는 함수를 만들었습니다.

앞에서 만든 con_table 이라는 ID를 갖는 테이블의 tr 을 trs라는 변수에 저장해 두었습니다.

또, 마지막 tr에 클래스 값을 먹이기 위해 finalNum 이라는 변수에 전체 tr값에서 -1을 한 값을 대입해 저장해 두었습니다.

다음은 for문을 이용해 tr 수만큼 반복을 돌리는데 최초에 나오는 if문에서는 짝수열에 gry라는 클래스를 추가 합니다. 주의 하실 점은 for문을 돌리면 0 부터 반환을 한다는 것입니다. 따라서 첫째열에도 클래스가 적용됩니다.

하지만 첫째열은 th로 코딩되어 있으므로 클래스가 들어가더라도 스타일이 적용되지 않습니다.

첫번째 if문 안에 또다른 조건문이 있는데 이것은 모든 짝수 tr중에 마지막 tr이 존재할경우 rast라는 클래스를 추가로 주기 위함입니다.

그아래 else 다음으로 나오는 조건문도 마찬가지로 홀수 열 일경우중 마지막 tr이 포함되 있으면 gry가 없는 last클래스를 추가해 주는 거지요.

이렇게 하면 완성이네요.

소스도 보기 좋고 간단해 졌습니다. 개발자는 서버사이드 언어를 복잡하게 구성하지 않아도 되니 좋겠군요.

우리는 일일이 tr의 수를 세가며 클래스를 추가하지 않아도 됩니다.

개발이 붙은후 깨져서 보여지는 테이블을 굳이 수정해 주지 않아도 됩니다.

또한 자바스크립트를 꺼놓은 사용자 역시 컨텐츠 내용을 보는데 크게 제한사항이 없습니다.

아래 원본 샘플파일을 첨부해 두었습니다.

조금 허접하고, 위의 자바스크립트 보다 더 깔끔하게도 짤 수 있을듯 합니다만...

혹시나 모르시는 분도 계실까봐 이렇게 블로그에 올려 봅니다.

좋은 자료가 되어 드렸으면 좋겠네요.

테이블용 스크립트 샘플.html

포스카인드를 봤습니다.

2010-06-17T09:44:00.000+09:00

어제 오늘 해서 이틀간 반씩 나눠서 포스카인드 라는 영화를 봤습니다.-_-;

에초에 이게 외계인과의 접촉을 그린 영화라는 것 만 알았지 페이크 다큐 라는것은 정말 모르고 있었던 터라,

첫 장면 부터 등장하는 주인공의 '이영화는 실화를 바탕으로..어쩌구 저쩌구..' 하는 대사에 결국 낚여 버린 것 이죠.

여배우는 정말 이뻐

여자 주인공인 밀라 요보비치는 정말 이쁘더군요. -_-a 실제 연기도 그렇게 나쁘지 않은듯 했습니다.

단, 실제 영상이라면서 나오는 캠코더 촬영 영상이나, 혹은 방송인터뷰 하는듯 한 인터뷰 장면에서 나오는 실제 주인공역할을 하는 배우는 보기 흉하고 섬뜩하게 생겨서..

영화보다 중간중간 나오는 영상이 더 재밌는...

감독은 영화 중간중간 사실임을 강조하기 위해 캠코더로 촬영한 실제 인터뷰 및 기록 영상을 보여 줍니다. 물론 중요한 부분은 지직 거리면서 나오지 않고 소리만 들리지만, 이 영상이 실질적으로 더 흥미롭더군요.

페이크 다큐라는걸 모르고 보면 속을수도..-_-

페이크 다큐 장르인걸 모르고 본 본인은 영화를 보는 내내 무섭거나 재밌다기보다는 흥미로웠습니다.

그리고 영화를 다본 후에는 기분이 무지 나쁘더군요. 동시에 인간들이 저렇게나 많이 사라지고 죽고 의문 투성이에 저런 동영상까지 있는데 FBI들은 지금까지 뭘하나..라는 ..

이거 뻥 아닌가 라는 생각도 들긴 했습니다. 그치만 저같이 단순하고, 외계인이 있다고 믿는 사람들은 낚이기 좋은 영화 였네요.

- 개인적으로 외계인이 사람과 친해질지 어떨지 모르지만 그래도 이렇게 까지 나쁘고 무서울까 라는 생각은 했습니다. 사실 영화 후반부에 주인공이 외계인으로 빙의해(-_-;) 내가 신이라며 꺽꺽 되는 장면과 공중부양 장면에서 쫌 현실성이 떨어지기도 했죠. 아..이거 뻥일 수도 있겠다..라며..그치만 주구장창 사실이다.사실이다~라는 말이 나와서 굳게 믿은 제가 바보 였나 봅니다.

여튼 영화 본후 기분이 몹시 나빴는데 페이크 다큐라니 다행입니다. ㅡㅡ

킬링 타임용으로 괜찮은 영화 입니다.

자바스크립트로 xml문서 불러 들이기

2010-06-16T12:01:00.000+09:00

아시다시피 자바스크립트로 xml문서 연동이 가능합니다.

물론 이 방법은 접근성에 좋지 않습니다. 자바스크립트 미지원 혹은 꺼놓은 브라우저에서는 xml로 불러들인 내용을 전혀 알 수 없기 때문에 중요한 컨텐츠나 주요 네비게이션에서에서 사용시 반드시 대체 내용이 들어가야 하거나 지양해야 합니다. 하지만 이럼에도 불구하고 js 나 xml을 이용한 네비게이션을 많이 사용하는 이유는 유지보수, 운영의 편의성 때문입니다.

큰 예로 플래시로 이루어진 네비게이션 등에 많이 사용되는데, fla파일을 열어 일일이 메뉴를 수정하고, 또 그것을 swf로 내보내는등의 수고 없이 xml문서만 열어 수정하면 되기 때문에 그 편의성 및 시간의 절약에 효과적이라고 할 수 있습니다. 이는 플래시가 아닌 일반 코딩 네비게이션에서도 마찬가지 입니다.

수백 페이지에 달하는 사이트에서 해당메뉴 링크 하나를 수정하기 위해 그 버튼이 들어있는 페이지 들을 일일히 열어보기는 힘들기 때문이죠. 언제나 득과 실이 있는 법인듯 합니다.

따라서 사람들은 접근성에 치명적 약점이 있음에도 불구하고 xml연동, 혹은 url만 js로 빼놓는 방법에 환호하며, 많이 사용하고 있습니다. 실질적으로 자바스크립트를 미지원하는 브라우저나 혹은 꺼놓은 사용자가 극 소수 라는 판단하에 작업을 진행 하는 것 이죠.

아래 기술되는 내용은 제가 구글링 과 관련 서적등을 통해 습득한 내용이므로 오류 등이 포함되어 있을 수 있습니다. 오류 및 버그, 잘못된 내용들에 대해 답글 및 메일 보내주시면 확인후 수정 하도록 하겠습니다.

그럼 xml접근 방법에 대해 알아봅니다.

xml을 연동하기 위해서는 먼저 익스플로러와 익스플로러 외의 브라우저 호환성을 맞춰 주어야 합니다.

익스플로러7버전 및 이하버전에서는 XML 객체를 ActiveX컨트롤러로 제공하며, 그외에 브라우저는 브라우저 내장객체로 제공합니다.

var xmlDoc=null;

if (window.ActiveXObject)

{

// IE용

xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

}

else if (document.implementation.createDocument)

{

// Mozilla, Firefox, Opera, 기타 용

xmlDoc=document.implementation.createDocument("","",null);

}

else

{

alert('XML을 사용못하는 브라우저입니다.');

}

아...태그 및 스크립트용 css,js를 만들어 놔야 겠네요..ㄷㄷ..

window.ActiveXObject 를 지원하는 브라우저와 document.implementation.createDocument 를 지원하는 브라우저를 구분하여 각각 xmlDoc에 저장합니다. 과거 header정보를 통해 브라우저를 구분하기도 했었지만 그 방법은 절대 좋은 방법이 아니라고 하는군요.(헤더 정보는 쉽게 변경할 수 있기 때문에 정확하지 않다고 합니다)

여기까지 xml객체를 가지고 오는 방법 이었습니다.

이상입니다......(-_-..장난입니다.)

다음은 xml객체에 있는 아이들(??)을 꺼내다 써야 겠죠.

방법은 간단합니다. 물론 이방법이 정답은 아니며, 또한 어떤곳에 사용하느냐에 따라 다르게 코딩할 수 있습니다.

if (xmlDoc!=null){

xmlDoc.async=false; //xml문서를 완전히 읽을 때 까지 실행을 중지

xmlDoc.load("menu.xml"); //xml로드("경로")

var x=xmlDoc.getElementsByTagName("desc"); //xml 문서 내에 있는 desc이라는 태그에 접근

}

xml을 어떤식으로 짰느냐, 어떤식으로 구조화 했느냐에 따라 사용법 및 기타 방법은 달라 지겠습니다.

xml문서내에 <desc> 라는 태그에 접근하는 것 까지만 코딩 해 두었습니다. 그냥 저런식으로 접근하면 불러 올수 있다...라는 식으로, 나머지도 DOM을 이용한 접근방법을 어느정도 아신다면 어렵지 않으시리라 생각 됩니다.

물론 getAttribute로 속성값에 접근이 가능 하겠죠.

문서로 빼내는 방식은 여러분 자유 입니다. document.write 를 사용하셔도 되겠네요.

여기까지 허접한 퍼블리셔의 xml 연동 이었습니다.

여러모로 쓸데가 많지만 실상 저는 잘 사용은 하고 있지 않습니다. 이미 플래시에서 이부분들을 대체하고 있기 때문에 굳이 제가 xml에서 무언가를 불러와 써야할 이유가 없었거든요. 추가로 저희 회사에서도 xml에서 메뉴를 불러오기 보다는 js파일에 url코드들을 불러와 인수호출 하는 방식으로 사용하고 있어 특별히 xml에 깊이있게 공부 한적도 없습니다.

단. 모르는 것 보다는 아는게 힘이 되기 때문에 항상 공부하는 마음으로 ...

뭐 이런 이유로 이번 기회에(회사가 한가함..ㅡㅡ) 블로그 해 봤습니다.

허접하지만 도움이 되었으면 합니다.(여기까지 읽으셨으면 리플도 달아주세요-0-a)

감합니다.

접근성을 높이는 자바스크립트

2010-06-15T14:54:00.000+09:00

얼마전 하코사에서(http://www.hacosa.com) 어떤 분이 질문 하시길 접근성을 해치지 않기 위해 자바스크립트를 사용하지 않고 css만으로 경고창을 띄우는 방법에 대해 물어 보셨습니다. 이 질문에 대한 답은 자바스크립트를 사용한다고 해서 접근성을 해치는 것은 아니다. 였지요.

웹표준과 웹 접근성이 부각 되기 시작하면서 자바스크립트에 대한 잘못된 견해를 보이시는 분들이 생겼습니다.

그중 하나가 자바스크립트가 접근성을 해친다는 것 입니다.

html, 브라우저 등과 함께 발전되어 온 것이 자바스크립트 입니다. 네스케이프와 익스 플로러 간의 브라우저 1차전때 부터 논란이 되어온 자바스크립트는 현재 어느정도 표준안이 제시되었고, 이제 자바스크립트 없이 웹페이지를 만들어 낸다는 것 은 사용자 환경을 배제한체 홈페이지를 만들어 내라는 말과도 같은 뜻이 될 정도로 중요하고 많이 사용되고 있습니다.

그렇다면 왜 접근성과 함께 자바스크립트가 논란이 되었는지 생각해 봐야 합니다.

구버전 스크립트의 사용

과거 브라우저 전쟁때(1996~1999 익스플로러와 네스케이프) 생겨난 라이브스크립트, j스크립트 등의 비표준 스크립트를 현재까지 사용함으로서 지원하지 않는 브라우저등이 있을수 있습니다. 예로 document.all , document.layers 등이 있겠습니다. 이때는 익스플로러와 네스케이프가 자신의 스크립트를 표준으로 만들기 위해 서로간의 호환성을 아주 떨어지게 만들어 낼 때였습니다.

innerHTML 의 사용

생각보다 많이 쓰이는 스크립트중의 하나입니다. 원하는 위치에 스크립트로 구성해놓은 태그를 삽입합니다. 하지만 이 방법은 어떻게 보면 매우 접근성을 떨어뜨리는 방법 입니다. 자바스크립트를 지원하지 않는 브라우저(물론 거의 모든 브라우저는 자바스크립트를 지원합니다.)혹은 자바스크립트를 꺼놓은 사용자의 경우 innerHTML로 구성된 내용은 확인할 수 없습니다.

자바스크립트를 이용한 url 접근

쉽고 효율적인 사이트 운영을 위해 사이트의 url을 한페이지의 js에 넣어두고 이를 함수로 호출해서 사용하는 방법이 있습니다. 유지보수 면에서 이만큼 효과적인 방법은 없습니다. 예를들어 한개의 메뉴가 바뀌면 이를 위해 수십페이지의 해당 메뉴 링크를 모두 변경해 줘야 하기 때문입니다. 그러다 보면 빠뜨리는 페이지 들도 생기게 되지요. 하지만 반면에 자바스크립트를 지원하지 않는 브라우저나 자바스크립트를 꺼놓은 사용자는 메뉴를 눌러 컨텐츠 접근을 하는데 제한이 됩니다.

특정 브라우저에 해당되는 스크립트 사용

가장 큰 예로 익스플로러에서 지원하는 미디어플레이어가 있습니다.

익스에서는 미디어플레이어 컨트롤러를 자바스크립트를 이용해 접근, 제어 할 수 있습니다.(버튼, 이미지등)

하지만 이렇게 해 놓으면 다른 브라우저에서는 해당 동영상을 볼 수 없습니다.

location.replace("")

사용자가 뒤로 버튼을 누를경우 다시 앞페이지로 이동되어 접근성을 해치며, 사용자 환경에도 좋지 않은 영향을 줍니다.

이밖에도 미처 생각하지 못했던 스크립트들이 접근성을 해치는등의 문제가 발생하여 자바스크립트는 접근성에 위배된다는 인식이 퍼지게 된것인지 모릅니다.

또한 예전에 짜 놓은 스크립트들을 무분별 하게 퍼다 쓰게 되어 생기는 문제점들도 있을 것 입니다.

css만으로도 만들어 낼 수 있는 여러가지 방법들을 무시한채 자바스크립트만으로 모든 것을 해결하는 것 또한 문제가 된다고 생각합니다.

눈에 띄지 않는 스크립트

2002년 스튜어트 랭그리지 는 '눈에 띄지 않는 스크립트'라는 용어를 만들었다고 합니다.

해당 내용은 PPK 자바스크립트 라는 책에서 일부 발췌 합니다.

스크립트는 사용성이 높아야 한다. 즉 스크립트는 사이트의 사용성을 눈에 띄게 높여야 한다.
스크립트는 접근성이 높아야 한다. 즉 웹페이지는 자바스크립트가 동작하지 않더라도 읽을 수 있고 이해할 수 있어야 한다.
스크립트는 구현하기 쉬워야 한다. 웹개발자가 스크립트를 웹페이지에 포함시키고 자바스크립트 훅(hook)을 추가하기만 하면 스크립트가 동작해야 한다.
스크립트는 분리돼야 한다. 스크립트는 HTML안에 흩어져 있는 것이 아니라 js파일에 따로 존재해야 한다.

html로 코딩을 한뒤 css로 표현을 하고, 자바스크립트로 동작되게 만들되 자바스크립트가 동작하지 않더라도 페이지를 읽는데 제한이 없어야 한다는 거죠.

접근성을 위한 스크립트...

굉장히 머리아픈 부분입니다.

첫째로 스크립트가 지원되지 않는 브라우저에서도 문제가 없어야 한다는 것입니다.

둘째는 마우스가 없을때도 웹을 돌아다니는데 제한이 없어야 합니다.

셋째로 스크린리더에 대한 접근성을 지켜 줘야 합니다.

위 세가지 만을 지키기 위해서도 굉장히 많은 공부를 해야 합니다. 또한 많은 생각을 해야 하지요.

첫번째의 가장 큰 예로 display:none 인 div 가 있고 사용자가 일정 이벤트를 호출했을때 해당 div 스타일이 block으로 바뀐다고 했을때 자바스크립트가 꺼져 있는 브라우저는 해당 내용을 확인 할 수 없습니다.

이를 해결하기 위한 간단한 방법은 자바스크립트를 이용해 해당 div의 display속성값을 none으로 잡아 주는 것입니다. 자바스크립트가 꺼져있는 브라우저는 해당 div의 속성값이 none으로 변하지 않아 페이지를 읽는데 제한이 없을 것 입니다.

둘번째의 예는 onmouseover이벤트에 onfocus이벤트도 같이 사용해야 한다는 것입니다.

세번째는 조금 길어집니다.

스크린리더기의 종류와 스펙이 상이하기 때문이죠.

제가아는 가장 큰 문제는 스크린 리더가 자바스크립트를 거의 지원하며, 페이지를 위에서 아래로만 읽고, 페이지를 줄단위로만 읽을 수 있다는 것입니다. 스크린 리더에 대한 문제 및 이를 위한 방법등은 구글링 등을 통해 알아 보시면 많은 방법들을 접하실 수 있을 것입니다.

이밖에도 많은 부분들을 생각하며 자바스크립트를 짠다면 접근성을 해치는 스크립트를 지양할 수 있을 것이라고 생각 합니다.

자바스크립트는 편리하며 보다 좋은 사용자 환경을 만들어 줍니다.

CSS가 널리 퍼지면서 가끔 무리하게 CSS만을 이용하시는 분들이 주변에 계십니다.

흔하게 사용되는 롤오버 이미지, 탭 등이 있습니다.

하지만 각각 오버되는 이미지들의 크기가 상이하고, 탭에는 시스템폰트가 전혀 사용되지 않았을때, 혹은 기타의 경우 굳이 CSS많을 고집하여 수많은 클래스와 아이디를 생성하고, 이에따라 몇십줄이 넘는 css를 추가하는것은 비효율 적이라고 생각 됩니다.

자바스크립트도 접근성을 고려하여 코딩한다면 절대 사용하지 말아야할 도구가 아닙니다.

차후에 블로그 등을 통해 몇가지 예제등을 올리도록 하겠습니다.

지금은 시간이...

긴글 읽어 주셔서 감사합니다.

egg 구매

2010-06-15T10:10:00.000+09:00

올해 초 아내에게 노트북도 주고 나도 와이브로를 사용할 목적으로 와이브로 50G상품을 가입하면서 노트북을 한대 상품으로 받았습니다. 뭐..노트북이야 아내가 잘 사용하고 있지만, 와이브로의 활용도는 그렇게 높지 않더라구요. 노트북을 매일 들고 다니기도 귀찮고, 요즘은 거의 대부분 와이파이가 잡혀서 실상 방 구석에 모셔두고 다달이 돈만 내고 있었습니다.

사실 egg라는 녀석은 이미 와이브로 가입때 부터 알고는 있었지만 단가가 높아서 쉽게 구매하기 그랬는데, 이번에 중고장터에 새제품을 7만원에 올려 두신 분이 계셔서 구매하게 되었습니다.

가방에 조금 넣어가지고 다녔더니 붙어있던 녀석이 달랑달랑 거리네요-0-; 떼버려도 되지만 그래도 조금더 새제품 냄새를 풍기기 위해...

사이즈 비교 사진을 찍었어야 되는데 깜빡 했네요. 아이폰과 비교했을때 아이폰보다 조금 작고 두껍다고 생각하시면 됩니다.

전원버튼은 바닥에 붙어 있습니다.

4초정도 누르고 있으면 전원이 켜집니다.

리셋버튼은 기기 다운시 사용합니다.

전원을끌때도 마찬가지로 4초~6초정도 누르고 있으면 꺼지고, 20초 이상 누르면 공장 초기화가 됩니다.

전원이 켜지면 우측이 베터리 잔량 , 중간이 wifi, 좌측이 와이브로 수신률 입니다.

베터리 잔량은 색으로 표시되며 완충시 녹색불 입니다.

충전 및 와이브로 유심을 꽂는 곳입니다. 고무로 덮어둘수 있어 먼지등의 이물질로 부터 보호 하고 외관상 보기도 깔끔합니다.

패킷을 열면 유심을 꽂는곳과 충전기 꽂는곳이 있습니다.

휴대폰 충전기와 동일한 슬롯입니다.

동봉되는 충전기로 충전할 것을 권장하며, 일반 휴대폰 충전기로도 충전이 가능합니다.

컴퓨터 USB로 충전을 시도했으나 충전되지 않네요. 아마 USB전압 문제인듯 합니다.

충전은 약 4시간 정도면 완충 되는듯 합니다.(자세한 사항은 관련 메뉴얼 참고)

와이브로 수신률은 양호합니다.

다른 사용자 분들이 적은 글들도 검색해 보면 아시겠지만 생각보다 꽤 잘 잡아내는듯 합니다.

사용시간은 설명서에 사용대기가 아닌 실제 사용시간이 4시간으로 표기되어 있습니다.

실제 사용하면서 4시간을 풀로 켜둔적이 별로 없네요.

출퇴근시간 아이폰 웹서핑 및 동영상감상용 등으로 사용하기 때문에 필요할때만 켰다가 필요없을때는 끄는데,

베터리가 부족하다는 생각은 안들더군요.

뭐 사실 부족한건 아이폰 베터리죠-_-;

워낙 와이브로 자체가 속도가 안좋지만 아이폰으로 데이터 통화료 걱정을 하며 3G망을 사용하는것 보다 더 좋다고 생각하고 사용하고 있습니다. 지하철 에서는 거의 터지는듯 하구요. 6~7월즈음 업그레이드가 되어서 속도문제도 조금 개선된다고 하는군요. 다달이 돈만내면서 썩던 와이브로를 효율적으로 사용하게 되어 만족하면서 쓰고 있습니다.

아...추가적으로 얼마전 아이폰 및 기타 휴대기기를 충전할 수 있는 5200mA짜리 보조 베터리를 구매했는데 오늘 택배 오겠네요. 기대하고 있습니다. 요녀석이 있으면 에그도 충전이 가능하기 때문에+_+..

html5에 대한 퍼블리셔의 생각

2010-06-14T18:01:00.000+09:00

이제 드디어 본격적으로 HTML5 와 관련된 책들이 나오는군요.

저도 그중 한권을 사서 훑어 보고 있습니다. 분명 혁신적이고 참 좋은데 실질적으로 바로 써먹을 수 없는 현실 때문인지

집중해서 보게 되지는 않네요.

물론 크론, 사파리, 파이어폭스 등의 브라우저가 HTML5의 현재까지나온 어느정도를 지원하고 있지만 아직까지 개발중인 언어임이 분명하므로, 어느순간 어떤 오브젝트가 생기고 사라질지 모르기 때문에 책의 앞 부분에서도 저자가 경고 하길, 이책이 쓰여지는 시점 이라는 기준을 분명히 잡아 주더군요.

꾀나 관심 가고 흥미로운 것 은 사실입니다.

솔직히 웹표준 코딩 을 위한 웹퍼블리셔가 생겨났고(혹은 UI개발자 라는), 이를 필요로 하는 회사들도 많이 생겨 났지만,

과연 제가 웹퍼블리셔로 이 위치에서 어느정도의 가능성을 확보할 수 있을까 라는 의문이 들었습니다.

HTML이라는것 자체가 누구나 쉽게 접근할 수 있고 습득할 수 있는 쉬운 문서 언어라는 것이기 때문이죠.

사실상 문서 자체를 만드는 것 은 내용과 관련된 태그들만 잘 알고 있다면 어려운 것은 아니니까요.

실제로 디자이너 = 코딩 이라는 개념을 갖고 있는 에이전시 및 업제도 많고, 외국에서도 비슷한 개념의 회사들이 종종 있다고 하더군요.

문제는 디자인 산출물을 CSS를 이용해 레이아웃을 잡고 그에따른 코딩과 크로스 브라우징을 해주고 하는 것 들이죠.

CSS로 레이아웃 과 디자인을 입혀 나가는 것 은 분명 매력있는 일일 수 있으나 짧게는 1~2년 에서 길게 4~5년 정도 경력이 쌓이시면 여기서 더 깊이 파고들고 싶은 무언가가 없어지는 공허함이 있을 수 있다고 생각 됩니다.(이건 어디까지나 저의 개인적인 생각입니다.)

그래서 자바스크립트라는 추가 무기를 갖게 되는건데요. 개인적으로 자바스크립트는 웹퍼블리셔가 정년을 늘리는데 한몫 할 것이라고 생각하고 있습니다. 아마도 자바스크립트 까지 어느정도 하시는 분들은 추가적으로 제이쿼리나 제이슨등을 서브로 잡고, 서버사이드 언어를 약간 공부하셔서 Ajax까지 구연하시는 분도 계신걸로 알고 있습니다.

이렇게 되면 개발자와 웹퍼블리셔(혹은 UI개발자..등등)의 업무가 중복되거나 모호해 지는 부분들이 많습니다.

저는 조금더 깊게 생각하게 되었습니다. 내가 웹에 발을 들여 놓은지 얼마 안되었으나, 살아 남기 위해서는 코딩하는 디자이너 혹은 코딩하는 개발자 사이에서 살아남을 수 있는 무언가가 확실히 필요 하겠다 싶었습니다.

이때 HTML5라는게 눈에 들어 왔는데요.

개인적으로 HTML5는 웹쪽 일 하시는 분들, 그중에서도 코딩을 맡고 있는 직군에서 주로 관심을 갖고 있었을뿐 일반에게 알려지지는 않고 있었는데요, 여기서 애플의 잡스가 한건 하죠.ㅡㅡ;

플래시 대체로 HTML5를 발언하면서 언론 및 각종매체에 어느정도 HTML5에 대한 소개 기사가 뜨게 됩니다.

개인적인 생각(자꾸 개인적인 생각이..)으로 HTML5를 쓰려면 언제쯤일까 라는 생각을 해봤습니다.

어떤 분은 2020년...어떤분은 더 멀게 보시는 분도 계시고 어떤분은 2012년...이라는 분도 계시더군요.

저는 2012년 ~2015년 사이정도로 보고 있습니다.

HTML5 개발이 완료되는 시점에서 HTML5의 사양을 따르는 브라우저가 두개이상 존재해야 한다고 하는데 이미 많은 브라우저가 현재 사양을 따라 계속적으로 업데이트 되는 중이므로 개발 완료와 동시에 표준이 되지 않을까 싶네요.

문제는 익스플로러 입니다.

우리는 앞으로 익스6,7,8 과 싸워야 할지도 모르겠군요..ㅡㅡ;

책을 보다 보니 추가된API를 모두 소화해 내기 위해서는 신규 직군이 필요할 수 도 있겠다는 생각이 들 정도 였습니다.

이게 모두 웹퍼블리셔의 몫이겠구나 라는 생각을 넘어서 말이죠-_-

향후 몇년간 얼마나 많은 분들이 웹퍼블리셔라는 직군으로 넘어오시거나 혹은 타직군으로 빠져나갈지는 모르지만, 확실한것은

앞으로의 웹퍼블리셔의 진로는(현재로서는) 희망적이다 라는 생각입니다.

익스9가 어느정도로 HTML5를 지원할지도 의문이긴 하지만 지원하겠다고 했으니 지원하겠죠.

물론 HTML5가 표준으로 채택되더라도 몇년 혹은 10년이상 익스플로러 잔재를 위해 예전같은 (네스케이프와 익스를 맞추기위해 JS파일을 따로두는등)일을 반복하게 될지 모르지만. 어찌 되었든 앞으로의 웹은 빠르게 발전하고 변화하고 있으므로 우리들은 이에 맞춰 나가야 할듯 합니다.

이 블로그가 모바일에서 이렇게 심하게 접근성이 떨어지는지..

2010-06-14T13:41:00.000+09:00

텍스트 큐브 기본 스킨을 사용하고 있는 이 블로그가 모바일 사파리에서 글을 보는게 제한되는지 오늘에서야 알았다-_-; 이런 제길..ㅠ,.ㅜ;

귀찮지만 조만간 조금씩 뜯어 고쳐 줘야 겠다...에혀...정말 귀찮은거 질색인데....엉엉...

자바스크립트를 이용한 그래프

2010-06-14T13:36:00.000+09:00

DOM을 이용해서 그래프를 만들었다.

코딩도 상당히 까다로웠지만 생각보다 재밌는 스크립트 였던것은 분명하다.

굳은 머리가 잘 안돌아 갔으나.-_-

function graphControls(){

var maxNum = 100;//그래프 맥스 인원

var minBars = 392;

var maxBars = 493;

var barsWidth = 101;

var hitNum = document.getElementById('graph_ul');

var hitarr = new Array;

var moveBars = new Array;

for (var i=0;i<4;i++ ){

hitarr[i] = document.getElementById('graph_num'+i).firstChild.nodeValue;

moveBars[i] = (Math.floor(Number(minBars+(barsWidth*(hitarr[i]/maxNum))))<(minBars+maxNum))?Math.floor(minBars+(barsWidth*(hitarr[i]/maxNum))):maxBars;

}

for (var j=0;j<4 ;j++ ){

document.getElementById('bars'+j).style.left = moveBars[j]+'px';

document.getElementById('point'+j).style.left = moveBars[j]+94+'px';

}

분명 누군가 혹시라도 이글을 보고 가져다 사용하시려 하신다면 말리고 싶다.

그렇게 잘 짜여진 스크립트도 아닐 뿐더러, 이벤트용 단기성 으로 만들어 진 것이며, 그래프가 거의다 그럴것이기 때문에 그때그때 필요에 따라 코드가 바뀌어야 하기때문에..-_-;

이건 그냥 나를 위한...흔적??쿠쿡...

아이폰,안드로이드 운영체제 Touch Event

2010-03-30T09:45:00.000+09:00

모바일 브라우저의 Touch, Gesture Event 처리 방법에 대해서 정리해봅니다.

다른 여러 사이트에서 아이폰에대해서는 정리가 많이 되었던데요...

저는 http://backtothecode.blogspot.com/2009/10/javascript-touch-and-gesture-events.html 이 블로그를 참조하여 아이폰과 안드로이드 폰에 대해서 함께 정리하여 봅니다.

Android and iPhone touch events

Android, iPhone은 공통적으로 터치와 관련해서 다음과 같은 이벤트를 제공합니다.

touchstart - mouseDown 이벤트와 비슷한 이벤트로 손이 화면에 닿으면 발생
touchmove - mouseMove 이벤트와 비슷한 이벤트로 손 터치한 상태로 이동하면 발생
touchend - mouseUp 이벤트와 비슷한 이벤트로 손을 화면에서 뗄때 발생. 아이폰의 경우 touchcancel 이벤트가발생
touchcancel - bit of a mystery 라고 표현하네요. 쬐금 이상하다는...

예제)

document.addEventListener('touchstart', function(event) {


    alert(event.touches.length);

}, false);

Event object

위의 예제에서 보듯이 Touch Event Object는 touches array를 포함하고 있다.

안드로이드의 경우 이벤트에는 한개의 터치 오브젝트를 포함한다. 즉 touches.length는 1이다.

터치 아이폰의 경우에는 멀티터치가 가능하기 때문에 touches array를 통해서 핸들링 할 수 있다.

터치 이벤트 객체는 마우스 이벤트 객체와 같이 pageX, pageY 등의 값들을 포함하고 있다.

예제 )

document.addEventListener('touchmove', function(event) {


    event.preventDefault();


    var touch = event.touches[0];


    console.log("Touch x:" + touch.pageX + ", y:" + touch.pageY);

}, false);


clientX: X coordinate of touch relative to the viewport (excludes scroll offset)

clientY: Y coordinate of touch relative to the viewport (excludes scroll offset)

screenX: Relative to the screen

screenY: Relative to the screen

pageX: Relative to the full page (includes scrolling)

pageY: Relative to the full page (includes scrolling)

target: Node the touch event originated from

identifier: An identifying number, unique to each touch event

iPhone Touch and Gesture Events

애플의 WebKit은 안드로이드와 달리 몇가지 것들을 추가적으로 지원한다. touchEnd 이벤트는 event.touches array에서 현재 touch 를 제거해준다. 대신 event.changeTouches array를 이용해서 볼 수 있다.

애플 iPhone의 터치 이벤트 객체

touches - touchStart, touchMove, touchEnd 의 터치 정보를 포함하고 있는 array
targetTouches - 같은 target Element로부터 비롯된 touches 정보를 포함
changedTouches - 모든 touch 정보를 가지고 있는 객체

Gesture events

애플에서는 pinching, rotating과 같은 멀티 터치 이벤트를 처리할 수 있도록 지원한다.

gesturestart - 멀티 터치 시작
gesturechange - 멀티 터치를 해서 움직일 때 발생
gestureend - 멀티 터치 이벤트가 끝날때 발생

멀티 터치를 위한 이벤트 객체는scale, rotation 값을 갖고 touch 객체가 없다.

예제 )

document.addEventListener('gesturechange', function(event) {


    event.preventDefault();


    console.log("Scale: " + event.scale + ", Rotation: " + event.rotation);

}, false);

Event table

touchstart	touchmove	touchend	gesturestart	gesturemove	gestureend
Android	y	y	y	n	n	n
iPhone	y	y	y	y	y	y
has event.touches	y	y	y	n	n	n
(iPhone) has event.scale and event.rotation	n	n	n	y	y	y
(iPhone) touch in event.touches	y	y	n	-	-	-
(iPhone) touch in event.changedTouches	y	y	y	-	-	-

원본 : http://blog.hometown.co.kr/123

※ 참고 Link :

http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

http://developer.apple.com/safari/library/documentation/appleapplications/reference/SafariWebContent/HandlingEvents/HandlingEvents.html

모바일 웹 테스트

2010-03-30T09:30:00.000+09:00

요즘 모바일 웹 쪽에 관심이 생겨 여러가지 테스트를 진행중에 있습니다.

아무래도 일반 웹 브라우저와 많은 부분이 다르기때문에 테스트를 감행해서 조건들을 정리 할 생각이었죠.

얼마전 하코사 묻고 답하기 게시판을 통해 좌표를 중심으로 회전하는 레이어를 만들었습니다.

http://www.superweb.kr/

총 12개의 레이어가 원을 그리며 회전을 합니다.

물론 웹상으로 문제 없지만 모바일에서의 구현이 궁금했습니다.

이미 국 내외로 아이폰 유저가 많기때문에 플래시를 이용한 UI구현은 지양하도록 했습니다.(지양이라기 보다는 아예배제 하구요..) 사실 플래시는 CPU 점유율이 높아 대부분의 모바일 폰 CPU로는 아직까지 무리가 있지 않을까 싶은 생각도 있구요. 물론 모바일 플래쉬 플러그인을 배포한다고 하지만 그것역시도 약간의 문제가 있을듯 합니다. 아마도 스티브 잡스가 플래시를 배제한 이유중 하나가 아닐까 해요.

자바스크립트 역시 마찬가지 입니다.

특히 용량이 큰 이미지, 레이어 등을 좌표를 추적해 돌리게 되면 cpu 혹은 gpu 점유율이 늘고 메모리 또한 많이 먹어서 스마트 폰 의 다운, 혹은 버벅임 등이 나타날꺼라는 예상을 한 가운데 테스트를 진행했습니다.

결과로는 예상대로 제 핸드폰(뉴쵸콜릿)에서는 모바일 웹브라우저(모바일 익스플로러 6 기반)로 테스트 결과 엄청난 버벅임 현상이 나타났습니다. 움직이긴 하더라고요..-_-; 이것은 돌아가는 레이어가 1개이든 10개이든 마찬가지 였습니다.

아마도 수학 함수를 개산하여 0.01초 단위로 계산하여 브라우저로 뿌려주는 계산식 자체가 제 휴대폰으로는 무리였지 않을까 싶습니다.

두번째로 아이폰(3GS / 모바일 사파리브라우저)으로 테스트 했습니다. 결과는 저의 예상을 깨고 너무도 잘 보였습니다.-_-!!!

물론 PC로 볼때보다 약간의 속도차이는 있었으나 무리없이 처리해 내는 것 을 확인할 수 있었습니다.

모바일 브라우저중 속도가 늦는 쪽에 속하는 사파리 인데도 무난한 처리능력을 보여주네요. 추후에 옴니아1,2 ,블렉베리 등의 스마트 폰으로 추가 테스트를 거쳐봐야 할듯 하지만 곧 요정도의 스크립트도 모바일 브라우저용 페이지로 제작할 수 있지 않을까 라는 생각을 해봤습니다.(물론 당장을 힘들지요. 레이어 안에 이미지, 텍스트 등이 추가된다면 아이폰에서도 분명 속도 저하 현상이 발생할 것 입니다.추측..)

일단 브라우저에서 자바스크립트를 구현할때 어느정도 처리속도를 보이는가 에 대해서는 만족스러운 결과 였습니다.

결론은 아직은 무리 일 수도 있다..라는 것이지만요-_-;

또다른 테스트는 http://www.superweb.kr/ddd.html (소스 블루비 펌( http://www.blueb.co.kr/ ))

를 모바일브라우저로 확인하여 드레그 엔 드롭이 가능한가 였습니다.

결과는 위 테스트 헨드폰 두기종 모두 불가능 이었습니다.

또한 예상대로 이미지(jpg) 용량때문인지 아이폰에서도 움직임이 부자연 스러웠습니다.

일반적으로 사용하는 onmousedown, onmouseup 이벤트 헨들러는 터치폰, 비 터치폰 모두에서 사용이 불가한듯한 예상입니다.

그러나 아예 불가능 한 것 이 아니라는 것 을 보여주는 사이트가 있었는데요.

http://m.sevnthsin.com/iphone

위 사이트는 모바일 브라우저에서만 동작됩니다.(아이폰만 확인,css3 지원가능 모바일 브라우저용인듯 합니다)

아이콘을 드래그해서 원안에 넣으면 이벤트가 동작하네요.

소스는 좀더 확인해 봐야 할듯 합니다.

스마트폰의 등장, 스마트폰 하드웨어의 고사양화 등(요즘은 피쳐폰도 고사양으로 나오는듯...)으로 모바일 웹이 한층더 발전할 듯 보여집니다.

스마트폰 이용자중 대다수가 집에서도 스마트폰으로 인터넷을 한다고 하니까요.

오늘은 자바스크립트에 관련된 내용들이 주였지만 앞으로 html, css , width, height 등의 테스트를 좀더 많은 모바일기기로 테스트해서 올리도록 하지요.

추가적인 의견, 오류, 조언등을 달아주세요. 많은 분들께(물론 저 포함)도움이 됩니다.

감사합니다~^^

모토로이 (모토로라/안드로이드) 에서 테스트 결과 보고해 드립니다.

1. http://www.superweb.kr
정상작동합니다. PC에서 보는 것에 비해 속도가 다소 느리긴 했습니다만, 이것은 cpu 처리속도가 부족해서라기보단 렌더링 방식의 차이가 아닐까 추측하고 있습니다. (프레임은 전혀 떨어지지 않았기 때문입니다) 좌측 상단 좌/정지/우 내비게이션도 정상적으로 작동합니다.

2.http://www.superweb.kr/ddd.html
사진을 직접 클릭하는 이벤트는 발생합니다만 아이폰과 비슷한 정도로 움직임이 부자연스럽습니다. (=프레임이 떨어집니다) 하단 내비게이션 drag n drop 은 아예 되지 않습니다.

3. http://m.sevnthsin.com/iphone
drag n drop 작동됩니다. 프레임이 매끄럽지는 않은 수준이라 아쉽습니다.

Math를 이용한 좌표따라 돌리기

2010-03-23T13:55:00.000+09:00

자바스크립트 수학함수(?)인 Math를 이용해서 레이어를 한번 뺑글뱅글 돌려 봅시다-_-;

이걸 해결하기 위해 정말 애먹었음. 역시 공부를...ㅡㅡ;

회전레이어 연습.html

다운받아 보면 됨..-_-;

대략 중요한 공식은..아..나중에 써야..

pre태그

2010-03-02T16:35:00.000+09:00

줄바꿈 등을 br테그 없이 마크업한 그대로 웹상에 그대로 노출 시킬때 사용하는 태그이다.

<pre>

코드입니다.

하하...

</pre>

와 같이 사용하며,

코드입니다.

하하...

로 출력 된다.

익스플로러 체크하기

2010-03-02T16:32:00.000+09:00

유저가 사용중인 브라우저가 익스플로러인지 아닌지를 확인하는 소스 이다.

소스는 굉장히 비효율적인 방법으로 코딩되어 있는데, 익스5.5 부터 익스 8까지를 각각 확인 한 후 아닐경우 else로 넘긴다.

function BrowserCheck(){
var appname = navigator.appName;
var useragent = navigator.userAgent;
if(appname == "Microsoft internet Explorer") appname ="IE";
IE55 = (useragent.indexOf('MSIE 5.5')>0); //5.5버전
IE6 = (useragent.indexOf('MSIE 6')>0); //6버전
IE7 = (useragent.indexOf('MSIE 7')>0); //7버전
IE8 = (useragent.indexOf('MSIE 8')>0); //8버전
if(appname == "IE" && IE55 || IE6 ||IE7 || IE8){
alert('익스플로러 입니다');//익스일경우 실행할 함수

}else{
alert('익스가 아닙니다.');//익스가 아닐경우 실행할 함수
return false;
}
}

익스6 png배경을 위한 스타핵(별핵)

2010-03-02T16:29:00.000+09:00

익스 6에서 png를 사용하면 투명한 부분이 회색으로 나온다.

구글에서는 익스 6을 버렸지만 국내에서는 아직 익스6을 무시할 수 없다.

스타핵의 사용법은 다음과 같다.

.trans_layer{width:800px; height:100px; background:url('labg.png') repeat left top; }

* html .trans_layer {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='labg.png',sizingMethod='scale'); }

스타핵을 사용하면 익스6에서도 동일하게 png를 사용할 수 있다. 주의할 점은 png배경을 준 클래스 다음에 스타핵을 추가해야 한다.

또한 이경우 익스 6에서 png배경이 깔린 부분만큼 a,input등이 먹지 않는 버그가 발생하는데, position:relative를 a,input등에 먹이면 해결된다.

가끔 무슨이유인지 relative를 먹여도 해결되지 않을 경우가 있는데 이때에는 a등이 있는 것을 div등으로 묶어서 absolute로 png배경위에 레이어로 띄우면 해결된다..(귀찮지만..-_-;)

한국 디지털 대학교..재입학 했다.

2010-03-02T16:18:00.000+09:00

흠...드디어 재입학..

난이제 죽었다.

4년안에 졸업은 할 수 있으려나..-_-;

그나저나 학교 홈페이지 개판이던데..(이놈의 직업병...)

최소한 디지털 대학교 라면, 표준, 접근성은 보장되어야 하는 것 아닌가.

본교 홈페이지 자유게시판(이하 자게)에도 올렸으나..하도 울화통이 터져서..

지금 본교 홈페이지 자게는 총학생회장 선출 비리 때문에 난리도 아니다.

개인정보 입력란에 보니 사용하는 기본브라우저 및 운영체제 묻더라..

밑에 자기네 홈페이지는 익스 플로러를 사용해야 강의를 들을 수 있단다.

참 부끄러운 일이다.

본인이 생각하는 사이버대학이란 가장 최소한으로 다음과 같은 사항은 준수 되어야 한다고 생각한다.

첫째, 모든 브라우저로 접근, 글쓰기, 강의 듣기, 파일다운로드 등의 행위가 가능해야 한다.

언제까지 우리나라 사람들이 마이크로소프트 익스플로러만을 사용할 것이라고 생각하는지 ...

현재 한디대 홈페이지는 익스플로러를 제외한 나머지 브라우저를 전혀 지원하지 않고 있으며,

심지어 강의를 듣기위해서는 공인인증서 로그인을 해야 한다.(그것도 년 4400원씩 내는 범용!!)

이를위해 보안 엑티브엑스를 쭉쭉...설치한다. 다른 브라우저로는 결코 강의를 들을수 없다.

회사 PC에서는 타 브라우저로 아예 로그인 조차 안되더라.

익스8 및 비스타에서도 많은 문제가 있나보다. 강의듣기 우측에 익스8 및 비스타 문제 해결 방법이 링크 되어 있는 것 으로 추측했다. 다른 브라우저로 수강신청의 결제까지는 바라지도 않는다. 하지만 이건 조금 많이 심했다.

둘째, 뭐..이것도 비둥비둥한 말이지만 정말이지 게시판이 뭐 이런게 있나 싶다.

방식의 문제이다. 다른 게시판은 사용할 생각도 안해봤다. 이건 딱 자유게시판만 사용해본뒤 적는거다.

페이지 넘어가는게 자바스크립트로 페이지만 다시받아오는 방식이다.

요거의 문제는 백스페이스(뒤로)를 누르면 자동으로 1페이지로 가버린다는 것.

뭐..그래서 목록버튼 이 있는 거겠지만...

셋째, 모바일 등 pc가 아닌 다른 기기로의 접근을 가능하게 해주어야 한다.

요즘은 스마트 폰 및 기타 기기들로 인터넷이 가능해 졌다. 따라서 모바일 웹 브라우저 등의 접근을 용이하도록 하여야 한다. 바쁜직장생활 등으로 틈틈히 공부해야 하는 직장인들에게 사이버 대학은 평생 교육 이라는 새로운 환경을 제공했지만 이미 너무 뒤쳐졌다. 지금은 카메라로 길을 찾는 증강현실, 그리고 어디서나 인터넷을 하는 3G및 와이파이 인프라가 대중화 되어 있는 단계이다. 집에서도 스마트폰으로 인터넷을 접속할 정도로 이미 많은 사람들이 모바일 웹을 사용하고 있는 추세인데 비해 한디대는 조치가 매우 미흡 하다 못해 아예 멈춰 있다.

학생들이 언제까지 개인용PC앞에 앉아 인터넷 강의를 들을 것 이라고 생각하는지...발빠른 대처가 필요할 것 이다.

넷째, 위와 같은 내용을 분명 학교측에서는 인정하고 정정해야 할 것이다.

학생들의 말에 귀 귀울이고 개선해야 할 사항이지만, 계획이 있는지 없는지도 모르겠다.

타 업체에 외주를 주는듯 한데, 사이버 대학에서 홈페이지는 곧 학교의 건물이요, 강의실이며, 편의 시설이다.

한디대 홈페이지는 이미 노후화 되었다. 즉 건물이 부실하다는 말이다. 언제고 무너져 버릴듯 부실하며, 불안정하다.

이런 현실을 보니 맘이 답답하다.

지금 보니 학교 홈페이지 게시판은 학생회장 선출 문제로 뜨겁디 뜨거운데, 그럼 과연 학생회장 문제가 사그러 들때즈음 위와같은 문제가 화두가 되었을때, 자유게시판은 다시 뜨거워 질지 의문이다.

우리나라 웹의 현실을 보는듯 해 마음이 아프다.

부디 다른 사이버대학이 혁신적으로 개선 하여, 한디대도 발전을 하게 되었으면 한다.

알아두면 유용한 사이트

2009-11-13T17:31:00.000+09:00

http://hooney.net/
후니넷

http://www.clearboth.org/wiki/doku.php

클리어 보스

CSS를 이용한 앵커네비게이션(?)

2009-11-12T15:24:00.000+09:00

자바스크립트를 사용하지 않고 CSS만 이용하여 탭메뉴같은 UI를 만들수 있는 방법이 있어서 블로그 한다.

http://naradesign.net 를 참고 하였으며, 아래 예제 코드는 본인이 직접 작성 하였다. 블로그 에디터로 제작하여, 스타일을 먹이는데 제한되었으므로, 어떤방식인지만 볼수있도록 코딩한다.

a메뉴 내용
b메뉴 내용
c메뉴 내용

내용 1

내용 2

내용 3

위의 코드는 다음과 같다.

위 예제는 컨텐츠의 내용이 가로폭과 세로폭이 동일할경우 사용이 가능하다.

먼저 일반 앵커와 마찬가지로 링크에 앵커값을 넣어준뒤,

해당 div컨텐츠의 아이디로 이동할수 있더록 id값에도 같은 값을 넣어준다.

다음으로 컨텐츠 영역 전체를 같은 크기의 div로 감싼후 overflow 의 값을 hidden 으로 주게 되면,

해당 컨텐츠를 제외한 나머지 영역이 숨겨지므로, 자바스크립트로 구연하는 탭메뉴와 같은 효과를 줄수 있다.

논리연산자

2009-11-12T15:20:00.000+09:00

논리연산자에는 세가지가 있다.

두가지는 이항 연산자 이고 하나는 단항 연산자 이다.

AND 연산자

var aNum = 1;

if( ( aNum >0.2 ) && ( aNum >2 ) ){ 실행문 } // aNum 이 02. 보다 크고 2보다 크면 참

AND 연산자는 && 으로 표시하며 두가지 조건식 모두 참일때 참이다.

OR 연산자

var aNum = 1;

if( ( aNum >0.2 ) || ( aNum >2 ) ){ 실행문 } // aNum 이 02. 보다 크거나 2보다 크면 참

OR 연산자는 || 으로 표시하며 둘중 한가지 조건식이 참이면 참을 반환한다.

NOT 연산자

var aNum = 1;

if(!(aNum == 1)) // aNum 이 1과 같으면 거짓, 그렇지 않으면 참

NOT 연산자는 논리식의 참과 거짓을 반대로 바꾸어 준다. 즉 참이면 거짓, 거짓이면 참...

삼항 조건 연산자

2009-11-12T14:50:00.000+09:00

단항, 이항이 아닌 삼항 조건 연산자...복잡한 조건식을 한줄에 끝내버릴수 있는 장점이 있다.

ex )

var numberTest = 1.0;

var numberOk = (numberTest > 0.5) ? "number over 0.5" : "number not over 0.5";

위의 예제를 보면 저건식이 참이기 때문에 numberOk 에는 "number over 0.5" 가 배정된다.

삼항 조건 연산자의 형식은 다음과 같다.

-> 조건 ? 참일때의 값 : 거짓일 때의 값

위의 예제를 if 문을 통해서 표현하기 위해서는...

var numberTest = 1.0;

var numberOk = "nan"

if ( numberTest > 0.5 ) { numberOk = "number over 0.5"; }

else { numberOk = "number not over 0.5"; }

뭐....대충 이렇다.

오늘 어떤 코드를 보다가 삼항조건 연산자를 흥미롭게 사용하는 방법을 발겼했다.

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

대충보면 html의 호환성 관련된 것이라는데 자세한것은 좀더 알아봐야 할듯하다.

해당 코드는 브라우저의 차이점을 해결하기 위해 만들어 진 것이라고 한다.

자바스크립트 코드의 위치

2009-11-10T15:01:00.000+09:00

자바스크립트는 <head> 와 </head> 사이에 삽입하여 사용할수 있으며, <body>와 </body> 사이에 삽입하여 사용할 수 도 있다. 물론 두가지 방법을 혼용하여 사용하는 것 역시 가능하며, css와 같이 자바스크립트도 js 파일을 따로 만들어 마크업 페이지에서 불러와 사용할수도 있다.

w3c 및 모질라 제단에서는 후자인 js파일을 따로 만들어 불러와 사용하는 것 을 권장하고 있다.

//<![CDATA[

자바스크립트 내용

//]]>

</script>

외부 JS 파일을 불러올 경우

*외부 js파일을 불러올 경우 <head>와 </head> 사이에 삽입한다.

자바스크립트의 역사

2009-11-09T15:38:00.000+09:00

자바스크립트는 웹을 동적으로 표현하고 폼필드를 검사하는등의 행위를 하는데 있어 쉽고 간단한 언어입니다.

자바스크립트라는 것은 독립되어 혼자 프로그램을 실행해 내는것이 아닌 웹브라우저에게 실행할 내용을 이야기 해주는 언어 입니다. java 나 C, C++ 등과는 조금 다르다고 생각하시면 될듯 합니다.

자바스크립트는 다른 언어를 배운적 없어도(물론 다른언어를 배운사람이 접근하기는 매우 쉽습니다) 배우기 쉬운 언어 입니다.

최초에 자바스크립트는 본래 이름이 아니었습니다.

넷스케이프가 라이브 커넥트 라는 서버측 기술을 개발했을때, 서버측 컴포넌트와 연동할 수 있는 클라이언트측의 스크립트 언어를 필요로 하여 '라이브 스크립트' 라는 언어를 개발해 냅니다. 그이후 JAVA 프로그래밍 언어의 소유권 회사인 SUN 사와 제휴를 맺으며, 네스케이프사의 엔지니어가 라이브스크립트를 자바스크립트 라는 이름으로 변경하게 됩니다. 이유는 당시 유명세를 타고있던 JAVA의 이름을 본따 자바스크립트라는 이름으로 변경하면 마케팅 측면에서 유리했기 때문입니다.

네스케이프 사와 썬 사는 1995년 12월 4일에 자바스크립트를 HTML과 자바를 보완하는 언어로 공표 하였습니다.

이에 마이크로 소프트 사는 네스케이프 사에 대항하기 위해 IE와 VB스크립트(비주얼베이직 기반)를 발표합니다. 이후 마이크로 소프트 사는 자바스크립트와 유사한 언어인 J스크립트를 발표합니다.

이에따라서 브라우저/언어 간의 경쟁은 자바스크립트의 도입을 더욱 촉진시켰으며, 통일되지 않은 언어로 인해 개발자 및 디자이너 들은 여러 브라우저에서 호환되는 웹페이지를 만들기위한 부담을 떠안아야 했습니다.

이러한 호환성 문제 해결을 위해 네스케이프 사는 표준화를 추진하여 1996년 자바스크립트의 스펙을 ECMA국제회의에 제출했으며, 1997년 ECMA스크립트의 첫번째 버전인 EMCA-262를 발표합니다.

그 이후 대부분의 회사들은 EMCA-262를 지원하는데 동의합니다.

ECMA-262의 두 번째 버전은 첫버전의 수정/보완한 메인터넌스 릴리즈 이며, 현재 버전인 세번째는 1999년 12월에 발표 합니다.

현재 ECMA-262에 XML기능을 추가한것을 2004년에 발표하였습니다.

지금사용하고 있는 자바스크립트 버전은 1.6이며, 여기에 2004년 발표한 E4X가 부분적으로 구현되어 있습니다.

중요한점은 여러가지 구 버전의 스크립트가 현재까지 사용되고 있는것입니다.

과거에 만들어진 스크립트소스틀이 웹을통해 계속적으로 쓰임으로서 문제가 계속되는 것 이지요.

브라우저	스크립트 지원 사항
IE 6.X	ECMA-262(V3) / J스크립트 5.6
IE 7.X	ECMA-262(V3) / J스크립트 5.6
오페라 8 및 8.5	ECMA-262(V3) / 자바스크립트 1.5
파이어폭스 1.5	ECMA-262(V3) 및 ECMA-357(E4X)일부분/자바스크립트 1.6
사파리 2.X	ECMA-262(V3)
카미노 1.0	ECMA-262(V3) / 자바스크립트 1.5
넷스케이프 8.1	ECMA-262(V3) / 자바스크립트 1.5
여러 소형 무선기기의 브라우저	다양

자바스크립트는 다양한 플랫폼과 환경에서 실행되므로 여러 운영체제에서 동작하는 웹페이지 및 프로그램을 개발하는데 사용할수 있습니다. 또한 대부분의 브라우저에 내장되어 있기 때문에 별도의 다운로드나 설치가 필요 없다는 장점이 있습니다.

대부분의 브라우저는 자바스크립트 언어의 일정부분을 공통적으로 구현해 놓았습니다. 이로써 대부분의 코드가 여러 브라우저에서 호환되게 됩니다.

그렇다면 브라우저간의 호환성 문제는 왜 생기는 걸까요?

대부분의 브라우저 호환성 문제는 자바스크립트 그 자체보다 문서객체모델(DOM)이 서로 다른것 때문입니다.문서 객체 모델의 엘리먼트를 표현하는 방식이 브라우저 마다 다르게 구현되어 있어 호환성 문제를 일으키는 것이지요. 또한 CSS가 처리하는 부분과 자바스크립트가 처리하는 부분이 중복되는 문제도 있습니다.

브라우저 회사들이 시장을 선점하기 위해 DOM을 경쟁에서 이기기 위한 무기로 삼아 전쟁을 벌이는 동안

W3C는 DOM을 표준으로 만들었습니다. 많은 브라우저 회사들은 W3C와 함께 작업하여 1998년 10월에 DOM레벤1이라는 새 표준을 만들었습니다.

하지만 그전 코드들과의 충돌등 여러가지 문제가 존재하는것이 사실입니다.

- 출처 : JavaScript:How Did We Get Here? / O'Reilly Network, April 2001/ O'Reilly 자바스크립트 for 웹 2.0 / 에이콘 제레미 키스 저자 DOM스크립트 / 개인지식-

select 활성 비활성

2009-11-06T15:02:00.000+09:00

DOM 을 이용한 셀렉트 박스의 활성/비활성 예제이다.

회사에서 작은 프로젝트중 필요해서 만들어 봤다.

<head>와 </head> 사이에 아래의 스크립트를 넣는다

</script>

그리고 body 안에 있는 셀렉트에는 id 값에 'text_select' 를 넣는다

tasklock() 함수가 호출되면 셀렉트 박스가 잠기며, taskopen() 함수가 호출되면 셀렉트 박스가 활성화 된다.

input 의 text 등에서도 활용이 가능하다.

버튼을 이용하여 테스트 하려면..

이와같이 테스트 할수 있다.

익스 6,7,8, 및 파이어폭스 최신버전에서 테스트 결과 이상없었다.

doctype 에대하여

2009-11-05T17:49:00.000+09:00

흔히들 많이 사용하는 에디트 플러스나 드림위버등의 프로그램에서 html 파일을 생성할경우 문서 상단에 자동으로 doctype 이 생성된다. 따라서 대부분의 퍼블리셔 및 디자이너들은 이를 무시하고 넘어가기 쉽다.

혹 이로 인하여 어떤 개발자는 doctype을 제거하고 프로그램을 입히기도 한다.

doctype은 문서의 종류, 성격을 나타낸다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

위 예는 XHTML 1.0 Transitional 로 지정했다.

doctype 을 Transitional 로 지정하면 대부분의 브라우저에서 standard모드로 인식한다.

모드는 크게

strict, standard, quirks으로 나뉜다.

strict 모드는 문법과 구조가 모두 맞아야 한다.

standard 모드는 어느정도 구버전의 속성 혹은 태그까지 허용된다.

quirks 모드는 doctype 설정을 하지 않았을경우 활성화 되며, IE는 과거의 브라우저를 기준으로 렌더링 하게 된다.

과거 브라우저는 표준화 되지 않고 각각 렌더링 하는 방식과 각 엘리먼트의 속성값이 달랐기 때문에 현제 표준화된 브라우저를 통해 과거의 방식으로 만들어진 페이지를 보게될경우 심하게 틀어지게 된다.

이를 위해 각 브라우저 개발자들은 호환성 모드를 만들어 두어 doctype이 지정되 있지 않을경우 과거브라우저 모드로 페이지를 표시한다.

자바스크립트의 경우 과거 네스케이프와 마이크로 소프트 사 간의 경쟁으로 표준화 되지 않은 스크립트들이 많이 생겨났으며, 물론 현재는 어느정도 표준화 되어 있지만 과거에 사용되었던 스크립트들이 최근 브라우저와 호환되지 않는경우가 많기 때문에 doctype을 제거하는 경우가 있다.

하지만 이는 좋지 않은 방법이며, 가급적이면 doctype을 넣고, 이와 호환되는 스크립트를 이용하여 코딩하는것을 추천한다.

현재 w3c에서 권고하는 doctype은

http://www.w3schools.com/tags/tag_DOCTYPE.asp

에서 확인할수 있다.

더블마진 플로트 버그

2009-11-05T17:06:00.000+09:00

IE6이하버전에서 float 가 지정된 엘리먼트의 마진을 두배로 표시하는 버그가 있다.

예로 float:left 되어 있는 엘리먼트에 margin-left:40px 을 주면 IE6 에서 마진 레프트 값이 80px로 먹는 버그이다.

이버그는 해당 엘리먼트에 display:inline 을 지정해 주면 해결되며, 해당엘리먼트는 float 지정이 되어 있으므로 실제 화면상에서는 아무런 영향을 주지 않는다.

parseFloat()

2009-11-04T13:53:00.000+09:00

parseFloat() 은 자바스크립트 엔진이 문자열로 간주하는 변수를 숫자로 사용할수 있다.

이외에 parseInt , Number 가 있다.