<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
body{
font-size:9pt;
}
div{
border: 1px solid #999999;
margin:20px;
margin-bottom:20px;
}
div div{
border: 1px dotted #CCC;
font-size:20px;
}
#panel {
width:600px;
overflow:visible;
}
</style>
<script>
window.onload=function(){
var panel = document.getElementById('panel');
var array = ["Red", "Orange", "Blue", "Cyan", "Yellow", "Green"];
var now = 1;
setInterval(function (){
var random = parseInt(Math.random()*50+11);
var i = parseInt(Math.random()*array.length+0);
panel.style.fontSize = random + 'PX';
//panel.style.color = array[i];
panel.style.color = '#' + (parseInt(Math.random()*0xffffff)).toString(16);
panel.innerHTML += now + ', ';
now++;
}, 100);
}
</script>
</head>
<body>
<div>
<h4>미션2 - 1초에 하나씩 1부터 숫자를 증가시키며 #panel에 추가 시켜 주세요.<br>
단, 폰트 크기( 10px~ 50px)와 색은 랜덤으로 설정해주세요.</h4>
<div id="panel">
</div>
</div>
</body>
</html>


저작자표시 비영리 변경금지

'2020년도 이전 > [WebSig] JQuery' 카테고리의 다른 글

JQuery를 이용한 레이어 팝업  (0) 2013.07.31
JQuery 기초  (0) 2013.07.29
미션3 - 1초에 한번씩 이미지를 순차적으로 변환시켜 주세요. 단, 이미지는 9개가 있습니다. 9개까지 출력된 경우, 다시 첫번째 이미지부터 출력시켜주세요.  (0) 2013.07.29
#img1을 #bar의 영역에서 계속 좌우로 움직이도록 만들어주세요.  (0) 2013.07.29
#image_view안에는 9개의 이미지가 있습니다. 이미지가 보일 수 있도록 계속해서 상하로 스크롤 해주세요.  (0) 2013.07.29




<!DOCTYPE HTML >
<html>
<head>
<meta charset="utf-8">
<title>jquery</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("span.tooltip").css({
display : "none",
opacity : "0.5",
position: "absolute"
});
$("a").mouseover(function(){
$("span.tooltip").fadeIn();
}).mouseout(function(){
$("span.tooltip").fadeOut();
}).mousemove(function(e){
$("span.tooltip").css({
"top":e.pageY +10+"px",
"left":e.pageX +10+"px"
});
});
});
</script>
<style type="text/css">
body {
background: #777;
color: white;
}
a {
color: #00CCFF;
}
h1 {
width: 80%;
margin: 10px auto;
}
p {
margin: 10px 10%;
}
span.tooltip {
line-height: 1.5;
color: white;
width: 200px;
background: #FF9900;
border: 2px solid white;
padding: 1em;
font-size:10pt;
}
</style>
</head>
<body>
<h1>tooltip sample</h1>
<p>
<a
href="http://ascii.jp/elem/000/000/438/438206/">tooltip sample</a> <span
class="tooltip">이것은ASCII.jp<br /> <strong>Web제작현장에서
사용한 jQuery<br />UI디자인 입문
</strong><br />의 샘플 프로그램입니다.
</span>
</body>
</html>


저작자표시 비영리 변경금지

'2020년도 이전 > [WebSig] JQuery' 카테고리의 다른 글

미션2 - 1초에 하나씩 1부터 숫자를 증가시키며 #panel에 추가 시켜 주세요. 단, 폰트 크기( 10px~ 50px)와 색은 랜덤으로 설정해주세요.  (0) 2013.07.31
JQuery 기초  (0) 2013.07.29
미션3 - 1초에 한번씩 이미지를 순차적으로 변환시켜 주세요. 단, 이미지는 9개가 있습니다. 9개까지 출력된 경우, 다시 첫번째 이미지부터 출력시켜주세요.  (0) 2013.07.29
#img1을 #bar의 영역에서 계속 좌우로 움직이도록 만들어주세요.  (0) 2013.07.29
#image_view안에는 9개의 이미지가 있습니다. 이미지가 보일 수 있도록 계속해서 상하로 스크롤 해주세요.  (0) 2013.07.29



