반응형
jQuery를 사용하는 이유
자바스크립트에서는 문자를 클릭해서 사라지게 하려면 이런 코드를 사용해야 한다.
function pHide() {
document.getElementById("p1").style.display = "none";
}
제이쿼리를 사용하면 이런 코드로 함축이 가능하다.
("#p1").hide();
제이쿼리를 사용하는 이유는, 자바스크립트의 문장을 더욱더 간결하게 사용하기 위해서 사용한다.
jQuery UI
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQue
jqueryui.com
jQuery 라이브러리에는 좋은 기능들을 미리 만들어놔서 가져다가 사용하면 된다.
단순히 보고 넘어가보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../CSS/layout2.css">
<link rel="stylesheet"
href="https://code.jquery.com/ui/1.13.3/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
<script>
$(function() {
$("#accordion").accordion();
});
</script>
</head>
<body>
<div id="main-box">
<div id="header">header</div>
<div id="aside">
<div id="accordion">
<h3>상품소개</h3>
<div>
<p>우리 상품은?</p>
</div>
<h3>회사 소개</h3>
<div>
<p>우리 회사는</p>
</div>
</div>
</div>
<div id="content">content</div>
<div id="footer">"footer"</div>
</div>
</body>
</html>
jQuery 생성자 선택(Selector)
- []안에 들어 있는 것은 elements 요소의 속성을 말한다. href와 같은..
- a[target='_blank']는 elements 요소인 a안에 있는 target 속성중 _blank 속성이 들어가 있는 것
- :button은 elements 요소와 그 안에 있는 타입들중 모든 button을 선택한다.
- tr elements의 요소중 even 짝수인것, odd 홀수인것
- 멀티 셀렉터로 1개이상의 셀렉터 설정
jQuery 본격적으로 사용
jQuery 링크 (HTML 헤드 부분 기입) 처음 사용하기전 무조건 링크를 넣어주자. (까먹는경우 빈번하다)
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
jQuery 사용 형식 및 초기화 코드
- 처음부터 이 코드 그대로를 치지 말고, $() -> function 넣어야지 , $(function(){}) 이런 순서로 샌드위치식으로 넣자.
/* jQuery사용 형식
jQuery(selector).action(처리함수);
jQuery(selector).event(처리함수);
jQuery -> $
$(selector).event(처리함수);
*/
window.onload = function(){
console.log("---window.onload---")
};
/* jQuery 초기화 */
jQuery(document).ready(function(){
console.log("---jQuery(document).ready()---")
});
/* jQuery 초기화2 */
$(document).ready(function(){
console.log("---$(document).ready()---")
});
/* jQuery 초기화3 */
$(function(){
console.log("---$(function(){})---")
});
document내의 Element가 생성배치 완료되어야 jQuery문을 사용할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- jquery 라이브러리 추가
자바스크립트 라이브러리 1개
-->
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script type="text/javascript">
// window.onload : 모든 객체가 로딩된후
// $(document).ready(function(){}: 무거운건 빼고
// 1) jQuery(식별자) : selector
// 2) $(식별자) : selector
/* 1.선언적방식 */
function fn_bt1(){
}
/* 2.리터럴방식 */
const bt1_click = function(){
alert("버튼1(리터럴Fn) 눌림");
}
$(document).ready(function(){
/* var b =
document.getElementById("btn1"); */
// 이벤트 핸들러 등록
/* $("#btn1").bind('click', function(){
alert("버튼(bind) 눌림");
}); */
// $("#btn1").bind('click', bt1_click);
jQuery("#btn1").click(function() {
alert("버튼1이 클릭이 되었습니다.");
});
// btn2를 클릭하면 사용자가 입력한
// 메세지를 가져와서 경고창에 띄우기
$("#btn2").click(function(){
var msg = $("input#msg").val();
//document.getElementById("msg").value;
alert(msg);
//document.getElementById("msg").value='헐 대박';
$("#msg").val("헐 대박");
$(this).val("Changed!!");
//$("#btn2").val("Changed!!");
});
});
</script>
</head>
<body>
메세지: <input type="text"
name="msg" id="msg" value=""/>
<br>
<input type="button" id="btn1" value="버튼1" />
<input type="button" id="btn2" value="입력된 메세지" />
</body>
</html>
// document.getElementById("res_year").innerHTML = year;
// JS JQuery
// value -> val()
// InnerHTML -> html()
$('#res_year').html(year);
BMI 구하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
label {
display: inline-block;
width: 80px;
text-align: right;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script type="text/javascript">
const regular_number = /^[0-9]{2,3}(\.[0-9]{1,2})?$/;
const regular_number2 = /^[0-9]{1,2}(\.[0-9]{1,2})?$/;
function result() {
let n1 = $("#body-length").val();
let n2 = $("#body-weight").val();
if(regular_number.test(n1)==false) {
alert('숫자만 입력하세요');
$("body-length").val("");
$("body-length").focus();
return;
}
if(regular_number2.test(n2)==false) {
alert('숫자만 입력하세요');
$("body-weight").val("");
$("body-weight").focus();
return;
}
let num1 = Number(n1/100);
let num2 = Number(n2);
let result = Math.round(num2/(num1*num1)*10)/10;
let BMI = "";
const bmiColor = document.querySelector("#status");
const bmiColor2 = document.querySelector("#bmi");
if(result < 18.4) {
BMI = "저체중";
bmiColor.style.cssText = "color:blue; font-weight:bold";
$("#bmi").css("color","blue");
} else if(18.4 <= result && result < 23) {
BMI = "정상";
bmiColor.style.cssText = "color:green; font-weight:bold";
$("#bmi").css("color","green");
} else if(23 <= result && result < 25) {
BMI = "과체중";
bmiColor.style.cssText = "color:orange; font-weight:bold";
bmiColor2.style.cssText = "color:orange; font-weight:bold";
} else if(25 <= result && result < 30) {
BMI = "경도비만";
bmiColor.style.cssText = "color:red; font-weight:bold";
bmiColor2.style.cssText = "color:red; font-weight:bold";
} else {
BMI = "중등도비만";
bmiColor.style.cssText = "color:red; font-weight:bold";
bmiColor2.style.cssText = "color:red; font-weight:bold";
}
$("#bmi").html(result);
// $("#bmi").html()
$("#status").html(BMI);
}
$(document).ready(function(){
$("#btn-result").click(result);
});
</script>
</head>
<body>
<hr>
<h3>BMI 구하기</h3>
<hr>
<div>
<label>키(cm)</label>:<input id="body-length" value="">
</div>
<div>
<label>몸무게(kg):</label><input id="body-weight" value="">
</div>
<div>
<input type="button" id="btn-result" value="확인">
</div>
<div>
<h4>결과</h4>
<p>BMI : <span id="bmi">20.5</span></p>
<p>상태 : <span id="status">정상</span></p>
</div>
<img src="images/BMI.JPG">
</body>
</html>
// class selector:
/* <input class="btn3" /> */
$(".btn3").click(function(){
//$("input[value='btn3']").click(function(){
var p = $("p#p1").html();
// $(this) <= Event발생시킨 Element
let btn_text = $(this).val();
// alert(btn_text + p);
// id가 p2인 곳에 html을 누른 btn_text 번호로 넣어주겠다.
$("#p2").html(btn_text);
});
</script>
</head>
<body>
<input type="button" value="btn1" id="btn1" />
<input type="button" value="btn2" id="btn2" />
<input type="button" value="btn3" class="btn3" />
<input type="button" value="btn4" class="btn3" />
<div id="aa">오늘은 수능날</div>
<div id="bb">날씨가 추워야하는데</div>
<p id="p1">1.수능한파.. 없음 땡 : 열대기후</p>
<p id="p2">2.수능한파.. 없음 땡 : 열대기후</p>
</body>
</html>
jQuery에서 css 스타일 적용하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.title{
background: black;
color: white;
border: 1px dotted green;
}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// 문서가 로딩된 후에 함수가 실행
$(document).ready(function(){
// jquery : CSS에 사용하던 선택자를
// 그대로 사용할수 있다.
// id가 pwd 인 요소를 1px 실선 레드
$("#pwd").css("border","1px solid red");
// document.getElementById("pwd").style.border = "1px solid red";
// CSS : #pwd { border:1px solid red; }
$("#id").css("border","1px solid blue");
// class row 인 요소를 찾아
// 초록색 점선으로 표시
// Method Chainning방식
// cf)java=> jtf_name.getText().trim();
$(".row").css("border","1px dotted green")
$(".row").css("background", "black");
$(".row").css("color", "white");
//.css("background","black")
//.css("color","white");
//기 선언된 CSS를 적용
// CSS에서 .title {} 선언된 내용 적용
//$(".row").addClass("title");
// 제거
$(".row").removeClass("title");
// Attribute Selector []안에 있는 것은 속성을 나타낸다 href 같은..
$("input[type='submit']").css("border","1px solid blue");
$("input[value='RESET']").css("border","1px solid red");
// Element Selector
$("table").css("border","2px solid blue");
$("td:last").hide();
});
</script>
</head>
<body>
<table>
<tr>
<th class="row">ID :</th>
<td>
<input type="text" id="id" />
</td>
</tr>
<tr>
<th class="row">PW :</th>
<td>
<input type="text" id="pwd" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="로그인" />
<input type="reset" value="RESET" />
</td>
</tr>
</table>
</body>
</html>
- 여러가지 Selector를 활용해서 HTML 화면 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test10.html</title>
<style type="text/css">
a{
text-decoration: none;
font-size: 12px;
color : #7788cc;
font-weight: bold;
}
/* 마우스가 올라간 경우 */
a:hover{
text-decoration: none;
color : #1122ff;
font-weight: bold;
}
p{
width: 120px;
}
img{
width: 120px;
height: 120px;
border: 1px solid gray;
outline: 1px solid black;
}
.style_div{
border: 1px solid blue;
float: left;
margin: 10px;
padding: 10px;
height: 220px;
}
.style_div:hover{
border: 1px solid red;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/* $("img").css("width","120px")
.css("height","120px"); */
$("ul").css("list-style","none");
$("div.book").addClass("style_div");
$('.book').click(function(){
var title =$(this).find("p > a").html();
if(title == undefined)
title =$(this).find("p").html();
//가격알아보기
// var price =$(this).children().eq(2).html();
// parent > child : 자식요소
// brother1 + brother2(두번째 p를 선택하다) : 형제요소
let price = $(this).fine("p+p").html();
alert(title+":" + price);
});
});
</script>
</head>
<body>
<!-- 책이미지를 구해 4*4 크기 모양으로
책이미지, 도서명 가격 정보를 출력하시요 -->
<h2>도서정보</h2>
<ul>
<li>
<div class="book" id="book1">
<img src="images/book1.jpg" />
<p><a href="test09.html">인생수업이란 무엇일까요?</a></p>
<p>11,700원</p>
</div>
</li>
<li>
<div class="book" id="book2">
<img src="images/book2.jpg" />
<p><a href="#">관계의 힘</a></p>
<p>11,700원</p>
</div>
</li>
<li>
<div class="book" id="book3">
<img src="images/book3.jpg" />
<p><a href="#">제 3인류</a></p>
<p>12,420원</p>
</div>
</li>
<li>
<div class="book" id="book4">
<img src="images/book4.jpg" />
<p>총균쇠</p>
<p>14,000원</p>
</div>
</li>
<li>
<div class="book" id="book5">
<img src="images/book5.jpg" />
<p>정글만리</p>
<p>11,700</p>
</div>
</li>
<li>
<div class="book" id="book6">
<img src="images/book6.jpg" />
<p>높고푸른 사다리</p>
<p>11,700</p>
</div>
</li>
<li>
<div class="book" id="book7">
<img src="images/book7.jpg" />
<p>1cm +</p>
<p>12,420</p>
</div>
</li>
<li>
<div class="book" id="book8">
<img src="images/book8.jpg" />
<p>행복한 그림자의 춤</p>
<p>9,000</p>
</div>
</li>
<li>
<div class="book" id="book9">
<img src="images/book9.jpg" />
<p>이중섭:편지와 그림들</p>
<p>10,500</p>
</div>
</li>
<li>
<div class="book" id="book10">
<img src="images/book10.jpg" />
<p>알랭드 보통의 영혼의 미술관</p>
<p>25,200</p>
</div>
</li>
<li>
<div class="book" id="book11">
<img src="images/book11.jpg" />
<p>산사로 가는 즐거움</p>
<p>12,600</p>
</div>
</li>
<li>
<div class="book" id="book12">
<img src="images/book12.jpg" />
<p>멈추면, 비로소 보이는 것들</p>
<p>10,000</p>
</div>
</li>
<li>
<div class="book" id="book13">
<img src="images/book13.jpg" />
<p>감정은 습관이다</p>
<p>12,600</p>
</div>
</li>
<li>
<div class="book" id="book14">
<img src="images/book14.jpg" />
<p>해커스 토익: READING</p>
<p>15,790</p>
</div>
</li>
<li>
<div class="book" id="book15">
<img src="images/book15.jpg" />
<p>철학하라</p>
<p>17,500</p>
</div>
</li>
<li>
<div class="book" id="book16">
<img src="images/book16.jpg" />
<p>꾸뻬씨의 행복 여행</p>
<p>8,640</p>
</div>
</li>
<li>
<div class="book" id="book17">
<img src="images/book17.jpg" />
<p>마시멜로 세번째 이야기</p>
<p>12,600</p>
</div>
</li>
<li>
<div class="book" id="book18">
<img src="images/book18.jpg" />
<p>예감은 틀리지 않는다</p>
<p>6,400</p>
</div>
</li>
<li>
<div class="book" id="book19">
<img src="images/book19.jpg" />
<p>명작순례</p>
<p>16,200</p>
</div>
</li>
<li>
<div class="book" id="book20">
<img src="images/book20.jpg" />
<p>3배속 살림법</p>
<p>7,900</p>
</div>
</li>
</ul>
</body>
</html>
- jQuery 선택자에 대하여 적용한 html 문서 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table { table-layout: auto; width: 75%}
tr { color: blue; font-weight: bold;}
.selectClass {
/* 이미 같은 속성이 다른곳에 적용되어있는경우 적용이 안된다. */
background-color: green;
font-size: 20pt;
color: red;
}
table, tr, td {
border: 1px solid gray;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
// 버튼을 클릭하면 메세지를 경고창에 띄우기
$("document").ready(function(){
$("#btn1").click(function(){
// 이미 같은 속성이 다른곳에 적용되어있는경우 적용이 안된다.
// 위치가 어디에있건..
// .selectClass 타입이 적용되려면 적용하려는 속성이 설정되지 않아야 한다.
$("tr:first").addClass("selectClass");
$("tr:eq(1)").addClass("selectClass");
//짝수 index
$("tr:even").css("background","pink");
//홀수 index
$("tr:odd").css("background","yellow");
});
$("#btn2").click(function(){
$("tr:first").removeClass("selectClass");
$("tr:eq(1)").removeClass("selectClass");
});
});
</script>
</head>
<body>
<table>
<tr><td>one</td></tr> <!-- 0 : first -->
<tr><td>two</td></tr> <!-- 1 -->
<tr><td>three</td></tr><!-- 2 -->
<tr><td>four</td></tr> <!-- 3 -->
<tr><td>five</td></tr> <!-- 4 : last-->
</table>
<button id="btn1">버튼</button>
<button id="btn2">제거</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.myClass {
width: 300px;
height: 200px;
color : white;
background-color: red;
}
img{
width:150px;
height:150px;
border: 2px solid yellow;
}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$("document").ready(function() {
$("#btn1").click(function() {
// box1의 css의 color속성을 red
// 배경 그린 너비 200px 높이 200px
// JSON(JavaScript Object Notation)
// 1.맵(Map) 방식
$("#box1").css(
{
//key : value
"color" : "red",
"background" : "green",
"width" : "200px",
"height" : "200px"
}
);
// 2. method chainning
/* $("#box1").css("color","red")
.css("background","pink")
.css("width","200px")
.css("height","200px"); */
// 두번째 버튼을 누르면 배경색을 무얼쓸지
// 물어보고 이 색을 box1의 배경색으로 사용
});
$("#btn2").click(function() {
// prompt로 입력을 받는다.
var usercolor = prompt("어떤색을쓸래? ","blue");
$("#box1").css("background",usercolor);
});
//3번 버튼을 누르면 box1의 너비를 구해서
// 경고창에 출력
$("#btn3").click(function(){
//$(this) : 현재 이벤트가 발생된
// Jquery객체를 가르킨다.
//
var w = $("#box1").css("width");
console.log(w);
alert("너비 : " + w);
// w = '200px' + 50
w = w.replace('px','');//px제거
w = parseInt(w) + 50;//정수변환+50
alert(w);
$("#box1").css("width",w +'px');
});
// 4번 버튼을 누르면 box1의 클래스를
// myClass로 추가시키고
$("#btn4").click(function(){
// 4번을 누르기전 box가 있으면 이미 css 속성값이 적용되어 있으면, 적용이 안된다.
$("#box1").addClass("myClass");
});
// 5번 버튼 누르면 removeClass
$("#btn5").click(function(){
$("#box1").removeClass("myClass");
});
/* $("#img1").mouseover(function(){
$(this).css("border","2px solid red");
});
$("#img1").mouseout(function(){
$(this).css("border","none");
});
*/
$("img").hover(
function(){ //올라가면
$(this).css("border","2px solid red");
},
function(){ //내려가면
$(this).css("border","2px solid yellow");
});
// $("img").hover(function(){"border","2px solid red"},function(){"border","2px solid yellow"});
//$('img').hover(올라갔을때함수,내려갔을때함수);
//$('img').hover(function(){} , function(){});
});
</script>
</head>
<body>
<input type="button" value="btn1" id="btn1" />
<input type="button" value="btn2" id="btn2" />
<input type="button" value="btn3" id="btn3" />
<input type="button" value="btn4" id="btn4" />
<input type="button" value="btn5" id="btn5" />
<div id="box1">box1</div>
<img src="images/em.jpg" id="img1" />
<img src="images/em.jpg" id="img2" />
</body>
</html>
- 자바 스크립트의 timer를 활용하여 기사 띄우기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var news = [
"1 박지성 김민지 결혼", //0
"2 미래의 선택 정용화", //1
"3 김미려 눈물", //2
"4 한국인 10명 연락두절",//3
"5 은혁 트위터 해킹" //4
];
var timer=null;
function startNews(){
// 1초마다 한번씩 showNews()를 실행
if(timer==null)
timer = setInterval(showNews,1000);
//<=2초후에 1회만 호출
//timer = setTimeout(showNews,2000);
}
function stopNews(){
// setInterval 효과를 제거
clearInterval(timer);
timer=null;
}
// 배열에 인덱스로 사용할 변수
var index=0;
function showNews(){
var div = document.getElementById("topnews");
div.innerHTML=news[index++];
if(index==news.length){
index=0;
}
}
</script>
</head>
<body>
<div id="topnews"></div>
<input type="button" value="뉴스보기"
onclick="startNews();"/>
<input type="button" value="뉴스중지"
onclick="stopNews();"/>
</body>
</html>
- jQuery를 활용해 효과주기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#box1 {
width: 100%;
height: 200px;
background-color: skyblue;
text-align: center;
font-size: 75px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input[value='숨기기']").click(function(){
$("#box1").hide(1000);
});
$("input[value='보이기']").click(function(){
$("#box1").show(1000);
});
$("input[value='번갈아수행']").click(function(){
// toggle 자체에 hide와 show가 들어가 있다.
$("#box1").toggle(1000);
});
$("input[value='위로숨기기']").click(function(){
$("#box1").slideUp(1000);
});
$("input[value='아래로보이기']").click(function(){
$("#box1").slideDown(1000,function(){
alert('아래로보이기 완료!!');
});
//$('#box1').slideDown(1000,function(){});
});
$("input[value='효과주기']").click(function(){
// toggle 자체에 slideUp과 slideDown가 들어가 있다.
$("#box1").slideToggle(1000,function(){
alert("작업완료");
});
});
$("input[value='FadeIn']").click(function(){
$("#box1").fadeIn(3000);
});
$("input[value='FadeOut']").click(function(){
$("#box1").fadeOut(3000);
});
});
</script>
</head>
<body>
<input type="button" value="숨기기" />
<input type="button" value="보이기" />
<input type="button" value="번갈아수행" />
<input type="button" value="위로숨기기" />
<input type="button" value="아래로보이기" />
<input type="button" value="효과주기" />
<input type="button" value="FadeIn" />
<input type="button" value="FadeOut" />
<div id="box1">
정환 보드게임즈
</div>
<div>안녕하세요 우린 보드게임 이미지 갤러리입니다.</div>
</body>
</html>
- 메뉴에 jQuery 적용하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
li.mainmenu{
float:left;
width: 300px;
list-style-type: none;
margin-left: 20px;
}
li.mainmenu ul{
margin: 0px;
list-style-type: none;
padding: 0px;
}
.mainmenu a{
background : #a50000;
width: 300px;
display: block;
color: white;
text-decoration: none;
padding: 10px;
border-bottom: 1px solid #ffffff;
}
ul#dropdownmenu li a:hover {
background-color: #aaaaaa;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li.mainmenu ul").hide(); //하위메뉴 숨기기
$("li.mainmenu").hover(function(){
// 자신의 자식요소중에 ul요소 화면에 보이기
$("ul",this).show(1);
//$("ul",this).slideDown(500);
//$("ul",this).fadeIn(1000);
}, function(){
$("ul",this).hide(1);
});
});
</script>
</head>
<body>
<ul id="dropdownmenu">
<li class="mainmenu">
<a href="#">도서</a>
<ul>
<li>
<a href="#">JAVA가 먼가요? 먹는건가요?</a>
</li>
<li>
<a href="#">배우면 돈이된는 자바</a>
</li>
<li>
<a href="#">손에 잡히는 자바</a>
</li>
</ul>
</li>
<li class="mainmenu">
<a href="#">화장품</a>
<ul>
<li><a href="#">SK-II</a></li>
<li><a href="#">아리따움</a></li>
<li><a href="#">설화수</a></li>
</ul>
</li>
</ul>
</body>
</html>
- 스크롤을 따라가는 이미지 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#contents{
width: 750px;
background-color: skyblue;
}
#quickmenu{
width: 200px;
height: 150px;
border: 1px solid red;
background-color: orange;
position: absolute;
right: 50px;
/* left:50px; */
top:30px;
}
#quickmenu ul li {
list-style-type: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// quickmenu의 top 이 얼마인지 알아오자
var top =
parseInt($("#quickmenu").css("top"));
console.log(top);
// 스크롤 되어질때 quickmenu의 속성값도 이동하게 설정
$(window).scroll(function(){
//스크롤된 크기
var scrollTop = $(window).scrollTop();
console.log("scrollTop :" + scrollTop);
var quickTop = top + scrollTop;
$("#quickmenu").animate(
{top:quickTop},1);
});
});
</script>
</head>
<body>
<div id="quickmenu" >
<ul>
<li><a href="#">최근본상품1</a>
<li><a href="#">최근본상품2</a>
<li><a href="#">최근본상품3</a>
<li><a href="#">최근본상품4</a>
<li><a href="#">최근본상품5</a>
</ul>
</div>
<div id="contents">
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
<p> '회사 전반적으로 연차를 쓰지 않는 분위기라서'를 꼽은 직장인(32.7%)이 가장 많았고, '상사·동료의 눈치가 보여서'(29.8%), '업무가 너무 많아서'(22.1%) 등의 답변이 뒤를 따랐다.</p>
</div>
</body>
</html>
반응형
'javaScript↗' 카테고리의 다른 글
| [오류해결]JavaScript 함수 실행 먹통될 때 (0) | 2024.06.23 |
|---|---|
| [오류주의]javaScript의 치명적인 오류 (함수에 괄호 누락 ()) (0) | 2024.06.14 |
| JavaScript Class(클래스) (0) | 2024.06.11 |
| JavaScript JSON(제이슨) (1) | 2024.06.11 |
| JavaScript 정리 (0) | 2024.06.10 |