'2008/05'에 해당되는 글 6건
- 2008/05/21 글(컨텐츠) 이 위로 스크롤 되는 롤링 div 만들기
- 2008/05/14 한국MS, 비스타 DSP 불법판매 ‘알면서도 묵인?’
- 2008/05/08 포트폴리오
- 2008/05/06 미국산 쇠고기 수입, 광우병 문제 심각!
- 2008/05/05 촛불문화제 사법처리에 대하여...
- 2008/05/01 1천만 대국민 대통령 탄핵 서명 관련 기사 및 링크
안녕하세요, 대도루피 입니다.
제대로된 첫 강좌 이려나요.
강좌를 작성하는 목적은, 제 자신이 잊어버릴 수도 있는 부분이라 기록하기 위함과 동시에,
같은 기능을 필요로 하시는 분께서 쉽게 사용하시라고 만든거고요..
최적화 까지는 아니더라도, 사용하기 쉽고 알아보기 쉽게 작성하였습니다. ^^
설명은, 소스로 대체할게요 ^^
소스는 펌이 아닌, 직접 작성한 내용들입니다.
간략한 설명을 하자면, 가장 밑에 makeContent() 부분이 출력할 데이터 목록을 만드는 부분인데요.
contentArray 라는 array 변수를 생성해 두었는데, getData(); 부분은 php함수를 호출해서
DB로 부터 데이터를 읽어 contentArray[0] 번부터 시작해서 원하는 숫자 만큼 데이터를 입력받으시면 됩니다.
초급 프로그래머 이시면, 충분히 하실 수 있겠죠..?
해당 작업을 makeContent() 에서 처리하시고요,, 홈페이지 내에서 롤링을 추가하시고 싶은 위치에서
makeContent() 함수를 호출하시면 되요.
그다음, status() 함수를 연이어 호출 하시면, 롤링의 작동이 시작됩니다.
변수는 start와 end 가 있는데 start는 0 적어주시면 되고, end는 출력하실 갯수(DB에서 읽어온 아이템 갯수)
에서 1을 뺀 값을 입력하시면 되겠죠? 0번부터 시작이니까요.
그리고 status() 함수느 rolling() 함수 내에 setTimeout 함수가 있는데 적혀있는 숫자 1000은 대기시간이에요.
ms(밀리세컨드) 로 계산합니다. 1000이면 1초가 되겠죠? ^^
시간 길게 하고 싶으시면 바꿔주시면 되고요.. 그다음 호출하는건 10ms 로 호출하면서
div의 top 을 -1 씩 빼서 위로 스크롤 되는 효과를 만들어 줍니다...
응용하시면, 처음에는 빠르다가 점점 느려지는 작업도 가능하겠죠? 그부분은 알아서....^^;;
그리고 정말 중요한 부분!
빨간 색으로 표시한 innerBox 는요,, 다른 명령어나 그런게 아니고요,
html 내부의 div 의 id값 입니다. getElementById 로.. 해당 객체를 가져오죠..?
그래서 컨트롤 가능한거에요..
innerBox의 div 스타일은 꼭 absolute 혹은 relative 등으로 설정해주세요...
그래야 top 스타일 값을 사용할 수 있거든요.
위는 본문의 div구조인데요.. 스타일 시트를 보시면 이해가 되시려나요..
innerBox를 감싸고 있는 외부인 box를 overflow: hidden 시켜주세요..
가로 세로 크기는 지정해주시고요.. 그래야, 감춰지겠죠? ^^
잘 사용하시고요,
버젼 업 되면 다시 포스팅 할게요 ^^
제대로된 첫 강좌 이려나요.
강좌를 작성하는 목적은, 제 자신이 잊어버릴 수도 있는 부분이라 기록하기 위함과 동시에,
같은 기능을 필요로 하시는 분께서 쉽게 사용하시라고 만든거고요..
최적화 까지는 아니더라도, 사용하기 쉽고 알아보기 쉽게 작성하였습니다. ^^
설명은, 소스로 대체할게요 ^^
소스는 펌이 아닌, 직접 작성한 내용들입니다.
<script language="Javascript">
<!--
var y=0; //y축 좌표
var count=0; //y축 증가값 리셋
var contentArray = new Array(); //컨텐츠 내용 배열
var start=0; //0번부터
var end=9; //9번 까지 총 10개의 컨텐츠
var now=0; //현재 추가하는 번호
var newDiv;
var hover=1; //마우스 오버시 0이면 멈춤
var oTime;
function addContent() { //컨텐츠 2개 추가
if(now >= end) now=0;
var dom = document.getElementById("innerBox");
newDiv = document.createElement("div");
newDiv.style.height = "100px";
<!--
var y=0; //y축 좌표
var count=0; //y축 증가값 리셋
var contentArray = new Array(); //컨텐츠 내용 배열
var start=0; //0번부터
var end=9; //9번 까지 총 10개의 컨텐츠
var now=0; //현재 추가하는 번호
var newDiv;
var hover=1; //마우스 오버시 0이면 멈춤
var oTime;
function addContent() { //컨텐츠 2개 추가
if(now >= end) now=0;
var dom = document.getElementById("innerBox");
newDiv = document.createElement("div");
newDiv.style.height = "100px";
var sub1 = document.createElement("div");
sub1.style.paddingBottom = "5px";
sub1.innerHTML = contentArray[now];
now++;
var sub2 = document.createElement("div");
sub2.innerHTML = contentArray[now];
now++;
sub1.style.paddingBottom = "5px";
sub1.innerHTML = contentArray[now];
now++;
var sub2 = document.createElement("div");
sub2.innerHTML = contentArray[now];
now++;
newDiv.appendChild(sub1);
newDiv.appendChild(sub2);
dom.appendChild(newDiv);
}
function status() { //롤링 처음 실행시에만 호출
addContent();
addContent();
setTimeout("run()",1000);
}
function run() { //롤링 반복 작업
oTime = setInterval("rolling()",10);
}
function rolling() {
if(hover==1) {
y-=1;
count+=1;
var dom = document.getElementById("innerBox");
dom.style.top= y + "px";
if(count==100) { //롤링을 멈추고 기다림
count=0;
addContent();
clearInterval(oTime); //롤링 멈춤
setTimeout("run()",1000); // 1초후 다시 롤링 시작
} else {
//oTime = setTimeout("rolling()",10);
}
}
}
function makeContent() {
<? getData(); ?>
}
-->
</script>
newDiv.appendChild(sub2);
dom.appendChild(newDiv);
}
function status() { //롤링 처음 실행시에만 호출
addContent();
addContent();
setTimeout("run()",1000);
}
function run() { //롤링 반복 작업
oTime = setInterval("rolling()",10);
}
function rolling() {
if(hover==1) {
y-=1;
count+=1;
var dom = document.getElementById("innerBox");
dom.style.top= y + "px";
if(count==100) { //롤링을 멈추고 기다림
count=0;
addContent();
clearInterval(oTime); //롤링 멈춤
setTimeout("run()",1000); // 1초후 다시 롤링 시작
} else {
//oTime = setTimeout("rolling()",10);
}
}
}
function makeContent() {
<? getData(); ?>
}
-->
</script>
간략한 설명을 하자면, 가장 밑에 makeContent() 부분이 출력할 데이터 목록을 만드는 부분인데요.
contentArray 라는 array 변수를 생성해 두었는데, getData(); 부분은 php함수를 호출해서
DB로 부터 데이터를 읽어 contentArray[0] 번부터 시작해서 원하는 숫자 만큼 데이터를 입력받으시면 됩니다.
초급 프로그래머 이시면, 충분히 하실 수 있겠죠..?
해당 작업을 makeContent() 에서 처리하시고요,, 홈페이지 내에서 롤링을 추가하시고 싶은 위치에서
makeContent() 함수를 호출하시면 되요.
그다음, status() 함수를 연이어 호출 하시면, 롤링의 작동이 시작됩니다.
변수는 start와 end 가 있는데 start는 0 적어주시면 되고, end는 출력하실 갯수(DB에서 읽어온 아이템 갯수)
에서 1을 뺀 값을 입력하시면 되겠죠? 0번부터 시작이니까요.
그리고 status() 함수느 rolling() 함수 내에 setTimeout 함수가 있는데 적혀있는 숫자 1000은 대기시간이에요.
ms(밀리세컨드) 로 계산합니다. 1000이면 1초가 되겠죠? ^^
시간 길게 하고 싶으시면 바꿔주시면 되고요.. 그다음 호출하는건 10ms 로 호출하면서
div의 top 을 -1 씩 빼서 위로 스크롤 되는 효과를 만들어 줍니다...
응용하시면, 처음에는 빠르다가 점점 느려지는 작업도 가능하겠죠? 그부분은 알아서....^^;;
그리고 정말 중요한 부분!
빨간 색으로 표시한 innerBox 는요,, 다른 명령어나 그런게 아니고요,
html 내부의 div 의 id값 입니다. getElementById 로.. 해당 객체를 가져오죠..?
그래서 컨트롤 가능한거에요..
innerBox의 div 스타일은 꼭 absolute 혹은 relative 등으로 설정해주세요...
그래야 top 스타일 값을 사용할 수 있거든요.
<div id="content">
<div id="box">
<div id="innerBox" onMouseOver = "hover=0;" onMouseOut = "hover=1;">
<script language="javascript">
makeContent();
status();
</script>
</div>
</div>
</div>
<div id="box">
<div id="innerBox" onMouseOver = "hover=0;" onMouseOut = "hover=1;">
<script language="javascript">
makeContent();
status();
</script>
</div>
</div>
</div>
위는 본문의 div구조인데요.. 스타일 시트를 보시면 이해가 되시려나요..
<style type="text/css">
* { font-face:굴림; font-size:9pt }
ol { list-style:none;margin:0; }
img,div { margin:0;padding:0;border:0 }
a:link,a:visited,a:hover { text-decoration:none; color:#000; }
#content { width:187px;height:115px;position:relative;top:-4px;
background-image:url("사진 url");
background-repeat:no-repeat;
}
#box { width:187px;height:100px; position:relative;
padding-left:10px; padding-bottom:30px;overflow:hidden;
}
#innerBox { width:187px;height:100px; position:absolute; top:0px}
ol.data { height:100px; }
</style>
* { font-face:굴림; font-size:9pt }
ol { list-style:none;margin:0; }
img,div { margin:0;padding:0;border:0 }
a:link,a:visited,a:hover { text-decoration:none; color:#000; }
#content { width:187px;height:115px;position:relative;top:-4px;
background-image:url("사진 url");
background-repeat:no-repeat;
}
#box { width:187px;height:100px; position:relative;
padding-left:10px; padding-bottom:30px;overflow:hidden;
}
#innerBox { width:187px;height:100px; position:absolute; top:0px}
ol.data { height:100px; }
</style>
innerBox를 감싸고 있는 외부인 box를 overflow: hidden 시켜주세요..
가로 세로 크기는 지정해주시고요.. 그래야, 감춰지겠죠? ^^
잘 사용하시고요,
버젼 업 되면 다시 포스팅 할게요 ^^
이올린에 북마크하기
이올린에 추천하기'프로그래밍 > JavaScript' 카테고리의 다른 글
| 글(컨텐츠) 이 위로 스크롤 되는 롤링 div 만들기 (0) | 2008/05/21 |
|---|
http://www.ebuzz.co.kr/content/buzz_view.html?ps_ccid=51737
위 링크의 기사 입니다.
비스타 DSP 란, 제조업체에 공급되는 운영체제이고요..
원래 낱개로 판매할 수 없게 되어 있습니다.
일반 소비자가 개인적으로 구매해서 사용할 경우 아무런 혜택도 받을 수 없고요..
용산등지에서 조립PC구입시 같이 구매해서 사용할 수 있는 버젼이고요,
온라인에서 낱개로 구매하는 건 다 불법판매 제품이에요..
대기업PC 구매시 설치되어 있는 윈도우 운영체제 역시 DSP 버젼입니다.
개인적으로 PC 조립해서 사용하시는 분이 윈도우를 구매하시려면,
박스패키징된 정품 OS를 구매하셔야 하고요, 가격이 상당히 비쌉니다.
OS 살 금액이면, 차라리 대기업이나 중소기업 PC구매하는 게 낫죠..;
그래서 조립하시는 분들은 많이들 불법으로 사용하시긴 하지만요..
저 같은 경우는 노트북은 구매시 딸려온 정품을 쓰고 있고,
데스크탑의 경우 리눅스를 사용하고 있습니다.. 이렇게 사용하면 나름 괜찮네요.
뭐, 개발자이니까 그렇겠지만, 일반 사용자가 리눅스 사용하기란 쉽지가 않죠..
최근 리눅스의 경우 데스탑에서 쓰기 편하고, 비쥬얼하게 나왔다고는 하지만,
지원되는 게임도 없을 뿐만 아니라, 은행권등 사이트를 이용하기 위한 activex 설치도 불가능하죠..
개발된 프로그램은 많지만, 사용자들이 쓰기 편한 프로그램도 거의 없고요...
개인적으로는 리눅스가 좀 더 많이 발전되었으면 하는 바램입니다. ^^
그럼 포스팅을 마치겠습니다.
위 링크의 기사 입니다.
비스타 DSP 란, 제조업체에 공급되는 운영체제이고요..
원래 낱개로 판매할 수 없게 되어 있습니다.
일반 소비자가 개인적으로 구매해서 사용할 경우 아무런 혜택도 받을 수 없고요..
용산등지에서 조립PC구입시 같이 구매해서 사용할 수 있는 버젼이고요,
온라인에서 낱개로 구매하는 건 다 불법판매 제품이에요..
대기업PC 구매시 설치되어 있는 윈도우 운영체제 역시 DSP 버젼입니다.
개인적으로 PC 조립해서 사용하시는 분이 윈도우를 구매하시려면,
박스패키징된 정품 OS를 구매하셔야 하고요, 가격이 상당히 비쌉니다.
OS 살 금액이면, 차라리 대기업이나 중소기업 PC구매하는 게 낫죠..;
그래서 조립하시는 분들은 많이들 불법으로 사용하시긴 하지만요..
저 같은 경우는 노트북은 구매시 딸려온 정품을 쓰고 있고,
데스크탑의 경우 리눅스를 사용하고 있습니다.. 이렇게 사용하면 나름 괜찮네요.
뭐, 개발자이니까 그렇겠지만, 일반 사용자가 리눅스 사용하기란 쉽지가 않죠..
최근 리눅스의 경우 데스탑에서 쓰기 편하고, 비쥬얼하게 나왔다고는 하지만,
지원되는 게임도 없을 뿐만 아니라, 은행권등 사이트를 이용하기 위한 activex 설치도 불가능하죠..
개발된 프로그램은 많지만, 사용자들이 쓰기 편한 프로그램도 거의 없고요...
개인적으로는 리눅스가 좀 더 많이 발전되었으면 하는 바램입니다. ^^
그럼 포스팅을 마치겠습니다.
'생활' 카테고리의 다른 글
| 한국MS, 비스타 DSP 불법판매 ‘알면서도 묵인?’ (0) | 2008/05/14 |
|---|---|
| 미국산 쇠고기 수입, 광우병 문제 심각! (0) | 2008/05/06 |
| 촛불문화제 사법처리에 대하여... (0) | 2008/05/05 |
| 1천만 대국민 대통령 탄핵 서명 관련 기사 및 링크 (0) | 2008/05/01 |
| 세명대학교 교양정보 : 중국문화의 이해 (0) | 2008/04/22 |
| 세명대학교 교양정보 : 문화산업의 이해 (0) | 2008/04/22 |
취업 신청시 제출할 포트폴리오 입니다.
한글2007로 작성하였습니다.
한글2007로 작성하였습니다.
port.hwp
2008년 5월 6일
미국이 거부한 '가장 위험한 고기', 한국 온다
http://news.nate.com/service/news/shellview.asp?ArticleID=2008050614011516108&LinkID=1&showLayer=1&lsection=GEN&NC=NO_GEN
2008년 5월 5일
-----------------------------------------------------------------------------------
헉! "美쇠고기 광우병위험 높다" 정부문서 유출
http://news.nate.com/service/news/shellview.asp?ArticleID=2008050518470026182&LinkID=1&showLayer=1&lsection=GEN&NC=NO_GEN
2008년 5월 1일
-----------------------------------------------------------------------------------
"대통령부터 '미 쇠고기 먹겠다' 약속하라
http://news.nate.com/service/news/shellview.asp?ArticleID=2008050114180034169&LinkID=1&showLayer=1&lsection=GEN&NC=NO_GEN
일본은 줘도 안 먹는 쇠고기, 한국은 대환영?
http://news.nate.com/service/news/shellview.asp?ArticleID=2008050112420078108&LinkID=1&showLayer=1&lsection=GEN&NC=NO_GEN
2008년 4월 30일
-----------------------------------------------------------------------------------
기사 링크
http://news.nate.com/service/news/shellview.asp?ArticleID=2008043009431992203&LinkID=1&showLayer=1&lsection=GEN&NC=NO_GEN
네이버 대문에 나온 기사
http://news.naver.com/main/read.nhn?mode=LS2D&mid=sec&sid1=101&sid2=310&oid=214&aid=0000069452
여기서 반대 서명
http://agora.media.daum.net/petition/view?id=41444
친구의 말
미국이 거부한 '가장 위험한 고기', 한국 온다
http://news.nate.com/service/news/shellview.asp?ArticleID=2008050614011516108&LinkID=1&showLayer=1&lsection=GEN&NC=NO_GEN
2008년 5월 5일
-----------------------------------------------------------------------------------
헉! "美쇠고기 광우병위험 높다" 정부문서 유출
http://news.nate.com/service/news/shellview.asp?ArticleID=2008050518470026182&LinkID=1&showLayer=1&lsection=GEN&NC=NO_GEN
2008년 5월 1일
-----------------------------------------------------------------------------------
"대통령부터 '미 쇠고기 먹겠다' 약속하라
http://news.nate.com/service/news/shellview.asp?ArticleID=2008050114180034169&LinkID=1&showLayer=1&lsection=GEN&NC=NO_GEN
일본은 줘도 안 먹는 쇠고기, 한국은 대환영?
http://news.nate.com/service/news/shellview.asp?ArticleID=2008050112420078108&LinkID=1&showLayer=1&lsection=GEN&NC=NO_GEN
2008년 4월 30일
-----------------------------------------------------------------------------------
기사 링크
http://news.nate.com/service/news/shellview.asp?ArticleID=2008043009431992203&LinkID=1&showLayer=1&lsection=GEN&NC=NO_GEN
네이버 대문에 나온 기사
http://news.naver.com/main/read.nhn?mode=LS2D&mid=sec&sid1=101&sid2=310&oid=214&aid=0000069452
여기서 반대 서명
http://agora.media.daum.net/petition/view?id=41444
친구의 말
more..
'생활' 카테고리의 다른 글
| 한국MS, 비스타 DSP 불법판매 ‘알면서도 묵인?’ (0) | 2008/05/14 |
|---|---|
| 미국산 쇠고기 수입, 광우병 문제 심각! (0) | 2008/05/06 |
| 촛불문화제 사법처리에 대하여... (0) | 2008/05/05 |
| 1천만 대국민 대통령 탄핵 서명 관련 기사 및 링크 (0) | 2008/05/01 |
| 세명대학교 교양정보 : 중국문화의 이해 (0) | 2008/04/22 |
| 세명대학교 교양정보 : 문화산업의 이해 (0) | 2008/04/22 |
뉴스 보다가 깜짝 놀랐습니다.
촛불 문화제를 사법 처리 하다니 -_-;
무력 시위도 아니고, 촛불 키고 모임 갖는 걸 가지고 사법처리라니 -_-
국민을 너무 우습게 아는 처사가 아닐까 생각합니다.
만약, 전국민이 촛불 문화제를 한다면, 전국민을 사법 처리 할 건가요..? 2MB씨..?
정부가 정말 떳떳하다면 촛불 문화제를 하던 말던 상관 안해야 정상 아닙니까?
뭔가 캥기는게 있으니까, 문화제(집회) 못하게 막으려고 하는 거 아닙니까..?
왜이렇게 생각이 짧으신지들 모르겠네요.
이 나라 정치인들, 공무원들이 왜 욕 먹고 있는지 이해를 전혀 못 하신다 말입니다.
국민의 목소리에 귀를 전혀 기울이지 않는 정부가 존속해서는 안되겠지요.
현 정권은 빠른 시일 안에 막을 내리는 게 나을 것 같습니다.
뭐 하나 제대로 추진하는 일이 있어야 말이지요.
뭐 할 때 마다 욕을 먹고 있는데, 이게 과연 나라가 잘 못 하는 겁니까? 아니면 국민이 잘 못 하는 겁니까?
상식적으로 생각을 해보세요...
대체 무얼 바라보고 있는건지..
경제성장 목표 수치가 그렇게 중요합니까.....?
국민의 여론을 무시하면서 까지 해야 합니까...
에효..
그래도 2MB씨는 대한민국 대통령이라 다행인 줄 아셔야 해요..
쌀국 처럼, 테러인자도 없고, 암살자도 없으니 말입니다.
제발 정신 좀 차리세요... 조중동 좀 그만 보시고요...
일단 저희 집에 오는 동 부터 끊어야 겠군요 -_-;;
촛불 문화제를 사법 처리 하다니 -_-;
무력 시위도 아니고, 촛불 키고 모임 갖는 걸 가지고 사법처리라니 -_-
국민을 너무 우습게 아는 처사가 아닐까 생각합니다.
만약, 전국민이 촛불 문화제를 한다면, 전국민을 사법 처리 할 건가요..? 2MB씨..?
정부가 정말 떳떳하다면 촛불 문화제를 하던 말던 상관 안해야 정상 아닙니까?
뭔가 캥기는게 있으니까, 문화제(집회) 못하게 막으려고 하는 거 아닙니까..?
왜이렇게 생각이 짧으신지들 모르겠네요.
이 나라 정치인들, 공무원들이 왜 욕 먹고 있는지 이해를 전혀 못 하신다 말입니다.
국민의 목소리에 귀를 전혀 기울이지 않는 정부가 존속해서는 안되겠지요.
현 정권은 빠른 시일 안에 막을 내리는 게 나을 것 같습니다.
뭐 하나 제대로 추진하는 일이 있어야 말이지요.
뭐 할 때 마다 욕을 먹고 있는데, 이게 과연 나라가 잘 못 하는 겁니까? 아니면 국민이 잘 못 하는 겁니까?
상식적으로 생각을 해보세요...
대체 무얼 바라보고 있는건지..
경제성장 목표 수치가 그렇게 중요합니까.....?
국민의 여론을 무시하면서 까지 해야 합니까...
에효..
그래도 2MB씨는 대한민국 대통령이라 다행인 줄 아셔야 해요..
쌀국 처럼, 테러인자도 없고, 암살자도 없으니 말입니다.
제발 정신 좀 차리세요... 조중동 좀 그만 보시고요...
일단 저희 집에 오는 동 부터 끊어야 겠군요 -_-;;
'생활' 카테고리의 다른 글
| 한국MS, 비스타 DSP 불법판매 ‘알면서도 묵인?’ (0) | 2008/05/14 |
|---|---|
| 미국산 쇠고기 수입, 광우병 문제 심각! (0) | 2008/05/06 |
| 촛불문화제 사법처리에 대하여... (0) | 2008/05/05 |
| 1천만 대국민 대통령 탄핵 서명 관련 기사 및 링크 (0) | 2008/05/01 |
| 세명대학교 교양정보 : 중국문화의 이해 (0) | 2008/04/22 |
| 세명대학교 교양정보 : 문화산업의 이해 (0) | 2008/04/22 |
서명링크
http://agora.media.daum.net/petition/view?id=40221
관련기사
'이명박 탄핵' 서명 급증하자 박사모 "민란" 경고
http://news.nate.com/service/news/shellview.asp?ArticleID=2008050118210050108&LinkID=8&showLayer=1&lsection=GEN&NC=NO_GEN
http://agora.media.daum.net/petition/view?id=40221
관련기사
'이명박 탄핵' 서명 급증하자 박사모 "민란" 경고
http://news.nate.com/service/news/shellview.asp?ArticleID=2008050118210050108&LinkID=8&showLayer=1&lsection=GEN&NC=NO_GEN
'생활' 카테고리의 다른 글
| 미국산 쇠고기 수입, 광우병 문제 심각! (0) | 2008/05/06 |
|---|---|
| 촛불문화제 사법처리에 대하여... (0) | 2008/05/05 |
| 1천만 대국민 대통령 탄핵 서명 관련 기사 및 링크 (0) | 2008/05/01 |
| 세명대학교 교양정보 : 중국문화의 이해 (0) | 2008/04/22 |
| 세명대학교 교양정보 : 문화산업의 이해 (0) | 2008/04/22 |
| 봄 입니다! (1) | 2008/04/16 |
Prev