<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
body{
font-size:9pt;
}
div{
border: 1px solid #999999;
margin:20px;
margin-bottom:20px;
}
div div{
border: 1px dotted #CCC;
}
.active{
font-size:20pt;
color:#090;
border:5px solid #ff0000;
}
</style>
<script>
window.onload=function(){
}
function solveM1(){
}
function solveM2(){
}
function solveM3(){
}
function solveM4(){
}
function solveM5(){
}
function solveM6(){
}
</script>
</head>
<body>
<div>
<h4>테스트1</h4>
<div id="m_1">
#m_1 : 글자색을 빨간색으로 변경해주세요.
</div>
</div>
<div>
<h4>테스트2</h4>
<div id="m_2">
#m_2 : 클래스 active를 적용시켜 주세요.
</div>
</div>
<div>
<h4>테스트3</h4>
<div id="m_3">
#m_3 : 에고 이 이미지가 아닌데... 이미지를 ch3.png로 변경해주세요"<br>
<img src="ch2.png">
</div>
</div>
<div>
<h4>테스트4</h4>
<div id="m_4">
#m_ 4 : 홋! 항목4까지 있어야 하는건데, 바쁜나머지 실수를 했군요. 항목4를 제일 뒤에 추가해주시겠어요?
<p>
항목1
</p>
<p>
항목2
</p>
<p>
항목3
</p>
</div>
</div>
<div>
<h4>테스트5</h4>
<div id="m_5">
#m_ 5 : 이번에는 항목4가 더 추가되었네요. 즉시 삭제해주세요.
<p>
항목1
</p>
<p>
항목4
</p>
<p>
항목2
</p>
</div>
</div>
<div>
<h4>테스트6</h4>
<div id="m_6">
#m_ 6 : 이런이런! 이 부분은 전혀 필요없는 내용들인데 왜 있는거죠? #m_6부터 헤더태그까지 모두 삭제해주세요.
<p>
DOM(Document Object Model)이란?<br>
웹페이지 문서를 조작하기 위해서 지켜야될 약속(interface)만 딸랑 적혀있는 문서랍니다.
약속만 있을뿐 내부는 텅빈 상자랍니다.
우리가 알고있는 W3C DOM에는 구현소스가 한줄도 존재하지 않습니다.
그럼 실제 구현소스는??
</p>
</div>
</div>
</body>

</html>

-------------------------------------------------------------------------------------------------------





