고정 헤더 영역
상세 컨텐츠
본문
웹에서 css를 가져와서 쓰는 법
https://releases.jquery.com/ui/
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
Tab_button
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- 별도로 ~.css 파일을 생성하지 않고 웹에 생성된 파일을 불러와서 사용함 -->
<style>
</style>
</head>
<body>
<div id="tab_button">
<ul>
<li><a href="#tabs-1">웹이란?</a></li>
<li><a href="#tabs-2">웹브라우저</a></li>
<li><a href="#tabs-3">웹 호스팅</a></li>
</ul>
<div id="tabs-1">
<p>웹은 'World Wide Web'위 약어로써 간단하게 WWW로 표현
웹이란 인터넷에 연결된 컴퓨터를 통해서 전 세계 사람들이
정보를 제공하고 공유할 수 있는 사이버 공간을 의미한다.
</p>
</div>
<div id="tabs-2">
<p>웹 사이트에 구축된 웹 페이지, 즉 HTML 문서를 볼 수 있는
응용 프로그램을 의미한다. 인터넷 익스플러, 크롬, 사파리,
파이어폭스 등이 여기에 속한다.
</p>
</div>
<div id="tabs-3">
<p>인터넷 전문업체에서 자신이 보유한 웹 서버와 네트워크를
이용해서 개인이나 기관에게 홈페이지를 구축할 수 있도록
서버상에 사용자 계정과 디스크 공간을 입대해주는 서비스이다.
</p>
</div>
</div>
</body>
<script>
$("#tab_button").tabs();
//$("#tab_button").tabs({ event :"mouseover"}); 마우스 오버
</script>
</html>
Datepicker 데이트피커
입력창에 마우스를 클릭하면 날짜를 선택하게 해주는 위젯.
달력에서 연월일을 선택하면 선택된 날짜가 입력창에 텍스트로 표시되게 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- 별도로 ~.css 파일을 생성하지 않고 웹에 생성된 파일을 불러와서 사용함 -->
<style>
.container { width: 500px; padding: 20px; margin: auto; background: #eee;}
</style>
</head>
<body>
<div class="container">
<h2>데이트피커(Datepicker)</h2>
<form>
Date : <input id="datepicker"> <!--date 내장 메서드 사용-->
</form>
</div>
</body>
<script>
$("#datepicker").datepicker();
//$("#datepicker").datepicker({changeMonth:true, changeYear:true});
</script>
</html>
Interactive Menu 인터엑티브 메뉴
특정 항목을 선택하면 우측으로 서브 메뉴가 펼쳐지는 메뉴
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<style>
.ui-menu {width : 200px;}
</style>
</head>
<body>
<ul id="menu">
<li class="ui-state-disabled"> <div>웹 관련 용어</div></li><!--class="ui-state-disabled" :비활성화-->
<li><div>웹 기획</div></li>
<li>
<div>웹 디자인</div>
<ul>
<li><div>포토샵</div></li>
<li><div>일러스트레이터</div></li>
</ul>
</li>
<li>
<div>웹 프로그래밍</div>
<ul>
<li class="ui-state-disabled"><div>리액트</div></li>
<li><div>자바 스크립트</div></li>
<li>
<div>제이쿼리</div>
<ul>
<li><div>제이쿼리란?</div></li>
<li><div>제이쿼리 선택자(selector)</div></li>
<li><div>제이쿼리 위젯</div></li>
</ul>
</li>
<li><div>PHP</div></li>
</ul>
<li class="ui-state-disabled"><div>웹 퍼블리싱</div></li>
</ul>
</body>
<script>
$("#menu").menu();
</script>
</html>
MouseRight Menu
mouseR.js
0.00MB
mouseR.html
0.00MB
mouseR.css
0.00MB
.js 위치가 html 밑에 있어야 작동. 아니면 function() 으로 감싸줘야함.
