티스토리 뷰

프로그래밍/Javascript

[Javascript] jQuery Ajax 실습 자료

Univdev 2020. 5. 25. 00:40

코드

#header {
	background: #EEE;
	padding: 20px 0;
}

.canvas_place .canvas_place__option {
	padding: 10px 0;
	text-align: right;
	font-size: .9em;
}
.canvas_place canvas {
	margin: auto;
	display: block;
	border: 1px solid #CCC;
}
.canvas_place .canvas_place__btnhome {
	padding-top: 20px;
}
.canvas_place .canvas_place__btnhome .title {
	padding-bottom: 10px;
	font-weight: bold;
	font-size: 1.2em;
}

.comment_place {
	width: 100%;
}
.comment_place .comment_place__myzone {
	display: table;
	width: 100%;
}
.comment_place .comment_place__myzone > div {
	padding: 20px 0;
	display: table-cell;
	vertical-align: top;
}
.comment_place .comment_place__myzone .comment_wrap_input {
	width: 80%;
}
.comment_place .comment_place__myzone .comment_wrap_button {
	padding-left: 15px;
	width: 20%;
}
.comment_place .comment_place__myzone .comment_wrap_button button {
	height: 100%;
	width: 100%;
	height: 150px;
}
.comment_place textarea {
	border: 1px solid #CCC;
	width: 100%;
	height: 150px;
}
.comment_place .comments {
	font-size: .95em;
}
.comment_place .comments .comment__date__day::after {
	content: "|";
	display: inline-block;
	vertical-align: top;
	padding: 0 10px;
	color: #CCC;
}
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>20170921</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
	<link rel="stylesheet" href="assets/css/common.css">
</head>
<body>
	<header id="header">
		<div class="container">
			<h3>서버 접속자 통계 그래프</h3>	
		</div>
	</header>
	<div class="container">
		<div class="canvas_place">
			<div class="canvas_place__option">
				<span>* 다운로드하신 파일을 그래프로 드래그하시면 표 형태로 보실 수 있습니다.</span>
			</div>
			<canvas id="cvs" width="1100" height="400"></canvas>

			<div class="canvas_place__btnhome">
				<div class="title">다운로드</div>
				<a href="download/xml" class="btn btn-primary">XML</a>
				<a href="download/json" class="btn btn-primary">JSON</a>
				<a href="download/csv" class="btn btn-primary">CSV</a>
			</div>
		</div>

		<div class="comment_place">
			<form action="#" class="comment_place__myzone" id="commentForm">
				<div class="comment_wrap_input">
					<textarea name="comment"></textarea>
				</div>
				<div class="comment_wrap_button">
					<button class="btn btn-default">전송</button>
				</div>
			</form>

			<table class="table comments">
				<colgroup>
					<col width="80%">
					<col width="20%">
				</colgroup>
				<tbody>
					<tr>
						<td class="comment__content">Comment content</td>
						<td class="comment__date">
							<span class="comment__date__day">2017-09-21</span>
							<span class="comment__date__clock">19:03:00</span>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="assets/js/common.js"></script>
</body>
</html>
LIST
저작자표시

'프로그래밍 > Javascript' 카테고리의 다른 글

[Javascript] Canvas로 포토샵 같은 그림판 만들기  (2) 2020.05.24
[Javascript] 가벼운 저장소, LocalStorage  (0) 2019.04.10
[Javascript] atan2를 이용한 두 점 사이 각도 구하기  (0) 2019.04.10
[Javascript] PHP의 number_format을 구현하자  (0) 2019.04.10
[Javascript] 초성 검색 간략화  (1) 2019.04.10