<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
body{
font-size:9pt;
}
div{
border: 1px solid #999999;
margin:20px;
margin-bottom:20px;
}
div div{
border: 1px dotted #CCC;
}
.active{
font-size:20pt;
color:#090;
border:5px solid #ff0000;
}
</style>
<script>
window.onload=function(){
solveM1();
solveM2();
solveM3();
solveM4();
solveM5();
solveM6();
}
function solveM1(){
var m = document.getElementById('m_1');
m.style.color='red';
}
function solveM2(){
var m = document.getElementById('m_2');
m.setAttribute("class","active");
}
function solveM3(){
var m = document.getElementById('m_3');
var imgimg = document.getElementById('imgimg');
imgimg.setAttribute('src', './images/navi.jpg')
}
function solveM4(){
var m = document.getElementById('m_4');
var output ='';
output += '<p>';
output += '항목4';
output += '</p>';
m.innerHTML += output;
}
function solveM5(){
var m = document.getElementById('m_5');
var p1 = document.getElementById('p1');
m.removeChild(p1);
}
function solveM6(){
var m = document.getElementById('test6');
test6.parentNode.removeChild(m);
}
</script>
</head>
<body>
<div>
<h4>테스트1</h4>
<div id="m_1">
#m_1 : 글자색을 빨간색으로 변경해주세요.
</div>
</div>
<div>
<h4>테스트2</h4>
<div id="m_2">
#m_2 : 클래스 active를 적용시켜 주세요.
</div>
</div>
<div>
<h4>테스트3</h4>
<div id="m_3">
#m_3 : 에고 이 이미지가 아닌데... 이미지를 ch3.png로 변경해주세요"<br>
<img src="ch2.png" id="imgimg">
</div>
</div>
<div>
<h4>테스트4</h4>
<div id="m_4">
#m_ 4 : 홋! 항목4까지 있어야 하는건데, 바쁜나머지 실수를 했군요. 항목4를 제일 뒤에 추가해주시겠어요?
<p>
항목1
</p>
<p>
항목2
</p>
<p>
항목3
</p>
</div>
</div>
<div>
<h4>테스트5</h4>
<div id="m_5">
#m_ 5 : 이번에는 항목4가 더 추가되었네요. 즉시 삭제해주세요.
<p>
항목1
</p>
<p id="p1">
항목4
</p>
<p>
항목2
</p>
</div>
</div>
<div id="test6">
<h4>테스트6</h4>
<div id="m_6">
#m_ 6 : 이런이런! 이 부분은 전혀 필요없는 내용들인데 왜 있는거죠? #m_6부터 헤더태그까지 모두 삭제해주세요.
<p>
DOM(Document Object Model)이란?<br>
웹페이지 문서를 조작하기 위해서 지켜야될 약속(interface)만 딸랑 적혀있는 문서랍니다.
약속만 있을뿐 내부는 텅빈 상자랍니다.
우리가 알고있는 W3C DOM에는 구현소스가 한줄도 존재하지 않습니다.
그럼 실제 구현소스는??
</p>
</div>
</div>
</body>
</html>






저작자표시 비영리 변경금지

'2020년도 이전 > [WebSig] JQuery' 카테고리의 다른 글

미션2 - 1초에 하나씩 1부터 숫자를 증가시키며 #panel에 추가 시켜 주세요. 단, 폰트 크기( 10px~ 50px)와 색은 랜덤으로 설정해주세요.  (0) 2013.07.31
JQuery를 이용한 레이어 팝업  (0) 2013.07.31
미션3 - 1초에 한번씩 이미지를 순차적으로 변환시켜 주세요. 단, 이미지는 9개가 있습니다. 9개까지 출력된 경우, 다시 첫번째 이미지부터 출력시켜주세요.  (0) 2013.07.29
#img1을 #bar의 영역에서 계속 좌우로 움직이도록 만들어주세요.  (0) 2013.07.29
#image_view안에는 9개의 이미지가 있습니다. 이미지가 보일 수 있도록 계속해서 상하로 스크롤 해주세요.  (0) 2013.07.29


images.zip

미션3 - 1초에 한번씩 이미지를 순차적으로 변환시켜 주세요.
단, 이미지는 9개가 있습니다. 9개까지 출력된 경우, 다시 첫번째 이미지부터 출력시켜주세요.


<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
body {
font-size: 9pt;
}
div {
border: 1px solid #999999;
margin: 20px;
margin-bottom: 20px;
}
div div {
border: 1px dotted #CCC;
font-size: 20px;
}
</style>
<script>
window.onload=function(){
var panel = document.getElementById('panel');
var img1 = document.getElementById('img1');
var cnt = 2;
setInterval(function (){
if(cnt > 9){
cnt = 1;
}
img1.setAttribute('src', './images/img'+ cnt + '.jpg');
cnt++;
}, 1000);
}
</script>
</head>
<body>
<div>
<h4>
미션3 - 1초에 한번씩 이미지를 순차적으로 변환시켜 주세요.<br> 단, 이미지는 9개가 있습니다. 9개까지
출력된 경우, 다시 첫번째 이미지부터 출력시켜주세요.
</h4>
<div id="panel">
<img id="img1" src="images/img1.jpg" alt="이미지">
</div>
</div>
</body>
</html>


저작자표시 비영리 변경금지

