웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
![](http://labor119.com/sundew/mpl/sundew_mplayer_packages/resources/sundew_chromeless_v0.0.1/screenshot.jpg)
[온라인 데모: v0.0.1]
[데모파일 다운로드: v0.0.1]
*6시간동안 온라인으로 작성하던 글이 날아가서 지금 망연자실하고 있습니다.
"작성완료"를 눌렀는데 로그인창으로 쫒겨나는... 이런 바보같은 일을 당하다니..
죄송합니다. 지금이 새벽 5시인데 오늘 밤은 도저히 이 글쓰기 작업을 다시 못하겠습니다.
내일 잠에서 깨는대로 모자라지만 다시 써서 올리도록 하겠습니다. T_T
[하룻 밤 지남..]
![](http://labor119.com/sundew/mpl/sundew_mplayer_packages/resources/sundew_chromeless_v0.0.2/screenshot2.jpg)
[온라인 데모: v0.0.2]
[데모파일 다운로드: v0.0.2]
V. 창(Window)안의 상자 다루기
* 1회에서 4회를 거쳐 오는 동안 구체적인 코딩연습이나 함수구성 등을 연습 해 왔다라기 보다 다분히 막연한 개념들을 다뤄옴으로 많이 지리하고 따분하셨으리라 생각됩니다. 오늘은 3회에서 다뤘던 Jerrett의 Drag와, 4회, FASTCLICK의 InVue를 적절히 가공한 예제를 가지고 랩(실습)시간을 가져 볼까 합니다.
자 그럼 다시(!!) 시작 해 봅니다.
* 먼저, Siny님 반갑습니다. 따뜻한 격려 정말 감사하고요. 그리고 정말 큰 힘이 되었습니다. 이제 어제의 그 충격에서 정신이 바로 돌아 오는 것 같습니다. ^^
1. 데모의 파일 구성
- images(폴더): 버튼 이미지들과 예제 컨텐츠로 넣을 계산기 Flash가 들어 있습니다.
- index.htm: 데모의 시작 파일입니다.
- invue_core.js: InVue의 레이어 컨트롤 Javascript 함수들을 간추려 담아 봤습니다.
*몇가지 기능을 변경 시켰으며 그 내용은 다음과 같습니다.
(1) 레이어 이동 범위 제한: 레이어의 이동 범위를 현재 창크기로 제한 했습니다. 크롬리스를 끌어다가 영역 바깥에 놓아 보시면 무슨 말인지 아시게 될 줄로 믿습니다.
(2) 눈속임 레이어 좌표/크기 가변: 크롬리스 레이어(popup)에 위치에 따라 눈속임 레이어의 좌표를 함께 옮겨봤습니다. InVue에서는 컨텐츠 레이어가 가운데에 고정되어 있었지만 우리의 크롬리스는 그 위치가 여기저기로 옮겨짐으로 에니메이션의 시작점과 시작 크기는 현재의 크롬리스 창의 위치와 크기가 되어야 할 것 같았습니다.
- sundew_chromeless_v0.0.1.js: 핵심 Javascript파일입니다. 그 내용물은 다음과 같습니다.
(1) 아이콘 레이어 넣는 부분
(2) 눈속임 레이어 넣는 부분
(3) 사용자 크롬 넣는 부분
(4) 사용자 컨텐츠 넣는 부분
이렇게 해서 간단히 데모를 구성하고 있는 요소들과 그 내용들을 살펴 봤으며 다음은 본 데모의 기능적 한계를 짚고 넘어가야 할 것 같습니다.
2. 본 데모버젼(sundew_chromeless_v0.0.1.js)의 한계
- popup모드(크롬리스 팝업)지원 안함
창 안의 상자(크롬리스 레이어)를 창 바깥으로 날려 보내게 되는 이 부분은 다음 단계에서 다뤄 봅니다.
*UPDATE: popup모드를 지원하는 v0.0.2패키지가 추가 링크되었습니다.
- Netscape 지원 안함
먼저,Netscape/Mozilla사용자분들께는 죄송한 마음을 전합니다.
InVue가 Netscape을 지원하지 않았던 관계로 기본적인 아이콘화/크롬리스창 복구 부분을 위한 추가 코드가 필요합니다만, 이 예제는 가능한 한 간단히 구성하는 것이 목적 이었기에 이 부분은 제외 되어 있으며 역시 마무리 단계에서 추가/고려 해 보도록 하겠습니다.
- 엉성한 디자인
할 말이 없습니다. (--a)
*이 예제나 앞으로의 예제를 위한 멋진 크롬/컨텐츠 구성하셔서 나눠 주시면 내년 설날에 새배 드리러 가도록 하겠습니다. ~
3. 실습 내용
패키지를 받아 압축을 풀고 index.htm파일을 열거나, 위의 “온라인 데모” 사이트에 접속 해 보시면 위 그림과 같은 크롬리스 레이어가 뜨지만 절대로(!!) 전혀 파워풀 해 보이지 않는 그 디자인에 현혹되지 마시고 기능들에만 촛점을 맞춰 봅니다.
자, 그럼, 한가지, 한가지, 가지고 놀아 봅니다.
- 레이어 이동 영역 제한이란게 무슨 말인가를 위해 좌상의 패드를 쥐고 크롬리스 레이어를 화면 바깥으로 끌어다 옮겨 놓아 봅니다.
- 아이콘화가 되는 기능을 확인해 보기위해 “줄이기”버튼을 눌러봅니다.
- 눈속임 레이어의 위치가 어떻게 본 레이어를 따라 다닌다는 건지 여기저기로 크롬리스 레이어를 이동 시켜 본후에 “줄이기”버튼을 눌렀을 때의 창이 주는 에니메이션 동작을 살펴 봅니다.
4. 닫는 글
sundew_chromeless_v0.0.1.js파일을 중심으로 많은 실험과 실패를 경험 하시기를 권해 드립니다.
예를 들어 다음과 같은 것들에 도전 해 볼만 합니다.
- 아이콘도 끌고 다닐 수 있게 만들기
- 크롬리스 레이어의 초기위치를 좌:300,우:200같은 것으로 주는게 아니라 좌:top,우:center같은 것으로도 줄 수 있게 만들기
- 웹페이지를 윈도우데스크탑 화면처럼 구성하기(다중 아이콘, 다중 크롬리스 레이어)
*이 것은 3회에서 Kite님께서 아이디어를 주셨습니다. =)
- 눈속임 레이어가 아니라 진짜로 크롬리스 레이어를 줄여 에니메이션 효과를 내기
휴~ 읽으시는 중에 눈이 꼬이고 머리가 어질어질 해 지시는 분이 계신 줄 압니다. 사실 오만가지 상상을 하며 글을 쓰고 있는 저도 손이 엉키고 눈이 돌아가는 것을 느낍니다.
하지만, 이 모든 얘기들을 통해 드리고 싶은 이야기는, 내가 필요로 하는 기능이 있을 때 이를 충족 시킬 Javascript를 죽도록 찾아 헤매거나, 아니면 그것이 게시판에 새로이 등록될 그 날까지 끊임없이 기다리는 그런 류의 끈기 보다는, 단순한 형태의 어떤 code로 부터 내가 필요로 하는 기능으로 재구성 할 수 있는 능력을 기르는 것이 더 중요하다는 사실입니다.
애고고.. 또 주제넘게 어설픈 얘기를 지껄였습니다. 넓은 아량으로 무시 해 주세요.
끝으로 저는, 여러분들이 작업을 하시면서 성공 하시고 또 실패하신 결과물들을 이 게시판에서던지 아니면 엠플( http://m-player.wo.to ) 게시판에서던지 함께 나눠 볼 수 있는 기회가 많았으면 하고 바래 봅니다.
이것으로 조금이나마 도움이 되셨기를 바라며 5회를 마칩니다.
오늘도 끝까지 읽어 주신 분들께 감사 드립니다.
*이 게시물에서 다루는 내용의 예제는 아래주소에서 보실 수 있습니다.
http://m-player.wo.to
::UPDATE::
*위에서 보시는 바와 같이 데모패키지를 좀더 다듬어 v0.0.2라는 이름으로 추가 시켰습니다.
아무리 데모라지만 인터페이스가 너무 허접했던 관계로 조금 더 손을 봤습니다.
엠플의 ketix 스킨을 바탕으로 만들어 졌으며 이번 데모버젼에선 위 본문에서 추가 시키지 않았다던 팝업모드의 지원을 포함하고 있습니다. 팝업모드에 관한 구현 설명은 다음 회에서 자세히 다뤄보겠습니다.
감사합니다.
크롬리스(Chromless) 웹어플리케이션 -5
2003.05.28 14:21
![](http://labor119.com/sundew/mpl/sundew_mplayer_packages/resources/sundew_chromeless_v0.0.1/screenshot.jpg)
[온라인 데모: v0.0.1]
[데모파일 다운로드: v0.0.1]
*6시간동안 온라인으로 작성하던 글이 날아가서 지금 망연자실하고 있습니다.
"작성완료"를 눌렀는데 로그인창으로 쫒겨나는... 이런 바보같은 일을 당하다니..
죄송합니다. 지금이 새벽 5시인데 오늘 밤은 도저히 이 글쓰기 작업을 다시 못하겠습니다.
내일 잠에서 깨는대로 모자라지만 다시 써서 올리도록 하겠습니다. T_T
[하룻 밤 지남..]
![](http://labor119.com/sundew/mpl/sundew_mplayer_packages/resources/sundew_chromeless_v0.0.2/screenshot2.jpg)
[온라인 데모: v0.0.2]
[데모파일 다운로드: v0.0.2]
V. 창(Window)안의 상자 다루기
* 1회에서 4회를 거쳐 오는 동안 구체적인 코딩연습이나 함수구성 등을 연습 해 왔다라기 보다 다분히 막연한 개념들을 다뤄옴으로 많이 지리하고 따분하셨으리라 생각됩니다. 오늘은 3회에서 다뤘던 Jerrett의 Drag와, 4회, FASTCLICK의 InVue를 적절히 가공한 예제를 가지고 랩(실습)시간을 가져 볼까 합니다.
자 그럼 다시(!!) 시작 해 봅니다.
* 먼저, Siny님 반갑습니다. 따뜻한 격려 정말 감사하고요. 그리고 정말 큰 힘이 되었습니다. 이제 어제의 그 충격에서 정신이 바로 돌아 오는 것 같습니다. ^^
1. 데모의 파일 구성
- images(폴더): 버튼 이미지들과 예제 컨텐츠로 넣을 계산기 Flash가 들어 있습니다.
- index.htm: 데모의 시작 파일입니다.
- invue_core.js: InVue의 레이어 컨트롤 Javascript 함수들을 간추려 담아 봤습니다.
*몇가지 기능을 변경 시켰으며 그 내용은 다음과 같습니다.
(1) 레이어 이동 범위 제한: 레이어의 이동 범위를 현재 창크기로 제한 했습니다. 크롬리스를 끌어다가 영역 바깥에 놓아 보시면 무슨 말인지 아시게 될 줄로 믿습니다.
(2) 눈속임 레이어 좌표/크기 가변: 크롬리스 레이어(popup)에 위치에 따라 눈속임 레이어의 좌표를 함께 옮겨봤습니다. InVue에서는 컨텐츠 레이어가 가운데에 고정되어 있었지만 우리의 크롬리스는 그 위치가 여기저기로 옮겨짐으로 에니메이션의 시작점과 시작 크기는 현재의 크롬리스 창의 위치와 크기가 되어야 할 것 같았습니다.
- sundew_chromeless_v0.0.1.js: 핵심 Javascript파일입니다. 그 내용물은 다음과 같습니다.
(1) 아이콘 레이어 넣는 부분
(2) 눈속임 레이어 넣는 부분
(3) 사용자 크롬 넣는 부분
(4) 사용자 컨텐츠 넣는 부분
이렇게 해서 간단히 데모를 구성하고 있는 요소들과 그 내용들을 살펴 봤으며 다음은 본 데모의 기능적 한계를 짚고 넘어가야 할 것 같습니다.
2. 본 데모버젼(sundew_chromeless_v0.0.1.js)의 한계
- popup모드(크롬리스 팝업)지원 안함
창 안의 상자(크롬리스 레이어)를 창 바깥으로 날려 보내게 되는 이 부분은 다음 단계에서 다뤄 봅니다.
*UPDATE: popup모드를 지원하는 v0.0.2패키지가 추가 링크되었습니다.
- Netscape 지원 안함
먼저,Netscape/Mozilla사용자분들께는 죄송한 마음을 전합니다.
InVue가 Netscape을 지원하지 않았던 관계로 기본적인 아이콘화/크롬리스창 복구 부분을 위한 추가 코드가 필요합니다만, 이 예제는 가능한 한 간단히 구성하는 것이 목적 이었기에 이 부분은 제외 되어 있으며 역시 마무리 단계에서 추가/고려 해 보도록 하겠습니다.
- 엉성한 디자인
할 말이 없습니다. (--a)
*이 예제나 앞으로의 예제를 위한 멋진 크롬/컨텐츠 구성하셔서 나눠 주시면 내년 설날에 새배 드리러 가도록 하겠습니다. ~
3. 실습 내용
패키지를 받아 압축을 풀고 index.htm파일을 열거나, 위의 “온라인 데모” 사이트에 접속 해 보시면 위 그림과 같은 크롬리스 레이어가 뜨지만 절대로(!!) 전혀 파워풀 해 보이지 않는 그 디자인에 현혹되지 마시고 기능들에만 촛점을 맞춰 봅니다.
자, 그럼, 한가지, 한가지, 가지고 놀아 봅니다.
- 레이어 이동 영역 제한이란게 무슨 말인가를 위해 좌상의 패드를 쥐고 크롬리스 레이어를 화면 바깥으로 끌어다 옮겨 놓아 봅니다.
- 아이콘화가 되는 기능을 확인해 보기위해 “줄이기”버튼을 눌러봅니다.
- 눈속임 레이어의 위치가 어떻게 본 레이어를 따라 다닌다는 건지 여기저기로 크롬리스 레이어를 이동 시켜 본후에 “줄이기”버튼을 눌렀을 때의 창이 주는 에니메이션 동작을 살펴 봅니다.
4. 닫는 글
sundew_chromeless_v0.0.1.js파일을 중심으로 많은 실험과 실패를 경험 하시기를 권해 드립니다.
예를 들어 다음과 같은 것들에 도전 해 볼만 합니다.
- 아이콘도 끌고 다닐 수 있게 만들기
- 크롬리스 레이어의 초기위치를 좌:300,우:200같은 것으로 주는게 아니라 좌:top,우:center같은 것으로도 줄 수 있게 만들기
- 웹페이지를 윈도우데스크탑 화면처럼 구성하기(다중 아이콘, 다중 크롬리스 레이어)
*이 것은 3회에서 Kite님께서 아이디어를 주셨습니다. =)
- 눈속임 레이어가 아니라 진짜로 크롬리스 레이어를 줄여 에니메이션 효과를 내기
휴~ 읽으시는 중에 눈이 꼬이고 머리가 어질어질 해 지시는 분이 계신 줄 압니다. 사실 오만가지 상상을 하며 글을 쓰고 있는 저도 손이 엉키고 눈이 돌아가는 것을 느낍니다.
하지만, 이 모든 얘기들을 통해 드리고 싶은 이야기는, 내가 필요로 하는 기능이 있을 때 이를 충족 시킬 Javascript를 죽도록 찾아 헤매거나, 아니면 그것이 게시판에 새로이 등록될 그 날까지 끊임없이 기다리는 그런 류의 끈기 보다는, 단순한 형태의 어떤 code로 부터 내가 필요로 하는 기능으로 재구성 할 수 있는 능력을 기르는 것이 더 중요하다는 사실입니다.
애고고.. 또 주제넘게 어설픈 얘기를 지껄였습니다. 넓은 아량으로 무시 해 주세요.
끝으로 저는, 여러분들이 작업을 하시면서 성공 하시고 또 실패하신 결과물들을 이 게시판에서던지 아니면 엠플( http://m-player.wo.to ) 게시판에서던지 함께 나눠 볼 수 있는 기회가 많았으면 하고 바래 봅니다.
이것으로 조금이나마 도움이 되셨기를 바라며 5회를 마칩니다.
오늘도 끝까지 읽어 주신 분들께 감사 드립니다.
*이 게시물에서 다루는 내용의 예제는 아래주소에서 보실 수 있습니다.
http://m-player.wo.to
::UPDATE::
*위에서 보시는 바와 같이 데모패키지를 좀더 다듬어 v0.0.2라는 이름으로 추가 시켰습니다.
아무리 데모라지만 인터페이스가 너무 허접했던 관계로 조금 더 손을 봤습니다.
엠플의 ketix 스킨을 바탕으로 만들어 졌으며 이번 데모버젼에선 위 본문에서 추가 시키지 않았다던 팝업모드의 지원을 포함하고 있습니다. 팝업모드에 관한 구현 설명은 다음 회에서 자세히 다뤄보겠습니다.
감사합니다.
댓글 3
제목 | 글쓴이 | 날짜 |
---|---|---|
우리가 사랑한지 몇일째 날짜세주는 PHP 소스 [12] | 레드 | 2005.01.16 |
날짜 구하는 함수.. ... [3] | 김명현 | 2005.01.24 |
게시판 테이블 생성을 쉽게하자.
[2]
![]() | QQQ | 2005.01.29 |
내 컴퓨터가 표현할 수 있는 문자들. [6] | 최호성 | 2005.01.30 |
자바스크립트 단축키 지정을 쉽게하자. [1] | 권태수 | 2005.02.14 |
[날짜 구하는함수업]내일 날짜와 1년 후 년도 구하기 [8] | ssukai | 2005.02.24 |
사용자 등록/DB생성/테이블 생성
[3]
![]() | QQQ | 2005.03.03 |
ASC(순차), DESC(역순) 정렬하기. [4] | Xian | 2005.03.03 |
DB에서 각종 기념일을 내용,순서순으로 뽑아 정렬하기.. | 박순영 | 2005.03.17 |
[초보]아주쉬운 PHP로 그림에 글자 입히기
[11]
![]() | 김규백 | 2005.04.04 |
winamp 방송정보 읽어오기 심각한 문제해결
![]() | 이승원 | 2005.05.04 |
winamp 방송정보 알아오기 (2005년 새로 코딩한 버전)
[8]
![]() | 이승원 | 2005.05.06 |
나만의 미니홈 만들기 ㅡ password.php
[8]
![]() | 예뜨락 | 2005.05.07 |
나만의 미니홈 만들기 ㅡ 간단한 최근글 불러오기 [6] | 예뜨락 | 2005.05.09 |
나만의 미니홈 만들기 ㅡ 메모장 디자인 (html 소스) [4] | 예뜨락 | 2005.05.12 |
mysql 테이블 스키마 보는법. [2] | 최문혁 | 2005.05.14 |
나만의 미니홈 만들기 ㅡ 메모장 소스 | 예뜨락 | 2005.06.09 |
트랙백 기능 구현하기. | 태규 | 2005.06.12 |
대용량 파일 업로드 컴포넌트
[4]
![]() | OTLNO | 2005.06.15 |
효율적인 경로 지정하기 [9] | 대류 | 2005.07.27 |