1. 이미지 슬라이더
참고 사이트
1-1. 소스코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지를 슬라이드 해보자</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script type="text/javascript">
$(document).ready(function() {
$('.bxslider').bxSlider({
auto: true, // 자동 애니메이션 효과
speed: 500, // 애니메이션 속도(ms)
pause: 5000, // 해당 이미지 유지 시간
mode: 'horizontal', // 슬라이드 모드('fade', 'horizontal', 'vertical')
autoControls: true, // 시작 및 중지버튼 활성화
pager: true, // 페이지 표시
captions: true, // 이미지 위 텍스트 기재 여부
});
});
</script>
</head>
<body>
<div>
<ul class="bxslider">
<!-- 이후 jsp에 응용할 때 for문을 적용해보자 -->
<li><a href="#"><img width="1000px" height="281" src="https://sites.google.com/site/thisisjustatest2294/_/rsrc/1468742544208/project-resources/image-search/google-image-search/Screen%20Shot%202015-11-28%20at%201.14.27%20PM.png"></a></li>
<li><a href="#"><img width="1000px" height="281" src="https://media.corporate-ir.net/media_files/IROL/17/176060/Oct18/Amazon%20logo.PNG"></a></li>
<li><a href="#"><img width="1000px" height="281" src="https://1000logos.net/wp-content/uploads/2020/09/SpaceX-Logo.jpg"></a></li>
<li><a href="#"><img width="1000px" height="281" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/AMD_Logo.svg/1200px-AMD_Logo.svg.png"></a></li>
<li><a href="#"><img width="1000px" height="281" src="https://logos-download.com/wp-content/uploads/2016/10/Nvidia_logo.png"></a></li>
</ul>
</div>
</body>
</html>
1-2. 구현화면
2. 달력 UI
참고 사이트
2-1. 소스코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>달력을 구현해보자</title>
<!--
참고 사이트(https://offbyone.tistory.com/230)
-->
<!-- jQuery UI -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/datepicker-ko.js"></script>
<!-- datepicker를 이용한 날짜 적용 스크립트 -->
<script type="text/javascript">
$(function(){
$("#date").datepicker();
});
</script>
</head>
<body>
<input type="text" name="date" id="date" size="12"/>
</body>
</html>
2-2. datepicker-ko.js
/* Korean initialisation for the jQuery calendar extension. */
/* Written by DaeKwon Kang (ncrash.dk@gmail.com), Edited by Genie and Myeongjin Lee. */
( function( factory ) {
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
define( [ "../widgets/datepicker" ], factory );
} else {
// Browser globals
factory( jQuery.datepicker );
}
}( function( datepicker ) {
datepicker.regional.ko = {
closeText: "닫기",
prevText: "이전달",
nextText: "다음달",
currentText: "오늘",
monthNames: [ "1월","2월","3월","4월","5월","6월",
"7월","8월","9월","10월","11월","12월" ],
monthNamesShort: [ "1월","2월","3월","4월","5월","6월",
"7월","8월","9월","10월","11월","12월" ],
dayNames: [ "일요일","월요일","화요일","수요일","목요일","금요일","토요일" ],
dayNamesShort: [ "일","월","화","수","목","금","토" ],
dayNamesMin: [ "일","월","화","수","목","금","토" ],
weekHeader: "주",
dateFormat: "yy-mm-dd", // 날짜 포맷 변경
firstDay: 0,
isRTL: false,
showMonthAfterYear: true,
yearSuffix: "년" };
datepicker.setDefaults( datepicker.regional.ko );
return datepicker.regional.ko;
} ) );
2-3. 구현화면
최근댓글