'2020년도 이전 > [WebSig] JQuery' 카테고리의 다른 글

JQuery를 이용한 레이어 팝업  (0) 2013.07.31
JQuery 기초  (0) 2013.07.29
#img1을 #bar의 영역에서 계속 좌우로 움직이도록 만들어주세요.  (0) 2013.07.29
#image_view안에는 9개의 이미지가 있습니다. 이미지가 보일 수 있도록 계속해서 상하로 스크롤 해주세요.  (0) 2013.07.29
경품 추첨기  (0) 2013.07.29


images.zip



#img1을 #bar의 영역에서 계속 좌우로 움직이도록 만들어주세요.


<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
body {
font-size: 9pt;
}
#panel {
width: 600px;
height: 300px;
border: 1px solid #999;
position: relative;
}
#bar {
position: absolute;
left: 50px;
top: 190px;
width: 500px;
height: 20px;
background: #F30;
}
#img1 {
position: absolute;
left: 50px;
top: 70px;
}
#nav {
text-align: center;
width: 600px;
}
</style>
<script>
window.onload=function(){
this.initEventListener();
}
function initEventListener(){
var img1 = document.getElementById('img1');
var nowLeft = img1.offsetLeft; //초기 이미지 위치
var endLeft;
var moveLeft = 0; //움직이는 동안의 이미지 위치
var speed = 2; //속도
var chk=0; //앞으로 갈지, 뒤로 갈지 체크하는 변수
var goTimer; //setInterval을 정지시키기 위해서 사용하는 변수
var btnStart = document.getElementById("btn_start").addEventListener("click",function(){
clearInterval(goTimer);
start();
},false);
var btnStop = document.getElementById("btn_stop").addEventListener("click",function(){
clearInterval(goTimer);
},false);
function start(){
//clearInterval을 사용하기 위해서 goTimer가 setInterval을 참조한다.
//참조하는 동시에 setInterval(moveImg, 10) 실행!!!
goTimer = setInterval(moveImg, 10);
}
function moveImg(){
if(chk == 0){ // chk가 0이면 앞으로 += 하며 출발!!!
nowLeft += speed; //속도인 speed를 2로 지정했었지요...
moveLeft = nowLeft + "px";
if(nowLeft > 430){ //좌표 430까지 가면 chk=1로 하여 뒤로 돌아가기 위한 조건을 준다.
chk = 1;
}
}
if(chk == 1){ // chk가 1이면 뒤로 -= 하며 출발!!!
nowLeft -= speed; //뒤로 -하며 돌아가겠지요?
moveLeft = nowLeft + "px";
if(nowLeft == 50){ //첫 위치인 50에 도착하면 chk=0 으로 하여 앞으로 가기 위한 조건을 준다.
chk = 0;
}
}
img1.style.left = moveLeft;
}
}
</script>
</head>
<body>
<div>
<h4>#img1을 #bar의 영역에서 계속 좌우로 움직이도록 만들어주세요.</h4>
<div id="panel">
<div id="bar"></div>
<div id="img1">
<img src="images/img1.jpg">
</div>
</div>
<div id="nav">
<button id="btn_start">시작</button>
<button id="btn_stop">멈춤</button>
</div>
</div>
</body>
</html>


저작자표시 비영리 변경금지

'2020년도 이전 > [WebSig] JQuery' 카테고리의 다른 글

JQuery 기초  (0) 2013.07.29
미션3 - 1초에 한번씩 이미지를 순차적으로 변환시켜 주세요. 단, 이미지는 9개가 있습니다. 9개까지 출력된 경우, 다시 첫번째 이미지부터 출력시켜주세요.  (0) 2013.07.29
#image_view안에는 9개의 이미지가 있습니다. 이미지가 보일 수 있도록 계속해서 상하로 스크롤 해주세요.  (0) 2013.07.29
경품 추첨기  (0) 2013.07.29
JQuery를 이용한 슬라이드 토글 가로 메뉴  (0) 2013.07.29


images.zip


<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
body{
font-size:9pt;
}
#panel{
width:600px;
height:300px;
border:1px solid #999;
position:relative;
}
#panel #image_view{
left:236px;
top:80px;
width:128px;
height:128px;
border:1px solid #999;
position:relative;
overflow:hidden;
}
#nav{
text-align:center;
width:600px;
}
</style>
<script>
var objimage_view;
var nImageScrollHeight; // 전체 이미지 스크롤 높이값을 담을 변수.
var nCurrentY; // 현재 스크롤 위치값.
var nTimerID;
var nStep; // 한번에 이동하게 될 이동값.
window.onload=function(){
objimage_view = document.getElementById("image_view");
// 전체 이미지 스크롤 높이값 구하기.
nImageScrollHeight = objimage_view.scrollHeight;
nImageScrollHeight -=objimage_view.offsetHeight;
nStep = 2;
nTimerID = 0;
nCurrentY = 0;
// 이벤트초기화.
// 스크롤 시작버튼 이벤트 리스너 등록.
document.getElementById("btn_start").addEventListener("click",function(){
if(nTimerID==0){
nTimerID = setInterval(startMove,20);
}
if(nTimerID==3){
alert("setInterval 3번 호출?");
}
alert(nTimerID);
},false);
// 스크롤 멈춤버튼 이벤트 리스너 등록.
document.getElementById("btn_stop").addEventListener("click",function(){
if(nTimerID!=0){
alert(nTimerID);
clearInterval(nTimerID);
nTimerID = 0;
}
},false);
}
// 이미지를 상하로 스크롤 시키는 함수.
function startMove(){
nCurrentY += nStep;
// 현재 스크롤 위치가 마지막 위치인지 판단하기.
if( nCurrentY> nImageScrollHeight){
nCurrentY = nImageScrollHeight;
nStep = -2;
}
// 현재 스크롤 위치가 시작 위치인지 판단하기.
if(nCurrentY<0){
nCurrentY = 0;
nStep = 2;
}
// scrollTop프로퍼티를 이용한 이미지 스크롤 시키기.
objimage_view.scrollTop=nCurrentY;
}
</script>
</head>
<body>
<div>
<h4>#image_view안에는 9개의 이미지가 있습니다. 이미지가 보일 수 있도록 계속해서 상하로 스크롤 해주세요.</h4>
<div id="panel">
<div id="image_view">
<img src="images/img1.jpg">
<img src="images/img2.jpg">
<img src="images/img3.jpg">
<img src="images/img4.jpg">
<img src="images/img5.jpg">
<img src="images/img6.jpg">
<img src="images/img7.jpg">
<img src="images/img8.jpg">
<img src="images/img9.jpg">
</div>
</div>
<div id="nav">
<button id="btn_start">시작</button>
<button id="btn_stop">멈춤</button>
</div>
</div>
</body>
</html>


저작자표시 비영리 변경금지

'2020년도 이전 > [WebSig] JQuery' 카테고리의 다른 글

미션3 - 1초에 한번씩 이미지를 순차적으로 변환시켜 주세요. 단, 이미지는 9개가 있습니다. 9개까지 출력된 경우, 다시 첫번째 이미지부터 출력시켜주세요.  (0) 2013.07.29
#img1을 #bar의 영역에서 계속 좌우로 움직이도록 만들어주세요.  (0) 2013.07.29
경품 추첨기  (0) 2013.07.29
JQuery를 이용한 슬라이드 토글 가로 메뉴  (0) 2013.07.29
JQuery를 이용한 슬라이드 토글 세로 메뉴  (0) 2013.07.29



<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
body {
font-size: 9pt;
}
#panel1 {
border: 1px #000000 solid;
line-height: 400px;
font-size: 100px;
width: 400px;
height: 400px;
text-align: center;
vertical-align: middle;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
var stopinter;
$('#btn_Start').click(function() {
clearInterval(stopinter);
start();
});
function start() {
stopinter = setInterval(moveStart, 100);
}
function moveStart() {
var btn = $('#lab_total').val();
var num = parseInt(Math.random() * btn + 1);
$('#panel1').html(num);
$('#panel1').css('color','#' + (parseInt(Math.random()*0xffffff)).toString(16));
$('#panel1').css('font-size', parseInt(Math.random() * 300 + 1) + 'px');
}
$('#btn_Stop').click(function() {
clearInterval(stopinter);
});
});
</script>
</head>
<body>
<div>
<h4>경품추첨기-ver 0.1</h4>
<div id="panel1"></div>
<div id="nav">
참여인원 : <input type="text" id="lab_total" value="100"></input>
<button id="btn_Start">시작</button>
<button id="btn_Stop">멈춤</button>
</div>
</div>
</body>
</html>


저작자표시 비영리 변경금지

'2020년도 이전 > [WebSig] JQuery' 카테고리의 다른 글

#img1을 #bar의 영역에서 계속 좌우로 움직이도록 만들어주세요.  (0) 2013.07.29
#image_view안에는 9개의 이미지가 있습니다. 이미지가 보일 수 있도록 계속해서 상하로 스크롤 해주세요.  (0) 2013.07.29
JQuery를 이용한 슬라이드 토글 가로 메뉴  (0) 2013.07.29
JQuery를 이용한 슬라이드 토글 세로 메뉴  (0) 2013.07.29
JQuery를 이용한 갤러리....  (0) 2013.07.29


images.zip

 <!DOCTYPE HTML >

<html>

 <head>

  <meta charset="utf-8">

  <title>jquery</title>

   

  <script src="http://code.jquery.com/jquery-1.10.1.min.js">

  </script>

<style type="text/css">


body{

background:#252422;

}

div{

width:800px;

height:300px;

margin:50px auto;

overflow:hidden;

}

dl{

width:900px;

height:300px;

}

dt{

width:35px;

height:300px;

float:left;

}

dt span{

display:block;

width:100%;

height:100%;

text-indent:-9999px;

}

dt span.over{

cursor:pointer;

}

dt span.selected{

cursor:default;

}

dt#step1 span{

background:url("images/background-1.jpg");

}

dt#step1 span.over{

background:url("images/background-1-over.jpg");

}

dt#step1 span.selected{

background:url("images/background-1-selected.jpg");

}

dt#step2 span{

background:url("images/background-2.jpg");

}

dt#step2 span.over{

background:url("images/background-2-over.jpg");

}

dt#step2 span.selected{

background:url("images/background-2-selected.jpg");

}

dt#step3 span{

background:url("images/background-3.jpg");

}

dt#step3 span.over{

background:url("images/background-3-over.jpg");

}

dt#step3 span.selected{

background:url("images/background-3-selected.jpg");

}

dd{

margin:0;

width:695px;

height:300px;

float:left;

background:#D4D0C8;

overflow:hidden;

}

dd  p{

width:655px;

text-indent:1em;

padding:20px;

}


</style>

<script type="text/javascript">

$(document).ready(function(){

$('dd:not(:first)').css('width', '0px');

$("dt:first span").addClass("selected");

$('dl dt').click(function(){

if($('+dd', this).css('width')=='0px'){

$('dt:has(.selected) +dd').animate({'width':'0px'});

$('+dd', this).animate({'width':'695px'});

$('dt span').removeClass('selected');

$('span', this).addClass('selected');

}

}).mouseover(function(){

$("span", this).addClass("over");

}).mouseout(function(){

$("span", this).removeClass("over");

});

});

</script>

</head>

<body>

<div>

<dl>

<dt id="step1"><span>Step.1</span></dt>

<dd><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis neque urna, molestie id cursus non, bibendum nec magna. Mauris consequat faucibus ante sollicitudin ullamcorper. Proin et felis orci. Nulla vitae diam sit amet felis semper ultricies. Nulla vitae mauris sit amet augue pulvinar pulvinar. Donec tincidunt viverra turpis eget suscipit. Morbi eu lacus iaculis turpis suscipit pretium. Aenean ultricies scelerisque dictum. Phasellus tincidunt, nibh lacinia facilisis aliquam, lacus quam condimentum orci, id lacinia justo odio vel purus. Mauris molestie tortor eu purus facilisis at congue sapien commodo. Sed ac eros vitae odio ultrices mollis nec a lorem. Phasellus sit amet dolor nec tellus consequat ornare sit amet ut ipsum. Vestibulum sagittis, mi sed pulvinar semper, lacus mauris lobortis eros, eu egestas est lectus nec lacus. Donec in lacus quis elit consectetur accumsan sit amet sed tortor. Etiam id vestibulum libero. Nam faucibus tincidunt felis, eu feugiat nibh fringilla vel. Donec adipiscing dictum imperdiet. Nulla ac fringilla neque. Curabitur posuere euismod est vel vehicula. Curabitur quis ligula sit amet quam tempus venenatis.</p></dd>

<dt id="step2"><span>Step.2</span></dt>

<dd><p>Integer rhoncus felis mauris. Donec massa nisi, posuere vel posuere vel, suscipit sed magna. Sed congue scelerisque odio, faucibus tempor nisl posuere condimentum. In eu tellus vitae elit consequat pretium. Maecenas nec ultrices dolor. Curabitur eu pulvinar turpis. Aenean vel tortor justo, id dapibus velit. Mauris pulvinar massa sit amet erat mollis sit amet ornare tellus aliquet. Quisque ullamcorper elementum libero, ut vehicula neque placerat nec. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Morbi et ante turpis, et fringilla tortor. In hac habitasse platea dictumst. Proin eros urna, sagittis vitae tristique et, ullamcorper ac leo. Donec elementum arcu tortor. Praesent tincidunt dui in est adipiscing ac lobortis lorem porttitor. Nullam et dui elit. Vivamus hendrerit vestibulum enim, quis lobortis erat viverra vitae. Donec at pellentesque mi. Mauris lobortis libero ac metus ultricies accumsan. </p></dd>

<dt id="step3"><span>Step.3</span></dt>

<dd><p>Integer pretium porttitor lectus at tempor. Donec nec cursus elit. Maecenas ornare malesuada urna vitae lobortis. Sed vulputate sapien quis purus cursus consectetur. Aenean nulla neque, egestas ut accumsan nec, convallis vel enim. Vestibulum vehicula interdum diam nec condimentum. Etiam in condimentum justo. Fusce a tortor metus, id pellentesque orci. Sed facilisis, tellus quis tempus faucibus, justo elit sodales lorem, eget placerat lectus risus bibendum ipsum. Donec varius mattis quam eu consequat. Praesent ut metus nec nibh tincidunt suscipit. Nam vulputate sodales egestas. Sed orci lectus, vestibulum ac gravida eget, congue non velit. Morbi rutrum convallis orci, in hendrerit arcu vulputate a. Aliquam aliquam facilisis libero, sit amet facilisis lacus tincidunt ac. Sed viverra nulla sit amet turpis egestas nec molestie justo congue. Vivamus a lacinia sem. Aenean ut metus arcu, non ornare orci. Praesent feugiat est eu tellus dictum ac imperdiet nisi imperdiet. </p></dd>

</dl>

</div>

</body>

</html>


저작자표시 비영리 변경금지

'2020년도 이전 > [WebSig] JQuery' 카테고리의 다른 글

#img1을 #bar의 영역에서 계속 좌우로 움직이도록 만들어주세요.  (0) 2013.07.29
#image_view안에는 9개의 이미지가 있습니다. 이미지가 보일 수 있도록 계속해서 상하로 스크롤 해주세요.  (0) 2013.07.29
경품 추첨기  (0) 2013.07.29
JQuery를 이용한 슬라이드 토글 세로 메뉴  (0) 2013.07.29
JQuery를 이용한 갤러리....  (0) 2013.07.29

+ Recent posts

티스토리툴바